jQuery-选择器-筛选器-元素增加删除-属性样式-事件-动画-插件

jQuery

一 jQuery 的基础

1.1 jQuery 的版本

不同的开发版本

jquery.js	开发版（不压缩）
jquery.min.js	产品版（压缩过）
jquery.slim.js	简化版（去掉了动画功能和ajax功能）

https://www.bootcdn.cn/

版本号

1.x.x	兼容IE6~IE8
2.x.x 和 3.x.x	需要 IE9 以上浏览器支持

1.2 如何使用 jQuery

需要把 jQuery 文件导入到 html 中，自己写的 js 代码需要在 jQuery 导入之后，这样才能使用 jQuery 中封装的方法！

① 导入本地的 jQuery 文件

下载地址：https://jquery.com/download/

<script src="jquery-3.3.1.min.js"></script>
<script>
    //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
</script>

② 导入 CDN 上的 jQuery 文件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    code...
</script>

CDN:

内容分发系统，CDN提供商拥有非常多的服务器

需要下载 CDN 上的文件，可以就近下载，提高加载速度

通过npm下载安装

• 安装node
• 在项目根目录打开cmd，初始化package.json

 npm init -y

下载jQuery

  npm i jquery

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script>
    code...
</script>

③ 根据浏览器版本加载不同版本的 jQuery

<!--IE9及以上以及其他浏览器-->
<!--[if gt IE 8]><!-->
	<script src="../../dist/jquery-3.1.1.min.js"></script>
<!--<![endif]-->

<!--IE8以及以下浏览器-->
<!--[if lte IE 8]>
	<script src="../../dist/jquery-1.12.4.min.js"></script>
<![endif]-->

1.3 核心函数 / jQuery 对象

$ 是 jQuery 的别名； 是一个 function 类型的对象.

通过jQuery，可以选取（查询query）HTML 元素，并对它们执行“操作”（actions）。

核心函数的作用：

1. 获取元素； 参数是字符串，指定选择器；返回值是 jQuery DOM 对象（表示页面中某个或某些元素或其他节点）。
2. 把原生DOM转为jQuery DOM； 参数是原生 DOM；返回值jQuery DOM 对象。
3. 文档就绪事件的简写，参数是回调函数。

1.3.1 $是jQuery的别名

jQuery('.item').show();
//等同于
$('.item').show(); 

console.log(jQuery === $); // true

1.3.2 释放$使用权

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

// 释放$使用权
jQuery.noConflict();
// 隐藏ID为demo的元素
abc("#demo").hide();

当便捷访问符号发生冲突时,我们也可以自定义便捷访问符号

// 指定自定义符号
var abc = jQuery.noConflict();
// 隐藏ID为demo的元素
abc("#demo").hide();

1.4 jQuery DOM 对象

① jQuery DOM 对象

jQuery DOM 对象是由原生 DOM 组成的集合，是个伪数组；（与 NodeList 和 HTMLCollection 完全不同）

jQuery DOM 对象调用方法设置样式或属性，集合中所有的元素都会生效，无需进行遍历。

接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素,返回jQuery对象。

• 通过原生js获取的dom对象，我们称之为jsDOM或者原生DOM
• 通过jQuery选择器获取的dom对象，我们称之为jQuery DOM（jQuery对象）

// 利用jquery得到的是一个jQuery对象
var $box = $("#demo");
console.log($box);

// 利用js原生语法得到的是一个jsDOM对象
var box = document.getElementById("demo");
console.log(box);

② 原生 DOM

把原生 JS 方式获取的元素对象或其他节点对象 称之为 原生 DOM。

③ 原生 DOM 和 jQuery DOM 互相转换

原生DOM转为jQueryDOM： 使用核心函数，把原生DOM作为参数，返回jQuery DOM。

jQuery DOM 转为原生DOM： jQueryDOM是集合，集合的成员就是原生DOM。

• jQuery DOM本质上 是由 jsDOM组成的集合，是个伪数组。可以通过 [索引]或.get(索引值)获取其中的jsDOM
• $(jsDOM) 可以转为jQuery DOM

 	  // 获取jQuery DOM 
        var $lis = $('ul li')
        console.log($lis.length)   //6
        // 增加属性
        $lis.css('border-bottom','1px dashed #ccc').css('line-height','40px');
        // 增加点击事件
        $lis.click(function() {
            alert('ok');
        });
        // 遍历
        for (var i = 0;i<$lis.length;i++) {
            console.log($lis[i])
        }

1.5 文档就绪事件

① 语法

