jQuery

发表于 | 分类于


jQuery 基础

jQuery 介绍

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。
    它的宗旨就是：“Write less, do more.“

jQuery 的优势

  1. jQuery 写起来极其简练，比JS使用起来方便顺手。
  2. jQuery 是轻量级的JS框架，jQuery 核心js文件才几十kb，不会影响页面加载速度。、
  3. jQuery 相当于Python 的第三方模块,第三方模块就是别人写好(封装)的一些代码，我们拿过来（按照别人定好的规则），原生的JS DOM操作是基础。
  4. 链式表达式，jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
  5. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
  6. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  7. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
  8. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery 内容

1
2
3
4
5
6
7
8
9
10
11
12
13
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax

官网:https://jquery.com/
中文文档:http://jquery.cuishifeng.cn/

jQuery 对象

  1. jQuery对象就是通过jQuery包装DOM对象后产生的对象。
  2. jQuery对象是 jQuery独有的。
  3. 如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。
  4. 声明一个jQuery对象变量的时候在变量名前面加上$
  5. 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
  6. 引入
1
2
// 先导入,再使用
<script src="jquery-3.2.1.min.js"></script>
1
2
3
// jQuery 和 DOM 找到d1的方法
document.getElementById("d1")   // DOM对象，找到一个具体的标签
$("#d1")                        // JQuery对象,找到一个对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//JQuery对象转换成DOM对象,用索引去除具体的标签
$("#i1").html()  // 的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。相当于
document.getElementById("i1").innerHTML;

// 当已经是一个 DOM对象的标签的时候 就可以调用DOM的方法了
$("#p3")[0].innerHTML

var $variable = jQuery对像
var variable = DOM对象
$variable[0]    //jQuery对象转成DOM对象

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

// 把DOM转换成JQuery对象
var pEle = document.getElementById("p1")
pEle = $(pEle)
$(pEle).html()

jQuery 基础语法

查找标签

基本选择器

id选择器 

1
$("#id")

class选择器 

1
$(".className")

标签选择器 

1
$("tagName")

配合使用 

1
$("div.c1")  // 找到有c1 class类的div标签

所有元素选择器 

1
$("*")

组合选择器 

1
2
3
// 逗号,分割条件
$("#id, .className, tagName")
$("a,.c2,.c1")  // ,代表或,找出a标签或class = c2,或class = c1的所有标签

层级选择器

1
2
3
4
$("x y");         // x的所有后代y（子子孙孙）
$("x > y");       // x的所有儿子y（儿子）
$("x + y");      // 找到所有紧挨在x后面的y
$("x ~ y");      // x之后所有的兄弟y
1
2
3
4
5
6
7
8
9
10
11
// 找到本页面中form标签中的所有input标签
$("form input")

// 找到本页面中被包裹在label标签内的input标签
$("label>input")

// 找到本页面中紧挨在label标签后面的input标签
$("label + input"); 

// 找到本页面中id为p2的标签后面所有和它同级的li标签
$("#p2~li")

基本筛选器：

1
2
3
4
5
6
7
8
9
:first           // 第一个
:last            // 最后一个
:eq(index)       // 索引等于index的那个元素
:even            // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd             // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)       // 匹配所有大于给定索引值的元素
:lt(index)       // 匹配所有小于给定索引值的元素
:not(元素选择器)  // 移除所有满足not条件的标签
:has(元素选择器)  // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
1
2
3
4
5
6
7
8
9
10
11
// 第一个li标签
$("li:first")

// 最后一个li标签
$("li:last")

// not移除不满足条件的: 有c2的样式不要
$("p:not(.c2)")

// 找到含有a标签的div
$("#d3 div:has(a)")
1
2
3
4
$("div:has(h1)");        // 找到所有后代中有h1标签的div标签
$("div:has(.c1)");       // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)");        // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))");    // 找到所有后代中不含a标签的li标签

属性选择器

