jQuery

如何使用jQuery

使用jQuery只需要在页面的<head>引入jQuery文件即可：

1 <html>
2 <head>
3     <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
4     ...
5 </head>
6 <body>
7     ...
8 </body>
9 </html>

$符号

$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名

选择器

按id查找

1 // 查找<div id="abc">:
2 var div = $('#abc');

注意：#abc以#开头，返回的对象为jQuery对象，如果id为abc的div不存在，返回[]

jQuery对象与DOM对象的相互转化

1 var div = $('#abc'); // jQuery对象
2 var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
3 var another = $(divDom); // 重新把DOM包装为jQuery对象

按tag查找

按tag查找只需要写上tag的名称就行。

1 var ps = $('p'); // 返回所有<p>节点
2 ps.length; // 数一数页面有多少个<p>节点

按class查找

按class查找需要在class名称前加上一个.

1 var a = $('.red'); // 所有节点包含`class="red"`都将返回
2 // 例如:
3 // <div class="red">...</div>
4 // <p class="green red">...</p>

通常很多节点有多个class，我们可以查找同时包含red和green的节点

1 var a = $('.red.green'); // 注意没有空格！
2 // 符合条件的节点：
3 // <div class="red green">...</div>
4 // <div class="blue green red">...</div>

按属性查找

比如在一个表单中按属性查找

1 var email = $('[name=email]'); // 找出<??? name="email">
2 var passwordInput = $('[type=password]'); // 找出<??? type="password">
3 var a = $('[items="A B"]'); // 找出<??? items="A B">

组合查找

组合查找就是把上述的简单选择器组合起来使用。

1 var emailInput = $('input[name=email]'); // 不会找出<div name="email">

同样的，根据tag和class来组合查找也很常见：

1 var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>

层级查找

在给定的祖先元素下匹配所有的后代元素

1 $('#i10 a') 子子孙孙
2 $('#i10>a') 儿子

筛选

 1 <div>
 2     <a>asdf</a>
 3     <a>asdf</a>
 4     <a id='i1'>asdf</a>
 5     <a>asdf</a>
 6     <a id='ii1'>asdf</a>
 7     <a>asdf</a>
 8 </div>
 9 
10 $('#i1').next()     当前元素的下一个兄弟标签
11 $('#i1').nextAll()  当前元素的下面所有兄弟标签
12 $('#i1').nextUntil('#ii1')  当前元素的下面到id=ii1之前的所有标签
13 
14 $('#i1').prev()     当前元素的上一个兄弟标签
15 $('#i1').prevAll()  当前元素的上面所有兄弟标签
16 $('#i1').prevUntil('#ii1')  当前元素的上面到id=ii1之前的所有标签
17 
18 $('#i1').parent()   当前元素的父标签
19 $('#i1').parents()  当前元素的所有父辈标表
20 $('#i1').parentsUntil()  当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
21 
22 $('#i1').children()  当前元素的所有子标签
23 $('#i1').siblings()   当前元素的所有兄弟标签    
24 $('#i1').find()        在当前元素的所有的子标签中寻找特定的标签
25 $('li:eq(1)')           在当前元素中的第一个子标签
26 $('li').eq(1)           同上
27 first()                  获取第一个元素
28 last()                   获取最后一个元素
29 hasClass(class)      判断该元素是否某个class样式

文本操作

$(..).text()           # 取得所有匹配元素的内容。
$(..).text(“<a>1</a>”) # 设置所有匹配元素的内容。
                
$(..).html()          #取得第一个匹配元素的html内容
$(..).html("<a>1</a>") #用于设定HTML内容的值(如果内容为HTML代码则在当前元素下增加一个子标签)
                
$(..).val()             #获得匹配元素的当前值(所有具有value属性的标签)。
$(..).val(..)           #设置匹配元素的当前值(所有具有value属性的标签)。

样式操作

addclass 为当前元素增加一个类

removeclass 为当前元素删除一个类

toggleclass 当前元素的某个类如果存在（不存在）就删除（添加）。

属性操作

专门用于做自定义属性

$(..).attr("n") 获取n属性的值

$(..).attr("n","v") 设置n属性的值，如果存在则覆盖

$(..).removeattr("n") 移除n属性

专门用于chekbox，radio

$(..).prop("checked") 获取是否被选定，选定返回true，否则返回false

$(..).prop("checked"，true) 设置选定

文档处理

append 向每个匹配的元素内部追加内容。

prepend 向每个匹配的元素内部前置内容。

after 在每个匹配的元素之后插入内容