// 把 document 转为 jQueryDOM，添加 ready 事件
$(document).ready(function(){
   	// code .... 
});

// 文档就绪事件简写
$(function(){
    // code ....
})

② ready 事件与 load 的事件区别

1. ready 事件等到页面所有元素加载完毕，与 DOMContentLoaded 类似；
2. load 事件等到页面中所有的一切，包括外部文件（图片、视频、音配等）都加载完毕。

// 文档就绪事件的简写
    $(function(){
            console.log('ready');
            console.log(document.getElementById('box'));
            console.log($('#box').length);
            console.log('');
        });

1.6 链式调用（连贯操作）

jQuery DOM 对象支持链式调用

 $('#box').width(400).height(300).css('background-color', 'red');

链式调用的原理： jQuery DOM 的方法返回还是调用它的 jQuery DOM！

二 jQuery 选择器

2.1 基本选择器

与 css 选择器一致的

		$("div").css("color","red");
        $("#one").css("color","red");
        $(".three").css("color","green");
        $("*").css("color","red");
        $("#one,.three").css("color","red");

2.2 层级选择器

与 css 选择器一致的

2.3 过滤选择器

		$("p:gt(2)").css("background","orange");
        $("p:lt(2)").css("background","orange");
        $("p:lt(2),p:eq(2)").css("background","orange");

        $(":header").css("color","gold");
        $("h5:header").css("color","pink");

        $("input").focus();
        $("input:focus").css("color","red");

        setTimeout(()=>{
            $("input:focus").css("color","red");
        },5000)

2.4 内容选择器

	$("div:has(span)").css({
            color:"red"
        })

        $("div:has(.one)").css({
            color:"red"
        })
        $("div").has(".one").css({
            color:"red"
        })

2.5 可见性选择器

:hidden	    不可见的元素（display:none 和 type值为hidden的input元素）
:visible	可见的元素，除了不可见的都是可见的  opacity:0  visibility:hidden

hidden过滤器一般是包含样式为display:none。input表单类型为hidden

设置了visibility:hidden的元素,虽然其在物理上是不可见的,但却保留了物理空间,因此该算是可见元素

2.6 属性选择器

2.7 子元素选择器

与 css 选择器中的结构伪类选择器一致

:first-child
:last-child
:nth-child(n)
:nth-last-child(n)
:only-child
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-of-type
$(‘li:nth-child(even/odd/index)’) 获取li是偶数/奇数/索引的子元素(索引从1开始)

2.8 表单选择器

2.9 表单对象选择器

与 css 选择器中的 UI伪类选择器 一致:
:disabled   匹配不可用的 input
:enabled    匹配可用的 input
:checked	被选中的单选按钮、复选框或下拉选项（option）元素 （与 css 中的有区别）

jQuery 特有的选择器：
:selected  被选中的下拉选项option 元素

2.10 注意事项

选择器 "li :first" 的意思是从li的后代元素中匹配第一个
选择器 "li:first" 的意思是从li元素中匹配第一个

2 .11 混淆选择器

$(function () {
        $("."+$.escapeSelector(".abc")+"").css({
            color:"red"
        })
        $(":input").css({
            color:"yellow"
        })
    })

三 jQuery 筛选器方法

在已经获取到了元素（jQueryDOM）的时候，通过方法获取与之关联的其他元素

3.1 过滤方法

jQuery DOM 调用过滤的相关方法，会从jQueryDOM集合中取出满足条件的元素，组成的新的jQuery DOM

1. 调用过滤方法的jQueryDOM和返回的jQueryDOM，不一样，指向的元素不同。
2. 过滤方法返回的jQueryDOM是调用方法jQueryDOM的子集。

 console.log($("#one").hasClass("abc"));// false
 console.log($("#two").hasClass("my"));// true

 $("ul li").slice(1).css("border","1px solid green");  索引为1的后面都发生变化

		$("div").filter(function (index,ele) {
        console.log(index,ele,$(ele))//索引 div jqDOM
        console.log(this === ele);// true
        console.log(this.innerText)  //1 2 3
        console.log($(this).text())   //1 2 3 
    })

var arr = [1,2,3,4];
    //[1,2,3,4]
    var arr2 = arr.map(function (item) {
        return item+1;
    })
    console.log(arr2);// map非常重要重要重要 2 3 4 5 
    console.log(arr2 === arr);// false

3.2 查找方法

3.3 串联方法

具有破坏性操作的方法： 筛选器方法

不具有破坏性操作的方法： css() addClass() removeClass() 等

3.4 其他方法

