颜色插件 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>