1
2
3
[attribute]
[attribute=value]    // 属性等于
[attribute!=value]   // 属性不等于
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!--属性选择器-->
<form>
    <label>用户名:
        <input name="username" type="text" disabled="disabled"></label>

    <label>密码:
        <input name="pwd" type="password"></label>

    <label>篮球
        <input name="hobby" value="basketball" type="checkbox"></label>
    <label>足球
        <input name="hobby"  value=football type="checkbox"></label>

    <label>男
        <input name="gender" value="1" type="radio"></label>

    <label>女
        <input name="gender" value="0" type="radio"></label>
</form>
1
2
$("input[name='hobby']")
$("input[name='gender']")

表单筛选器

1
2
3
4
5
6
7
8
9
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
1
2
3
// 找到所有的text
$("input[type='text']")
$(":text")

表单对象属性 

1
2
3
4
:enabled
:disabled
:checked
:selected

1
2
$(":disabled")
$(":checked")

筛选器

下一个元素 

1
2
3
4
5
6
7
8
9
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")   // 
``` 
** 上一个元素 **
```javascript
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素 

1
2
3
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素 

1
2
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

1
2
3
4
5
6
7
$("#l3")
$("#l3").prev()
$("#l3").next()
$("#l3").prevAll()
$("#l3").nextAll()
$("#l0").nextUntil("#l3")
$("#l3").prevUntil("#l0")
1
2
3
4
5
6
7
8
9
10
链式操作:
$("a")
$("a").parent()
$("a").parent().parent()

$("a").parents()
$("a").parents("body")

$("#dd").children()
$("#p2").siblings()

查找标签 

1
2
3
// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
// 等价于$("div p")

1
2
var $c1Ele = $(".c1")  // 有现成变量
$c1Ele.find("div")
1
2
3
4
// 筛选
// 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
// 等价于 $("div.c1")
1
2
3
4
5
.first()    // 获取匹配的第一个元素
.last()     // 获取匹配的最后一个元素
.not()      // 从匹配元素的集合中删除与指定表达式匹配的元素
.has()      // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()       // 索引值等于指定值的元素
1
2
$("div").first()
$("div").last()

筛选器方法总结

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1 .next()            # 找到挨着的下一个同级标签
2 .nextAll(".c1")    # 下边同级的所有 有c1这个class的
3 .nextUntil()       # 往下找，直到找到终止条件为止

4 .prev()
5 .prevAll()
6 .prevUntil()

7 .siblings()       # 前后都能找到
8 .children()
9 .parent()
10 .parents()       # 一级一级的父标签，最后html
11 .parentsUntil()

12 .find(各种条件都可以写)

操作标签

样式操作

1
2
3
4
addClass();         // 添加指定的CSS类名。
removeClass();      // 移除指定的CSS类名。
hasClass();         // 判断样式存不存在
toggleClass();      // 切换CSS类名，如果有就移除，如果没有就添加。
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
<!-- 开关灯-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:200px;
            width: 200px;
            border-radius: 50%;
            background-color: red;
        }

        .c2{
            background-color: green;
        }

    </style>
</head>
<body>

<div class="c1"></div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 找标签
    $("div.c1").click(function () {
        console.log(this);                        // this 是DOM 对象
        $(this).toggleClass("c2")                 // 转换成jQuery对象,使用jQuery方法
    })
