码迷,mamicode.com
首页 > Web开发 > 详细

JQuery插件,傻傻分不清!

时间:2016-01-27 15:48:55      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

直接上代码:

 

第一种:$.extend(),给$扩展方法

技术分享
 1 <!-- extend 扩展jQuery,其实就是增加一个静态方法 -->
 2         $.extend({
 3             sayHello:function(name)
 4             {
 5                  alert(‘Hello, ‘+(name?name:‘XXXX‘)+‘ !‘)
 6             }
 7         });
 8          
 9         $(function(){
10               $.sayHello();
11               $.sayHello(‘Zhangsan‘);
12         });
View code 
 第二种:$.fn,给JQuery对象扩展方法
技术分享
<!-- $.fn  给JQuery对象,增加方法 -->
        $.fn.Red=function(){
            
            this.each(function(){
               $(this).append(‘ ‘+$(this).attr(‘href‘));
            });
            
            return    this.css(‘color‘,‘red‘);
        }
        
        
        
        $(function(){
              $("a").Red().css(‘color‘,‘gray‘);
        });
View Code

 两者的综合利用

技术分享
 <!-- 综合利用 -->
        $.fn.MyDesign=function(options){
            var defaults={
               ‘color‘:‘red‘,
               ‘fontSize‘:‘12pt‘
            }
            var settings=$.extend({},defaults,options)
            
            this.each(function(){
               $(this).append(‘ ‘+$(this).attr(‘href‘));
            });
            
            return    this.css({‘color‘:settings.color,‘fontSize‘:settings.fontSize});
        }
        
        $(function(){
              $("a").MyDesign();
              
              $("a").MyDesign(
              {
              ‘color‘:‘yellow‘, 
              ‘fontSize‘:‘20pt‘}
              );
        });
View Code
 插件优化(包括加“;”、匿名函数、调用全局变量等)
技术分享
;(function($,window,document,undefined){
    var Beautifier= function(ele,options){
        this.defaults={
          ‘color‘:‘yellow‘,
          ‘fontSize‘:‘20pt‘
       }
       this.ele=ele,
       this.options=options,
       this.setting=$.extend({},this.defaults,this.options)
    }
    
    Beautifier.prototype={
        beautify:function(){
            return this.ele.css({
            ‘color‘: this.setting.color,
            ‘fontSize‘: this.setting.fontSize
            })
        }
    }
    
         $.fn.MyDesgin=function(options){
           var beautifier=new Beautifier(this,options);
         beautifier.beautify();
         }
})(jQuery,window,document)
View Code

 

JQuery插件,傻傻分不清!

标签:

原文地址:http://www.cnblogs.com/xuliang1992/p/5163439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!