亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

跟我一起學(xué)JQuery插件開發(fā)

 更新時(shí)間：2012年04月09日 23:24:12   作者：  
一直比較好奇，jquery插件是怎么開發(fā)的，怎么寫屬于自己的插件
在逛codeproject網(wǎng)站的時(shí)候，突然看到一篇文章：How to write plugin in Jquery.
如果對(duì)E文好的同學(xué) ，可以看上面的連接。
現(xiàn)在我把上面網(wǎng)站的及結(jié)合自己的想法寫這篇文章。希望能得到大牛們的支持和諒解。。。大鳥飛過。。。歡迎拍裝。
來源：

【1】How to write plugin in Jquery.

【2】鋒利的JQuery  書

【3】RascallySnake的JQuery.extend()詳解
一.介紹
插件編寫的目的是給已經(jīng)有的一系列方法或函數(shù)做一個(gè)封裝，以便在其他地方重復(fù)使用，方便后期維護(hù)。
JQuery除了提供一個(gè)簡(jiǎn)單、有效的方式進(jìn)行管理元素以及腳本，它還還提供了例外一種機(jī)制：即給核心模塊增加自己的方法和額外的功能。通過這種機(jī)制，Jquery允許我們自己創(chuàng)建屬于我們自己的插件，提高我們?cè)陂_發(fā)過程中的效率。

1.1JQuery的插件分為3中類型：
（1）封裝對(duì)象方法的插件（也就是對(duì)象級(jí)別的開發(fā)）
這種類型的插件是我們今天需要講的插件。
（2）封裝全局函數(shù)的插件（類級(jí)別開發(fā)）
指可以把獨(dú)立的函數(shù)添加到JQuery命名空間之下。
添加一個(gè)全局函數(shù)，我們只需如下定義：
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
當(dāng)然 你也可以添加多個(gè)全局函數(shù)：

復(fù)制代碼 代碼如下:

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};

調(diào)用時(shí)和一個(gè)函數(shù)的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
（3）選擇器插件
1.2編寫JQuery插件需要注意的地方：
（1）插件的推薦命名方法為：jquery.[插件名].js
（2）所有的對(duì)象方法都應(yīng)當(dāng)附加到JQuery.fn對(duì)象上面，而所有的全局函數(shù)都應(yīng)當(dāng)附加到JQuery對(duì)象本身上。
（3）在插件內(nèi)部，this指向的是當(dāng)前通過選擇器獲取的JQuery對(duì)象，而不像一般方法那樣，內(nèi)部的this指向的是DOM元素。
（4）可以通過this.each 來遍歷所有的元素
（5）所有方法或函數(shù)插件，都應(yīng)當(dāng)以分號(hào)結(jié)尾，否則壓縮的時(shí)候可能會(huì)出現(xiàn)問題。為了更加保險(xiǎn)寫，可以在插件頭部添加一個(gè)分號(hào)（；），以免他們的不規(guī)范代碼給插件帶來 影響。
（6）插件應(yīng)該返回一個(gè)JQuery對(duì)象，以便保證插件的可鏈?zhǔn)讲僮鳌?
（7）避免在插件內(nèi)部使用$作為JQuery對(duì)象的別名，而應(yīng)當(dāng)使用完整的JQuery來表示。這樣可以避免沖突。
1.3JQuery插件的機(jī)制
JQuery提供了2個(gè)用于擴(kuò)展JQuery功能的方法。即：
①jQuery.fn.extend()
②jQuery.extend()
第一個(gè)就是我們前面說插件類型的第一個(gè)中情況，第二個(gè)就是指后面的2種情況。
jQuery.extend()在插件中友一個(gè)很重要的功能是擴(kuò)展已經(jīng)有的object的對(duì)象。
比如：
var newSrc=$.extend(dest,src1,src2,src3...)
它的含義是將src1,src2,src3...合并到dest中,返回值為合并后的dest,由此可以看出該方法合并。
示例：
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
得到的結(jié)果是：
result={name:"Jerry",age:21,sex:"Boy"}
詳細(xì)的 可以查看：jQuery.extend 函數(shù)詳解 里面對(duì)這個(gè)方法有很好的講解。

官網(wǎng)：JQuery.extend()與JQuery.fn.extend()
使用命名空間
雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數(shù)名和變量名。但是仍然不可避免某些函數(shù)或變量名將于其他jQuery插件沖突，因此我們習(xí)慣將一些方法封裝到另一個(gè)自定義的命名空間。
復(fù)制代碼 代碼如下:

jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};

采用命名空間的函數(shù)仍然是全局函數(shù)，調(diào)用時(shí)采用的方法：
復(fù)制代碼 代碼如下:

$.myPlugin.foo();
$.myPlugin.bar('baz');


二.第一個(gè)Jquery插件
如果需要寫一個(gè)JQuery插件，你需要在$.fn對(duì)象后面增加一個(gè)屬性名，這個(gè)屬性名 其實(shí) 就是你的插件名。它的一般框架如下：
復(fù)制代碼 代碼如下:

(function( $ ) {
$.fn.myPlugin = function() {
// 這里開始寫功能需求
};
})( jQuery );

現(xiàn)在我們需要寫的插件的功能很簡(jiǎn)單，就是把一個(gè)對(duì)象給慢慢的隱藏起來。就是使用fadeOut()這個(gè)方法。
OK，我們打開 VS 2012.新建一個(gè)jscript文件，并且命名為：MyPlugin.js，并在里面添加如下代碼：
復(fù)制代碼 代碼如下:

(function ($) {
$.fn.myPlugin = function () {
this.fadeOut('normal');
};
})(jQuery);

怎么用呢？很簡(jiǎn)單。
新建一個(gè)html頁面，把jquery文件以及剛剛我們MyPlugin.js文件導(dǎo)入到本次頁面中。如下：
復(fù)制代碼 代碼如下:

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="MyPlugin.js" type="text/javascript"></script>
js代碼：
<script type="text/javascript">
$(document).ready(function () {
$("#btn1").click(function () {
$("#div1").myPlugin();
});
});
</script>

HTML代碼：
復(fù)制代碼 代碼如下:

<div id="div1" style="width: 400px; height: 30px; background-color: Gray;">
My God</div>
<input id="btn1" type="button" value="button" onclick="MyClick()" />

好的，你現(xiàn)在點(diǎn)擊網(wǎng)頁上面的按鈕的時(shí)候，div就會(huì)緩緩的隱藏。。。因?yàn)槲覀冊(cè)O(shè)定的是normal嘛，里面也可以設(shè)定一些值之類的。
很興奮的是，既然這個(gè)有智能提示，如下圖：

吧！
三.插件運(yùn)用在多個(gè)元素控件中。
3.1 運(yùn)用在多個(gè)元素控件中
在上面編寫JQuery插件需要注意的地方的第四點(diǎn)，寫道 如果要遍歷 則可以用this.each方法。$("ID").each 可以遍歷jquery對(duì)象、數(shù)組以及集合。
OK。知道了這樣子，那么我們的新的代碼如下：

復(fù)制代碼 代碼如下:

(function ($) {
$.fn.hoverElement = function () {
this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);

上面主要用到.each()方法進(jìn)行遍歷。代碼很簡(jiǎn)單，就是把當(dāng)前的對(duì)象的背景色css樣式在“Add”和“Remove”直接切換。

HTML的代碼是：
復(fù)制代碼 代碼如下:

<div class="hoverText">
First Button..
</div>
<div class="hoverText">
Second Button..
</div>
<div class="hoverText">
Third Button..
</div>

JS 代碼：
復(fù)制代碼 代碼如下:

<script type="text/javascript">
$(document).ready(function () {
$(".hoverText").hoverElement();
});
</script>

很簡(jiǎn)單，不解釋。
3.2 鏈?zhǔn)讲僮?
鏈?zhǔn)讲僮?？都聽過吧。。。比如下面這一句話：
$("#div1").css("color", "red").addClass("Add").animate({"width":"100px"},1000);
就是能在當(dāng)前的元素后面通過“.” 來實(shí)施更多的操作。這個(gè)動(dòng)作特別的瀟灑。
那我們要怎么才能實(shí)現(xiàn)這種效果呢？很簡(jiǎn)單，我能只需要把對(duì)象回去就可以了。請(qǐng)注意上面的第六點(diǎn)：插件應(yīng)該返回一個(gè)JQuery對(duì)象，以便保證插件的可鏈?zhǔn)讲僮鳌?
我們依舊看剛剛的例子：
復(fù)制代碼 代碼如下:

