jQuery（四）动画、类数组对象操作、添加自定义函数、封装自定义插件
目录
一、动画
1. 简单动画
| $元素.show() $元素.hide() $元素.toggle() |
显示隐藏 |
| $元素.slideUp() $元素.slideDown() $元素.slideToggle() |
上滑下滑 |
| $元素.fadeIn() $元素.fadeOut() $元素.fadeToggle() |
淡入淡出 |
举例：
-
<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自定义函数中：
文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。
原文链接：majinjian.blog.csdn.net/article/details/120281922
- 点赞
- 收藏
- 关注作者
评论（0）