jQuery（四）动画、类数组对象操作、添加自定义函数、封装自定义插件-灵析社区
青椒肉丝加点糖一、动画
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对象。
}阅读量：417
点赞量：0
收藏量:0