一、jQuery

1. jQuery介绍

  • jQuery，也就是JavaScript和查询，它就是辅助JavaScript开发的js类库。
  • 它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
  • jQuery是免费开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。
  • jQuery对象默认命名以$符打头。使用jQuery之前需要引入jQuery库。

2. jQuery核心函数

  • $是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数。
  • 传入参数为函数时：表示页面加载完成之后。相当于window.onload = function(){}。
  • 传入参数为HTML字符串时：会对我们创建这个HTML标签对象。
  • 传入参数为选择器字符串时：
    • $(“#id属性值”)：id选择器，根据id查询标签对象。
    • $(“标签名”)：标签名选择器，根据指定的标签名查询标签对象。
    • $(“.class属性值”)：类型选择器，可以根据class属性查询标签对象。
  • 传入参数为DOM对象时：会把这个dom对象转换为jQuery对象。

3. jQuery对象和Dom对象区分

  • Dom对象：

    • 通过getElementById()查询出来的标签对象是Dom对象。
    • 通过getElementsByName()查询出来的标签对象是Dom对象。
    • 通过getElementsByTagName()查询出来的标签对象是Dom对象。
    • 通过createElement()方法创建的对象，是Dom对象。
    • DOM对象Alert出来的效果是：[object HTML 标签名 Element]。

  • jQuery对象：

    • 通过JQuery提供的API创建的对象，是JQuery对象。
    • 通过JQuery包装的Dom对象，也是JQuery对象。
    • 通过JQuery提供的API查询到的对象，是JQuery对象。
    • jQuery对象Alert出来的效果是：[object Object]。

  • jQuery对象的本质是dom对象的数组+jQuery提供的一系列功能函数。

  • jQuery对象和Dom对象使用区别：

    • jQuery对象不能使用DOM对象的属性和方法。
    • DOM对象也不能使用jQuery对象的属性和方法。

  • Dom对象和jQuery对象互转：

    • $(DOM对象)就可以转换成为jQuery对象。
    • jQuery对象[下标]取出相应的DOM对象。

4. jQuery选择器

4.1 基本选择器

  • #ID选择器：根据id查找标签对象。
  • .class选择器：根据class查找标签对象。
  • element选择器：根据标签名查找标签对象。
  • *选择器：表示任意的，所有的元素。
  • selector1，selector2组合选择器：合并选择器1，选择器2的结果并返回。
  • p.myClass：表示标签名必须是p标签，而且class类型还要是myClass。

4.2 层级选择器

  • $(ancestor descendant)：后代选择器，在给定的祖先元素下匹配所有的后代元素 。
  • $(parent > child)：子元素选择器，在给定的父元素下匹配所有的子元素。
  • $(prev + next)：相邻元素选择器，匹配所有紧接在prev元素后的next元素。
  • $(prev ~ sibings)：之后的兄弟元素选择器，匹配prev元素之后的所有sibling。

4.3 过滤选择器

4.3.1 基本过滤器

  • :firs：获取第一个元素。

  • :last：获取最后个元素。

  • :not(selector)：去除所有与给定选择器匹配的元素。

  • :even：匹配所有索引值为偶数的元素，从0开始计数。

  • :odd：匹配所有索引值为奇数的元素，从0开始计数。

  • :eq(index)：匹配一个给定索引值的元素。

  • :gt(index)：匹配所有大于给定索引值的元素。

  • :lt(index)：匹配所有小于给定索引值的元素。

  • :header：匹配如h1、h2、h3之类的标题元素。

  • :animated：匹配所有正在执行动画效果的元素。

4.3.2 内容过滤器

  • :contains(text)：匹配包含给定文本的元素。

  • :empty：匹配所有不包含子元素或者文本的空元素。

  • :parent：匹配含有子元素或者文本的元素。

  • :has(selector)：匹配含有选择器所匹配的元素的元素。

4.3.3 属性过滤器

  • [attribute]：匹配包含给定属性的元素。

  • [attribute=value]：匹配给定的属性是某个特定值的元素。

  • [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素。

  • [attribute^=value]：匹配给定的属性是以某些值开始的元素。

  • [attribute$=value]：匹配给定的属性是以某些值结尾的元素。

  • [attribute*=value]：匹配给定的属性是以包含某些值的元素。

  • [attrSel1][attrSel2][attrSelN]：复合属性选择器，需要同时满足多个条件时使用。

4.3.4 表单过滤器

  • :input：匹配所有input、textarea、select和button元素。

  • :text：匹配所有文本输入框

  • :password：匹配所有的密码输入框。

  • :radio：匹配所有的单选框。

  • :checkbox：匹配所有的复选框。

  • :submit：匹配所有提交按钮。

  • :image：匹配所有img标签。

  • :reset：匹配所有重置按钮。

  • :button：匹配所有input type=button按钮。

  • :file：匹配所有input type=file文件上传。

  • :hidden：匹配所有不可见元素display:none或input type=hidden。

4.3.5 表单对象属性过滤器

  • :enabled：匹配所有可用元素。

  • :disabled：匹配所有不可用元素。

  • :checked：匹配所有选中的单选，复选，和下拉列表中选中的option标签对象。

  • :selected：匹配所有选中的option。

5. jQuery元素筛选

  • eq()：获取给定索引的元素功能，跟:eq()一样。

  • first()：获取第一个元素功能，跟:first一样。

  • last()：获取最后一个元素功能，跟:last一样。

  • filter(exp)：留下匹配的元素。

  • is(exp)：判断是否匹配给定的选择器，只要有一个匹配就返回true。

  • has(exp)：返回包含有匹配选择器的元素的元素功能跟:has一样。

  • not(exp)：删除匹配选择器的元素功能跟:not一样。

  • children(exp)：返回匹配给定选择器的子元素功能跟parent>child一样。

  • find(exp)：返回匹配给定选择器的后代元素功能跟ancestor descendant一样。

  • next()：返回当前元素的下一个兄弟元素功能跟prev + next功能一样。

  • nextAll()：返回当前元素后面所有的兄弟元素功能跟prev ~ siblings功能一样。

  • nextUntil()：返回当前元素到指定匹配的元素为止的后面元素。

  • parent()：返回父元素。

  • prev(exp)：返回当前元素的上一个兄弟元素。

  • prevAll()：返回当前元素前面所有的兄弟元素。

  • prevUnit(exp)：返回当前元素到指定匹配的元素为止的前面元素。

  • siblings(exp)：返回所有兄弟元素。

  • add()：把add匹配的选择器的元素添加到当前jQuery对象。

6. jQuery属性操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title><script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            /*
            // 批量操作单选
            $(":radio").val(["radio2"]);
            // 批量操作筛选框的选中状态
            $(":checkbox").val(["checkbox3","checkbox2"]);
            // 批量操作多选的下拉框选中状态
            $("#multiple").val(["mul2","mul3","mul4"]);
            // 操作单选的下拉框选中状态
            $("#single").val(["sin2"]);
            */
            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
            );
        });
    </script>
