zoukankan      html  css  js  c++  java
  • 小议jQuery插件开发

        1.写在前面

      大家都知道PHP专注后台与数据库的交互,前端页面中是js的天下,而jQuery作为使用最广泛,最简单有效的js的框架。深受大家的喜欢。

    而js作为一门面向对象的开发语言,它独特的语法和函数式的写法,也是妙趣横生。使用jQuery进行插件的开发,就能将一些js的函数封装在一个对象中,并对其扩展,提高了开发的效率,体现了面向对象的优越性。

        2.下面是正题

      主要有两种形式的jQuery的插件形式: 

      1)对象的形式扩展插件 $.fn.extend 

      2)函数的形式扩展插件 $.extend

      这里我们直接给出两个例子:

      1)对象形式的插件实现的功能是 鼠标点击Input输入框时,弹出其Value值

      2)函数形式的插件实现的功能是 鼠标移出Input输入框时,弹出其title值

      大家可以仔细揣摩,两者的不同,再次基础上,写出功能更强大,更健壮的jQuery的插件

      代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <input id="input" name="name" value="我喜欢jQuery" title="我喜欢js">
    <script src="http://www.eol.cn/js/global/jQuery_latest.min.js">
    </script>
    <script>
    
    /*************编写插件***********/
    
    /*
    
    *1. 对象的形式扩展插件 $.fn.extend   调用 $("#idname").functionName();
    
    */
    (function($){
          $.fn.extend({
            showVal : function(){
               var $this = $(this);
               $this.click(function () {//点击时显示里面的数值
                   alert($this.val());
                   
               })
               
       }
        
    
    })(jQuery); 
    
    //
    
    /*
    
    *2. 函数的形式扩展插件 $.extend   调用 $.functionName();
    
    */
    
    
          $.extend({
            showTitle : function(){
               
               $('#input').mouseout(function () {//鼠标移出时弹窗
                  var $this = $(this);
                   alert($this.attr('title'));
                   
               })
    
       }
        
    
    })
    
    })(jQuery)
    
    
    $(function(){
    
    $("#input").showVal();//1. 对象的形式扩展插件 $.fn.extend   调用 $("#idname").functionName();
    $.showTitle();//2. 函数的形式扩展插件 $.extend   调用 $.functionName();
    
    })
    </script>
    </body>
    </html>
    
     

    总结:

    jQuery为开发插件提拱了两个方法,分别是:

    jQuery.fn.extend(object);  给jQuery对象添加方法。
    jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。

    1) jQuery.fn.extend(object);

    fn 是什么东西呢。查看jQuery代码,就不难发现。

    jQuery.fn = jQuery.prototype = {  

    init: function( selector, context ) {//....   

    //......  

    };   

    原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

    jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

    上面的列子中 $("#input") 为一个jQuery实例,当它调用成员方法 showVal后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

    2) jQuery.extend(object); 

    为jQuery类添加添加类方法,可以理解为添加静态方法。如:

    $.extend({  

        add:function(a,b){return a+b;}  

    });  

    便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,$.add(3,4); //return 7

     

     

    by  djp

  • 相关阅读:
    android数据恢复
    UVA 690 Pipeline Scheduling
    2017 国庆湖南 Day4
    2017 国庆湖南 Day5
    2017 国庆湖南 Day6
    2017国庆 清北学堂 北京综合强化班 Day1
    2017 国庆湖南Day2
    bzoj 2962 序列操作
    UVA 818 Cutting Chains
    UVA 211 The Domino Effect
  • 原文地址:https://www.cnblogs.com/aiweixiao/p/4984806.html
Copyright © 2011-2022 走看看