(function ($) {
$.fn.hoverElement = function () {
return this.each(function () {
$(this).hover(
function () {
$(this).addClass("Add");
},
function () {
$(this).removeClass("Remove");
}
);
})
}
})(jQuery);

代碼都一樣，唯一區(qū)別的是：this.each(function () { 這個(gè)前面加了一個(gè) return。這樣就實(shí)現(xiàn)了我們的鏈?zhǔn)讲僮鳌?
然后 你這樣：
復(fù)制代碼 代碼如下:

$(document).ready(function () {
$(".hoverText").hoverElement().css("color","yellow");
});

能看到 文字已經(jīng)變成了yellow色的了。

四 自定義自己的插件
對(duì)于一個(gè)商業(yè)插件來說，自定義插件的樣式是必不可少的。我們可以通過我們自己輸入不同的樣式，來改變開發(fā)者的默認(rèn)樣式。比如說最常見的 width、height、url、color等等。要是沒有這些自定義的東西，那開發(fā)者開發(fā)的插件的利用價(jià)值就大大的減小了。
OK，下面的這個(gè)實(shí)例的意思是 當(dāng)我們hover一個(gè)對(duì)象的時(shí)候，它能改變它的text、background、foreground三個(gè)屬性，也就是文本、背景色、前景色。用戶可以設(shè)定他自己想設(shè)定的值，而不是固定死的。當(dāng)然，如果用戶沒有設(shè)置，我們會(huì)給他一個(gè)默認(rèn)值。
定義這類插件的開發(fā)框架是：
$.fn.YouPlugin = function (options) {...}
為了防止一些偷懶的人，我們需要設(shè)置一些默認(rèn)值，當(dāng)它沒有設(shè)置的時(shí)候，我們就用這些默認(rèn)值。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
那默認(rèn)值和用戶傳進(jìn)來的值是怎么聯(lián)合在一起的呢？這個(gè)就需要我們?cè)陂_篇的時(shí)候講到的$.extend()知識(shí)了。
var obj = $.extend(defaultVal, options);
這樣子的話，就把用戶自定義的值覆蓋了默認(rèn)用戶的值。如果用戶沒定義值，就用系統(tǒng)自定義的。
代碼如下：
復(fù)制代碼 代碼如下:

(function ($) {
$.fn.textHover = function (options) {//options 經(jīng)常用這個(gè)表示有許多個(gè)參數(shù)。
var defaultVal = {
Text: 'Your mouse is over',
ForeColor: 'red',
BackColor: 'gray'
};
　　　　　　//默認(rèn)值
var obj = $.extend(defaultVal, options);
return this.each(function () {
var selObject = $(this);//獲取當(dāng)前對(duì)象
var oldText = selObject.text();//獲取當(dāng)前對(duì)象的text值
var oldBgColor = selObject.css("background-color");//獲取當(dāng)前對(duì)象的背景色
var oldColor = selObject.css("color");//獲取當(dāng)前對(duì)象的字體的顏色
selObject.hover(function () {//定義一個(gè)hover方法。
selObject.text(obj.Text);//進(jìn)行賦值
selObject.css("background-color", obj.BackColor);//進(jìn)行賦值
selObject.css("color", obj.ForeColor);//進(jìn)行賦值
},
function () {
selObject.text(oldText);
selObject.css("background-color", oldBgColor);
selObject.css("color", oldColor);
}
);
});
}
})(jQuery);

代碼也很簡(jiǎn)單，上面都有些了解釋，此刻不在羅嗦。
怎么用呢？很簡(jiǎn)單。
HTML code：
復(fù)制代碼 代碼如下:

<div id="div1" class="textBar">
Mouse over here.....
</div>
<div id="div2" class="textBar">
Mouse over here.....
</div>

JS Code：
復(fù)制代碼 代碼如下:

$(document).ready(function () {
$('#div1').textHover({
Text: 'I am going to over..',
ForeColor: 'yellow',
BackColor: 'Red'
});
$('#div2').textHover({ Text: 'I am second div...' });
});

就能看到效果了。
希望對(duì)你們有幫助。
OK，到現(xiàn)在為止，應(yīng)該一個(gè)插件開發(fā)的基本要素就這些了。本來后面還有一個(gè)比較復(fù)雜的代碼，一起發(fā)的，等下一節(jié)吧！
源碼下載

相關(guān)文章

最新評(píng)論