一、动画
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 //jQuery var 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代替this var $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对象。 }
