本文實例講述了jQuery自定義添加"$"與解決"$"沖突的方法。分享給大家供大家參考。具體分析如下:
1.自定義添加$
雖然jQuery很強大,但無論如何,jQuery都不可能滿足所有用戶的需求,而且有一些需求十分小眾,也不適合放到整個jQuery框架中,正是因為這一點,jQuery提供了用戶自定義添加“$”的方法。
代碼如下:
代碼如下:$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") this.disable = true;
});
}
以上代碼首先設置"$.fn.disable",表明“$”添加一個方法disable(),其中 “$.fn”是擴展jQuery所必須的。
然後利用匿名函數定義這個方法,即用each()將調運這個方法的每個元素disabled屬性均設置為true.(如果該屬性存在)
例:擴展jquery的功能
代碼如下:<script type="text/javascript">
$.fn.disable = function() {
//擴展jQuery,表單元素統一disable
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = true;
});
}
$.fn.enable = function() {
//擴展jQuery,表單元素統一enable
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = false;
});
}
function SwapInput(oName, oButton) {
if (oButton.value == "Disable") {
//如果按鈕的值為Disable,則調用disable()方法
$("input[name=" + oName + "]").disable();
oButton.value = "Enable";
} else {
//如果按鈕的值為Eable,則調用enable()方法
$("input[name=" + oName + "]").enable();
oButton.value = "Disable"; //然後設置按鈕的值為Disable
}
}
</script>
<form method="post" name="myForm1" action="addInfo.aspx">
<p>
<label for="name">請輸入您的姓名:</label>
<br>
<input type="text" name="name" id="name" class="txt">
</p>
<p>
<label for="passwd">請輸入您的密碼:</label>
<br>
<input type="password" name="passwd" id="passwd" class="txt">
</p>
<p>
<label for="color">請選擇你最喜歡的顏色:</label>
<br>
<select name="color" id="color">
<option value="red">紅</option>
<option value="green">綠</option>
<option value="blue">藍</option>
<option value="yellow">黃</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select>
</p>
<p>請選擇你的性別:
<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">上網</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep">
<label for="sleep">睡覺</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)根據按鈕的值進行判斷,如果是不可用"disable",則調運disable()將元素設置為不可用,同時修改按鈕的值為"enable",反之則調運enable()方法。
2.解決"$"的沖突
與前面文章的情況類似,盡管JQuery非常強大,但是有時開發者同時使用多個框架,這時需要小心,因為其他框架也可能使用了"$",從而發生沖突,jQ同樣提供了noConflict()方法來解決"$"沖突的問題。
代碼如下:jQuery.noconflict();
以上代碼便可使"$"按照其他javascript框架的方式運算,這是jQuery中便不能再使用"$",而必須使用“jQuery”,例如$("h2 a")必須寫成jQuery("h2 a")
希望本文所述對大家的jQuery程序設計有所幫助。