map(callback)		返回新的jQueyDOM，新对象中的成员取决与每次回调函数的返回值（功能与数组的map方法相似）
is(selector)        返回布尔值，判断调用该方法的jQueyDOM是否满足选择器条件

四 DOM操作：元素的创建、添加、删除、克隆

4.1 内部插入（添加子元素）

append()	子元素添加到最后面，父元素调用添加子元素，参数是子元素； 参数形式：原生DOM、jQueryDOM、html字符串
appendTo()	子元素调用插入到父元素中，参数是父元素； 参数形式：原生DOM、jQueryDOM、选择器（字符串）
prepend()   子元素添加到最前面
prependTo()	

$box.append('<p>');
$('<p>').appendTo($box)

4.2 外部插入(添加兄弟元素)

after()				已经存在的元素调用
insertAfter()		新元素调用
before()
insertBefore()

4.3 包裹

wrap()		给jQueryDOM中的每个元素都添加一父元素
wrapAll()   给jQueryDOM中的元素添加一个共同的父元素
wrapInner()	在元素和资源股或内容至今包裹一层元素
unwrap()	删除父元素

是字符串，加￥是jq对象来使用

4.4 替换

repalceWith()	旧的元素调用，参数是新元素； 新的会替换掉旧的。
replaceAll()	新的元素调用，参数是旧的

二者区别同 append 和 appendTo 的区别是一样的！

旧元素.replaceWith(新元素)
新元素.replaceAll(旧元素)

4.5 删除

remove和detach的区别：

都有返回值

4.6 克隆

clone()

clone()方法中传递参数true,它的含义是复制元素的同时复制元素所绑定的事件,否则不会复制事件

五 属性和样式操作

5.1 属性操作

① 属性操作

prop() 和 attr() 只有一个参数，获取某个属性的值； 两个参数是设置

获取属性值，只获取jQueryDOM集合中第一个元素的属性值。

设置属性值，jQueryDOM集合中所有的元素都会被设置。

prop设置的removeProp才能删除

attr 方法与 prop 方法有什么区别

prop 获取或设置内置属性

attr 获取或设置写在标签上的属性

② data- 开头的自定义属性

data()	获取或设置 data- 开头的自定义属性

③ 类名操作

addClass()    为每个匹配的元素添加指定的类名
removeClass() 从所有匹配的元素中删除全部或者指定的类
toggleClass() 如果存在（不存在）就删除（添加）一个类
hasClass()	返回布尔值 检查当前的元素是否含有某个特定的类，如果有，则返回true

④ 代码/文本/值

html()		获取或设置元素中的html内容 类似于原生DOM的 innerHTML
text()		获取或设置元素中的文本内容 类似于原生DOM中 textContent
val()		获取或设置表单控件的值

没有参数是获取，有参数是设置！

val和value使用时，val没有值就是清空value的值。defaultvalue默认值

 $("input[name=userName]").focus(function () {
        // console.log("获得焦点",$(this).val())
        if($(this).val() === "请输入你的用户名"){
            $(this).val("")
        }
    }).blur(function () {
        console.log("失去焦点",this.value,this.defaultValue)
        if($(this).val() === ""){
            $(this).val("请输入你的用户名")
        }
    })

5.2 样式操作

① css 方法

// css 设置样式
$('#box').css('background', '#f90');

// 使用 css 方法同时设置多个 css 样式
$('#box').css({
    'background': '#ccc',
    'box-shadow': '3px 3px 3px red'
});

 // 获取元素的样式  注意获取的是计算样式
console.log($('#box').css('border'));
console.log($('#box').css('font-size'));

② 元素的位置

offset()	设置或者获取元素的位置； 获取元素的位置不需要给参数，返回对象，对象中有属性 left 和 top
								设置元素的位置，需要设置一个有left和top属性的对象作为参数
			操作的是元素在整个页面（根元素）上的位置
            
position() 只能获取位置，无法设置；获取元素在包含块上的位置。 

scrollLeft()	获取或设置元素内容的位置；相当于原生DOM的scrollLeft属性

scrollTop()     获取或设置元素内容的位置；相当于原生DOM的scrollTop属性

③ 元素的尺寸

width() / height()  获取或设置元素内容的大小
innerWidth() / innerHeight() 获取或设置元素内容+内边距的大小
outerWidth() / outerHeight() 获取或设置元素总的大小（内容+内边距+边框）

六 jQuery 中的事件机制

页面对不同访问者的响应叫做事件。