</head>
<body>
<body>
单选：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多选 ：
<select id="multiple" multiple="multiple" size="4">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
</select>
<br/>
下拉单选 ：
<select id="single">
    <option value="sin1">sin1</option>
    <option value="sin2">sin2</option>
    <option value="sin3">sin3</option>
</select>
</body></body>
</html>

  • html()：它可以设置和获取起始标签和结束标签中的内容。 跟Dom属性 innerHTML一样。

  • text()：它可以设置和获取起始标签和结束标签中的文本。 跟Dom属性innerText一样。

  • val()：它可以设置和获取表单项的value属性值。 跟Dom属性value一样

  • attr()：可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled等等，attr方法还可以操作非标准的属性。比如自定义属性：abc、bbj。

  • prop()：可以设置和获取属性的值，只推荐操作checked、readOnly、selected、disabled等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
// 给全选绑定单击事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked",true);
            });
// 给全不选绑定单击事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked",false);
            });
// 反选单击事件
            $("#checkedRevBtn").click(function () {// 查询全部的球类的复选框
                $(":checkbox[name='items']").each(function () {
// 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
                    this.checked = !this.checked;
                });
// 要检查是否满选
// 获取全部的球类个数
                var allCount = $(":checkbox[name='items']").length;
// 再获取选中的球类个数
                var checkedCount = $(":checkbox[name='items']:checked").length;
// if (allCount == checkedCount) {
// $("#checkedAllBox").prop("checked",true);
// } else {
// $("#checkedAllBox").prop("checked",false);
// }
                $("#checkedAllBox").prop("checked",allCount == checkedCount);
            });