before 在每个匹配的元素之前插入内容。

 1 HTML代码
 2 <p>I would like to say: </p>
 3 
 4 jQuery代码
 5 $("p").append("<b>Hello</b>");
 6 $("p").prepend("<b>Hello</b>");
 7 $("p").after("<b>Hello</b>");
 8 $("p").before("<b>Hello</b>");
 9 
10 结果
11 append：[ <p>I would like to say: <b>Hello</b></p> ]
12 prepend：[ <p><b>Hello</b>I would like to say: </p> ]
13 after：<p>I would like to say: </p><b id="foo">Hello</b>
14 before：[ <b>Hello</b><p>I would like to say: </p> ]

css处理

$("t1").css("样式名称","样式值")

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .container{
 8             padding: 50px;
 9             border: 1px solid #dddddd;
10         }
11         .item{
12             position: relative;
13              30px;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="container">
19             <div class="item">
20                 <span>赞</span>
21             </div>
22         </div>
23         <div class="container">
24             <div class="item">
25                 <span>赞</span>
26             </div>
27         </div>
28         <div class="container">
29             <div class="item">
30                 <span>赞</span>
31             </div>
32         </div>
33         <div class="container">
34             <div class="item">
35                 <span>赞</span>
36             </div>
37         </div>
38 </body>
39 <script src="jquery-3.3.1.js"></script>
40 <script>
41 
42     $(".item").click(function () {
43         append_span(this)
44     });
45     function append_span(self) {
46         var fontsize=15;
47         var top=0;
48         var right=0;
49         var opacity = 1;
50         var tag=document.createElement("span");
51         $(tag).text("+1");
52         $(tag).css("position",'absolute');
53         $(tag).css("color","green");
54         $(tag).css("fontSize",fontsize+"px");
55         $(tag).css("top",top+"px");
56         $(tag).css("right",right+"px");
57         $(tag).css("opacity",opacity);
58         $(self).append(tag);
59 
60         var obj=setInterval(function () {
61             fontsize=fontsize+10;
62             top=top-10;
63             right=right-10;
64             opacity = opacity-0.1;
65             $(tag).css("fontSize",fontsize+"px");
66             $(tag).css("top",top+"px");
67             $(tag).css("right",right+"px");
68             $(tag).css("opacity",opacity);
69             if (opacity<0){
70                 console.log(1111);
71                 clearInterval(obj);
72                 $(tag).remove()
73             }
74         },40)
75     }
76 </script>

点赞实例

位置

$(window).scrollTop() 获取窗口滚轮的位置
$(window).scrollTop(0) 设置窗口滚轮的位置

offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标

$('i1').height()           # 获取标签的高度纯高度
$('i1').innerHeight()      # 内边距 + 纯高度
$('i1').outerHeight()      # 边框 + 纯高度 +内边距
$('i1').outerHeight(true) # 边框 + 纯高度 +内边距+外边距

事件

绑定事件

 1 $('.c1').click()
 2 $('.c1').....
 3                     
 4 $('.c1').bind('click',function(){})
 5                     
 6 $('.c1').unbind('click',function(){})
 7                     
 8 
 9 $('.c').delegate('a', 'click', function(){})
10 $('.c').undelegate('a', 'click', function(){})
11                     
12 $('.c1').on('click', function(){})
13 $('.c1').off('click', function(){})
14 
15 //绑定与解绑的方法必须一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
<script src="jquery-3.3.1.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
            $('#u1').append(temp);
        });

        
        $('ul').delegate('li','click',function () {
            var v = $(this).text();
            alert(v);
        });

        // $('ul').on('click','li',function () {
        //     var v = $(this).text();
        //     alert(v);
        // })

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

注意：$("必须是最外层父辈元素")

动态绑定事件

组织事件发生

return false

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>
 9 
10     <a id="i1" href="http://www.oldboyedu.com">走你2</a>
11     <script src="jquery-1.12.4.js"></script>
12     <script>
13         function ClickOn() {
14             alert(123);
15             return false;
16         }
17         $('#i1').click(function () {
18             alert(456);
19             return false;
20         })
21     </script>
22 </body>
23 </html>

实例

jQuery扩展

$.extend 调用方式：$.方法

$.fn.extend 调用方式：$(..).方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <script src="jquery-1.12.4.js"></script>
10     <script>
11         // jquery扩展
12        $.fn.extend({
13            "hanyang": function () {
14                return 'db';
15            }
16        });
17        var v = $('#i1').hanyang();
18        alert(v);
19 
20        $.extend({
21            'wangsen': function () {
22                return 'sb';
23            }
24        });
25        var v = $.wangsen();
26        alert(v);
27     </script>
28 
29 </body>
30 </html>

实例

当页面框架加载完成之后，自动执行
$(function(){

$(...)

})

防止页面未加载完成，造成事件绑定不及时