封装jquery

最新推荐文章于 2022-11-23 21:25:31 发布

weixin_44740410

最新推荐文章于 2022-11-23 21:25:31 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/weixin_44740410/article/details/89385933

版权

1.delay方法
delay()//动作延迟
2.each方法
each(索引,数组元素)优点:可以避免遍历
<!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: #FF6600;
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:设置盒子的透明度
$(function () {
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) {
$(element).css("opacity",(index+1)/10);
})
})
</script>
</body>
</html>

3.$命名冲突
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
console.log($);
//jquery函数
var cc=$.noConflict();//将$释放,cc代替$释放前的功能
console.log($);
console.log(cc);
cc(function () {

});
</script>
</body>
</html>

4.懒加载lazyload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 4000px;
}
</style>
</head>
<body>
<div></div>
<img class="lazy" data-original="images/1.jpg" width="300" height="300">
<script src="jquery-1.12.4.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script>
$("img.lazy").lazyload();
</script>
</body>
</html>

5.插件的实质
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
//jquery插件的实质:给jquery的原型增加方法
jQuery.prototype.sayHi=function () {
console.log("哈哈哈");
}
$("div").sayHi();
</script>
</body>
</html>

6.封装
背景颜色
$.fn.setBgColor=function (color) {
//this是jquery对象
this.css("backgroundColor",color)
}

手风琴
$.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.each(function (i,element) {
$(element).css("backgroundColor",colors[i]);
})
$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;
}

weixin_44740410

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装jquery

1.delay方法delay()//动作延迟2.each方法each(索引,数组元素)优点:可以避免遍历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style&gt...
复制链接

扫一扫