[toc]

前端–jQuery常用方法

1. 表单元素设置和读取属性的方法

  1. checked,selected,disabled 要用prop函数来读取和设置值，千万不要用attr。
  2. attr能做的事情，prop都可以做。以后开发的时候，设置和获取属性值，用prop函数。
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>表单元素设置和读取属性的方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, li {
            list-style: none;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            // $("#btn").click(function(){
            //     // console.log($(this).attr("text"));
            //     // $(this).attr("text","text");
            //
            //     // console.log($("input").attr("checked"));
            //
            //     // $("input").removeAttr("checked");
            //     // $("input").attr("checked","checked");
            //
            //     // var attr=$("input").attr("checked");
            //     // if(attr!=undefined){
            //     //     console.log("选中");
            //     // }else{
            //     //     console.log("未选中");//手动选中不打印？？
            //     // }
            //
            //     // console.log($("input").prop("checked"));
            //     // $("input").prop("checked",true);
            // })
            /***
             * 
             */

            $("button:eq(0)").click(function () {
                var prop = $("input").prop("checked");
                console.log( "获取checkbox是否被选中："+ prop);
            });
            
            $("button:eq(1)").click(function () {
                $("input").prop("checked", true);
            });
            
            $("button:eq(2)").click(function () {
                $("input").prop("checked", false);
            });
            
            $("button:eq(3)").click(function () {
                var prop = $("div").prop("title");
                console.log("div的title：" + prop);
            });
        });
    </script>
</head>
<body>
<!--<button id="btn" text="btn">按钮</button>-->
<button text="btn">获得checkbox的值</button>
<br>
<br>
<button text="btn">选中</button>
<button text="btn">不选中</button>
<input type="checkbox">
<br>
<br>
<button text="btn">获取div的属性值</button>
<div title="我是一个div">
</div>
</body>
</html>

2. 设置和读取表单的value值

获取文本值，会存在如下结果：

  • 如果是使用attr("value")获取值，拿到是value属性中的值，当我修改了文本框之后，获取到值不变。
  • 如果是使用的prop(“value”)获取值，拿到是value属性中的值，但修改了文本框内容后，获取到的值是改变的。
  • 如果是使用的val()获取值，拿到是value属性中的值，但修改了文本框内容后，获取到的值是改变的。(推荐使用val())
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>设置和读取表单的value值</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                var prop = $("input").attr("value");
                console.log(prop);
                
                var prop = $("input").prop("value");
                console.log(prop);
                
                console.log($("input").val());
            })
        });
    </script>
</head>
<body>
<button id="btn">按钮</button>
<input type="text" value="hello justweb">
</body>
</html>

3. jq中的索引值index()方法

$(this).index(); 此处的index()方法返回指定元素相对于其他指定元素的 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jq中的索引值index()方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
            cursor: pointer;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("ul>li,span").click(function () {
                console.log($(this).index());
            })
        });

    </script>
</head>
<body>
<ul>
    <span>0</span>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
</ul>
</body>
</html>

jq中的索引值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
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jq中的索引值index（）方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
            cursor:pointer;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("ul>li>a,div").click(function(){
                console.log($(this).parent().index());
            })
        });

    </script>
</head>
<body>
<ul>
    <li><a href="##">点击跳转01</a></li>
    <li><a href="##">点击跳转02</a></li>
    <li><a href="##">点击跳转03</a></li>
    <li><a href="##">点击跳转04</a></li>
    <li><a href="##">点击跳转05</a></li>
    <div>0</div>
</ul>
</body>
</html>

4. jq创建元素的三种方式

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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jq创建元素的三种方式</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            var num = 0;
            // 第一种方式：通过html（） 将标签写入到目标中，但是这种方式会存在一个问题：
            // 每次写入都会先清空目标对象中标签，然后在写入新的标签。
            $(".btn:eq(0)").click(function () {
                var str = '<li class="one"><a href="">' + num++ + '</a></li>';
                var htmlStr = "";
                htmlStr = $("#list").html() + str;
                $("#list").html(htmlStr)
            });

            // 第二种方式
            $(".btn:eq(1)").click(function () {
                //将其转为jq
                var li = $('<li class="one"><a href="">' + (num++) + '</a></li>');
                $("#list").append(li);
            });

            // 第三种方式
            //  jq底层将字符串转成元素。然后追加到目标对象中。
            $(".btn:eq(2)").click(function () {
                var li = '<li class="one"><a href="">' + (num++) + '</a></li>';
                $("#list").append(li);
            })

            // 然而用js写的话
            // <li class="one"><a href=""></a></li>
            // $(".btn:eq(0)").click(function () {
            //     var ul1 = document.getElementById("#list");
            //     var li = document.createElement("li");
            //     li.setAttribute("class", "one");
            //     var a = document.createElement("a");
            //     a.innerText = num++;
            //     li.appendChild(a);
            //     ul1.appendChild(li);
            // })
        });

    </script>
