目录
一、动画
1. 简单动画
2. 万能动画
3. 排队和并发
4. 选择器
5. 停止动画
6. 动画播放后，自动执行
二、类数组对象操作
1. 遍历
2. 查找
三、添加自定义函数
四、封装自定义插件
一、动画
1. 简单动画
举例：
<body><h1>jQuery动画函数——显示隐藏动画</h1><button id="btn1">显示/隐藏div</button><div id="target"><p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></p></div><script src="js/jquery-1.11.3.js"></script><script>//点按钮，执行简单动画效果$("#btn1").click(function () {$("#target").fadeToggle();})</script></body>
举例：显示隐藏部分品牌；
<body><ul id="list"><li>0尼康(234)</li><li>1佳能(22)</li><li>2索尼(932)</li><li>3宾得(11)</li><li>4爱国者(3234)</li><li>5欧巴(32)</li><li>6海鸥(2334)</li><li>7卡西欧(334)</li><li>8三星(834)</li><li>9松下(234)</li><li>10其它品牌(2343)</li></ul><button data-toggle="brandlist">收起</button><script src="js/jquery-1.11.3.js"></script><script>//DOM 4步//1. 查找触发事件的元素// 点击按钮触发事件$("button")//2. 绑定事件处理函数.click(function () {//3. 查找要修改的元素$("li:gt(4):not(:last-child)").toggle()//4. 修改元素var $this = $(this)if ($this.html() === "收起") {$this.html("更多")} else {$this.html("收起")}})</script></body>
2. 万能动画
能对多种 css 属性应用动画效果，但只支持单个数值的 css 属性，不支持颜色过渡和 css3 变换。
//启动动画$元素.animate({css属性名: 目标值},持续时间ms)//停止动画$元素.stop()
举例：
<body><h1>animate</h1><button id="btn1">启动动画</button><div id="d1">abcd</div><script src="js/jquery-1.11.3.js"></script><script>//点按钮，对任意一个css属性，应用动画效果$("#btn1").click(function () {$("#d1").animate({top: 500,left: 300,width: 500,height: 300,borderRadius: 150}, 2000)})</script></body>
3. 排队和并发
（1）排队：多个 css 属性先后依次变化；同一个元素，先后调用多个 animate 时，多个 animate 中的 css 属性会排队变化。
（2）并发：多个 css 属性同时变化，放在一个 animate 中的多个 css 属性默认同时变化。
4. 选择器
:animated //专门匹配正在播放animate动画
5. 停止动画
$元素.stop() //默认停止当前一个animate动画，动画队列中后续animate继续执行$元素.stop(true) //既停止当前animate，又清空后续动画队列
6. 动画播放后，自动执行
animate()还有第三个实参值——回调函数，凡是放在animate()中第三回调函数参数中的代码，只能在动画结束后自动执行。格式如下：
$元素.animate({ css属性: 目标值 },动画持续时间,function(){ ... } //第三回调函数);
举例：点星星，播放动画；
<body><img id="s1" src="imgs/star.png"><br /><img id="s2" src="imgs/star.png"><br /><img id="s3" src="imgs/star.png"><br /><img id="s4" src="imgs/star.png"><br /><script src="js/jquery-1.11.3.js"></script><script>//s1在屏幕左上角的小星星， 点击后从左移动到屏幕右边$("#s1").click(function () {var $this = $(this)// 如果动画正在执行，则让他停止if ($this.is(":animated")) {$this.stop()// 否则执行} else {$(this).animate({left: 400})}});//s2在屏幕左上角的小星星，点击后从左移动到屏幕右边，再移动到下边——走直角$("#s2").click(function () {var $this = $(this)if ($this.is(":animated")) {$this.stop(true);} else {$(this).animate({left: 400}).animate({top: 400})}})//s3在屏幕左上角的小星星，点击后从左上角移动到屏幕右下边，走斜线$("#s3").click(function () {$(this).animate({left: 400,top: 400})})//s4点击小星星，变大、变淡.... 直至消失$("#s4").click(function () {alert("123456");$(this).animate({width: 175,opacity: 0}, 5000,function () {alert(`我是第三回调函数中的代码，最后执行`);})})</script></body>
二、类数组对象操作
1. 遍历
//js数组 arr.forEach(function(当前元素, 当前下标, 当前数组){ })//jQuery$jQuery查找结果.each(function(当前下标, 当前DOM元素){ })
举例：遍历找到的每个元素，并执行相关操作；
<body><ul id="list"><li>98</li><li>85</li><li>33</li><li>99</li><li>52</li></ul><script src="js/jquery-1.11.3.js"></script><script>//请给每个不足60分的成绩+10分，并将超过90分的成绩用绿色背景标识出来$("ul>li").each(function (i, li) {var $li = $(li);// 获取当前元素的内容var n = parseInt($li.html());if (n < 60) {$li.html(n + 10)} else if (n >= 90) {$li.css("background-color", "green")}})</script></body>
2. 查找
//js数组var i=arr.indexOf(要找的元素值);//在数组arr中查找"要找的元素值"出现的下标位置i，如果没找到，返回-1//jQueryvar i=$jq查找结果.index(要找的DOM元素)
举例：五星评价；
<body><h3>请打分</h3><ul class="score"><li></li><li></li><li></li><li></li><li></li></ul><script src="js/jquery-1.11.3.js"></script><script>//获得当前单击的li在所有li中的位置i,i及其执行的都变为红色，i之后的都变为白色//DOM 4步//1. 查找触发事件的元素$("ul")//2. 绑定事件处理函数.click(function (e) {//e.target代替thisvar $tar = $(e.target)//只有点在li上才能触发事件if ($tar.is("li")) {var i = $("ul>li").index($tar);$(`ul>li:lt(${i+1})`).css("background-color", "yellow");//让>i位置的所有li背景变为白色$(`ul>li:gt(${i})`).css("background-color", "#fff");}})//3. 查找要修改的元素//4. 修改元素</script></body>
三、添加自定义函数
如果经常使用的一个功能，jquery 中没有提供，就可以自定义函数加入到 jquery。格式：
//向jquery原型对象中添加一个自定义函数jQuery.prototype.自定义函数=function(){ }//使用自定义函数$查找结果.自定义函数()
举例：封装自定义函数，对找到的所有元素内容求和；
<body><ul><li>85</li><li>91</li><li>73</li><li>59</li></ul><script src="js/jquery-1.11.3.js"></script><script>//假设在项目中经常需要对找到的所有元素求和// 自定义函数jQuery.prototype.sum = function () {// 定义初始化值var result = 0;// 遍历数组中的元素值for (var i = 0; i < this.length; i++) {// 将当前元素累加到初始化值上result += parseInt(this[i].innerHTML);}return result;}// 调用自定义函数console.log($("ul>li").sum());</script></body>
四、封装自定义插件
自定义插件是页面中一块可反复使用的独立的功能区域，只要页面中一块独立的功能区域，可能被反复使用时，都要封装为插件，然后再反复使用插件。
jQuery 官方插件库 jqueryui，在jQueryui官网下载即可；下载后引入插件库的文件：
<link rel="stylesheet" href="css/jquery-ui.css"> //1<script src="js/jquery-1.11.3.js"> //2<script src="js/jquery-ui.js"> //3//注意2、3顺序不可颠倒
插件的使用：
a. 按照插件要求，自行编写 HTML 内容和结构，不要加任何 class；
b. 用$("选择器")查找插件的父元素，对插件父元素调用 jquery ui 提供的专门的插件函数。
举例：用 jquery ui 快速生成手风琴；
<head><title> new document </title><meta charset="utf-8"><link rel="stylesheet" href="css/jquery-ui.css"><script src="js/jquery-1.11.3.js"></script><script src="js/jquery-ui.js"></script></head><body><h1>jQueryUI：Widgets —— Accordion</h1><div id="my"><div>《西游记》简介</div><div>一个和尚和四个动物的故事</div><div>《水浒传》简介</div><div>105个男人和三个女人的故事</div><div>《红楼梦》简介</div><div>一个男人和一群女人的故事</div></div><script>// 调用accordion$("#my").accordion();</script></body>
除了使用 jQuery 的官方插件库，我们也可以自定义插件：
a. 将原页面中插件相关的 css 代码提取到一个独立的 css 文件中保存；
b. 在独立的js中，向 jQuery 的原型对象中添加一个自定义的插件函数；
jQuery.prototype.自定义插件函数=function(){ }
自定义之后的调用与 jQuery ui 是一致的。
举例如下：
补充：this 7种
（1）obj.fun() fun中的this指 .前的obj对象（谁调用指谁）；
（2）new Fun() Fun中的this指new创建的新对象；
（3）fun() 或 (function(){ ... })() 或 回调函数 thisz默认指windozw；
（4）原型对象(prototype)中的this指将来调用这个共有函数的.前的某个子对象（谁调用指谁）；
（5）访问器属性中的this指代访问器属性所在的当前对象；
（6）DOM和jq中事件处理函数中的this指正在触发事件的当前DOM元素对象；
（7）在jQuery自定义函数中：
jQuery.prototype.共有方法=function(){ //this指将来调用这个共有方法的.前的$(...)jq对象。}