JQuery中的事件有很多，有可以通过鼠标触发的，也有通过键盘触发的，当然还有典型的页面加载事件。这些事件都能通过JQuery代码来实现，而且相比JaveScript代码会更简洁，代码量也更少一些，

6.1 绑定事件

① 事件名作为方法

$(dom).click(callback)

$("button").click(function () {
        console.log("单击")
    })

② on 方法监听事件

$(dom).on('事件名', callback)

 $("button").on("dblclick",function () {
        console.log("on 双击")
    })

③ 事件只监听一次

$(dom).one('事件名', callback)

$("button").one("click",function () {
        console.log("单击，只能触发一次")
    })

6.2 解除事件绑定

$(dom).off()

off() 可以指定要解除的事件，如果没有参数解除元素上所有的事件
不论是任何方式添加的事件，off() 都可以解除

 $("button").eq(1).on("click",function () {
        console.log("on-->click");
    })
    $("button").eq(3).click(function () {
        $("button").eq(0).off("click").off("dblclick")
        $("button").eq(1).off("click")
    })

6.3 使用代码触发事件

① 第一种方式 把事件作为方法调用

$(dom).click()；  // 不能有参数，触发 click 行为

② 第二种方式 使用trigger方法（推荐）

$(dom).trigger('事件名');

七 jQuery 筛选器方法

在已经获取到了元素（jQueryDOM）的时候，通过方法获取与之关联的其他元素

7.1 过滤方法

jQuery DOM 调用过滤的相关方法，会从jQueryDOM集合中取出满足条件的元素，组成的新的jQuery DOM

1. 调用过滤方法的jQueryDOM和返回的jQueryDOM，不一样，指向的元素不同。
2. 过滤方法返回的jQueryDOM是调用方法jQueryDOM的子集。

 console.log($("#one").hasClass("abc"));// false
 console.log($("#two").hasClass("my"));// true

 $("ul li").slice(1).css("border","1px solid green");  索引为1的后面都发生变化

		$("div").filter(function (index,ele) {
        console.log(index,ele,$(ele))//索引 div jqDOM
        console.log(this === ele);// true
        console.log(this.innerText)  //1 2 3
        console.log($(this).text())   //1 2 3 
    })

var arr = [1,2,3,4];
    //[1,2,3,4]
    var arr2 = arr.map(function (item) {
        return item+1;
    })
    console.log(arr2);// map非常重要重要重要 2 3 4 5 
    console.log(arr2 === arr);// false

7.2 查找方法

7.3 串联方法

具有破坏性操作的方法： 筛选器方法

不具有破坏性操作的方法： css() addClass() removeClass() 等

7.4 其他方法

map(callback)		返回新的jQueyDOM，新对象中的成员取决与每次回调函数的返回值（功能与数组的map方法相似）
is(selector)        返回布尔值，判断调用该方法的jQueyDOM是否满足选择器条件

八 DOM操作：元素的创建、添加、删除、克隆

8.1 内部插入（添加子元素）

append()	子元素添加到最后面，父元素调用添加子元素，参数是子元素； 参数形式：原生DOM、jQueryDOM、html字符串
appendTo()	子元素调用插入到父元素中，参数是父元素； 参数形式：原生DOM、jQueryDOM、选择器（字符串）
prepend()   子元素添加到最前面
prependTo()	

$box.append('<p>');
$('<p>').appendTo($box)

8.2 外部插入(添加兄弟元素)

after()				已经存在的元素调用
insertAfter()		新元素调用
before()
insertBefore()

8.3 包裹

wrap()		给jQueryDOM中的每个元素都添加一父元素
wrapAll()   给jQueryDOM中的元素添加一个共同的父元素
wrapInner()	在元素和资源股或内容至今包裹一层元素
unwrap()	删除父元素

是字符串，加￥是jq对象来使用

8.4 替换

repalceWith()	旧的元素调用，参数是新元素； 新的会替换掉旧的。
replaceAll()	新的元素调用，参数是旧的

二者区别同 append 和 appendTo 的区别是一样的！

旧元素.replaceWith(新元素)
新元素.replaceAll(旧元素)

8.5 删除

remove和detach的区别：

都有返回值

8.6 克隆

clone()

clone()方法中传递参数true,它的含义是复制元素的同时复制元素所绑定的事件,否则不会复制事件

九 属性和样式操作

9.1 属性操作

① 属性操作

prop() 和 attr() 只有一个参数，获取某个属性的值； 两个参数是设置

获取属性值，只获取jQueryDOM集合中第一个元素的属性值。

设置属性值，jQueryDOM集合中所有的元素都会被设置。

