dalay():延迟
delay() 方法对队列中的下一项的执行设置延迟。
语法:
$(selector).delay(speed,queueName)
链式编程
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。 <style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
<div class="three">第三个div</div>
<div>第四个div</div>
<div>第五个div</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(".three").css("backgroundColor", "red")
.siblings().css("color", "red")
.end().css("color", "blue");
</script>each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});【案例：不同的透明度.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style: none;
}
li {
width: 200px;
height: 200px;
background-color: red;
margin: 0 20px;
float: left;
text-align: center;
line-height: 200px;
font-size: 22px;
}
</style>
</head>
<body>
<ul>
<li>燃烧我的卡路里</li>
<li>越过山丘</li>
<li>买了否冷</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
//设置li的透明度，从左往右依次递减
// rgba():背景颜色的透明度 opacity：设置盒子的透明度
var $li = $("li");
// for (var i = 0; i < $li.length; i++) {
// $li.eq(i).css("opacity", (i + 1) / 10);
// }
//回调函数中的参数：①索引，②数组元素（是一个js对象）
$li.each(function (index, element) {
// console.log(index + "======" + element);
// console.log(element)
$(element).css("opacity", (index + 1) / 10);
});
</script>
</body>
</html>
多库共存
jQuery使用作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.
var c = $.noConflict();//释放$的控制权,并且把$的能力给了cconsole.log($);
//释放$的控制权
var cc = $.noConflict();//将$释放，cc代替$释放之前的功能
console.log($);//undefined
console.log(cc);jquery.color.js
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
使用插件的步骤
1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<!--第一步：导入插件的库，注意一定要导入在jquery库的下面-->
<script src="js/jquery.color.js"></script>
<script>
$("div").animate({"backgroundColor":"green"}, function () {
console.log("执行完成了");
});
</script>jquery.lazyload.js(懒加载插件):
一、什么是图片滚动加载？
通俗的讲就是：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
二、为什要使用这个技术？
比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长，如果js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就不好办了。更为要命的是：一上来就发送百八十个请求，服务器可能就吃不消了（又不是只有一两个人在访问这个页面）。
因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）。
jQuery Lazy Load 图片延迟加载
基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。
对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。
注意事项：
需要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同，则只是一个特效而已，并不达到延迟加载的功能。
<style>
div {
height: 4000px;
}
</style>
</head>
<body>
<div></div>
<img class="lazy" data-original="images/see.jpg" width="300" height="300">
<!--<img src="images/see.jpg" alt="">-->
<script src="jquery-1.12.4.js"></script>
<script src="js/jquery.lazyload.min.js"></script>jQuery UI 实例 - 拖动（Draggable） 排序（Sortable）缩放（Resizable）:
例:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="jquery-ui.css">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.drag-wrapper {
width: 400px;
margin: 50px auto 0;
/*border: 10px solid #000;*/
}
.drag-bar {
height: 40px;
font-size: 20px;
font-weight: bold;
line-height: 40px;
text-align: center;
background-color: #E6E6E6;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: move;
}
.resize-item {
height: 212px;
border: 1px solid #e6e6e6;
}
.sort-wrapper {
height: 100%;
overflow: hidden;
}
.sort-item {
list-style: none;
padding-top: 10px;
}
.sort-item li {
height: 40px;
line-height: 40px;
padding-left: 20px;
cursor: pointer;
}
.sort-item li:hover {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<div class="drag-wrapper">
<div class="drag-bar">可拖动、排序、变形的新闻模块</div>
<div class="resize-item">
<div class="sort-wrapper">
<ul class="sort-item">
<li>这是第1条新闻!</li>
<li>这是第2条新闻!</li>
<li>这是第3条新闻!</li>
<li>这是第4条新闻!</li>
<li>这是第5条新闻!</li>
<li>这是第6条新闻!</li>
<li>这是第7条新闻!</li>
<li>这是第8条新闻!</li>
<li>这是第9条新闻!</li>
<li>这是第10条新闻!</li>
</ul>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function () {
$(".drag-wrapper").draggable({
handle: ".drag-bar"
});
$(".sort-item").sortable({
opacity: 0.3
});
$(".resize-item").resizable({
handles: "all"
});
})
</script>
</body>
</html>
jquery插件的实质：给jquery的原型上增加方法
制作手风琴插件 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 1200px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul{
width: 101%;
}
ul li {
width: 240px;
float: left;
height: 400px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//定义一个数组，用于存放颜色
var colors = ["pink", "yellow", "blue", "red", "green"];
var $li = $("li");
//每个li添加背景颜色
$li.each(function (i, element) {
$(element).css("backgroundColor", colors[i]);
});
//li的鼠标移入事件
$li.on("mouseenter", function () {
$(this).stop().animate({width: 800})
.siblings().stop().animate({width: 100});
});
$li.on("mouseleave", function () {
$li.stop().animate({width: 240});
})
</script>
</body>
</html>jquery.accordion.js :
$.fn.accordion = function (colors, width) {
colors = colors || [];
width = width || 100;
var $li = this.find("li");
var boxWidth = this.width();
var maxWidth = boxWidth - width * ($li.length - 1);
var evgWidth = boxWidth / $li.length;
//每个li添加背景颜色
$li.each(function (i, element) {
$(element).css("backgroundColor", colors[i]);
});
//li的鼠标移入事件
$li.on("mouseenter", function () {
$(this).stop().animate({width: maxWidth})
.siblings().stop().animate({width: width});
});
$li.on("mouseleave", function () {
$li.stop().animate({width: evgWidth});
});
return this;
}封装手风琴插件测试.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 1200px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
ul {
width: 101%;
}
ul li {
width: 240px;
float: left;
height: 400px;
}
li:nth-child(1) {
background-image: url(images/1.jpg);
}
li:nth-child(2) {
background-image: url(images/2.jpg);
}
li:nth-child(3) {
background-image: url(images/3.jpg);
}
li:nth-child(4) {
background-image: url(images/4.jpg);
}
li:nth-child(5) {
background-image: url(images/5.jpg);
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>
$(function () {
//定义一个数组，用于存放颜色
var colors = ["pink", "yellow", "blue", "red", "green"];
$("#box").accordion();
$("#box").animate({width: 1200}).css("border", "10px solid red");
})
</script>
</body>
</html>
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