</script>
</body>
</html>
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
75
76
77
78
79
<!--自定义模态框-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover{
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.4);
            z-index: 998;
        }

        .modal{
            height: 400px;
            width: 600px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            /*宽度的一半*/
            margin-left: -300px;
            /*高度的一半*/
            margin-top: -200px;
            z-index: 1000;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>
<button id="b1">点我点我</button>
<div class="cover hide"></div>
<div class="modal hide">
    <form action="">
        <p>
            <label for="">用户名:
                <input type="text">
            </label>
        </p>

        <p>
            <label for="">密码:
                <input type="password">
            </label>
        </p>

        <p>
            <label for="">登录:
                <input type="submit">
                <input id="cancel" type="button" value="取消">
            </label>
        </p>
    </form>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 找到点击弹出模态框按钮
    $("#b1").click(function () {
        $(".cover").removeClass("hide");    // 显示背景
        $(".modal").removeClass("hide");    // 显示模态框
    })

    // 找到取消按钮,绑定事件
    $("#cancel").click(function () {
        // 给背景和模态框 都加上hide
        $(".cover").addClass("hide");    // 显示背景
        $(".modal").addClass("hide");    // 显示模态框
    })

</script>
</body>
</html>

直接修改样式

1
2
css("color","red") // DOM操作：tag.style.color="red"
原生DOM  .style.color = 'green'
1
$("div").css("color","greeen");
1
2
3
4
5
// 修改多个样式时，传入键值对
$(this).css({
    "color":"pink",
    "font-size":"24px"
})
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
<!--修改样式-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>AAA</p>
<p>BBB</p>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 把当前点击的标签 变绿
    // 在处理事件的函数中 用this 表示 当前触发事件的标签
    $("p").click( function () {
//        $(this).css("color","red")
//        $(this).css("font-size","24px")

        $(this).css({
            "color":"pink",
            "font-size":"24px"
        })
    })
</script>
</body>
</html>

位置操作

1
2
3
4
offset()        // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()      // 获取匹配元素相对父元素的偏移
scrollTop()     // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()    // 获取匹配元素相对滚动条左侧的偏移
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# 获取位置
$(".c1").offset()
{top: 0, left: 0}

# 设置位置
$(".c1").offset({top:"100",left:100})

$(".c3").offset()   #  对左上角定位
{top: 400, left: 300}
$(".c3").position()
{top: 100, left: 100}

# 尺寸
# 内容区 高和宽
height()
width()

# 内容区 + padding
innerHeight()
innerWidth()

# 内容区 + padding + border
outerHeight()
outerWidth()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 返回顶部 -->
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#b1").on("click", function () {
    $(".c1").offset({left: 200, top:200});
  });


  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").on("click", function () {
    $(window).scrollTop(0);
  })
</script>

文本操作

1
2
3
4
5
6
7
8
9
10
11
12
<!--HTML代码：-->
    html()// 取得第一个匹配元素的html内容
    html(val)// 设置所有匹配元素的html内容

<!--文本值：-->
    text()// 取得所有匹配元素的内容
    text(val)// 设置所有匹配元素的内容

<!--值：-->
    val()// 取得第一个匹配元素的当前值
    val(val)// 设置所有匹配元素的值
    val([val1, val2])// 设置多选的checkbox、多选select的值
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
$("#d1")[0].innerHTML
$("#d1").html()

$("#d1")[0].innerText
$("#d1").text()

# 都会修改整个标签,主要使用html修饰标签,可以支持html格式的字符串文本
$("#d1").text("呵呵")
$("#d1").html("<a href='www.baidu.com'>go</a>")

$(":text").val()
$(":password").val()


val() 永远只取第一个值，设置值的话就是全部设置

// 获取多个值 需要使用循环
var $checkedEles = $(":checkbox:checked");
for (var i=0;i<$checkedEles.length;i++){
    console.log($checkedEles[i])
    console.log($($checkedEles[i]).val())
}

// radio
$(":radio")
$(":radio:checked").val()

// select
$("#s1").val()
// 多选
$("#s2").val()
(2) ["021", "020"]

$("#s2").val(["021","020"]) //传值可以设置值
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!--文本操作-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
        /*.error:before{*/
            /*content: "*";*/
        /*}*/

    </style>
</head>
<body>

<div id="d1">
    <p>
        <span>span</span>
        <div>div</div>
    </p>
