zoukankan      html  css  js  c++  java
  • JQuery插件,傻傻分不清!

    不多说,直接上代码!

    第一种 extend

    <!-- extend 扩展jQuery,其实就是增加一个静态方法 -->
             $.extend({
                sayHello:function(name)
                  {
                       alert('Hello, '+(name?name:'XXXX')+' !')
                  }
              });
             
             $(function(){
                   $.sayHello();
                   $.sayHello('Zhangsan');
             });

    第二种 $.fn 
    <!-- $.fn  给JQuery对象,增加方法 -->
            $.fn.Red=function(){
               
                this.each(function(){
                   $(this).append(' '+$(this).attr('href'));
                });
               
                return    this.css('color','red');
            }
           
           
           
            $(function(){
                  $("a").Red().css('color','gray');
            });

    第三种:综合利用

    <!-- 综合利用 -->
            $.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($,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)

  • 相关阅读:
    css 去除input框边框 鼠标禁用状态 背景颜色
    css 文字边框
    搭建简易的Vue项目
    那些年遇到的Bug
    vue 点击弹出下拉菜单 点击其他页面收回菜单
    css 控制文本显示
    css tips提示框 三角形 + 框
    vue 细节 规范(只要不断片,持续的更新.....)
    @click.self
    工欲善其事,必先利其器
  • 原文地址:https://www.cnblogs.com/xuliang1992/p/5163439.html
Copyright © 2011-2022 走看看