prop设置的removeProp才能删除

attr 方法与 prop 方法有什么区别

prop 获取或设置内置属性

attr 获取或设置写在标签上的属性

② data- 开头的自定义属性

data()	获取或设置 data- 开头的自定义属性

③ 类名操作

addClass()    为每个匹配的元素添加指定的类名
removeClass() 从所有匹配的元素中删除全部或者指定的类
toggleClass() 如果存在（不存在）就删除（添加）一个类
hasClass()	返回布尔值 检查当前的元素是否含有某个特定的类，如果有，则返回true

④ 代码/文本/值

html()		获取或设置元素中的html内容 类似于原生DOM的 innerHTML
text()		获取或设置元素中的文本内容 类似于原生DOM中 textContent
val()		获取或设置表单控件的值

没有参数是获取，有参数是设置！

val和value使用时，val没有值就是清空value的值。defaultvalue默认值

 $("input[name=userName]").focus(function () {
        // console.log("获得焦点",$(this).val())
        if($(this).val() === "请输入你的用户名"){
            $(this).val("")
        }
    }).blur(function () {
        console.log("失去焦点",this.value,this.defaultValue)
        if($(this).val() === ""){
            $(this).val("请输入你的用户名")
        }
    })

9.2 样式操作

① css 方法

// css 设置样式
$('#box').css('background', '#f90');

// 使用 css 方法同时设置多个 css 样式
$('#box').css({
    'background': '#ccc',
    'box-shadow': '3px 3px 3px red'
});

 // 获取元素的样式  注意获取的是计算样式
console.log($('#box').css('border'));
console.log($('#box').css('font-size'));

② 元素的位置

offset()	设置或者获取元素的位置； 获取元素的位置不需要给参数，返回对象，对象中有属性 left 和 top
								设置元素的位置，需要设置一个有left和top属性的对象作为参数
			操作的是元素在整个页面（根元素）上的位置
            
position() 只能获取位置，无法设置；获取元素在包含块上的位置。 

scrollLeft()	获取或设置元素内容的位置；相当于原生DOM的scrollLeft属性

scrollTop()     获取或设置元素内容的位置；相当于原生DOM的scrollTop属性

③ 元素的尺寸

width() / height()  获取或设置元素内容的大小
innerWidth() / innerHeight() 获取或设置元素内容+内边距的大小
outerWidth() / outerHeight() 获取或设置元素总的大小（内容+内边距+边框）

十 jQuery 中的事件机制

页面对不同访问者的响应叫做事件。

JQuery中的事件有很多，有可以通过鼠标触发的，也有通过键盘触发的，当然还有典型的页面加载事件。这些事件都能通过JQuery代码来实现，而且相比JaveScript代码会更简洁，代码量也更少一些，

10.1 绑定事件

① 事件名作为方法

$(dom).click(callback)

$("button").click(function () {
        console.log("单击")
    })

② on 方法监听事件

$(dom).on('事件名', callback)

 $("button").on("dblclick",function () {
        console.log("on 双击")
    })

③ 事件只监听一次

$(dom).one('事件名', callback)

$("button").one("click",function () {
        console.log("单击，只能触发一次")
    })

10.2 解除事件绑定

$(dom).off()

off() 可以指定要解除的事件，如果没有参数解除元素上所有的事件
不论是任何方式添加的事件，off() 都可以解除

 $("button").eq(1).on("click",function () {
        console.log("on-->click");
    })
    $("button").eq(3).click(function () {
        $("button").eq(0).off("click").off("dblclick")
        $("button").eq(1).off("click")
    })

10.3 使用代码触发事件

① 第一种方式 把事件作为方法调用

$(dom).click()；  // 不能有参数，触发 click 行为

② 第二种方式 使用trigger方法（推荐）

$(dom).trigger('事件名');

riggleHandler:句柄：干什么事，去干什么，不支持连缀写法

