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         <!-- jQuery类库之后再导入自定义插件 -->
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 
案例很简单,只是记录一下基于包装集插件的拓展手段。

posted on 2014-12-03 22:32 都较瘦 阅读(192) 评论(0)  编辑  收藏 所属分类: Jquery案例积累


只有注册用户登录后才能发表评论。


网站导航:
 
<2014年12月>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

导航

统计

公告

博客定位:囿于目前的水平,博客定位在记录自己的学习心得和随手的练习

常用链接

留言簿

随笔分类

随笔档案

文章分类

文章档案

搜索

最新评论

阅读排行榜

评论排行榜