jQuery

• jQuery也就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库
• 它的核心思想时write less，do more（写的更少，做得更多），所以它实现了很多浏览器的兼容问题
• jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery
• jQuery是免费，开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象，选择DOM元素，制作动画效果，事件处理，使用Ajax以及其他功能

jQuery是封装了js的一个前端框架，可以写更少的代码，做更多的事情

jQuery中的$

jQuery中的$是一个函数

为按钮添加点击响应函数

1.使用jQuery查询到标签对象

2.使用标签对象.click(function(){});

$ 是jQuery的一个核心函数，通过$可以选择元素，还可以去定义函数等等

通过$来声明jQuery中的文本就绪函数:

$(function{

})

原生js的文本就绪函数

Window.onload = function(){

}

引入jQuery控件

通过相对路径引入jQuery控件

xxxxxxxxxx
2
1
<!--引入jQuery控件-->
2
<script src="../jQuery/jquery-1.7.2.js"></script>

xxxxxxxxxx
8
1
//jQuery中的文本就绪函数
2
$(function(){
3

4
    let elementById = document.getElementById("id");
5

6
    alert(elementById);
7

8
})

通过jQuery的方式来选择html对象

jQuery中的选择器：

最基本的几种选择器：id选择器、class选择器、标签选择器

xxxxxxxxxx
10
1
//通过jQuery中的id选择器来选择标签
2
let inputEl = $("#id")
3

4
//[object Object] 这种形式的对象是jQuery对象，不是dom对象
5
alert(inputEl);
6

7
//通过class选择器来选择标签对象
8
let classEl = $(".class");
9

10
alert(classEl);

通过jQuery选择器选择的对象是一个jQuery对象，并不是dom对象，但是在jQuery底层封装的是dom对象，jQuery对象的本质就是dom对象数组

xxxxxxxxxx
23
1
//通过jQuery动态绑定的方式来绑定单击事件
2
$(function (){
3

4
    let clickEl = $("#click");
5

6
    //绑定单击事件
7
    clickEl.click(function (){
8

9
        alert("通过jQuery的方式来注册单击事件")
10

11
    })
12

13
})
14

15
-------------------------------------------------------
16

17
let elementById = document.getElementById("click");
18

19
elementById.onclick = function (){
20

21
    alert("通过js的方式来注册单击事件")
22

23
}

jQuery针对dom对象的所有属性都封装了对应的方法，dom对象中 onclick属性，jQuery中就封装了click()

注：jQuery对象只能调用jQuery提供的方法，不能调用dom中的属性，dom对象只能调用属性，不能调用方法

jQuery核心函数（文本就绪函数）

• $是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用$这个函数
• 传入参数为 函数 时：表示页面加载完成之后，相当于 window.onload = function(){}
• 传入参数为 HTML字符串 时：会为我们创建这个html标签对象
• 传入参数为 DOM对象 时：会把这个dom对象转换为jQuery对象

xxxxxxxxxx
28
1
function test(){
2

3
    let input = $("<input type='button' value='123456'>");
4

5
    $("#body").append(input);
6

7
}
8

9
//定义一个文本就绪函数
10
$(function (){
11

12
    let jQueryObj = $(".text");
13

14
    //[object Object] jQuery对象
15
    alert(jQueryObj);
16

17
    let domObj = document.getElementById("text");
18

19
    //[object HTMLInputElement] dom对象
20
    alert(domObj);
21

22
    //将dom对象转成jQuery对象
23
     let jQueryObj02 = $(domObj);
24

25
     //[object Object] jQuery对象,获取jQuery对象的值
26
     alert(jQueryObj02.val());
27

28
})

jQuery对象和dom对象区分

Dom对象

• 通过getElementById()查询出来的标签对象是Dom对象
• 通过getElementsByName()查询出来的标签对象是Dom对象
• 通过getElementsByTagName()查询出来的标签对象是Dom对象
• 通过createElement()方法创建的对象，是Dom对象

jQuery对象

• 通过jQuery提供的API创建的对象，是jQuery对象
• 提供jQuery包装的Dom对象，也是jQuery对象
• 通过jQuery提供的API查询到的对象，是jQuery对象

jQuery对象的本质

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

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

遍历jQuery对象

xxxxxxxxxx
31
1
//通过属性过滤选择器选择所有被选中的多选框
2
    function test01(){
3

4
        let $hobby = $(".hobby:checked");
5

6
        //遍历被选中的多选框
7
        $hobby.each(function (){
8

9
            //dom对象直接通过value属性取值
10
            alert(this.value);
11

12
        })
13

14
        //遍历方法2,for循环遍历
15
        for (let i = 0; i < $hobby.length; i++) {
16

17
            //封装成jQuery对象后取值
18
            alert($($hobby[i]).val());
19

20
        }
21
        
22
        //组合选择器
23
        $("input,p.myClass").each(function (){
24

25
            alert(this)
26

27
        })
28
        
29
    }