triggerHandler(type, [data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡
这个方法的行为表现与trigger类似，但有以下三个主要区别：

• 第一，他不会触发浏览器默认事件。
• 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
• 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

10.4 事件委托（委派）

$(dom).on('事件名', 'selector', callback);

思路与原生js实现委托是一致，也是把事件添加到祖先元素上，再判断目标元素。

$("button").click(function () {
        //console.log($("ul li").length);
        $("<li>").text($("ul li").length+1)
            .appendTo($("ul"));
    })
    $("ul").on("click","li",function () {
        $(this).css({
            border:"1px solid red"
        })
    })

10.5 事件切换

10.6 jQuery 特有的事件

hover()		鼠标进入和离开元素都触发，mouseenter 和 mouseleave 的结合
focusin()	监听给表单控件的父元素，表单控件获取焦点，就触发
focusout()  监听给表单控件的父元素，表单控件失去焦点，就触发

原生的 js 事件，jquey 基本都有

//1.7版js
$("#app").focusin(function () {
        console.log(123,this);
        $(this).css({
            background:"green"
        })
    }).focusout(function () {
        $(this).css({
            background:"yellow"
        })
    })

10.7 事件列表

鼠标事件：
click([[data],fn])    单击
dblclick([[data],fn])    双击
mousedown([[data],fn])    鼠标按键按下
mouseup([[data],fn])    鼠标按键抬起
mousemove([[data],fn])    鼠标移动
mouseover([[data],fn])    鼠标悬停在元素
mouseout([[data],fn])    鼠标离开元素
mouseenter([[data],fn])    当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave([[data],fn])    当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

表单事件：
blur([[data],fn])    失去焦点
focus([[data],fn])    获取焦点
change([[data],fn])    变化
select([[data],fn])    输入框文本被选中
submit([[data],fn])    表单提示时
focusin([data],fn)    当元素获得焦点时，触发 focusin 事件。 focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况
focusout([data],fn)    当元素失去焦点时触发 focusout 事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

键盘事件：
keydown([[data],fn])    键盘按键按下
keypress([[data],fn])    键盘按键按下，只有可输入字符按键才能触发
keyup([[data],fn])    键盘按键抬起

文档和窗口事件：
resize([[data],fn])    窗口尺寸变化
scroll([[data],fn])    窗口滚动
unload([[data],fn])    离开文档 1.8-

图片事件：
error([[data],fn])    加载错误 1.8-

10.8 事件对象

• 属性

event.currentTarget    在事件冒泡阶段中的当前DOM元素
event.data    当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind
event.delegateTarget    1.7+ 当currently-called的jQuery事件处理程序附加元素
event.namespace    当事件被触发时此属性包含指定的命名空间
event.pageX    鼠标相对于文档的左边缘的位置
event.pageY    鼠标相对于文档的顶部边缘的位置
event.relatedTarget    在事件中涉及的其它任何DOM元素
event.result    这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined
event.target    最初触发事件的DOM元素
event.timeStamp    返回事件触发时距离1970年1月1日的毫秒数
event.type    事件类型
event.which    针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮

• 方法

event.preventDefault()    阻止默认事件行为的触发
event.isDefaultPrevented()    根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值
event.stopPropagation()    防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
event.isPropagationStopped()    检测 event.stopPropagation() 是否被调用过
event.stopImmediatePropagation()    阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上
event.isImmediatePropagation()    检测 event.stopImmediatePropagation() 是否被调用过

10.9 常用Event 对象

jQuery 事件的回调函数中也可以获取都 event 对象，与原生的 Event 对象类似，属性方法都是一样的。

属性：
	clientX/clientY
	pageX/pageY
	offsetX/offsetY	
	screenX/screenY
	button
	target
	keyCode	按键的ascii码
	which   按键的ascii码
	key		按键的值
	
方法：
	preventDefault()	阻止默认行为
	stopPropagation()		阻止冒泡

注意：

jQuery 事件的回调函数中， return false 既可以阻止默认行为右可以阻止冒泡！

原生 js 事件回调函数中 return false 只能阻止默认行为！

十一 动画效果

11.1 基本动画效果

show([s,[e],[fn]])        显示隐藏的匹配元素
hide([s,[e],[fn]])        隐藏显示的元素
toggle([s],[e],[fn])    如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

1. 方法如果没有参数就是瞬间隐藏和显示，设置动画的执行时间作为参数，用数字（单位毫秒）或者关键字
2. 动画执行过程中，变化的样式有：width/height 内边距、外边距、边框宽度、opacity

jQuery 动画的特点：

1. 给元素调用了多个动画方法，会按照顺序依次执行，前面动画执行结束了后面动画才开始
2. 如果操作需要在动画执行结束之后进行，动画方法第二个参数是回调函数，动画执行结束之后回调函数会执行。

参数详解：

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing    : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn        : 在动画完成时执行的函数，每个元素执行一次。

opacity    : (用户fadeTo)一个0至1之间表示透明度的数字。

params    : 一组包含作为动画属性和终值的样式属性和及其值的集合

 // 显示
    $("button").eq(0).click(function () {
        $("#app").show(1000);
    })
    // 隐藏
    $("button").eq(1).click(function () {
        // 指定完成动画的时间单位毫秒。
        // $("#app").hide("fast");// 快  200
        // $("#app").hide("slow");// 慢  600
        // $("#app").hide("normal");// 400

11.2 滑动效果

slideDown([s],[e],[fn])        通过高度变化（向下增大）来动态地显示所有匹配的元素
slideUp([s,[e],[fn]])        通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideToggle([s],[e],[fn])    通过高度变化来切换所有匹配元素的可见性

1. 设置动画的执行时间作为参数，用数字（单位毫秒）或者关键字； 没有参数也有动画执行事件。
2. 动画执行过程中，变化的样式有：高度、上下内边距、上下外边距。

// slideUp
    $("button").eq(0).click(function () {
       // $("#app").slideUp("fast");
       $("#app").slideUp(2000);
    })
    // slideDown
    $("button").eq(1).click(function () {
        $("#app").slideDown(2000);
    })
    // slideToggle
    $("button").eq(2).click(function () {
        $("#app").slideToggle(2000);
    })

11.3 淡入淡出效果

fadeIn([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([s],[e],[fn])        通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]])    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo([[s],o,[e],[fn]])    把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

1. 设置动画的执行时间作为参数，用数字（单位毫秒）或者关键字； 没有参数也有动画执行事件。
2. 动画执行过程中，变化的样式有：opacity。

 // 淡入
    $("button").eq(0).click(function () {
        $("#app").fadeIn(1000);
    })
    // 淡出
    $("button").eq(1).click(function () {
        $("#app").fadeOut(1000);
    })
    // 切换
    $("button").eq(2).click(function () {
        $("#app").fadeToggle(1000);
    })
    $("button").eq(3).click(function () {
        $("#app").fadeTo(1000,0);
    })

案例:图片上下自由切换

  $(function () {
        setInterval(()=>{
            $(".appContainer li").last().fadeTo(0,0).hide().prependTo(".appContainer ul").slideDown(200).fadeTo(300,1);
        },3000)
    })

11.4 自定义动画

animate(params, speed [,fn])

第一个参数是对象，指定变化的 css 属性，只有以长度位置的css属性才能有效果

属性的值可以设置为 toggle, 会来回切换

// 隐藏
    $("button").eq(0).click(function () {
        $("#app").animate({
            width:0,
            height:0
        },2000);
    })

11.5 动画控制的方法

stop()	停止执行当前元素上的动画，动画执行到哪里就停到哪里
finish()	停止当前元素上的动画，队列中所有的动画会被快速完成，处于最后的状态
delay(time)	延迟执行

注意: 因为动画队列的存在，给某个元素执行了动画方法，所有的动画效果都会依次执行；所以，我们给元素执行某个动画效果的时候先把前面的动画都停掉（stop）

 $("button").eq(1).click(function () {
        $("#app").stop();
    })
    $("button").eq(2).click(function () {
        $("#app").finish();
    })

    $("button").eq(3).click(function () {
        $("#app").hide(1000).delay(1000).slideDown(1000);
    })

11.6 设置

//关闭页面上所有的动画
jQuery.fx.off = true;

十二 工具和其他操作

12.1、 jQuery 对象访问

each(callback)                遍历jquery dom
size()                        1.8- 返回dom集合中的个数 同length
length                        返回dom集合中的个数
selector                    返回选择器
context                        返回原生js dom
get([index])                获取dom集合中一个
index([selector|element])    索引值
toArray()                    转为纯数组

12.2 、数组和对象操作

$.each(object,[callback])        遍历数组 对象
$.extend([d],tgt,obj1,[objN])    合并对象 合并到第一个参数
$.grep(array,fn,[invert])        过滤数组
$.makeArray(obj)                把类数组对象变为数组
$.map(arr|obj,callback)            操作数组的每一单元
$.inArray(val,arr,[from])        判断值是否在数组中
$.merge(first,second)            合并数组
$.unique(array)                    去重
$.parseJSON(json)                解析json
$.parseXML(data)                解析xml

12.3、 类型检测

$.contains(c,c)            判断一个元素是否是另一个元素的后代吗元素
$.type(obj)                判断类型
$.isarray(obj)            是否为数组
$.isFunction(obj)        是否是function
$.isEmptyObject(obj)    是否为空对象
$.isPlainObject(obj)    是否为纯粹的对象
$.isWindow(obj)            是否是window对象
$.isNumeric(value)        1.7+是否是number

12.4、 其他操作

$.trim(str)                    去除左右两边的空格
$.param(obj,[traditional])    把对象或数组 转为 特殊格式的字符串 序列化

十三 jQuery 插件

13.1、 jQuery 插件的网站

• http://plugins.jquery.com/ 官网
• http://www.jq22.com/ jQuery插件库
• http://www.htmleaf.com/ jQuery 之家
• http://www.jq-school.com/ jQuery-school

13.2、 经典jQuery插件

13.2.1、 select2 下拉框搜索插件

• 官网 https://select2.org/

• github https://github.com/select2/select2

• 用法

  导入css
  导入js
  

  //调用插件 用法一
  $("#mySelect01").select2();
  
  //调用插件 用法二
  $("#mySelect02").select2({
    width: 150,
    data: [
      {id:1, text:"小明"},
      {id:2, text:"小强"},
      {id:3, text:"小李"},
      {id:4, text:"小张"},
      {id:5, text:"小王"},
    ]
  });
  
  //调用插件 用法三
  $("#mySelect03").select2({
        width: 150,
        ajax: {
            url: "http://unclealan.cn/address.php",
            dataType: "json",
            processResults: function(data){
                //对响应内容进行处理
                var resList = [];
                $.each(data, function(index, item){
                    resList.push({id:item.id, text:item.name})
                });
                //返回结果
                return {
                    results: resList,
                    "pagination": {
                      "more": true
                    }
                 }
             }
         }
    })
  

13.2.2、 datetimepicker 时间日期插件

• github https://github.com/xdan/datetimepicker

• 文档 https://xdsoft.net/jqplugins/datetimepicker/

• 用法

  //设置语言
  $.datetimepicker.setLocale('zh');
  //调用插件
  $(dom).datetimepicker({
    datepicker: true,
    timepicker: true,
    format:"Y-m-d H:i",
    value: "2025-12-23"，
    ....
  });
  

13.2.3、 fullpage 全屏滚动插件

• 官网 https://alvarotrigo.com/fullPage/zh/

• github https://github.com/alvarotrigo/fullpage.js/

• 用法

  <!--HTML部分-->
  <div id="fullpage">
      <div class="section"></div>
      <div class="section">
          <div class="slide"></div>
          <div class="slide"></div>
          <div class="slide"></div>
      </div>
      <div class="section"></div>
      <div class="section"></div>
  </div>
  自定义的导航 卸载包裹元素的外面
  
  <!--JS部分-->
  <script>
      $("#fullpage").fullpage({
          navigation: true,
          sectionsColor: ["orange", "skyblue", "pink", "#369"],
          navigationTooltips: ['第一页', '第二页','第三页', '第四页'],
          showActiveTooltip: false,
          slidesNavigation: false,
          anchors: ["firstPage", "secondPage", "thirdPage", "forthPage"]
      });
  </script>
  

13.2.4、 lazyload 图片懒加载

• 官网 https://appelsiini.net/projects/lazyload/

• github https://github.com/tuupola/jquery_lazyload/tree/2.x

• 用法

  $("#lazyWrapper img").lazyload()
  

13.2.5、 layer 弹窗插件

• 官网 http://layer.layui.com/?alone

• github https://github.com/sentsin/layer/

• 用法

  layer.alert()
  layer.confirm()
  layer.msg()
  layer.load()
  layer.tips()
  layer.colse()
  layer.open({
    type: ,
    title: ,
    content: 
    ....
  })
  ...
  

13.2.6、 nice validator 表单验证

• 官网 https://validator.niceue.com/

• github https://github.com/niceue/nice-validator

• 用法

  $("form").validator({
  
  })
  

13.2.7、 jQuery-easing

• 官网 http://gsgd.co.uk/sandbox/jquery/easing/

• github https://github.com/gdsmith/jquery.easing

• 用法

  $(dom).hide(speed, easing, fn)
  

13.3、 自定义jQuery 插件

jQuery.fn.extend() 给jQueryDom扩展方法

$.fn.extend({
  方法名:function(){}
})
//或者
$.fn.方法名 = function(){

}

jQuery.extend() 给jQuery 对象本身扩展方法

$.extend({
   方法名: function(){
   }
})

13.4、 jQuery UI

• 官网 https://jqueryui.com/

13.5、 jQueryMobile

• 官网 https://jquerymobile.com/
• 教程 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html

13.6、 Sizzle

• 官网 https://sizzlejs.com/

13.7、 Zepto

• 官网 http://zeptojs.com/
• 与jquery区别： https://www.zhihu.com/question/25379207