jQuery两种扩展插件的方式 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 #div1{ width:100px; height:100px; background:red; position:absolute;}
 8 </style>
 9 <script src="jquery-1.10.1.min.js"></script>
10 <script>
11 
12 //$.extend : 扩展工具方法下的插件形式  $.xxx() $.yyy()
13 
14 //$.fn.extend  :  扩展到JQ对象下的插件形式  $().xxx()  $().yyy()
15 
16 $.extend({
17     leftTrim : function(str){
18         return str.replace(/^\s+/,'');
19     },
20     rightTrim : function(){},
21     aaa : function(){
22         alert(1);
23     },
24     bbb : function(){}
25 });
26 
27 $.fn.extend({
28     
29     drag : function(){
30         
31         //this : $('#div1')
32         
33         var disX = 0;
34         var disY = 0;
35         
36         var This = this;
37         
38         this.mousedown(function(ev){
39             
40             disX = ev.pageX - $(this).offset().left;
41             disY = ev.pageY - $(this).offset().top;
42             
43             $(document).mousemove(function(ev){
44                 
45                 This.css('left' , ev.pageX - disX);
46                 This.css('top' , ev.pageY - disY);
47                 
48             });
49             
50             $(document).mouseup(function(){
51                 $(this).off();
52             });
53             
54             return false;
55             
56         });
57         
58     },
59     aaa : function(){
60         alert(2);
61     }
62     
63 });
64 
65 
66 </script>
67 <script>
68 
69 
70 //$.trim()
71 //$.leftTrim()
72 
73 /*var str = '  hello  ';
74 
75 alert( '('+$.leftTrim(str)+')' );*/
76 
77 $(function(){
78     
79     $('#div1').drag();
80     
81 });
82 
83 
84 $.aaa();  // 1
85 $().aaa();  //2
86 
87 </script>
88 </head>
89 
90 <body>
91 <div id="div1"></div>
92 </body>
93 </html>

 

posted @ 2015-05-08 18:24  晚秋ing  阅读(288)  评论(0)    收藏  举报