30

31

Dom对象和jQuery对象互转

dom对象转化为jQuery对象

• 先有DOM对象
• $(DOM)就可以转化成jQuery对象

jQuery对象转换为dom对象

• 先有jQuery对象
• jQuery对象[下标]取出相应的DOM对象

jQuery选择器

基本选择器

• #ID 选择器：根据id查找标签对象
• .class 选择器：根据class查找标签对象
• element 选择器：根据标签名查找标签对象
• * 选择器：表示任意的，所有的元素
• selector1，selector2 组合选择器：将符合选择器1或2的结果返回 （或的关系）
• selector1selector2 组合选择器：将符合选择器1且选择器2的结果返回(且的关系)

Tips:jQuery的id选择器只支持，单词、阿拉伯数字、下划线、中划线，其中单词，包括英文字母、汉字，但是控件id属于客户不可见内容，实际中开发人员是不用汉字作为id的， 这里不考虑

层级选择器

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

过滤选择器

• :first 获取第一个元素
• :last 获取最后个元素
• :not(selector) 去除所有与给定选择器匹配的元素
• :even 匹配所有索引值为偶数的元素，从0开始计数
• :odd 匹配所有索引值为奇数的元素，从0开始计数
• :eq(index) 匹配一个给定索引值的元素
• :gt(index) 匹配所有大于给定索引值的元素
• :It(index) 匹配所有小于给定索引值的元素
• :header 匹配如 h1，h2，h3 之类的标题元素
• :animated 匹配所有正在执行动画效果的元素

内容过滤器

• :contains(text) 匹配包含给定文本的元素
• :empty 匹配所有不包含子元素或者文本的空元素
• :parent 匹配含有子元素或者文本的元素
• :has(selector) 匹配含有选择器所匹配的元素的元素

属性过滤器