</div>

    <form action="" id="f1">
        <p>
            <label for="">用户名:
                <input class="need" name="username" type="text">
                <span class="error"></span>
            </label>
        </p>

        <p>
            <label for="">密码:
                <input class="need" name="password" type="password">
                <span class="error"></span>
            </label>
        </p>

        <p>爱好:
            <label for="">篮球:
                <input name="hobby" type="checkbox" value="basketball">
            </label>
            <label for="">足球:
                <input name="hobby" type="checkbox" value="football">
            </label>
            <label for="">双色球:
                <input name="hobby" type="checkbox" value="doubleball">
            </label>



        </p>

        <p>性别:
            <label for="">男:
                <input  name="gender" type="radio" value="1">
            </label>

            <label for="">女:
                <input  name="gender" type="radio" value="0">
            </label>
        </p>

        <p>
            <label for="s1">从哪来</label>
                <select name="from" id="s1">
                    <option value="010">北京</option>
                    <option value="021">上海</option>
                    <option value="020">广州</option>
                </select>
        </p>

        <p>
            <label for="s2">到哪去</label>
                <select name="from" id="s2" multiple>
                    <option value="010">北京</option>
                    <option value="021">上海</option>
                    <option value="020">广州</option>
                </select>
        </p>

        <p>
            <label for="t1">个人简介</label>
            <textarea name="memo" id="t1" cols="30" rows="10"></textarea>
        </p>

        <p>
            <label for="">登录:
                <input type="submit" id="b1">
                <input id="cancel" type="button" value="取消">
            </label>
        </p>
    </form>



<script src="jquery-3.2.1.min.js"></script>
<script>
    // 点击登录按钮 用户名和密码 是否为空
    // 为空就在对应input标签下面显示一个 错误信息

    // 1. 给登录按钮绑定点击事件
    // 2. 点击事件要做的事
        // 1. 找到input标签取值,判断是否为空（长度是否为0,length是否=0）
        // 2. 如果不为空，则什么都不做
        // 3. 如果为空，就要：
            // 1. 当前这个input标签的下面，添加一个新的标签，内容为 XX 不能为空
            // 2. class="need" 可以为空

    $("#b1").click(function () {
        var $needEles = $(".need");
        console.log($needEles);
        for (var i = 0;i < $needEles.length;i++){
            if ($($needEles[i]).val().trim().length === 0){
                var labelName = $($needEles[i]).parent().text().trim().slice(0,-1)
                $($needEles[i]).next().text(labelName + "不能为空")
            }
        }
        return false
    })

</script>

</body>
</html>

属性操作

1
2
3
4
5
6
用于ID等或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
1
2
3
4
5
.attr()   // $("a").attr("href")
             // $("a").attr("href","设置值")
             // $("a").attr({"href":"设置值"."title":"设置值"})

.prop()   // 适用于checkbox 和 radio(返回true或false属性)
1
2
3
4
5
6
7
8
9
10
11
12
$("img")
r.fn.init [img, prevObject: r.fn.init(1)]
$("img").attr("src")
"https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7b36b75d25f5e0feee188e07645b5395/a8014c086e061d9581528f7c73f40ad162d9ca5a.jpg"

$("img").attr("src","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562835484&di=8a585e9fe3abf1cf8a85aa910c74f975&imgtype=jpg&er=1&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180907%2F6efd963b18e5404dadb7b314576dc530.jpeg")
r.fn.init [img, prevObject: r.fn.init(1)]

