jQuery插件
颜色插件
query中的animate方法是不能修改背景颜色的
可以去使用别人封装好的插件，上网查找 （例子的插件也是网上可以找到）
$("div").animate({
left:800,
backgroundColor:"red" //不能修改
},3000)
图片插件
图片加载的特点
只有img标签有src属性那么他就一定会加载 不管是隐藏还是显示，对于大型网站 图片比较多 那么一次性加载 服务器的压力会很大 而且还会影响页面渲染的时间
解决一次性加载很多图片的问题 有很多图片不在可视区域内 那么就没必要加载 可以等到它进入可视区域之后 再加载(懒加载)
怎么来控制图片的懒加载 就是直接控制src属性来控制图片的加载
懒加载的实现思路 最开始就是默认所有的图片都没有src属性 自定义属性来存储图片的真实路径 当图片进入到可视区域内 就给img的src追加内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
width: 1000px;
}
li{
width: 200px;
height: 200px;
float: left;
/* background-color: #0f0; */
margin-right:20px ;
margin-top: 20px;
}
li img{
width: 200px;
height: 200px;
}
div{
margin-bottom: 1000px;
}
</style>
</head>
<body>
<div>
<img src="img/230856-15513665364c09.jpg" >
</div>
<ul>
<li>
<img data-original ="img/56e68a922d80a.jpg " alt="">
</li>
<li>
<img data-original ="img/2.jpg " alt="">
</li>
<li>
<img data-original ="img/3.jpg " alt="">
</li>
<li class="last">
<img data-original ="img/4.jpg " alt="">
</li>
</ul>
</body>
<script src="./js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("img").lazyload({
effect:"fadeIn",
placeholder:"./img/1.jpg"
})
})
</script>
</html>
城市下拉框插件
案例：省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<select></select>
<select></select>
<select></select>
</div>
</body>
<script src="./js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/distpicker.data.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/distpicker.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("div").distpicker({
province:"湖北省",
city:"武汉市",
district:"江夏区"
})
})
</script>
</html>
自己封装的插件
给jQuery添加实例化方法(往原型里面添加方法)
给jQuery添加静态方法
表格插件
案例：表格插件案例
插件：
//jQuery-bgColor.js
(function($){
$.fn.bgColor=function(color){
//这里打印出来的this就是调用这个方法的jQuery对象
// console.log(this);
this.css("backgroundColor",color);
return this
}
})(jQuery)
//jQuery-add.js
(function($){
//给jQuery添加静态方法
$.add=function(n1,n2){
return n1+n2;
}
})(jQuery)
插件使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div></div>
</body>
<script src="./js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jQuery-bgColor.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jQuery-add.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//要给盒子添加宽和高
// $("div").width(200).height(200).css("backgroundColor","#0f0");
// console.log($("div").width(200).height(200).bgColor("#0f0")); //undefined
// 1.给jQuery添加实例化方法(往原型里面添加方法)
$("div").width(200).height(200).bgColor("#0f0").text("我是文本内容")
// 给jQuery添加静态方法
var sum=$.add(10,20);
console.log(sum);
})
</script>
</html>
tab栏插件
案例：tab栏插件案例
插件：
(function($){
/*
用来封装tab栏切换
@param obj 这个插件的方法只有一个参数 而且类型是对象
@param obj.tabHeads 是需要点击的页签的选择器
@param obj.tabHeadsClass 是当页签被选中时需要添加的类
@param obj.tabBodys 需要显示的盒子的选择器
@param obj.tabBodysClass 当盒子显示时 添加的类
@return 返回一个jQuery对象
*/
$.fn.tabs=function(obj){
// console.log(this);
var $box=this;
//给页签注册点击事件
$(obj.tabHeads).on("click",function(){
//给页签注册点击事件 那么当前被点击的这个页签添加tabHeadsClass这个类 其他的兄弟元素要移除这个类
$(this).addClass(obj.tabHeadsClass).siblings().removeClass(obj.tabHeadsClass);
//声明一个变量来保存当前被点击的页签的索引
var index=$(this).index();
//显示下方对应的盒子
$(obj.tabBodys).eq(index).addClass(obj.tabBodysClass).siblings().removeClass(obj.tabBodysClass);
})
//返回一个jQuery对象
return $box;
}
})(jQuery)
插件使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.wrapper{
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab{
border: 1px solid #ddd;
border-bottom: 0;
height: 35px;
width: 320px;
}
.tab li{
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 5px solid #fff;
}
.products{
width: 1005px;
border: 1px solid #ddd;
height: 100%;
}
.products .main{
float: left;
display: none;
}
.products .main.selected{
display: block;
}
.tab li.active{
border-color: red;
}
img{
width: 1005px;
height: 475px;
}
</style>
</head>
<body>
<div class="wrapper" id="wrapper">
<ul class="tab" id="tab-menu">
<li class="tab-item active">国际品牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品<span>◆</span></li>
</ul>
<div class="products" id="tab-main">
<div class="main selected">
<a href="#"><img src="img/1.jpg" ></a>
</div>
<div class="main">
<a href="#"><img src="img/2.jpg" ></a>
</div>
<div class="main">
<a href="#"><img src="img/3.jpg" ></a>
</div>
<div class="main">
<a href="#"><img src="img/4.jpg" ></a>
</div>
</div>
</div>
</body>
<script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/tabs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#wrapper").tabs({
tabHeads:"#tab-menu>li",
tabHeadsClass:"active",
tabBodys:"#tab-main>div",
tabBodysClass:"selected"
})
})
</script>
</html>
多库共存
查看使用的jQuery文件的版本号
console.log(jQuery.fn.jquery);
console.log(jQuery.prototype.jquery);
如果我们引入多个jQuery版本 那么后面引入的就会覆盖到前面引入的
如果我们需要使用到多个jQuery版本里面的方法或者属性 但是引入多个 会产生覆盖
解决方法 直接使用jQuery里面提供的noConflict() 就可以实现多库共存
var _$=$.noConflict();
这个方法就是把当前的$给释放了 _$ 代替 $
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script src="./js/aaa.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.查看使用的jQuery文件的版本号
// console.log(jQuery.fn.jquery);
// console.log(jQuery.prototype.jquery);
// console.log($.fn.jquery);
// console.log($.prototype.jquery);
//2.如果我们引入多个jQuery版本 那么后面引入的就会覆盖到前面引入的
// console.log($.prototype.jquery);
//3.如果我们需要使用到多个jQuery版本里面的方法或者属性 但是引入多个 会产生覆盖
// 解决方法 直接使用jQuery里面提供的noConflict() 就可以实现多库共存
// var _$=$.noConflict(); //这个方法就是把当前的$给释放了 _$代替$
// console.log($.noConflict());
// console.log($.prototype.jquery);//1.12.4
// console.log(_$.prototype.jquery);//3.5.1
// (function($){
// //在这个自执行函数里面 我们还是可以继续使用_$
// console.log($.prototype.jquery); //3.5.1
// })(_$);
//4.
var $351=$.noConflict(); //$是3.5.1 而且调用noConflict方法之后 就被释放了
// console.log($.noConflict());
// console.log($351);
var _$=$.noConflict();//此时的$ 就指的是1.12.4 又调用了一次noConflict() 那么就说明1.12.4也被释放了
// console.log( $.noConflict());
console.log(_$);
console.log($);// {name: "zs"}
</script>
</html>
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
