jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器

点击打开：
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全

自定义jquery插件详解：

1、插件名称最好为jquery.[插件名].js。所有方法和函数插件都应该以分号结尾。插件开头也应该添加分号。
2、插件应该返回一个jquery对象，以保证链式操作。或者返回需要获取的量。插件内部不要使用$作为jquery对象的别名。
3、所有的对象方法附加到jQuery.fn对象上，所有的全局函数，附加到jQuery对象上。
4、插件内部，this指向通过选择器获取的jquery对象，可以通过this.each遍历所有元素。
5、基本定义方法

;(function($){                                                  //最前端的分号为了更好的兼容性，  将$作为匿名函数的形参    //此处编写jquery插件代码，可以将$作为jquery的缩写别名})(jQuery);                                                     //这里就将jquery作为实参传递给匿名函数

6、基本扩展方法

options = jQuery.extend({                                       //extend扩展对象属性，extent收集多个对象参数的属性集合，属性的值以最晚出现的为准    name:"name1",                                               //既可以用于为对象设置属性默认值，又可以用来扩展对象    age:12},options);                                                     //当oprions属性和默认属性重叠时，值以越晚出现的为准

封装jquery对象函数

;(function($){    $.fn.extend({                                                //对jquery.fn对象进行扩展        "color":function(value){                                //自定义color函数，设置无参和有参时的调用            if(value==undefined)                return this.css("color");                       //没有参数时返回颜色   this表示jquery选择器选择的元素对象            else                return this.css("color",value);                 //有参数时设置颜色        },        "myfun": function (options) {                           //多个自定函数，以映射的形式存在于一个字典中            options = $.extend({name:"name1",age:12},options);   //对传递参数可能不全的情况进行兼容，设置默认值            //使用options进行后续函数            return this;                                         //返回this，使方法可链        },        "max":function(){                                        //选择器选择的元素可能有多个，通过this传递过来就是元素列表            return this.each(function () {                      //通过each对选择的元素列表进行遍历            });        }    });})(jQuery);

调用对象函数

$("div").color("red");                                          //设置颜色

封装jquery全局函数

;(function($){    $.extend({                                                  //全部函数，不需要fn，对jquery自己进行扩展        myfun1:function(text){            return text;        },        myfun2:function(value){}    });})(jQuery);

调用全局函数

jQuery.myfun1("111111");

自定义jquery选择器

;(function($) {    $.extend(jQuery.expr[":"],{                             //自定义选择器是jQuery.expr[":"]对象的一部分，所以对该对象进行扩展        between:  function(a,i,m){                           //自定义between选择器，  a表示遍历到的当前DOM元素，i表示DOM元素的索引，从0开始，m是一个数组。            //以$("div:gt(1)")为例。m[0]表示进一步要匹配的内容:gt(1)    m[1]表示选择器引导符:    m[2]表示选择器函数get     m[3]表示选择器函数参数1            var tmp=m[3].split(",");                        //以逗号为分隔符，这里自己定义分隔符            return tmp[0]-0<i && i<tmp[1]-0;                //当元素索引在两个参数之间，返回true，表示选中        }    });})(jQuery);

应用自定义选择器

$("div:between(2,5)").css("color","red");