// 提交按钮单击事件
            $("#sendBtn").click(function () {
// 获取选中的球类的复选框
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                });
            });
// 给全选/全不选绑定单击事件
            $("#checkedAllBox").click(function () {
// 在事件的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
// alert(this.checked);
                $(":checkbox[name='items']").prop("checked",this.checked);
            });
// 给全部球类绑定单击事件
            $(":checkbox[name='items']").click(function () {
// 要检查 是否满选
// 获取全部的球类个数
                var allCount = $(":checkbox[name='items']").length;
// 再获取选中的球类个数
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked",allCount == checkedCount);
            });});
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全 选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反 选" />
    <input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>

7. Dom的增删改

  • 内部插入：

    • appendTo()：a.appendTo(b)，把a插入到b子元素末尾，成为最后一个子元素。
    • prependTo()：a.prependTo(b)，把a插到b所有子元素前面，成为第一个子元素。

  • 外部插入：

    • insertAfter()：a.insertAfter(b)，得到ba。
    • insertBefore()：a.insertBefore(b，得到ab。

  • 替换：

    • replaceWith()：a.replaceWith(b)，用b替换掉a。
    • replaceAll()：a.replaceAll(b)，用a替换掉所有b。

  • 删除：

    • remove()：a.remove()，删除a标签。
    • empty()：a.empty()，清空a。

8. CSS样式操作

  • addClass()：添加样式。

  • removeClass()：删除样式。

  • toggleClass()：有就删除，没有就添加样式。

  • offset()：获取和设置元素的坐标。

9. jQuery事件操作

  • $(function(){});和window.onload = function(){}的区别？

  • 他们分别是在什么时候触发？

    • jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
    • 原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM对象，还要等标签显示时需要的内容加载完成。

  • 他们触发的顺序？

    • jQuery页面加载完成之后先执行。
    • 原生js的页面加载完成之后。

  • 他们执行的次数？

    • 原生js的页面加载完成之后，只会执行最后一次的赋值函数。
    • jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行。

  • jQuery中其他的事件处理方法：

    • click()：它可以绑定单击事件，以及触发单击事件。
    • mouseover()：鼠标移入事件。
    • mouseout()：鼠标移出事件。
    • bind()：可以给元素一次性绑定一个或多个事件。
    • one()：使用上跟bind一样。但是one方法绑定的事件只会响应一次。
    • unbind()：跟bind方法相反的操作，解除事件的绑定。
    • live()：也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效。

  • 什么是事件的冒泡？

    • 事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。那么如何阻止事件冒泡呢？在子元素事件函数体内return false可以阻止事件的冒泡传递。

  • javaScript事件对象：

    • 事件对象，是封装有触发的事件信息的一个javascript对象。我们重点关心的是怎么拿到这个javascript的事件对象以及使用。
    • 如何获取呢javascript事件对象呢？在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名，我们习惯取名为event。这个event就是javascript传递参事件处理函数的事件对象。

  • 原生javascript获取事件。

1
2
3
4
5
window.onload = function () {
	document.getElementById("areaDiv").onclick = function (event) {
		console.log(event);
	}
}
  • jQuery代码获取事件。
1
2
3
4
5
$(function () {
	$("#areaDiv").click(function (event) {
		console.log(event);
	});
});
  • 使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
1
2
3
4
5
6
7
$("#areaDiv").bind("mouseover mouseout",function (event) {
	if (event.type == "mouseover") {
		console.log("鼠标移入");
	} else if (event.type == "mouseout") {
		console.log("鼠标移出");
	}
});