Jquery_感受插件_基于包装集实现一个简单的插件

浏览数：46 / 时间：2015年06月09日

Jquery_感受插件_基于包装集实现一个简单的插件

通过直接对jQuery.属性的方式去添加插件实在是有点土，拓展的方法应该像jQuery那样，直接对包装集进行操作，$("XXX").fun()，这样以来就需要查看jQuery的源码，了解默认方法的定义方式。jQuery将对包装集操作的方法定义在了jQuery的prototype中，并且添加了一个别名jQuery.fn，基于这种规则，实现一个简单的插件来感受一下基于包装集的插件，jquery.wrapperBasedFun.plugIn.js

1 (function($){
2     //演示，仅仅是修改包装集中元素的字体颜色
3     $.fn.changeColor = function(color){
4         //注意，此处的this已经是包装集了，不需要再添加$()来包装为jQuery对象了
5         this.each(function(){
6             //此处的this又是Dom节点了，需要添加$()来包装为jQuery对象
7             $(this).css("color",color);
8         });
9         //链式编程是一个很好的特性，插件一定要返回包装集来支持链式编程
10         return this;
11     };
12 })(jQuery);
13

测试页面

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
4     <head>
5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6         <title>Jquery_18_基于包装集的插件</title>
7         <meta name="author" content="Administrator" />
8         <script type="text/javascript" src="jquery-1.11.1.js"></script>
9         
10         <script type="text/javascript" src="jquery.wrapperBasedFun.plugIn.js"></script>
11         <script type="text/javascript">
12             $(function(){
13                 //直接对包装集进行操作，并且支持链式编程
14                 $("li").changeColor("red").css("fontSize","25px");
15             });
16         </script>
17     </head>
18     <body>
19         <ul>
20             <li>你</li>
21             <li>我</li>
22             <li>他</li>
23         </ul>
24     </body>
25 </html>
26

案例很简单，只是记录一下基于包装集插件的拓展手段。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Jquery_感受插件_基于包装集实现一个简单的插件