• [attribute] 匹配包含给定属性的元素
• [attribute=value] 匹配给定的属性是某个特定值的元素
• [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
• [attribute^=value] 匹配给定的属性是以某些值开始的元素
• [attribute$=value] 匹配给定的属性是以某些值结尾的元素
• [attribute*=value] 匹配给定的属性是以包含某些值的元素
• [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用

xxxxxxxxxx
36
1
/*属性过滤选择器*/
2
$("[value]").each(function (){
3

4
    alert(this.value)
5

6
})
7

8
/*匹配具有value属性并且value值等于1的元素*/
9
$("[value=test1]").each(function (){
10

11
    alert(this.value)
12

13
})
14

15
/*过滤value属性值以t开头的元素*/
16
$("[value^=t]").each(function (){
17

18
    alert(this.value)
19
    
20
})
21

22

23
/*过滤value属性值包含es的元素*/
24
$("[value*=es]").each(function (){
25

26
    alert(this.value)
27

28
})
29

30
/*复合属性选择器，选择value包含es，并且value以1结尾的元素*/
31
$("[value*='es'][value$='1']").each(function (){
32

33
    alert(this.value)
34

35
})
36

表单过滤器

• :input 匹配所有 input，textarea，select，和 button 元素
• :text 匹配所有 文本输入框
• :password 匹配所有的密码输入框
• :radio 匹配所有的单选框
• :checkbox 匹配所有的复选框
• :submit 匹配所有提交按钮
• :image 匹配所有img标签
• :reset 匹配所有重置按钮
• :button 匹配所有 input type=button <button>按钮
• xxxxxxxxxx window.onload = function (){​    //返回一个dom对象    let elementBody = document.getElementById("body");​    //获取所有的子节点    let childNodes = elementBody.childNodes;​    for (let i = 0; i < childNodes.length; i++) {​        alert(childNodes[i]);​   }​    let firstChild = elementBody.firstChild;​    //文本对象    alert(firstChild);​    let lastChild = elementBody.lastChild;​    alert(lastChild);​    let elementButton = document.getElementById("test1");​    let parentNode = elementButton.parentNode;​    }javascript
• :hidden 匹配所有不可见元素 display:none 或 input

表单对象属性管理器

• :enabled 匹配所有可用元素
• :disabled 匹配所有不可用元素
• :checked 匹配所有选中的单选，复选，和下拉列表中选中的option标签对象
• :selected 匹配所有选中的 option

jQuery元素筛选

• eq() 获取给定索引的元素 功能跟 :eq() 一样
• first() 获取第一个元素 功能
• last() 获取最后一个元素 功能跟 :last一样
• filter(exp) 留下匹配的元素
• is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
• has(exp) 返回包含有匹配选择器的元素的元素
• not(exp) 删除匹配选择器的元素
• children(exp) 返回匹配给定选择器的子元素功能
• find(exp) 返回匹配给定选择器的后代元素

jQuery的属性操作

• html() 它可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样。
• text() 它可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样。
• val() 它可以设置和获取表单项的value属性值，跟dom属性value一样
• attr() 可以设置和获取属性的值
• prop() 可以设置和获取属性的值

遍历jQuery对象

xxxxxxxxxx
29
1
let hobbyEls = $(".hobby");
2

3
alert(hobbyEls)
4

5
for (let i = 0; i < hobbyEls.length; i++) {
6

7
    //[object HTMLInputElement]
8
    alert(hobbyEls[i]);
9

10
}
11

12
//jQuery中的遍历方法
13
        hobbyEls.each(function (){
14

15
            //this 是遍历时获取到的dom对象
16
            //[object HTMLInputElement]
17
            alert(this.value + " dom");
18
            
19
            alert($(this).val() + " jQuery");
20

21
        })
22

23
 //标签选择器
24
        $("input").each(function (){
25

26
            alert(this);
27

28
        })
29

属性过滤选择器

xxxxxxxxxx
23
1
//通过属性过滤选择器选择所有被选中的多选框
2
function test01(){
3

4
    let $hobby = $(".hobby:checked");
5

6
    //遍历被选中的多选框
7
    $hobby.each(function (){
8

9
        alert(this.value);
10

11
    })
12

13

14
}
15

16

17
//通过属性值过滤标签
18
$("[name = 'hobby']").each(function (){
19

20

21
            alert(this)
22

23
        })

jQuery的属性操作

• html() 它可以设置和获取起始标签和结束标签中的内容，跟dom属性innerHTML一样
• text() 它可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样
• val() 它可以设置和获取表单项的value属性值，跟dom属性value一样
• attr() 可以设置和获取属性的值
• prop() 可以设置和获取属性的值

动态注册方法

xxxxxxxxxx
43
1
 //文本就绪函数
2
    $(function (){
3

4
        //全选
5
        $("[value = '全选']").click(function (){
6

7
            //遍历所有的多选框
8
            $(".hobby").each(function (){
9

10
                //将标签的checked设置为true
11
                $(this).prop("checked",true)
12

13
            })
14

15
        })
16

17
        //全不选
18
        $("[value = '全不选']").click(function (){
19

20
            //遍历所有的多选框
21
            $(".hobby").each(function (){
22

23
                //将标签的checked设置为false
24
                $(this).prop("checked",false)
25

26
            })
27

28
        })
29

30
        //反选
31
        $("[value = '反选']").click(function (){
32

33
            //遍历所有的多选框
34
            $(".hobby").each(function (){
35

36
                //将标签的checked设置为取非
37
                $(this).prop("checked",!this.checked)
38

39
            })
40

41
        })
42

43
    })

通过jQuery和js原生两种方法实现用户注册规范提示

xxxxxxxxxx
69
1
$(function (){
2

3
    let u = new RegExp("^[A-z][A-z0-9-_]{3,16}$");
4

5
    let ps = new RegExp("[A-z0-9-_+*?!]{3,16}$");
6

7

8
    /*jQuery*/
9
    let usernameEl = $("#username");
10

11
    usernameEl.blur(function (){
12

13
        let username = $("#username").val();
14

15
        if (u.test(username)){
16

17
            $("#usernameSpan").text("用户名合法");
18

19
            $("#usernameSpan").prop("style","color:green");
20

21

22
        }else {
23

24
            $("#usernameSpan").text("用户名不合法");
25

26
            $("#usernameSpan").prop("style","color:red");
27

28
        }
29

30
        if (username.length == 0){
31

32
            $("#usernameSpan").text("");
33

34
        }
35

36
    })
37

38
    /*js原生*/
39
    let passwordEl = document.getElementById("password");
40

41
    passwordEl.onblur = function (){
42

43
        let password = passwordEl.value;
44

45
        let passwordSpan = document.getElementById("passwordSpan");
46

47
        if (ps.test(password)){
48

49
            passwordSpan.innerText = "密码合法";
50

51
            passwordSpan.style = "color:green";
52

53
        }else {
54

55
            passwordSpan.innerText = "密码不合法";
56

57
            passwordSpan.style = "color:red";
58

59
        }
60

61
        if (password.length == 0){
62

63
            passwordSpan.innerText = "";
64

65
        }
66

67
    }
68

69
})

DOM的增删改

内部插入:

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

xxxxxxxxxx
2
1
$("body").append("<input type='button' value='123456'>")
2
$("<input type='button' value='123456'>").appendTo($("span"));

外部插入:

• insertAfter() a.insertAfter(b)
• insertBefore() a.insertBefore(b)

替换:

replaceWith() a.replaceWith(b) 用b替换掉a

replaceAl() a.replaceAll(b) 用a替换掉所有b

删除：

remove() a.remove(); 删除a标签

empty() a.empty(); 清空a标签里的内容

xxxxxxxxxx
2
1
$("a").remove();
2
$("a").empty();