jquery插件编写

2025-02-24 技术教程

1、$.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意：(1)、如果只为$.extend()指定了一个参数，则意味着参数targetObj被省略。此时，targetObj就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
(2)、如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
2、$.extend( targetObj , object1 , object2 ... )
上面是将object1,object2...合并到targetObj中,返回值为合并后的targetObj，由此可以看出该方法合并后，是修改了targetObjt的结构的。如果想要得到合并的结果却又不想修改targetObj的结构，可以如下使用：
var targetObj = $.extend( {}, object1,object2... );//也就是将"{}"作为targetObj参数，然后将合并结果返回给targetObj了

3、$.extend( object1 ) //省略targetObj参数，如果省略了targetObj，则该方法就只能有一个obj参数，也就是将object1合并到jquery的全局对象中去

4、$.fn.extend(src); //该方法将src合并到jquery的实例对象中去

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>插件编写</title> </head> <body> <p> <a href="javascript:;">链接一</a> <a href="javascript:;">链接二</a> <a href="javascript:;">链接三</a> </p> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> /*方法一:通过$.extend()来扩展jQuery 在jQuery命名空间或者理解成jQuery身上添加了一个静态方法所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。 */ $.extend({ sayHello:function(name){ alert("hello"+ (name ? name : "jim")); } }); //$.sayHello("xiao"); /*方法二:通过$.fn 向jQuery添加新的方法基本上就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。 */ $.fn.colorRed = function(){ this.css("color","red"); ////在这个方法里面,this指的是用jQuery选中的元素，不需要加$ this.each(function(){ //this指代jQuery选择器返回的集合,在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下。 $(this).append($(this).attr("href")); }) } /*调用的时候，要先获取jquery对象，然后调用插件方法，不是直接colorRed("a")，切记！*/ //$("a").colorRed(); //给jq插件提供参数 $.fn.setFontSize = function(options){ var defaults = { "color":"red", "fontSize":"12px" } var settings = $.extend({},defaults,options); this.css({ "color":settings.color, "fontSize":settings.fontSize }) //return this; 加上这个就是true了 //可以合并起来写 /*return this.css({ "color":settings.color, "fontSize":settings.fontSize })*/ //先不用管什么return this，先把需要的功能写好，然后在前面加上return就行了。 } var obj = $("a").setFontSize({ "color":"blue", "fontSize":"26px" }); console.log(obj instanceof jQuery); //false，因为没有return this，所以想链式调用是不行的 //面向对象的插件开发 ① 类：一类具有相同特征(属性)和行为(方法)的集合。 ② 对象：从类中，拿出具有确定属性值和方法的个体。 a.类是抽象的，对象是具体的(类是对象的抽象化，对象是类的具体化) b.创建类和对象的步骤 ①创建一个类(构造函数)：类名必须使用大驼峰法则，即每个单词的首字母必须大写。 ②通过类，实例化(new)出一个对象。 ③注意事项 >>>通过类名，new出一个对象的过程，叫做“类的实例化” >>>类中的this，会在实例化的时候，指向新new出的对象。所以，this.属性 this.方法，实际上是将属性和方法绑定在即将new出的对象上面。 function Obj(name){ //构造函数 this.name = name this.showName = function(){//写this.showName，是为了后面可能有多个对象调用这个方法，以示区分。 alert(this.name); } } var p1 = new CreatePerson('小明'); //p1代表的是新创建出来的对象，其实和this是一个东西 p1.showName(); //小明等价于：this.showName(); var p2 = new CreatePerson('小强'); p2.showName(); //小强 alert( p1.showName == p2.showName ); //false new出来的2个不同的对象 >>>在类中，要调用自身属性，必须使用this.属性名、如果直接使用变量名，则无法访问对应的属性。 >>>类名必须使用大驼峰法则，注意与普通函数的区别。 c.JavaScript中的this指向问题 >>>谁最终调用函数，this就指向谁！ >>> this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！ >>> this指向的，永远只可能是对象，不可能是函数！！ >>> this指向的对象，叫做函数的上下文context，也叫函数的调用者。 >>> 通过函数名()调用的，this永远指向window通过 >>> 函数作为数组的一个元素，用数组下标调用，this指向这个数组 >>> 通过对象.方法调用的，this指向这个对象 >>> 函数作为window内置函数的回调函数使用，this指向window。比如setTimeout、setInterval等 >>> 函数作为构造函数，使用new关键字调用，this指向新new出的对象 var fullname = 'John Doe'; var obj = { 　　fullname: 'Colin Ihrig', 　　prop: { 　　　　fullname: 'Aurelio De Rosa', 　　　　getFullname: function() { 　　　　　　return this.fullname; 　　　　} 　　} }; console.log(obj.prop.getFullname());//Aurelio De Rosa var test = obj.prop.getFullname; console.log(test()); //John Doe obj.func = obj.prop.getFullname; console.log(obj.func()); //Colin Ihrig var arr = [obj.prop.getFullname,1,2]; arr.fullname = "JiangHao"; console.log(arr[0]()); //JiangHao </script> </body></html>

改编成了jquery插件