jQuery基础笔记和面试题

jQuery是一款优秀的 JavaScript 库，从命名可以看出 jquery 最主要的用途是用来做查询（ jQuery = js + Query),正如 jQuery 官方 Logo 副标题所说（write less, do more)使用 jQuery 能让我们对 HTML 文档遍历和操作，事件处理，动画以及 Ajax 变得更加简单
原生 JS 设置背景

window.onload = function (ev) {
   // 1.利用原生的JS查找DOM元素
   var div1 = document.getElementsByTagName("div")[0];
   var div2 = document.getElementsByClassName("box1")[0];
   var div3 = document.getElementById("box2");

   // 2.利用原生的JS修改背景颜色
   div1.style.backgroundColor = "red";
   div2.style.backgroundColor = "blue";
   div3.style.backgroundColor = "yellow";
}
1
2
3
4
5
6
7
8
9
10
11

使用 jQuery 设置背景

$(document).ready(function(){
// 查询，操作 CSS 一步到位
    $("div").eq(0).css('background','red');
    $(".one").eq(0).css('background','blue');
    $("#two").css('background','yellow');
});
1
2
3
4
5
6

2. 为什么要使用 jQuery?

强大的选择器：方便快速查找 DOM 元素
- 通过 jQuery 查找 DOM 元素要比原生 js 快捷很多
- jQuery允许开发者使用CSS1-CSS3几乎所有的选择器,以及jQuery独创的选择器
链式调用: 可以通过 . 不断调用jQuery对象的方法
- jQuery可以通过.（点）.不断调用jQuery对象的方法，而原生JavaScript则不一定

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // 报错,必须分开写
    div[0].style.backgroundColor = "red".width = 200+"px";
    // div[0].style.width = 200+"px";
    
    // 2.jQuery
    $(document).ready(function () {
    // 不报错,后面还可以接着继续写
        $("div").eq(1).css('background', 'yellow').css('width', '200px');
    }); 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

隐式遍历(迭代): 一次操作多个元素

