jQuery 入门

一.jQuery概述
1.1 简介
jQuery是一个优秀的javascript的轻量级框架之一，封装了dom操作、事件、页面动画、异步操 作等功能。
特别值得一提的是基于jQuery的插件非常丰富，大多数2015年之前的前端业务场景都有其封装好的工具框架。

注意:如果公司使用的老版本插件，升级jQuery之后，可能会让插件失效

库名 说明
jQuery-x.js 开发版本:有良好的锁紧格式和注释，方便开发者阅读
jQuery-x.min.js 生产版本:代码进行压缩,体积小方便网络传输
1.2 自定义JS框架
框架(Framework)是完成某种功能的半成品，抽取重复繁琐代码，提高简介强大的方法实现。

感知jQuery的强大

1
2
3
4
5
// 抽取获取id的方法 function jQuery(id) {
return document.getElementById(id); }
// 简化名称方案 function $(id) {
return document.getElementById(id); }

1
2
3
4
5
6
7
8
9
10
11
12

AAAAAAAAAA

小结:jQuery本质上就是js的一个类库文件，使用它时，就能简化代码

二.jQuery基础语法
2.1 HTML引入jQuery
1
2
3
4
5
6
7
8
9
10
11
12

AAAAAAAAAA

2.2 jQuery与JS区别 jQuery虽然本质也是JS，但是如果使用jQuery的属性和方法那么必须包装对象是jQuery对象而不是js对象。 通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象，两者关系和区别如下:

jQuery与JS的相互转换
js—>jq
$(js对象)或者jQuery(js对象)
jq—>js
js对象[] 或者 jq对象.get(索引)
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

AAAAA

页面加载事件 js window.onload=function(){}

jq
$(function(){})

区别
js:只能定义因此，如果定义多次，后加载会进行覆盖
jq:可以定义多次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

三.jQuery选择器
3.1 基本选择器
标签(元素)选择器
语法:
$(“html标签名”) 根据标签匹配元素 格式 标签
id选择器
语法:
$(“#id的属性值”) 根据id值匹配元素 id属性是标签的唯一标志 #id
类选择器
语法:
$(“.class的属性值”) 根据class的值匹配元素 class属性是给标签归类添加样式 格式 .class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

古力娜扎 迪丽热巴 黑寡妇

钢铁侠
超人

3.2 层级关系选择器 后代选择器 语法: $(“A B”) 选择A元素内部的所有B元素 并集选择器 语法: $(“选择器1,选择器2….”) 获取多个选择器选中的所有元素 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

儿子：雍正

孙子：乾隆

牛顿

3.3 属性选择器
属性选择器
语法:$(“A[属性名=’值’]”) 包含指定属性等于指定值的选择器
复合属性选择器
语法:$(“A[属性名=’值’][]…”) 包含多个属性条件的选择器
1
2
3
4
5
6
7
8
9
10
11
12

3.4 过滤选择器 首元素选择器 语法: :first 获得选择的元素中的第一个元素 尾元素选择器 语法: :last 获得选择的元素中的最后一个元素 偶数选择器 语法: :even 偶数，从 0 开始计数 奇数选择器 语法: :odd 奇数，从 0 开始计数 指定索引选择器 语法: :eq(index) 指定索引元素 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

• 大娃（红娃）
• 二娃（橙娃）
• 三娃（黄娃）
• 四娃（绿娃）
• 五娃（青娃）
• 六娃（蓝娃）
• 七娃（紫娃）

3.5 对象遍历
语法
jq对象.each(function(index,element){
})

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

• 北京
• 上海
• 天津

四.jQuery的DOM操作 4.1 jQuery操作内容 text():获取/设置元素的标签体纯文本内容 相当于js: innerText属性 html():获取/设置元素的标签体超文本内容 相当于js: innerHTML属性 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

天王盖地虎

4.2 jQuery操作属性 val():获取/设置元素的value属性值 相当于:js对象.value attr():获取/设置元素的属性 removeAttr() 删除属性 相当于:js对象.setAttribute() / js对象.getAttribute() prop():获取/设置元素的属性 removeAttr() 删除属性 jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作 例如:checked selected等 做条件判断用prop，做属性封装做attr

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

姓名

爱好
<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">烫头<br/>
<input id="hobby_undefined" type="checkbox" name="hobby" value="perm" >烫头<br/>


<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>

4.3 jQuery操作样式 直接修改jq对象样式属性 语法: jq对象.css() css(样式名) 获取 css(样式名,样式值) 设置 优点:支持css语法 举例:font-size

添加/删除jq对象样式
语法:
jq对象.addClass()
jq对象.removeClass()

切换jq对象样式
语法:
jq对象.toggleClass() 无添加，有删除

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

六.综合案例 6.1 隔行换色 1 2 3 4 6.2 商品全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
6.3 QQ表情
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