$("img").attr({"src":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562835484&di=8a585e9fe3abf1cf8a85aa910c74f975&imgtype=jpg&er=1&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180907%2F6efd963b18e5404dadb7b314576dc530.jpeg","title":"jojo"})
r.fn.init [img, prevObject: r.fn.init(1)]

$("img").removeAttr("title")
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
<!--属性操作-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7b36b75d25f5e0feee188e07645b5395/a8014c086e061d9581528f7c73f40ad162d9ca5a.jpg" alt="">
<input type="button" id="b1" value="下一个">


<script src="jquery-3.2.1.min.js"></script>
<script>
    var oldUrl;
    var newUrl = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562835484&di=8a585e9fe3abf1cf8a85aa910c74f975&imgtype=jpg&er=1&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180907%2F6efd963b18e5404dadb7b314576dc530.jpeg"
    $("#b1").click(function () {
        var $imgEles = $("img")
        // 修改img标签的src属性
        oldUrl = $imgEles.attr("src")
        $imgEles.attr("src",newUrl)
        newUrl = oldUrl
    })

</script>
</body>
</html>

选择按钮操作

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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>职位</th>
        </tr>
    </thead>

    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>jojo</td>
        <td>黄金之风</td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>bobo</td>
        <td>钢链手指</td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>东方仗助</td>
        <td>疯狂钻石</td>
    </tr>

    </tbody>
</table>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="反选">
<input type="button" id="b3" value="取消">
<script src="jquery-3.2.1.min.js"></script>
<script>
    // 点击全选 表格中所有的checkbox都选中
    // 1. 找checkbox
    // 2. 全部选中 checked : ture
    $("#b1").click(function () {
        $(":checkbox").prop("checked",true)
    })


    // 点击取消
    // 点击全选 表格中所有的checkbox都选中
    // 1. 找checkbox
    // 2. 取消选中 checked : false
    $("#b3").click(function () {
        $(":checkbox").prop("checked",false)
    })


    // 反选
    // 1. 找到所有checkbox
    // 2. 判断 ：
    // 2.1 没有选中的要选中
    // 2.2 原来选中的要取消选中

    $("#b2").click(function () {
        // 把所有的checkbox 都存在$checkboxEles中
        var $checkboxEles = $(":checkbox");

        // 遍历所有的checkbox,根据每一个checkbox的选种状态做不通的操作
        for (var i=0;i<$checkboxEles.length;i++){
            // 把每一个checkbox包装成jQuery对象
            var $tmp = $($checkboxEles[i])
            // 如果 checkbox是选中的，我们就取消选中
            if ($tmp.prop("checked")){
                $tmp.prop("checked",false)
            }else {
                // 否则不选中
                $tmp.prop("checked",true)
            }
        }
    })



</script>
</body>
</html>

文档处理

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
var liEle = document.createElement("li")
var liEle = document.createElement("li")
liEle.innerText=0

liEle
<li>​0​</li>​

$("#u1").append(liEle)  // 在最后添加
r.fn.init [ul#u1]

$("#u1").prepend(liEle) // 同一个dom对象 liEle

var liEle = document.createElement("li")
liEle.innerText=4
4
$(liEle).appendTo("#u1")


$("#l1")
r.fn.init [li#l1]
var liEle = document.createElement("li")

liEle.innerText=1.5

$("#l1").after(liEle)
r.fn.init [li#l1]

移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

$("#u1")
$("#u1").remove()  // 直接把ul标签急内部子标签都删除
$("#u1").empty()   // 删除ul内部标签

增加表格记录

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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>替身</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>Leo</td>
        <td>黄金之风</td>
        <td><button class="delete">删除</button></td>
    </tr>

    <tr>
        <td>2</td>
        <td>Lex</td>
        <td>疯狂钻石</td>
        <td><button class="delete">删除</button></td>
    </tr>
    </tbody>
</table>


<button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>

<script>
    // 绑定事件
    // 生成添加的tr标签和数据
    // 把生成的tr插入到表格
    $("#b1").click(function () {
        var trEle = document.createElement("tr");
        $(trEle).html("<td>3</td><td>rubin</td>" +
            "<td>钢链手指</td><td><button class=\"delete\">删除</button></td>");
        $("#t1").find("tbody").append(trEle);
    })

    // 每一行的删除按钮绑定事件

    $(".delete").click(function () {
        $(this).parent().parent().remove()               // 找到他的tr .remove
    })

</script>
</body>
</html>

替换

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
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p><a href="www.baidu.com">aaa</a></p>
<p><a href="">bbb</a></p>

<button id="b1">替换</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#b1").click(function () {
        var imgEle = document.createElement("img")
        $(imgEle).attr("src","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562666099791&di=f40cd71f3f9b66125fb72217ac77e1b5&imgtype=0&src=http%3A%2F%2Fimg2.178.com%2Facg1%2F201204%2F128126936227%2F128127453027.jpg")
        $("a").replaceWith(imgEle)
        $(imgEle).replaceAll("a")   // 替换所有的a标签
    })



</script>
</body>
</html>

克隆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<button id="b1">克隆</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $("#b1").click(function () {
        $(this).clone(true).insertAfter(this)           // true 代表连标签的事件也一起clone
    })

</script>

</body>
</html>

事件

常用事件

1
2
3
4
5
6
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件绑定

1
2
3
4
.on( events [, selector ],function(){})
events： 事件
selector: 选择器（可选的）
function: 事件处理函数
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
        /*.error:before{*/
            /*content: "*";*/
        /*}*/

    </style>
</head>
<body>
    <form action="" id="f1">
        <p>
            <label for="">用户名:
                <input class="need" name="username" type="text">
                <span class="error"></span>
            </label>
        </p>

        <p>
            <label for="">密码:
                <input class="need" name="password" type="password">
                <span class="error"></span>
            </label>
        </p>

        <p>爱好:
            <label for="">篮球:
                <input name="hobby" type="checkbox" value="basketball">
            </label>
            <label for="">足球:
                <input name="hobby" type="checkbox" value="football">
            </label>
            <label for="">双色球:
                <input name="hobby" type="checkbox" value="doubleball">
            </label>



        </p>

        <p>性别:
            <label for="">男:
                <input  name="gender" type="radio" value="1">
            </label>

            <label for="">女:
                <input  name="gender" type="radio" value="0">
            </label>
        </p>

        <p>
            <label for="s1">从哪来</label>
                <select name="from" id="s1">
                    <option value="010">北京</option>
                    <option value="021">上海</option>
                    <option value="020">广州</option>
                </select>
        </p>

        <p>
            <label for="s2">到哪去</label>
                <select name="from" id="s2" multiple>
                    <option value="010">北京</option>
                    <option value="021">上海</option>
                    <option value="020">广州</option>
                </select>
        </p>

        <p>
            <label for="t1">个人简介</label>
            <textarea name="memo" id="t1" cols="30" rows="10"></textarea>
        </p>

        <p>
            <label for="">登录:
                <input type="submit" id="b1">
                <input id="cancel" type="button" value="取消">
            </label>
        </p>
    </form>



<script src="jquery-3.2.1.min.js"></script>
<script>
    // 点击登录按钮 用户名和密码 是否为空
    // 为空就在对应input标签下面显示一个 错误信息

    // 1. 给登录按钮绑定点击事件
    // 2. 点击事件要做的事
        // 1. 找到input标签取值,判断是否为空（长度是否为0,length是否=0）
        // 2. 如果不为空，则什么都不做
        // 3. 如果为空，就要：
            // 1. 当前这个input标签的下面，添加一个新的标签，内容为 XX 不能为空
            // 2. class="need" 可以为空

    $("#b1").click(function () {
        var $needEles = $(".need");
        // 定义一个标志位:
        var flag = true;

        console.log($needEles);
        for (var i = 0;i < $needEles.length;i++){
            // 如果有错误
            if ($($needEles[i]).val().trim().length === 0){
                var labelName = $($needEles[i]).parent().text().trim().slice(0,-1)
                $($needEles[i]).next().text(labelName + "不能为空")
                // 将标志位 变成false
                flag = false
                break;
            }
        }
        return false
    })

</script>

</body>
</html>
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
<!--使用on绑定事件-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1" id="t1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>替身</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>Leo</td>
        <td>黄金之风</td>
        <td><button class="delete">删除</button></td>
    </tr>

    <tr>
        <td>2</td>
        <td>Lex</td>
        <td>疯狂钻石</td>
        <td><button class="delete">删除</button></td>
    </tr>
    </tbody>
</table>


<button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>

<script>
    // 绑定事件
    // 生成添加的tr标签和数据
    // 把生成的tr插入到表格
    $("#b1").on("click",function () {
        var trEle = document.createElement("tr");
        $(trEle).html("<td>3</td><td>rubin</td>" +
            "<td>钢链手指</td><td><button class=\"delete\">删除</button></td>");
        $("#t1").find("tbody").append(trEle);
    })

    // 每一行的删除按钮绑定事件
    $("tbody").on("click",".delete",function () {
//        console.log(this)   <button class="delete">删除</button>
        $(this).parent().parent().remove()               // 找到他的tr .remove
    })

</script>

</body>
</html>

页面载入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        // 确保绑定事件的时候DOM树是生成好
        // 等DOM树生成之后，我再执行
        $(document).ready(function () {
            console.log($("#d1").text())
            // 执行绑定事件的操作
        })

    </script>
</head>
<body>


<div id="d1">div</div>

</body>
</html>