当前位置: 首页 > 工具软件 > fn > 使用案例 >

jQuery中$.fn的用法

艾意蕴
2023-12-01

在jQuery插件中,常常看见这样的结构,开始自己也是不理解后来通过查阅资料,慢慢的理解其中的大意,所以先总结出来。

(function( $, window, document, undefined ){}){

      //...code

}(jquery,window,document)

1.立即执行函数:(function(){})()

这是一个自调函数,函数定义好之后自动执行。(function(){})表示一个匿名函数,而后面紧跟着的()表示立即调用此函数。而且()也是向函数传递参数的地方。

比如:

;(function(){
     alert("立即执行");
})();

(function(parameter){
    alert(parameter);
})("立即执行函数传递参数");

使用此函数的好处是,不会产生任何全局变量。缺点是无法重复执行。对于插件来说,是最合适不过的了。不会产生任何全局变量,同时一次引用就够了。

2.传递参数(jQuery,window,document)

$ 实参:$是jQuery的缩写,很多方法和类库也都使用$,这里表示接受jQuery对象,避免冲突

window,document实参:分别接受 window document对象。window,document 对象都是全局环境下的,而在函数体内的window document对象是局部的,这样做有个好处就是,提高性能,减少作用域链的查询时间。如果你在函数体内需要多次调用window 或 document对象,这样把window 或 document对象当作参数传进去,这样做是非常有必要的。当然如果你的插件用不到这两个对象,那么就不用传递这两个参数了。

3.ndefined形参:看起来是有点多余。undefined在老一辈的浏览器是不被支持的,直接使用会报错,js框架要考虑到兼容性,因此增加一个形参undefined

4.“;”分号作用:

防止多个文件压缩合并以为其他文件最后一行语句没加分号,而引起合并后的语法错误。

5.$.fn的用法

举个例子:

<div id="myDiv"></div>

(function( $, window, document, undefined ){}){
    $.fn.extend({
        test:function(){
                alert($(this).attr("id"));
        }
    });
   
}(jquery,window,document)

$("#myDiv").test();

//结果:myDiv


(function( $, window, document, undefined ){}){
    $.extend({
        test:function(){
                alert("好好活着");
        }
    });
   
}(jquery,window,document)

$('#myDiv').test();

//结果:好好活着

前者是绑定在dom元素上面的插件,后者是绑定在jQuery上的插件 

$.fn是指jQuery的命名空间,加上fn的方法及属性,会对jQuery实例有效。

如扩展$.fn.abc(),即$.fn.abc()是对jQuery扩展了一个abc()方法,在每一个jquery实例都可以引用这个方法,例如

$("#div").abc();

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

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

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

fn原型:查看jquery可知
jQuery.fn = jQuery.prototype ={ 
   init: function( selector, context ){//....  
   //...... 
};

jquery.fn = jquery.prototype 

jquery本身就是一个封装得很好的类,比如我们用语句 $("div")会生成一个jquery类的实例。

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

如:

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


$("#div").add(3,4);//return 7

这样便为jquery添加一个为add 的方法,之后便可以在引入jquery的地方,使用这个方法了;

$.fn.extend(object);对jquery添加成员函数、jquery类的实例 可以使用这个成员函数。

列如 编辑被点击时,弹出当前编辑框里面的内容。

$.fn.extend({
    alertWhileClick:function(){
        $(this).click(function(){
            alert($(this).val());
        });        
    }
});

 

 类似资料: