jQuery自定義添加"$"與解決"$"沖突的方法
本文實(shí)例講述了jQuery自定義添加"$"與解決"$"沖突的方法。分享給大家供大家參考。具體分析如下:
1.自定義添加$
雖然jQuery很強(qiáng)大,但無(wú)論如何,jQuery都不可能滿足所有用戶的需求,而且有一些需求十分小眾,也不適合放到整個(gè)jQuery框架中,正是因?yàn)檫@一點(diǎn),jQuery提供了用戶自定義添加“$”的方法。
代碼如下:
return this.each(function() {
if (typeof this.disabled != "undefined") this.disable = true;
});
}
以上代碼首先設(shè)置"$.fn.disable",表明“$”添加一個(gè)方法disable(),其中 “$.fn”是擴(kuò)展jQuery所必須的。
然后利用匿名函數(shù)定義這個(gè)方法,即用each()將調(diào)運(yùn)這個(gè)方法的每個(gè)元素disabled屬性均設(shè)置為true.(如果該屬性存在)
例:擴(kuò)展jquery的功能
$.fn.disable = function() {
//擴(kuò)展jQuery,表單元素統(tǒng)一disable
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = true;
});
}
$.fn.enable = function() {
//擴(kuò)展jQuery,表單元素統(tǒng)一enable
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = false;
});
}
function SwapInput(oName, oButton) {
if (oButton.value == "Disable") {
//如果按鈕的值為Disable,則調(diào)用disable()方法
$("input[name=" + oName + "]").disable();
oButton.value = "Enable";
} else {
//如果按鈕的值為Eable,則調(diào)用enable()方法
$("input[name=" + oName + "]").enable();
oButton.value = "Disable"; //然后設(shè)置按鈕的值為Disable
}
}
</script>
<form method="post" name="myForm1" action="addInfo.aspx">
<p>
<label for="name">請(qǐng)輸入您的姓名:</label>
<br>
<input type="text" name="name" id="name" class="txt">
</p>
<p>
<label for="passwd">請(qǐng)輸入您的密碼:</label>
<br>
<input type="password" name="passwd" id="passwd" class="txt">
</p>
<p>
<label for="color">請(qǐng)選擇你最喜歡的顏色:</label>
<br>
<select name="color" id="color">
<option value="red">紅</option>
<option value="green">綠</option>
<option value="blue">藍(lán)</option>
<option value="yellow">黃</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select>
</p>
<p>請(qǐng)選擇你的性別:
<br>
<input type="radio" name="sex" id="male" value="male">
<label for="male">男</label>
<br>
<input type="radio" name="sex" id="female" value="female">
<label for="female">女</label>
</p>
<p>你喜歡做些什么:
<input type="button" name="btnSwap" id="btnSwap" value="Disable" class="btn" onclick="SwapInput('hobby',this)">
<br>
<input type="checkbox" name="hobby" id="book" value="book">
<label for="book">看書</label>
<input type="checkbox" name="hobby" id="net" value="net">
<label for="net">上網(wǎng)</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep">
<label for="sleep">睡覺(jué)</label>
</p>
<p>
<label for="comments">我要留言:</label>
<br>
<textarea name="comments" id="comments" cols="30" rows="4"></textarea>
</p>
<p>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">
<input type="reset" name="btnReset" id="btnReset" value="Reset" class="btn">
</p>
</form>
方法SwapInput(nName,oButton)根據(jù)按鈕的值進(jìn)行判斷,如果是不可用"disable",則調(diào)運(yùn)disable()將元素設(shè)置為不可用,同時(shí)修改按鈕的值為"enable",反之則調(diào)運(yùn)enable()方法。
2.解決"$"的沖突
與前面文章的情況類似,盡管JQuery非常強(qiáng)大,但是有時(shí)開(kāi)發(fā)者同時(shí)使用多個(gè)框架,這時(shí)需要小心,因?yàn)槠渌蚣芤部赡苁褂昧?$",從而發(fā)生沖突,jQ同樣提供了noConflict()方法來(lái)解決"$"沖突的問(wèn)題。
以上代碼便可使"$"按照其他javascript框架的方式運(yùn)算,這是jQuery中便不能再使用"$",而必須使用“jQuery”,例如$("h2 a")必須寫成jQuery("h2 a")
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
輕松實(shí)現(xiàn)jquery選項(xiàng)卡切換效果
這篇文章主要幫助大家輕松實(shí)現(xiàn)jquery選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10全面詳細(xì)的jQuery常見(jiàn)開(kāi)發(fā)技巧手冊(cè)
這篇文章主要為大家分享了一份全面詳細(xì)的jQuery常見(jiàn)開(kāi)發(fā)技巧手冊(cè),幫助大家更好的進(jìn)行jquery開(kāi)發(fā),感興趣的小伙伴們可以參考一下2016-02-02Jquery方式獲取iframe頁(yè)面中的 Dom元素
這篇文章主要介紹了Jquery方式如何獲取iframe頁(yè)面中的Dom元素,需要的朋友可以參考下2014-05-05JQuery中form驗(yàn)證出錯(cuò)信息的查看方法
JQuery中form驗(yàn)證出錯(cuò),可以采用以下方式來(lái)查看具體input的出錯(cuò)信息,下面有個(gè)不錯(cuò)的示例,有類似情況的朋友可以參考下2013-10-10jquery入門—選擇器實(shí)現(xiàn)隔行變色實(shí)例代碼
JQuery入門—選擇器實(shí)現(xiàn)隔行變色如何實(shí)現(xiàn)呢?JQuery選擇器繼承了CSS、path語(yǔ)音的部分語(yǔ)法,允許通過(guò)標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇,接下來(lái)詳細(xì)介紹,需要的朋友可以參考下2013-01-01jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法,實(shí)例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jquery實(shí)現(xiàn)文本框鼠標(biāo)右擊無(wú)效以及不能輸入的代碼
jquery實(shí)現(xiàn)文本框鼠標(biāo)右擊無(wú)效以及不能輸入的實(shí)現(xiàn)方法,需要的朋友可以參考下。2010-11-11jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
prop和attr的區(qū)別你知道嗎?在本文有些不錯(cuò)的示例對(duì)兩者詳細(xì)介紹,感興趣的朋友不要錯(cuò)過(guò)2013-11-11