</head>
<body>
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<ul id="list">

</ul>
</body>
</html>

5. 常见的追加元素的方法

记住最前面的4个，后面4个不要记。

  1. 父子关系
    • A.append(B) 在A标签中最后添加B标签
    • A.prepend(B) 在A标签中最前面添加B标签。
  2. 兄弟关系
  • A.after(B) 在A标签后面添加B标签
  • A.before(B) 在A标签前面添加B标签
  1. 父子关系
    • A.appendTo(B) 将A标签添加到B标签中的最后面
    • A.prependTo(B) 将A标签添加到B标签中的最前面
  2. 兄弟关系
    • A.insertAfter(B) 将A标签添加到B标签的最后面
    • A.insertBefore(B)将A标签添加到B标签的最前面
  3. A.empty(); 清空A元素的文本的内容
  4. A.remove(); 删除A元素。
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>常见的追 加元素的方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            var num = 0;
            $("button:eq(0)").click(function () {
                $("ul").append("<li>新元素</li>");
            });
            $("button:eq(1)").click(function () {
                $("ul").prepend("<li>新元素</li>")
            });
            $("button:eq(2)").click(function () {
                $("<li>新元素</li>").appendTo("ul");
            });
            $("button:eq(3)").click(function () {
                $("<li>新元素</li>").prependTo("ul");
            });
            $("button:eq(4)").click(function () {
                $("ul>li:eq(0)").after("<li>新元素" + (num++) + "</li>");
            });
            $("button:eq(5)").click(function () {
                $("ul>li:eq(3)").before("<li>新元素" + (num++) + "</li>");
            });
            $("button:eq(6)").click(function () {
                $("<li>新元素" + (num++) + "</li>").insertAfter("ul>li:eq(2)");
            })
            $("button:eq(7)").click(function () {
                $("<li>新元素" + (num++) + "</li>").insertBefore("ul>li:eq(2)");
            })
            $("button:eq(8)").click(function () {
                $("ul>li:first").remove();
            });
            $("button:eq(9)").click(function () {
                $("ul>li:last").empty();
            });
        });

    </script>
</head>
<body>
<button>append</button>
<button>prepend</button>
<button>appendTo</button>
<button>prependTo</button>
<br>
<br>

<button>after</button>
<button>before</button>
<button>insertAfter</button>
<button>insertBefore</button>
<br>
<br>
<button>remove</button>
<button>empty</button>
<ul>
    ul0
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    ul1
</ul>
</body>
</html>

6. jq中循环each()方法

each 循环函数

  • 目标.each(function(index,e){ })，循环目标中的每一个元素，循环的次数根据目标的个数决定。
  • 参数：
    • index: 相当于索引，或者说是for循环中的i
    • e: 是每个元素的js对象，相当于this。
  • $(this).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
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jq中循环each()方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>

        $(function () {
            //.length 获取jq对象的长度。
            console.log("li标签的个数："+ $("ul>li").length);
            console.log("传统方式遍历li：");
            for (var i = 0; i < $("ul>li").length; i++) {
                var li = $("ul>li").eq(i);
                console.log(li.text());
            }
            console.log("each()遍历li:");
            // 此处的index索引，是元素真实的索引号，
            // 不是元素在父标签中的位置了。
            // ele 是 遍历的每一个元素。相当于this
            $("ul>li").each(function (index, ele) {
                console.log(ele);
                console.log(index);  //从0开始
                console.log($(this).index());//从1开始 因为有span标签
                console.log($(ele).text());  //从1开始
                console.log("--------------------------------");
            })


        });
    </script>
</head>
<body>
<ul>
    <span>span</span>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
</html>

7. jq的事件委派机制on()方法

事件委托的方式绑定事件

  • 通过目标事件捕获到后代元素，在从后代元素冒泡到目标触发事件。$(this)指的还是事件的目标。

事件绑定三个参数：

  1. 绑定的事件类型
  2. 给哪些元素绑定事件
  3. 事件触发后执行的回调函数。

常用绑定事件：

  1. on();绑定事件。
  2. off(); 让on绑定的事件失效。
  3. bind(); 绑定事件
  4. unbind();解绑事件。
  5. one();事件触发一次之后就失效了。
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>jq的事件委派机制on()方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
             //普通绑定，此种绑定，不支持动态添加数据。
            // $("ul>li>a").click(function(){
            //     console.log($(this).text());
            // })
 
            $("ul").on("click","li a",function(){
                console.log($(this).text());
            });
            $("button").click(function(){
                $("ul").append('<li><a href="##">1</a></li>');
                // $("ul").off();
            })

        });
    </script>
</head>
<body>
<button>添加一个元素</button>
<ul>
    <li><a href="##">1</a></li>
    <li><a href="##">2</a></li>
    <li><a href="##">3</a></li>
    <li><a href="##">4</a></li>
    <li><a href="##">5</a></li>
</ul>
</body>
</html>

☆