Jquery自定义插件
一、理解jquery
从《鸿观》节目看到一句话,”事物的真相只有一个,但每个事物都有很多不同的侧面,例如,在博物馆看一件展品的时候,你在不同的光线,不同的条件下去看,看到的展品也会有所不一样。有时候,反而从侧面去看可以得到更多细节,更多不一样的特点“。
从jQuery官方定义是:”jQuery is a fast, small, and feature-rich JavaScript library.“--它是一个快速、轻小、功能齐全的JavaScript 库。这是juerqy的真相。
我是从类的概念去理解的jQuery,把jquery看作一个很庞大的、功能很强大的类。这是一个侧面。尽管javascript没有类的概念,但是也可以类的角度去理解。
类就自然有它的属性和方法,比如人是一个类,它有姓名、年龄、身高等属性,也有吃饭、走路等方法。jQuery也是一样,它也具有属性和方法,它有$.type属性,有$.attr("")方法等。
通过$("div")就可以获得一个类的实例,就可以操作jQuery所有的属性和方法。如:$("div").blur( function () { alert("Hello World!"); } );是一个绑定事件。
二、jquery自定义的插件
jQuery以少量的代码更快地实现功能,比起原生的DOM操作,提高了很大的速度。尽管jQuery有着强大的属性和方法,但是也不可能完全满足每个开发者的需要。考虑到这一点,jquery就提供了开发人员自定义jquery的接口,以便提高jquery的灵活性和个性化。
jQuery实现自定义插件的方法有两种:(1)$.extend({abc:function(){}}) 和 (2)$.fn.extend(abc:function(){}); 第一种称为类级别的自定义函数,第二种称为对象级别的函数。
---------------------------------------------------------------------------------------------------------
第一种:类级别自定义函数
(1)定义js过程:
这是一个实现两个数之和功能的函数。类级别的函数,是直接插入到jquery内核中运行,最后加上分号避免压缩过程中出错。
$.extend({//类别级的用extend()方法,直接插入jquery内核中 "addNum":function(p1,p2){//引用时直接用$.addNum(p1,p2); p1 = (p1 == undefined) ? 0 : p1; p2 = (p2 == undefined) ? 0 : p2; var intResutlt = parseInt(p1)+parseInt(p2); return intResutlt; } });
(2)调用方法
直接是以$开头,就可以调用这个方法了。
$.addNum(1,2);//结果为3.
---------------------------------------------------------------------------------------------------------
第二种:对象级别自定义函数
要求在应用时,必须指定特定的对象。类似于$("#div").focusColor。
(1)定义js过程:
以下是的自定义js函数,是实现鼠标悬停时,改变底色,移开时,恢复原来底色,这样的一个功能。
$.fn.extend({ "focusColor":function(li_col){ var def_col = "#eee";//默认获取焦点色为灰色 var lst_col = "#fff";//默认丢失焦点色为白色 li_col = (li_col == undefined)?def_col:li_col; $(this).find("li").each(function(){//遍历li $(this).mouseover(function(){//鼠标移入事件 $(this).css("background-color",li_col); }).mouseout(function(){//鼠标移出事件 $(this).css("background-color",lst_col); }); }); return $(this);//返回jquery对象,保持链式操作 } });
(2)调用过程:
需要指定特定的应用对象。例如应用在id为my_div的元素,可以这样应用:$("#my_div").focusColor("red");//填入一个红色为底色。
例二:
jQuery.fn.setApDiv=function () {
//apDiv浮动层显示位置居中控制
var wheight=$(window).height();
var wwidth=$(window).width();
var apHeight=wheight-$("#apDiv").height();
var apWidth=wwidth-$("#apDiv").width();
$("#apDiv").css("top",apHeight/2);
$("#apDiv").css("left",apWidth/2);
}
调用方法:$("#apDiv").setApDiv();
-----------------------------------------------------------------------------------------------------------------
关于这两者的开发要点:
1、遵循严格的命名规范。格式如:jQuery.[插件名].js的规则。例如:jQuery.focusColor.js
2、对象级别的插件依附于jquery.fn主体对象;类别的插件依附于jquery对象。
3、必须以分号结束
4、访问元素用this.each
5、插件内部的this指代是jquery获取的对象,而不是传统意义的对象引用。
6、对象级别,用$.fn.extend()方法扩展;而类别级别的用$.extend()方法扩展。