zoukankan      html  css  js  c++  java
  • 为Jquery类和Jquery对象扩展方法

    转:https://www.cnblogs.com/keyi/p/6089901.html

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

    JavaScript代码

    • jQuery.fn.extend(object);   
    • jQuery.extend(object);   

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

    jQuery.fn.extend(object);给jQuery对象添加方法。

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

     JavaScript代码

    • jQuery.fn = jQuery.prototype = {      
    •    init: function( selector, context ) {//….    
    •   
    •    //……   
    •   
    • };   

    原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

    虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

    jQuery便是一个封装得非常好的类,比如我们用 语句 $(“#btn1″) 会生成一个 jQuery类的实例。

    jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

     XML/HTML代码

    • $.extend({   
    •   
    •   add:function(a,b){return a+b;}   
    •   
    • });   

    便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

    JavaScript代码
    • $.add(3,4); //return 7  

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

    比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

    JavaScript代码
    • $.fn.extend({        
    •         
    •      alertWhileClick:function(){        
    •        
    •          $(this).click(function(){        
    •        
    •               alert($(this).val());        
    •           });        
    •         
    •       }        
    •         
    • });        
    •         
    • $(“#input1″).alertWhileClick(); //页面上为:<input id=”input1″ type=”text”/>    

    $(“#input1″) 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

     真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

    注意:

    在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这 是很重要的,在jQuery.js中到处体现这一点

    转:

    给jquery对象添加自定义方法和扩展jquery类

    一、给jQuery对象添加自定义方法
     
        方法一、$.fn.xxx
     
        方法二、jQuery.fn.extend({
            xxx:function(){
                alert($(this).val());
            }
        });
     
        方法一示例:
     
        $.fn.setCursorPosition = function(position){
                if(this.lengh == 0) return this;
                return $(this).setSelection(position, position);
        }
           
        $.fn.setSelection = function(selectionStart, selectionEnd) {
                if(this.lengh == 0) return this;
                input = this[0];
           
                if (input.createTextRange) {
                        var range = input.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', selectionEnd);
                        range.moveStart('character', selectionStart);
                        range.select();
                } else if (input.setSelectionRange) {
                        input.focus();
                        input.setSelectionRange(selectionStart, selectionEnd);
                }
           
                return this;
        }
           
        $.fn.focusEnd = function(){
                this.setCursorPosition(this.val().length);
        }
     
        
        方法二示例:
     
        $.fn.extend({
                setCursorPosition:function(position){
                        if(this.lengh == 0) return this;
                        return $(this).setSelection(position, position);
                },
                setSelection:function(selectionStart, selectionEnd) {
                        if(this.lengh == 0) return this;
                        input = this[0];
                   
                        if (input.createTextRange) {
                                var range = input.createTextRange();
                                range.collapse(true);
                                range.moveEnd('character', selectionEnd);
                                range.moveStart('character', selectionStart);
                                range.select();
                        } else if (input.setSelectionRange) {
                                input.focus();
                                input.setSelectionRange(selectionStart, selectionEnd);
                        }
                   
                        return this;
                },
                focusEnd:function(){
                        this.setCursorPosition(this.val().length);
                }
        });
     
       
        以上定义都可如此调用:
     
        $('.num').click(function(){
                $('.num').focusEnd();

        });
     
       
    二、扩展jQuery类本身  为类添加新的方法
     
        方法一、jQuery.extend(object);
     
        方法二、jQuery.xxx=function(){};
        
        方法一示例:
     
        $.extend({
            add:function(a,b){return a+b;},
            a:'2 chi gege '
        });
        alert($.add(3,4)); //7
        alert($.a); //2 chi gege
     
        方法二示例:
     
        $.add2 = function(a,b){
                return a-b;
        }
        alert($.add2(4,3)); //1
  • 相关阅读:
    Java多线程 编写三各类Ticket、SaleWindow、TicketSaleCenter分别代表票信息、售票窗口、售票中心。 售票中心分配一定数量的票,由若干个售票窗口进行出售,利用你所学的线程知识来模拟此售票过程。
    java中异常处理机制 throw抛出自定义业务逻辑异常 throws继续抛出 catch捕获后会自动继续抛向调用方法
    Map集合应用 取出一个字符串中字母出现的次数。如:字符串:"abcdekka27qoq" ,输出格式为:a(2)b(1)k(2)...
    Java中List集合排序的方法 比较器的使用 根据学生对象数学 语文 英语成绩总和进行sort排序
    美国银行
    Time Difference
    马来西亚与新加坡两国的标准时间为UTC+8
    java主要城市时区对照表
    韩国时区 KST
    AIX 系统
  • 原文地址:https://www.cnblogs.com/BluceLee/p/8882881.html
Copyright © 2011-2022 走看看