<script>
    // 1.原生JavaScript
    var div = document.getElementsByTagName("div");
    // div.style.backgroundColor = "red";// 无效
    for(var i = 0; i<div.length; i++){
        div[i].style.backgroundColor = "red";
    }

    // 2.jQuery
    $(document).ready(function () {
        // 隐式遍历(迭代)找到的所有div
        $("div").css('background', 'yellow');
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

读写合一: 读数据/写数据使用是一个函数

<script>
    $(document).ready(function () {
        // 读取数据
        var $tx = $("div").eq(0).text();
        alert($tx);
        // 写入数据
        $("div").eq(0).text("新的数据");
    });
</script>
1
2
3
4
5
6
7
8
9

事件处理
DOM 操作（C增U改D删）
样式操作
动画
插件支持
浏览器兼容（建议学习1.x版本）
- 1.x：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增，最终版本：1.12.4
- 2.x：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增，最终版本：2.2.4
- 3.x：不兼容ie678，只支持最新的浏览器，很多老的jQuery插件不支持这个版本，相对1.x文件较小，提供不包含Ajax/动画API版本

3. jQuery 入口函数

1. jQuery与JavaScript加载模式对比

原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行

// js 原生入口函数
window.onload = function (ev) {
   // 1.通过原生的JS入口函数可以拿到DOM元素
   var images = document.getElementsByTagName("images")[0];
   
   // 2.通过原生的JS入口函数可以拿到DOM元素的宽高
   var width = window.getComputedStyle(images).width;
            
}
1
2
3
4
5
6
7
8
9

// jQuery 入口函数
$(document).ready(function () {
   // 1.通过jQuery入口函数可以拿到DOM元素
   var $images = $("images");

   // 2.通过jQuery入口函数不可以拿到DOM元素的宽高
   var $width = $images.width();

});
1
2
3
4
5
6
7
8
9

原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
jQuery中编写多个入口函数,后面的不会覆盖前面的

// 原生 js
window.onload = function (ev) {
    alert("hello lnj1");// 不会显示
}
window.onload = function (ev) {
    alert("hello lnj2");// 会显示
}

// jQuery
$(document).ready(function () {
    alert("hello lnj1");// 会显示
});
$(document).ready(function () {
    alert("hello lnj2");// 会显示
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

jQuery 不会覆盖的本质
- jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰
为何能访问$符号
- 因为$符号 jQuery 框架对外暴露的一个全局变量
为何 window.jQuery = window.$ = jQuery; 而不是window.jQuery = jQuery;
- jQuery框架不仅提供了jQuery访问还提供$访问,提升开发者的编码效率
JavaScript中如何定义一个全局变量?
- 所有全局变量是 window 对象的属性
- jQuery 框架源码实现
```
window.jQuery = window.$ = jQuery;
1
```
- 使用 jQuery 框架只有两种方式
  - 通过 $
  - 通过 jQuery

总结：

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码
执行次数	只能执行一次,如果第二次,那么第一次的执行会被覆盖	可以执行多次,第N次都不会被上一次覆盖

2. jQuery 其他写法

 // 1.第一种写法
    $(document).ready(function () {
        // alert("hello lnj");
    });

    // 2.第二种写法
    jQuery(document).ready(function () {
        // alert("hello lnj");
    });

    // 3.第三种写法(推荐)
    $(function () {
        // alert("hello lnj");
    });

    // 4.第四种写法
    jQuery(function () {
        alert("hello lnj");
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 解决$符号冲突问题

1. 释放 $ 使用权

当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery

jQuery.noConflict();
1

注意点:

释放操作必须在编写其它jQuery代码之前编写
释放之后就不能再使用$,改为使用jQuery

2. 自定义访问符号

 // 2.自定义一个访问符号
    var nj = jQuery.noConflict();
    nj(function () {
        alert("hello lnj");
    });
1
2
3
4
5

4. jQuery 核心函数

  <script>
        $();//jQuery原理();就代表调用jQuery的核心函数

        // 1.接收一个函数
        $(function () {
            alert("hello lnj");
            
            // 2.接收一个字符串
            // 2.1接收一个字符串选择器
            // 返回一个jQuery对象, 对象中保存了找到的DOM元素
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            
            // 2.2接收一个字符串代码片段
            // 返回一个jQuery对象, 对象中保存了创建的DOM元素
            var $p = $("<p>我是段落</p>");
            $box1.append($p);
            
            // 3.接收一个DOM元素
            // 会被包装成一个jQuery对象返回给我们
            var span = document.getElementsByTagName("span")[0];
            var $span = $(span);

        });
    </script>
<body>
    <div class="box1"></div>
    <div id="box2"></div>
    <span>我是span</span>
</body>
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

5. jQuery 对象

1. jQuery 对象的本质

jQuery 对象的本质是一个伪数组

var $div = $("div");
    console.log($div);
    
var arr = [1, 3, 5];
    console.log(arr);
1
2
3
4
5

什么是伪数组
- 有 0 到 length-1 属性
- 并且有 length 属性
  例：

var obj = {0:"lnj", 1:"33", 2:"male", length: 3}
1

6. jQuery 静态方法

1. 什么是静态方法

静态方法对应的是对象方法,对象方法用实例对象调用,而静态方法用类名调用

  // 1.定义一个类
  function AClass() {
   }
   // 2.给这个类添加一个静态方法
   // 直接添加给类的就是静态方法
   AClass.staticMethod = function () {
       alert("staticMethod");
   }
   // 静态方法通过类名调用
   AClass.staticMethod();

   // 3.给这个类添加一个实例方法
   AClass.prototype.instanceMethod = function () {
       alert("instanceMethod");
   }
   // 实例方法通过类的实例调用
   // 创建一个实例(创建一个对象)
   var a = new AClass();
   // 通过实例调用实例方法
   a.instanceMethod();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. jQuery.holdReady()

暂停或者恢复 jQuery.ready() 事件
传入 true 或 false

<script>
    // 使用$直接调用,是静态方法
    $.holdReady(true);
    $(function () {
       $("#first").click(function () {
           alert("我是你想要的弹窗");
       });
    });
</script>
<body>
    <button id="first">点击测试弹出</button>
    <button id="second">解除延迟</button>
<script>
    $("#second").click(function(){
        $.holdReady(false);
    });
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. each 方法

js 原生 forEach 方法
- 原生的forEach方法只能遍历数组, 不能遍历伪数组

/*
  第一个参数: 遍历到的元素
  第二个参数: 当前遍历到的索引
*/
    var arr = [1, 3, 5, 7, 9];
    var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        
    arr.forEach(function (value, index) {
        console.log(index, value);
    });
    
    obj.forEach(function (value, index) {
        console.log(index, value);// 报错
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery 的 each 静态方法
- 遍历对象或数组(伪数组）
- 优点统一遍历对象和数组的方式
- 回调参数的顺序更符合我们的思维模式

// 1.利用jQuery的each静态方法遍历数组
/*
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
*/
    $.each(arr, function (index, value) {
        console.log(index, value);
    });
    $.each(obj, function (index, value) {
        console.log(index, value);
    });
1
2
3
4
5
6
7
8
9
10
11

4. map 方法

js 原生 map 方法
- 不能遍历的伪数组
jQuery 的 map 方法
- 遍历对象或数组,将回调函数的返回值组成一个新的数组返回

$(function () {
     // 4.1遍历数组
     var arr = [1, 3, 5, 7, 9];
     // 4.1.1通过原生方法遍历数组
     // 第一个回调函数参数是遍历到的元素
     // 第二个回调函数参数是当前遍历的索引
     // 第三个回调函数参数是当前被遍历的数组
     // 返回值: 将回调函数返回值收集起来组成一个新的数组
     var res = arr.map(function (ele, idx, arr) {
         console.log(idx, ele, arr);
         return ele + idx;
     });
     console.log(res);
     
     // 4.1.2通过jQuery静态方法遍历数组
     // 第一个回调函数参数是遍历到的元素
     // 第二个回调函数参数是当前遍历的索引
     // 返回值: 将回调函数返回值收集起来组成一个新的数组
     var $res2 = $.map(arr, function (ele,idx) {
         console.log(idx, ele);
         return ele + idx;
     });
     console.log($res2);

     // 4.2遍历对象
     var obj = {name: "lnj", age:"33", gender:"male"};
     /*
     obj.map(function (ele, idx, obj) {
         // 报错,原生JS没有map方法
         console.log(idx, ele, obj);
     });
     */
     var $res = $.map(obj, function (value, key) {
         console.log(key, value);
         return key + value;
     });
     console.log($res);
 });
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

jQuery中的each静态方法和map静态方法的区别:
1. each静态方法默认的返回值就是, 遍历谁就返回谁
2. map静态方法默认的返回值是一个空数组
3. each静态方法不支持在回调函数中对遍历的数组进行处理
4. map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回

5. trim 方法

作用: 去除字符串两端的空格
参数: 需要去除空格的字符串
返回值: 去除空格之后的字符串

<script>
   $(function () {
       var str = "   lnj   ";
       console.log("---"+str+"---");
       var $res = $.trim(str);
       console.log("---"+$res+"---");
   });
</script>
1
2
3
4
5
6
7
8

6. isWindow 方法

作用: 判断传入的对象是否是window对象
返回值: true/false

 // 真数组
    var arr = [1, 3, 5, 7, 9];
    // 伪数组
    var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
    // 对象
    var obj = {"name":"lnj", age:"33"};
    // 函数
    var fn = function(){};
    // window对象
    var w = window;
    
    var res = $.isWindow(w);
    console.log(res);
1
2
3
4
5
6
7
8
9
10
11
12
13

7. isArray 方法

作用: 判断传入的对象是否是真数组
返回值: true/false

$(function () {
    // 对象
    var obj = {name:"lnj",age: "33", gender:"male"};
    // 真数组
    var arr = [1, 3, 5, 7, 9];
    var $res = $.isArray(obj);
    console.log($res);// false
    var $res2 = $.isArray(arr);
    console.log($res2);// true
});
1
2
3
4
5
6
7
8
9
10

8. isFunction 方法

作用: 判断传入的对象是否是一个函数
返回值: true/false
注意点:

jQuery框架本质上是一个函数
(function( window, undefined ) {})( window );

$(function () {
    var obj = {name:"lnj",age: "33", gender:"male"};
    var arr = [1, 3, 5, 7, 9];
    var fn = function () {}
    var $res = $.isFunction(obj);
    console.log($res);// false
    $res = $.isFunction(arr);
    console.log($res);
    $res = $.isFunction(fn);
    console.log($res);
    // 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数
    $res = $.isFunction($);
    console.log($res);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

7. jQuery 选择器

1. 基础选择器

选择器	名称	描述	返回	实例
#id	id选择器	根据给定的id匹配一个元素	单个元素	$("#box");选取id为box元素
.class	类选择器	根据给定的类名匹配元素	集合元素	$(".box");选取所有类名为box元素
element	元素选择器	根据给定的元素名称匹配元素	集合元素	$(“p”);选取所有元素
*	通配符选择器	匹配所有元素	集合元素	$("*");选取所有元素
selector1,selector2,selectorN	并集选择器	将所有选择器匹配到的元素合并后一起返回	集合元素	$(“div,p,.box”);选取所有元素,所有元素和所有类名为box元素

2. 层次选择器

选择器	名称	描述	返回	实例
$(“ancestor descendant”)	后代选择器	选取ancestor元素的所有descendant后代标签(不光是儿子,包括孙子/重孙子等)	集合元素	$(“div span”);选取`<div>`元素里所有的`<span>`元素
$(“parent > child”)	子元素选择器	找到选取parent 元素中所有直接子元素child(只有儿子,不包括孙子/重孙子等)	集合元素	$(“div>span”);选取`<div>`元素下元素名称是`<span>`的子元素
$(“prev + next”)	相邻兄弟选择器	选取prev元素后面紧跟的那个next元素	集合元素	$(".one+div");选取类名为one的下一个同级的`<div>`元素
$(“prev ~ siblings”)	通用兄弟选择器	选取prev元素后面的所有next元素	集合元素	$("#two~div");选取id名为two元素后面所有同级的`<div>`元素

3. 内容过滤选择器

选择器	描述	返回
:empty	选取不包含子元素或文本为空的元素	集合元素
:parent	选取含有子元素或文本的元素	集合元素
:contains(text)	选取含有文本内容为text的元素	集合元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素

1. :empty

作用: 找到既没有文本内容也没有子元素的指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery选择器</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           // 找到所有div中不包含文本内容或子元素的元素
            var $res = $("div:empty");
            console.log($res.length); // 找到1个元素
            $res.each(function (idx,ele) {
                console.log(idx, ele); // one
            });
        });
    </script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div><!--包含内容不会被找到-->
<div class="three"><!--包含子元素不会被找到-->
    <span>lnj</span>
</div>
<span class="five"></span><!--不是指定元素不会被找到-->
</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

2. :parent

作用: 找到有文本内容或有子元素的指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery选择器</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
           // 找到所有div中包含文本内容或子元素的元素
            var $res = $("div:parent");
            console.log($res.length);
            $res.each(function (idx, ele) {
                console.log(idx, ele);
            });
        });
    </script>
</head>
<body>
<div class="one"></div>
<div class="two">zs</div><!--有文本内容会被找到-->
<div class="three"><!--有子元素会被找到-->
    <span>lnj</span>
</div>
<span class="five"></span>
</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

3. :contains(text)

作用: 找到包含指定文本内容的指定元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery选择器</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 找到所有div中包含文本内容为lnj的元素
            var $res = $("div:contains('lnj')");
            console.log($res.length);// 找到2个元素
            $res.each(function (idx, ele) {
                console.log(idx, ele);// one,three,four
            })
        });
    </script>
</head>
<body>
<div class="one">lnj</div>
<div class="two">zs</div>
<div class="three">lnj</div>
<div class="four"><!--子元素中包含该文本也会被找到-->
    <span>lnj</span>
</div>
<span class="five"></span>
</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

4. :has(selector)

作用: 找到包含指定子元素的指定元素
和:parent区别: parent只要有子元素就会被找到,:has(selector)不仅要有子元素,而且子元素还必须满足条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery选择器</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 找到所有div中包含后代元素为span的元素
            var $res = $("div:has('span')");
            console.log($res.length);
            $res.each(function (idx, ele) {
                console.log(idx, ele);
            });
        });
    </script>
</head>
<body>
<div class="one"> <!--后代中包含span元素会被找到-->
    <span>jjj</span>
</div>
<div class="two"><!--后代中不包含span元素不会被找到-->
    <p>zs</p>
</div>
<div class="three"><!--后代中包含span元素会被找到-->
    <p>
        <span>lnj</span>
    </p>
</div>
</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

8. jQuery 属性操作

1. 属性与属性节点

1.什么是属性?

对象身上保存的变量就是属性
只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象)

2.如何操作属性?

添加或修改属性(没有就会添加,有就会修改)
- 对象.属性名称 = 值;
- 对象[“属性名称”] = 值;
获取属性
- 对象.属性名称;
- 对象[“属性名称”];

3.什么是属性节点?

在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点

<span class= "box" nj="123"></span> // 这里的class和nj就是属性节点
1

4.如何操作属性节点?

获取属性节点
- DOM元素.getAttribute(“属性名称”);
设置属性节点
- DOM元素.setAttribute(“属性名称”, “值”);

5.属性和属性节点有什么区别?

任何对象都有属性, 但是只有DOM对象才有属性节点

2. 属性节点方法

1. attr 方法

作用: 获取或者设置属性节点的值

可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值

注意点:

如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

<script>
   $(function () {
       // 1.获取指定属性节点值
       var $res = $(".span1").attr("nj");
       console.log($res);
       // 2.设置属性节点
       $(".span1").attr("nj", "666");
       $(".span2").attr("id", "box1 box2");

       // 3.注意点:
       // 3.1.获取属性节点时,只会获取找到所有元素中第一个元素的属性节点
       $res = $("span").attr("class");
       console.log($res);
        $("span").attr("class", "lnj");
   });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. removeAttr 方法

作用: 删除属性节点

注意点:

会删除所有找到元素指定的属性节点

<script>
   $(function () {
       // 1.设置属性节点时,会给所有找到元素设置属性节点
       $("span").attr("test", "jonathan");
       // 2.删除属性节点时,会删除所有找到元素的属性节点
       $("span").removeAttr("test");
   });
</script>
1
2
3
4
5
6
7
8

3. prop 方法

作用: 设置或者获取元素的属性值
注意点:

prop方法不仅能够操作属性, 他还能操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

<script>
   $(function () {
       // 1.设置属性
       // 1.1.设置属性时,会设置所有找到元素的属性
       $("span").prop("demo", "lnj");
       // 2.获取属性
       // 2.1.获取属性时,只会获取找到第一个元素的属性
       console.log($("span").prop("demo"));
   });
</script>
1
2
3
4
5
6
7
8
9
10

4. removeProp 方法

<script>
        $(function () {
            // 删除所有找到元素的demo属性
            $("span").removeProp("demo");
        });
</script>
1
2
3
4
5
6

5. attr方法和prop方法区别

既然所有的DOM对象，都有一个attributes属性,而prop可以操作属性,所以也可以操作属性节点
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
因为如果具有 true 和 false 两个属性的属性节点,如果没有编写默认attr返回undefined,而prop返回false

<script>
     $(function () {
         // 1.可以通过prop获取属性节点
         console.log($("input").prop("class"));
         // 2.可以通过prop设置属性节点
         $("input").prop("class", "tag");

         // 3.如果没有默认值,那么attr获取返回undefined
         //console.log($("input[type=checkbox]").attr("checked"));
         // 4.如果没有默认值,那么prop获取返回false
         console.log($("input[type=checkbox]").prop("checked"));
         // 5.通过attr设置选中
         //$("input[type=checkbox]").attr("checked", true);
         
         // 6.通过prop设置选中
         $("input[type=checkbox]").prop("checked", true)

     });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

9. jQuery Class 操作

1. jQuery Class 类操作

jQuery CSS类相关方法都是用于操作DOM对象的class属性节点的值

1. addClass

给元素添加一个或多个类
如果要添加多个, 多个类名之间用空格隔开即可

<script>
$(function () {
    $("button").eq(0).click(function () {
        // 1.添加一个类
        //$("div").addClass("class1");
        // 2.再添加一个类
        //$("div").addClass("class2");
        // 3.一次性添加多个类(用空格隔开)
        $("div").addClass("class1 class2");
    });
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12

2. removeClass

删除元素的一个或多个类
如果想删除多个, 多个类名之间用空格隔开即可

<script>
    $(function () {
        $("button").eq(1).click(function () {
            // 4.删除一个类
            //$("div").removeClass("class2");
            // 5.再删除一个类
            //$("div").removeClass("class1");
            // 6.一次性删除多个类(用空格隔开)
            $("div").removeClass("class1 class2");

        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

3. toggleClass

切换类
添加或删除一个类(存在就删除不存在就添加)

<script>
    $(function () {
        $("button").eq(2).click(function () {
            // 7.切换一个类
            //$("div").toggleClass("class2");
            // 8.切换多个类
            $("div").toggleClass("class1 class2");
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10

2. jQuery 文本值操作

1. html

添加或获取元素中的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-jQuery代码文本值</title>
    <script src="代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            var $btns = $("button");
            var $div = $("div");
            $btns.eq(0).click(function () {
                // 1.添加html, 相当于innerHTML
                //$div.html("<p>我是p标签</p>");
                //$div.html("<p><span>我是span标签</span></p>");
                $div.html("我是文本");
            });
            $btns.eq(1).click(function () {
                // 2.获取html
                console.log($div.html());
            });
        });
    </script>
</head>
<body>
    <button>添加html</button>
    <button>获取html</button>
    <button>添加文本</button>
    <button>获取文本</button>
    <div></div>
</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

2. text

添加或获取元素中的文本
text方法能做的html方法都能做,所以一般使用html方法即可

<script>
   $(function () {
       $btns.eq(2).click(function () {
           // 3.添加文本, 相当于innerText
           // 如下内容不会被转换为标签
           // $div.text('<p>我是段落</p>');
          $div.text('我是文本');
       });
       $btns.eq(3).click(function () {
           // 4.获取文本
           console.log($div.text());
       });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

3. val

添加或获取元素value属性的值

<script>
    $(function () {
        $btns.eq(4).click(function () {
            // 4.添加value值
            $("input").val("我是一个输入框");
        });
        $btns.eq(5).click(function () {
            // 4.获取value值
            console.log($("input").val());
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

3. jQuery CSS 样式

1. css 方法

设置或获取元素CSS样式
格式1:DOM元素.css(“样式名称”, “值”);
格式2:DOM元素.css({“样式名称1”:“值1”,“样式名称2”:“值2”});

<script>
     $(function () {
         $("button").click(function () {
            // 1.单个样式设置
            $("div").css("width", "100px");
            $("div").css("height", "100px");
            $("div").css("background", "red");

             // 2.链式设置样式
             $("div").css("width", "100px").css("height", "100px").css("background", "red");

             // 3.传入对象一次性设置样式
             $("div").css({
                "width":"100px",
                 "height":"100px",
                 "background":"blue"
             });

             // 4.获取指定样式的值
             console.log($("div").css("width"));
         });
     });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2. width 方法

设置或获取元素宽度(相当于获取width属性值)

<script>
        $(function () {
            $("button").eq(0).click(function () {
                // 1.获取元素宽度(不包括padding和border)
                // alert($('.son').width());
            });
            $("button").eq(1).click(function () {
                // 2.设置元素宽度(不包括padding和border)
                // $(".son").width("50px");
            });
        });
    </script>
1
2
3
4
5
6
7
8
9
10
11
12

3. height 方法

设置或获取元素宽度(相当于获取height属性值)

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 1.获取元素宽度(不包括padding和border)
            // alert($('.son').width());
        });
        $("button").eq(1).click(function () {
            // 2.设置元素宽度(不包括padding和border)
            // $(".son").width("50px");
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

4. jQuery 元素位置

1. offset 方法

获取或设置元素相对窗口的偏移位

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 1.获取距离窗口的偏移位(从border开始)
            alert($('.son').offset().left); // 100
        });
        $("button").eq(1).click(function () {
            // 2.设置距离窗口的偏移位
            $('.son').offset({left:10, top:10});
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

2. position 方法

获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 1.获取匹配元素相对父元素的偏移
            alert($('.son').position().left);// 50
        });
        $("button").eq(1).click(function () {
            // 2.无效,不能设置相对定位元素的偏移位
            $('.son').position({left:10, top:10})
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

5. jQuery scroll 方法

1. scrollTop 方法

设置或获取匹配元素相对滚动条顶部的偏移

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 7.获取匹配元素相对滚动条顶部的偏移
         // alert($('.scroll').scrollTop());
         // alert($('html').scrollTop());
            // 兼容所有浏览器写法
            alert($('html').scrollTop()+$('body').scrollTop());
        });
        $("button").eq(1).click(function () {
            // 8.设置匹配元素相对滚动条顶部的偏移
         // $('.scroll').scrollTop(100);
         // $('html').scrollTop(100);
            // 兼容所有浏览器写法
            $('html,body').scrollTop(100);
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2. scrollLeft 方法

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。
当滚动条位于最左侧时，位置是 0。

<script>
    $(function () {
        $("button").eq(0).click(function () {
            // 7.获取匹配元素相对滚动条水平的偏移
            // alert($('.scroll').scrollLeft());
            // alert($('html').scrollLeft());
            // 兼容所有浏览器写法
            alert($('html').scrollLeft()+$('body').scrollLeft());
        });
        $("button").eq(1).click(function () {
            // 8.设置匹配元素相对滚动条水平的偏移
            // $('.scroll').scrollLeft(100);
            // $('html').scrollLeft(100);
            // 兼容所有浏览器写法
            $('html,body').scrollLeft(100);
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

10. jQuery 事件

1. 事件绑定

事件绑定方式一
- eventName(function(){})
- 绑定对应事件名的监听, 例如：$(’#div’).click(function(){});
- 优点：编码效率略高
- 缺点：部分事件jQuery没有实现,所以不能添加
事件绑定方式二
- on(eventName, funcion(){})
- 通用的绑定事件监听, 例如：$(’#div’).on(‘click’, function(){});
- 优点：编码效率略低
- 缺点：所有js事件都可以添加
- 注意点：可以添加多个相同或者不同类型的事件,不会覆盖

建议：
能用eventName就用eventName, 不能用eventName就用on

<script>
    $(function () {
        // 1.通过eventName绑定事件
        $("button").click(function () {
             alert("hello lnj");
         });
        $("button").click(function () {
             alert("hello 123");
         });
        $("button").mouseleave(function () {
             alert("hello mouseleave");
         });
        $("button").mouseenter(function () {
             alert("hello mouseenter");
         });

        // 2.通过on绑定事件
        $("button").on("click", function () {
            alert("hello click1");
        });
        $("button").on("click", function () {
            alert("hello click2");
        });
        $("button").on("mouseleave", function () {
            alert("hello mouseleave");
        });
        $("button").on("mouseenter", function () {
            alert("hello mouseenter");
        });
    });
</script>
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

2. 事件解绑

jQuery中可以通过off(eventName,function);解绑事件
off方法如果不传递参数, 会移除所有的事件（ // $(“button”).off(); ）
off方法如果传递一个参数, 会移除所有指定类型的事件（ // $(“button”).off(“click”); ）
off方法如果传递两个参数, 会移除所有指定类型的指定事件（ $(“button”).off(“click”, test1); ）

<script>
    $(function () {
        function test1() {
            alert("son1");
        }
        function test2() {
            alert("son2");
        }
        function test3() {
            alert("son3");
        }
        $(".son").click(test1);
        $(".son").click(test2);
        $(".son").on("mouseleave", test3);

        $(".son").off("click", test1);
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 事件坐标

当事件被触发时,系统会将事件对象(event)传递给回调函数,通过event对象我们就能获取时间的坐标
获取事件坐标有三种方式
- event.offsetX, event.offsetY 相对于事件元素左上角
- event.pageX, event.pageY 相对于页面的左上角
- event.clientX, event.clientY 相对于视口的左上角
event.page和event.client区别
- 网页是可以滚动的,而视口是固定的
- 所以想获取距离可视区域坐标通过event.client
- 想获取距离网页左上角的坐标通过event.client

<script>
    $(function () {
        // 获取事件的坐标
        $(".son").click(function (event) {
            // 获取相对于事件元素左上角坐标
            console.log(event.offsetX, event.offsetY);
            // 获取相对于视口左上角坐标
            console.log(event.clientX, event.clientY);
            // 获取相对于页面左上角坐标
            console.log(event.pageX, event.pageY);
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

4. 事件冒泡

1. 什么是事件冒泡

事件冒泡是从目标元素逐级向上传播到根节点的过程

2. 阻止事件冒泡

如果希望在触发一个元素的事件处理程序时，不影响它的父元素, 此时便可以使用停止事件冒泡

<script>
    $(function () {
        $(".son").click(function (event) {
            console.log(".son");
            // 在子元素中停止事件冒泡,时间不会继续向上传播,所以父元素click方法不会被触发
            event.stopPropagation();
        });
        $(".father").click(function () {
            console.log(".father");
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

5. 默认行为

1. 什么是默认行为

网页中的元素有自己的默认行为,例如单击超链接后会跳转,点击提交表单按钮会提交

2. 阻止默认行为

可以使用event.preventDefault();方法阻止事件默认行为方法

<script>
    $(function () {
        $("a").click(function (event) {
            var str = $("a").attr("href");
            // 如果超链接是百度就不跳转
            if(str.indexOf("baidu") > 0){
                // 阻止默认行为
                event.preventDefault();
            }
        });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

6. 自动触发事件

1. 什么是自动触发事件

通过代码控制事件, 不用人为点击/移入/移除等事件就能被触发

2. 自动触发方式

$(“selector”).trigger(“eventName”);
- 触发事件的同时会触发事件冒泡
- 触发事件的同时会触发事件默认行为
$(“selector”).triggerHandler(“eventName”);
- 触发事件的同时不会触发事件冒泡
- 触发事件的同时不会触发事件默认行为

 <script>
     $(function () {
         /*
         $(".son").click(function () {
             alert("son");
         });
         $(".father").click(function () {
             alert("father");
         });

         // trigger会触发事件冒泡
         // $(".father").trigger("click");
         // $(".son").trigger("click");

         // triggerHandler不会触发事件冒泡
         // $(".father").triggerHandler("click");
         // $(".son").triggerHandler("click");
         */

         $("input[type='submit']").click(function () {
             alert("点击了A标签");
         });
         // trigger会触发系统默认事件
         // $("input[type='submit']").trigger("click");
         // triggerHandler不会触发系统默认事件
         $("input[type='submit']").triggerHandler("click");

     });
</script>
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

7. 自定义事件

1. 什么是自定义事件

自定义事件就是自己起一个不存在的事件名称来注册事件, 然后通过这个名称还能触发对应的方法执行, 这就是传说中的自定义事件

2. 自定义事件的条件

事件必须是通过on绑定的
事件必须通过trigger来触发
因为trigger方法可以自动触发对应名称的事件,所以只要事件的名称和传递给trigger的名称一致就能执行对应的事件方法

<script>
    $(function () {
        $(".father").on("njClick", function () {
            alert("njClick");
        });
        $(".father").trigger("njClick");
    });
</script>
1
2
3
4
5
6
7
8

8. 事件命名空间

1. 什么是事件命名空间

事件命名空间主要用于区分相同类型的事件,区分不同前提条件下到底应该触发哪个人编写的事件
格式: “eventName.命名空间”

2. 添加事件命名空间的条件

事件是通过on来绑定的
通过trigger触发事件

3. 事件命名空间注意点（面试题）

不带命名空间事件被trigger调用,会触发带命名空间事件
带命名空间事件被trigger调用,只会触发带命名空间事件
下级不带命名空间事件被trigger调用,会冒泡触发上级不带命名空间和带命名空间事件
下级带命名空间事件被trigger调用,不会触发上级不带命名空间事件
下级带命名空间事件被trigger调用,会触发上级带命名空间事件

<script>
    $(function () {
        // 给父元素添加不带命名空间事件
        $(".father").on("click", function () {
            alert("father");
        });
        // 给父元素添加带命名空间事件
        $(".father").on("click.66", function () {
            alert("66 - father");
        });

        $(".son").on("click.nj", function () {
            alert("nj - 向左走");
        });
        $(".son").on("click.66", function () {
            alert("66 - 向右走");
        });
        // 会同时触发NJ和66编写的click事件
        // 事件会冒泡到不带命名空间上级元素和带相同命名空间的上级元素
        // $(".son").trigger("click");
        // 只会触发NJ编写的click事件
        // 事件不会冒泡到不带命名空间上级元素
        // $(".son").trigger("click.nj");
        // 只会触发66编写的click事件
        // 事件只会冒泡到带相同命名空间的上级元素
        $(".son").trigger("click.66");
    });
</script>
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

9. 事件委托

1. 什么是事件委托

事件委托就是请其他人帮忙做我们想做的事
做完之后最终的结果还是会反馈到我们这里

2. 事件委托的好处

减少监听数量
- 添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间
- 每个监听的函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差
新增元素自动有事件响应处理
- 默认情况下新增的元素无法响应新增前添加的事件

3. jQuery 中添加事件委托

添加前
- $(“li”).click隐式迭代给界面上所有li都添加了click事件(监听数量众多)
- 通过$(“ul”).append新添加的li无法影响click事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-jQuery事件委托</title>
    <script src="../day01/代码/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.监听li点击事件
            $("li").click(function () {
                // 弹出当前点击行内容
                alert($(this).html());
            });

            // 2.监听新增按钮点击
            var count = 0;
            $("button").eq(0).click(function () {
                count++;
                // 新增一行内容
                $("ul").append("<li>我是新增内容"+count+"</li>")
            });
        });
    </script>
</head>
<body>
<ul>
    <li>我是第1行</li>
    <li>我是第2行</li>
    <li>我是第3行</li>
</ul>
<button>新增一行</button>
<button>移除事件委托</button>
</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

添加后
- 格式:$(parentSelector).delegate(childrenSelector, eventName, callback)
- $(“ul”).delegate隐式迭代所有ul添加事件(相比开始迭代li,必然ul的个数会少很多)
- 当事件被触发时,系统会自动动态查找当前是哪个li触发了事件,所以新增的li也能响应到事件

<script>
     $(function () {
         // 1.委托ul监听li的点击事件
         $("ul").delegate("li","click",function () {
             // 前面我们说过事件委托就是让别人帮忙做事,但最终的结果还是会返回到我们手里,所以这里的this是触发事件的li
             // 这里的this之所以是触发事件的li,本质是因为"事件冒泡", 触发事件的li向上传递到ul,触发了click事件.
    // console.log(this);
             // 弹出当前点击行内容
             alert($(this).html());
         });

         // 2.监听新增按钮点击
         var count = 0;
         $("button").eq(0).click(function () {
             count++;
             // 新增一行内容
             $("ul").append("<li>我是新增内容"+count+"</li>")
         });
     });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

10. 移入移出事件

1. mouseenter/mouseleave

移动到子元素不会触发事件

<script>
    $(function () {
        // 移动到子元素不会触发事件
         // 2.1移入事件
         $('.father').mouseenter(function () {
           console.log('mouseenter');
         });
         // 2.2移除事件
         $('.father').mouseleave(function () {
           console.log('mouseleave');
         });
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

2. mouseover/mouseout

移动到子元素会触发事件

<script>
     $(function () {
          // 2.1移入事件
          $('.father').mouseover(function () {
            console.log('mouseover') ;
          });
          // 2.2移除事件
          $('.father').mouseout(function () {
            console.log('mouseout') ;
          });
     });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

3. hover

内容监听移入和移出
内部实现就是调用mouseenter和mouseleave

<script>
     $(function () {
         /*
        // 传入两个回调函数,一个监听移入,一个监听移出
         $(".father").hover(function () {
             console.log("mouseenter");
         }, function () {
             console.log("mouseleave");
         });
         */
         // 如果只传入一个方式,那么这个方式既监听移入也监听移出
         $(".father").hover(function () {
             console.log("移入移除");
         });
     });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

11. jQuery 动画效果

1. 显示，隐藏动画

1. show

显示动画
内部实现原理根据当前操作的元素是块级还是行内决定, 块级内部调用display:block;,行内内部调用display:inline;

// 编写jQuery相关代码
$("button").eq(0).click(function () {
    // $("div").css("display", "block");
    // 注意: 这里的时间是毫秒
    $("div").show(1000, function () {
        // 作用: 动画执行完毕之后调用
        alert("显示动画执行完毕");
    });
});
1
2
3
4
5
6
7
8
9

2. hide

隐藏动画

$("button").eq(1).click(function () {
    // $("div").css("display", "none");
    $("div").hide(1000, function () {
        alert("隐藏动画执行完毕");
    });
});
1
2
3
4
5
6

3. toggle

切换动画（显示变隐藏，隐藏变显示）

$("button").eq(2).click(function () {
    $("div").toggle(1000, function () {
        alert("切换动画执行完毕");
    });
});
1
2
3
4
5

4. 注意点

show(1000, function () {}😉 第一个参数单位是毫秒, 1000毫秒等于1秒
默认的动画时长是400毫秒
除了指定毫秒以外还可以指定三个预设参数 slow、normal、fast
- slow本质是600毫秒
- normal本质是400毫秒
- fast本质是200毫秒
其它两个方法同理可证

2. 展开，收起动画

1. slideDown

展开动画

$("button").eq(0).click(function () {
    $("div").slideDown(1000, function () {
        alert("展开完毕");
    });
});
1
2
3
4
5

2. slideUp

收起动画

$("button").eq(1).click(function () {
    $("div").slideUp(1000, function () {
        alert("收起完毕");
    });
});
1
2
3
4
5

3. slideToggle

切换动画（展开变收起,收起变展开）

$("button").eq(2).click(function () {
    $("div").slideToggle(1000, function () {
        alert("收起完毕");
    });
});
1
2
3
4
5

3. 淡入，淡出动画

1. fadeIn

淡入动画

$("button").eq(0).click(function () {
    $("div").fadeIn(1000, function () {
        alert("淡入完毕");
    });
});
1
2
3
4
5

2. fadeOut

淡出动画

$("button").eq(1).click(function () {
    $("div").fadeOut(1000, function () {
        alert("淡出完毕");
    });
});
1
2
3
4
5

3. fadeToggle

切换动画（显示变淡出，不显示变淡入）

$("button").eq(2).click(function () {
    $("div").fadeToggle(1000, function () {
        alert("切换完毕");
    });
});
1
2
3
4
5

4. fadeTo

淡入到指定透明度动画
可以通过第二个参数,淡入到指定的透明度(取值范围0~1)

$("button").eq(3).click(function () {
    $("div").fadeTo(1000, 0.2, function () {
        alert("淡入完毕");
    })
});
1
2
3
4
5

4. 自定义动画

1. animate

/*
第一个参数: 接收一个对象, 可以在对象中修改属性
第二个参数: 指定动画时长
第三个参数: 指定动画节奏, 默认就是swing
第四个参数: 动画执行完毕之后的回调函数
*/
$(".two").animate({
    marginLeft: 500
}, 5000, "linear", function () {
    // alert("自定义动画执行完毕");
});
1
2
3
4
5
6
7
8
9
10
11

每次开始运动都必须是初始位置或者初始状态,如果想在上一次位置或者状态下再次进行动画可以使用累加动画

$("button").eq(1).click(function () {
    $(".one").animate({
        width: "+=100"
    }, 1000, function () {
        alert("自定义动画执行完毕");
    });
});
1
2
3
4
5
6
7

同时操作多个属性,自定义动画会执行同步动画,多个被操作的属性一起执行动画

$(".one").animate({
    width: 500,
    height: 500
}, 1000, function () {
    alert("自定义动画执行完毕");
});
1
2
3
4
5
6

5. 动画队列

多个动画方法链式编程,会等到前面的动画执行完毕再依次执行后续动画

$("div").slideDown(1000).slideUp(1000).show(1000);

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000);
    });
});
1
2
3
4
5
6
7

但是如果后面紧跟一个非动画方法则会被立即执行

// 立刻变为黄色,然后再执行动画
$(".one").slideDown(1000).slideUp(1000).show(1000).css("background", "yellow");
1
2

如果想颜色再动画执行完毕之后设置
- 1.使用回调
- 2.使用动画队列

$(".one").slideDown(1000,function () {
    $(".one").slideUp(1000, function () {
        $(".one").show(1000, function () {
            $(".one").css("background", "yellow")
        });
    });
});

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function () {
    $(".one").css("background", "yellow")
});
1
2
3
4
5
6
7
8
9
10
11

注意：
- 动画队列方法queue()后面不能继续直接添加queue()
- 如果想继续添加必须在上一个queue()方法中next()方法

$(".one").slideDown(1000).slideUp(1000).show(1000).queue(function (next) {
    $(".one").css("background", "yellow");
    next(); // 关键点
}).queue(function () {
    $(".one").css("width", "500px")
});
1
2
3
4
5
6

6. 动画相关方法

1. delay

设置动画延迟时长

$(".one").animate({
    width: 500
    // height: 500
}, 1000).delay(2000).animate({
    height: 500
}, 1000);
1
2
3
4
5
6

2. stop

停止指定元素上正在执行的动画

 // 立即停止当前动画, 继续执行后续的动画
    $("div").stop();
    $("div").stop(false);
    $("div").stop(false, false);

    // 立即停止当前和后续所有的动画
    $("div").stop(true);
    $("div").stop(true, false);

    // 立即完成当前的, 继续执行后续动画
    $("div").stop(false, true);

    // 立即完成当前的, 并且停止后续所有的
    $("div").stop(true, true);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

12. jQuery 文档处理

1. 添加节点

1. 内部插入

append
appendTo
- 将元素添加到指定元素内部的最后

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").append($li);
$li.appendTo("ul");
1
2
3
4
5

prepend
prependTo
- 将元素添加到指定元素内部的最前面

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").prepend($li);
$li.prependTo("ul");
1
2
3
4
5

2. 外部插入

after
insertAfter
- 将元素添加到指定元素外部的后面

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").after($li);
$li.insertAfter("ul");
1
2
3
4
5

before
insertBefore
- 将元素添加到指定元素外部的前面

// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
// $("ul").before($li);
$li.insertBefore("ul");
1
2
3
4
5

2. 删除节点

empty()
- 删除指定元素的内容和子元素, 指定元素自身不会被删除

$("div").empty();
1

remove()
- 删除指定元素

// 删除所有div
$("div").remove();
// 删除div中id是box1的那个div
$("div").remove("#box1");
1
2
3
4

detach()

// 删除所有div
$("div").detach();
// 删除div中id是box1的那个div
$("div").detach("#box1");
1
2
3
4

remove和detach区别
- remove删除元素后,元素上的事件会被移出
- detach删除元素后,元素上的事件会被保留

$("button").click(function () {
    // $("div").remove();
    // $("div").empty();
    // $("li").remove(".item");

    // 利用remove删除之后再重新添加,原有的事件无法响应
    // var $div = $("div").remove();
    // 利用detach删除之后再重新添加,原有事件可以响应
    var $div = $("div").detach();
    // console.log($div);
    // 将删除的返回值重新添加到body上
    $("body").append($div);
});
$("div").click(function () {
    alert("div被点击了");
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3. 替换节点

replaceWith
- 将所有匹配的元素替换成指定的HTML或DOM元素
- replaceWith参数可以是一个DOM元素
- replaceWith参数也可以是一个代码片段
replaceAll
- 用匹配的元素替换掉所有 selector匹配到的元素

// 编写jQuery相关代码
$("button").click(function () {
    // 创建一个新的节点
    var $item = $("<h6>我是标题6</h6>");
    // 利用新的节点替换旧的节点
    // $("h1").replaceWith($item);
    $item.replaceAll("h1");
});
1
2
3
4
5
6
7
8

4. 复制节点

clone
- 复制一个节点
- 浅复制不会复制节点的事件
- 深复制会复制节点的事件

$(function () {
    // clone([Even[,deepEven]])
    $("button").eq(0).click(function () {
        // 1.浅复制一个元素
        var $li = $("li:first").clone(false);
        // 2.将复制的元素添加到ul中
        $("ul").append($li); // 点击li无法响应事件
    });
    $("button").eq(1).click(function () {
        // 1.深复制一个元素
        var $li = $("li:first").clone(true);
        // 2.将复制的元素添加到ul中
        $("ul").append($li); // 点击li可以响应事件
    });

    $("li").click(function () {
        alert($(this).html());
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. 包裹节点

wrap()
- 将指定节点用其他标记包裹起来
- 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义
wrapAll()
- 将所有匹配的元素用一个元素来包裹
- 而 wrap() 方法是将所有的元素进行单独包裹
wrapInner()
- 将每一个匹配的元素的子内容（包括文本节点）用其他结构化标记包裹起来

<script type="text/javascript">
    //测试使用 jQuery wrap, wrapAll, wrapInner
    $(function(){
        //包装 li 本身
        $("#box1 li").wrap("<font color='red'></font>");
    
        //包装所有的 li
        $("#box2 li").wrapAll("<font color='red'></font>");
    
        //包装 li 里边的文字. 
        $("#box3 li").wrapInner("<font color='red'></font>");
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

6. 遍历节点

children() ：只考虑子元素，不考虑后代元素。
next() ：同辈紧邻后面一个元素。
nextAll() ：同辈紧邻后面所有兄弟元素。
prev() ：同辈紧邻前一个兄弟元素。
prevAll() ：同辈紧邻前所有兄弟元素。
siblings() ：同辈所有兄弟元素。
find(‘span’) ：返回被选元素的后代元素，括号内必填写，如果查找所有后代使用 “*”，起查找作用。
filter(‘div’) ：指定选择器的xx元素，括号内必填写，符合条件的同级元素，非后代元素，起过滤作用。
has(‘div’) ：符合条件的后代元素，不包含自身，括号内必填写，起过滤作用。
parents() ：获取所有祖先元素，参数为筛选条件。
closest(‘.new’) ：用来取得最近的匹配元素，包括自身。
- 首选检查自身是否符合，如果符合返回元素本身；如果不匹配，向上查找父元素，逐级向上直到匹配到选择器的元素。
- 如果什么没找到，返回一个空的jq对象。必须填写筛选条件，且只能找到一个元素。
parentsUntil() ：截止到xx位置的祖先节点。

13. jQuery 面试题

1. 为什么要使用jQuery？jquery有哪些好处？

jQuery是轻量级的框架
强大的选择器，出色的DOM操作的封装
可靠的事件处理机制（jQuery在处理事件绑定的时候相当的可靠）
ajax封装的非常的好，不需要考虑复杂浏览器的兼容性和XMLHttpRequest对象的创建和使用的问题
出色的浏览器的兼容性
支持链式操作，隐式迭代
行为层和结构层的分离，还支持丰富的插件，jquery 的文档也非常的丰富

2. jQuery能做什么？

获取页面的元素
修改页面的外观
改变页面大的内容
响应用户的页面操作
为页面添加动态效果
无需刷新页面，即可以从服务器获取信息
简化常见的javascript任务

3. jQuery 库中的 $() 是什么？

$() 函数是 jQuery() 函数的别称
$() 函数用于将任何对象包裹成 jQuery 对象
允许调用定义在 jQuery 对象上的多个不同方法

4. $(document).ready() 是个什么函数？为什么要用它？

ready() 函数用于在文档进入ready状态时执行代码
当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码
使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题

5. (document).ready()方法和window.onload有什么区别？

window.onload方法是在网页中所有的元素完全加载到浏览器后才执行
$(document).ready() 可以在DOM载入就绪是就对其进行操纵，并调用执行绑定的函数

6. jQuery中.get()提交和.post()提交的区别

.get()使用GET方法来进行异步提交，.post()使用POST方法来进行异步提交
get请求方式将参数跟在url后进行传递用户可见 post请求则是作为http消息的实体内容发送给服务器，用户不可见
post传输数据比get大
get请求的数据会被浏览器缓存，不安全

7. jQuery中有哪些方法可以遍历节点？

children():获取匹配元素的子元素集合，不考虑后代元素 $KaTeX parse error: Expected '}', got 'EOF' at end of input: (function(){$ (“div”).children()})
next()获取匹配元素后面紧邻的同级元素
prev()获取匹配元素前紧邻的同级元素
siblings()获取匹配元素前后的所有同辈元素

8. $(this) 和 this 关键字在 jQuery 中有何不同？

$(this) 返回一个 jQuery 对象，可以对它调用多个 jQuery 方法
this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。
不能对 this 调用 jQuery 方法，直到 this 被 $() 函数包裹，例如 $(this)。

9. 使用 CDN 加载 jQuery 库的主要优势是什么 ?

报错节省服务器带宽
更快的下载速度
如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次

10. 如何使用从服务器获取一个复杂数据(对象)?

通常会把这个数据转换为通用的数据交换格式，如xml或json。由于xml解析比较麻烦，所以使用json比较多。
在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为java对象。

11. 在使用选择器的时要注意的地方?

选择器中含有\等特殊字符的时候需要进行转译
属性选择器的引号问题
选择器中含有空格的注意事项

12. 有哪些查询节点的选择器？

:first 查询第一个
:last 查询最后一个，
:odd查询奇数但是索引从0开始
:even 查询偶数
:eq(index)查询相等的
:gt(index)查询大于index的
:lt查询小于index
:header 选取所有的标题等

13. jQuery是如何处理缓存的？ ( 要处理缓存就是禁用缓存 )

通过$.post()方法来获取数据，那么默认就是禁用缓存的
通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。可以在URL后面加上+(+new Date)

$.get('ajax.xml?'+(+new Date),function () { //内容});
1

通过$.ajax方法来获取数据，只要设置cache:false即可。

14. 在jquery中你有没有编写过插件，插件有什么好处？你编写过那些插件？它应该注意那些？

插件的好处 :
- 对已有的一系列方法或函数的封装，以便在其他地方重新利用
- 方便后期维护和提高开发效率插件的分类：封装对象方法插件、封装全局函数插件、选择器插件
注意的地方：
- 插件的文件名推荐命名为jquery.[插件名].js，以免和其他的javaScript库插件混淆
- 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
- 插件应该返回一个jQuery对象，以保证插件的可链式操作
- 避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示，这样可以避免冲突或使用闭包来避免
- 所有的方法或函数插件，都应当分好结尾，否则压缩的时候可能出现问题。在插件头部加上分号，这样可以避免他人的不规范代码给插件带来影响
- 在插件中通过$.extent({})封装全局函数,选择器插件，扩展已有的object对象过$.fn.extend({})封装对象方法插件