一.链式编程
为什么jQuery运行链式编程 ，让我们的代码（方法）连续不间断书写（连续调用）其实主要还是jQuery很多的函数执行完毕之后，
都会返回一个jQuery对象
因为获取操作的时候，会返回获取到的相应的值，无法返回jQuery对象
其实函数内部返回的就是一个jQuery对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .bd{ 8 border:10px solid #f00; 9 } 10 </style> 11 <script src="lib/jquery-1.12.2.js"></script> 12 <script> 13 $(document).ready(function () { 14 $('.box').css({width:200,height:200,background:'pink'}) 15 .addClass('bd') 16 .animate({width:400}) 17 .attr({title:'鼠标提示文本'})// 设置 18 .attr('title') // 获取的值是一个字符串 ，所以不能连续书写了 19 }); 20 /*每次选择完盒子都会有一个jQuery对象*/ 21 console.log($(' $(\'.box\')',$('.box'))); 22 console.log($(' $(\'.box\').addClass(\'bd\')',$('.box').addClass('bd'))); 23 24 25 /* jS函数，执行完毕之后，默认返回值undefined*/ 26 var obj = { 27 name : '小明', 28 age : 18, 29 sayHi : function () { 30 alert(this.name+'说，我今年'+this.age+'岁了'); 31 return this; // 链式编程秘密 32 }, 33 34 // 设置的时候，我们可以return this实现链式编程 35 setAttr:function (key,val) { 36 this[key] = val; 37 return this; 38 } , 39 40 // 获取的时候,由于你要返回之歌属性的值,return 被占用了,所以就不可以连续书写了 41 getAttr:function (key) { 42 return this[key]; 43 } 44 } 45 46 //console.log(obj); 47 obj.sayHi(); // 返回undefined 48 // obj.sayHi().sayHi(); // 没有设置返回值前会报错, underfined.sayHi() 报错 49 // 解决方法 50 // 在obj 里面sayHi设置返回值 return this; 51 obj.sayHi().sayHi();// 不报错 52 // 没有设置返回值前会报错 53 obj.sayHi().sayHi().setAttr('sex',"男").setAttr('number',"666"); // 报错 54 /*解决方法*/ 55 // 在setAttr里面设置返回值 56 obj.sayHi().sayHi().setAttr('sex',"男").setAttr('number',"666"); // 没有报错了 57 }); 58 </script> 59 </head> 60 <body> 61 <div class="box"></div> 62 </body> 63 </html>
1."沙箱"函数的4种写法：
1 ;(function () { 2 // alert("11"); 3 })(); 4 5 ;(function () { 6 // alert("11"); 7 }()); // 括号写在外面里面都行 8 9 ;(function ($) { 10 // console.log($ === jQuery); 11 })($); // 写两个$是确定内部$就是jQuery对象 12 13 ;(function ($) { 14 // console.log($ === jQuery); 15 })(jQuery);
2.静态方法的定义,创建和使用
1 /** 2 * $.method = fn 静态方法 （不需要实例，直接调用） 3 * 如: $.trim(str) 4 * $.fn.method = fn 实例方法(使用的时候需要先实例对象) 5 * $('div) 这个操作其实就是实例了一个jQuery对象 6 * */ 7 ;(function ($) { 8 9 //静态方法的创建 10 $.add = function (a,b) { 11 return a+b ; 12 } 13 })(jQuery); 14 15 </script> 16 <script> 17 $(function () { 18 console.log($.add(5, 6)); 19 }); 20 </script>
3.一个简单的自定义插件案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background-color: deepskyblue; 11 } 12 </style> 13 <script src="lib/jquery-1.12.2.js"></script> 14 <script> 15 /** 16 * $.method = fn 静态方法 （不需要实例，直接调用） 17 * 如: $.trim(str) 18 * $.fn.method = fn 实例方法(使用的时候需要先实例对象) 19 * $('div) 这个操作其实就是实例了一个jQuery对象 20 * */ 21 $(function ($) { 22 // 希望封装后的函数可以这样调用 23 // 功能一: 设置背景颜色 $('div').backgroundColor('pink') 24 // 功能二: 获取背景颜色 $('div').backgroundColor(); 25 $.fn.backgroundColor = function (color) { 26 console.log(this); // this相当于$(this) 27 if(arguments.length == 0){ 28 // 没传参数代表获取return是返回结果 29 return this.css('backgroundColor'); 30 }else{ 31 // 传参数设置 32 this.css('backgroundColor',color); 33 /*设置的内部页return this 方便链式编程*/ 34 return this; 35 } 36 37 } 38 })(jQuery); 39 </script> 40 <script> 41 $(function () { 42 //内部实现原理 43 //$('div').css('backgroundColor');// 获取背景颜色 44 $('div').backgroundColor('pink'); 45 }); 46 </script> 47 </head> 48 <body> 49 <div></div> 50 </body> 51 </html>
4.JQuery版tab栏切换封装成jQuery插件
jQ普通版
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 ul { 13 list-style: none; 14 } 15 16 .wrapper { 17 width: 1000px; 18 height: 475px; 19 margin: 0 auto; 20 margin-top: 100px; 21 } 22 23 .tab { 24 border: 1px solid #ddd; 25 border-bottom: 0; 26 height: 36px; 27 width: 320px; 28 } 29 30 .tab li { 31 position: relative; 32 float: left; 33 width: 80px; 34 height: 34px; 35 line-height: 34px; 36 text-align: center; 37 cursor: pointer; 38 border-top: 4px solid #fff; 39 } 40 41 .tab span { 42 position: absolute; 43 right: 0; 44 top: 10px; 45 background: #ddd; 46 width: 1px; 47 height: 14px; 48 overflow: hidden; 49 } 50 51 .products { 52 width: 1002px; 53 border: 1px solid #ddd; 54 height: 476px; 55 } 56 57 .products .main { 58 float: left; 59 display: none; 60 } 61 62 .products .main.selected { 63 display: block; 64 } 65 66 .tab li.active { 67 border-color: red; 68 border-bottom: 0; 69 } 70 71 </style> 72 <script src="lib/jquery-1.12.2.js"></script> 73 <script> 74 $(document).ready(function () { 75 76 // Tab分为上下两部分 77 $('.tab-item').click(function () { 78 // 当点击那个选项卡，那个选项卡就变成红色，其他的变成一般 79 $(this).addClass('active') 80 .siblings().removeClass('active'); 81 // 选中所有的main分区，通过<eq>和<当前元素索引号>实现对应切换效果 82 $('.products .main').eq( $(this).index() ).addClass('selected') 83 .siblings().removeClass('selected'); 84 }); 85 86 }); 87 </script> 88 </head> 89 <body> 90 <div class="wrapper"> 91 <ul class="tab"> 92 <li class="tab-item active">国际大牌<span>◆</span></li> 93 <li class="tab-item">国妆名牌<span>◆</span></li> 94 <li class="tab-item">清洁用品<span>◆</span></li> 95 <li class="tab-item">男士精品</li> 96 </ul> 97 <div class="products"> 98 <div class="main selected"> 99 <a href="###"><img src="images/guojidapai.jpg" alt=""/></a> 100 </div> 101 <div class="main"> 102 <a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a> 103 </div> 104 <div class="main"> 105 <a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a> 106 </div> 107 <div class="main"> 108 <a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a> 109 </div> 110 </div> 111 </div> 112 113 </body> 114 </html>