妙用Jquery的val()方法
<input type="text" id="address" value="請(qǐng)輸入郵箱地址"/> <br/><br/>
<input type="text" id="password" value="請(qǐng)輸入郵箱密碼"/> <br/><br/>
<input type="button" value="登陸"/>
代碼:
$("#address").focus(function(){ // 地址框獲得鼠標(biāo)焦點(diǎn)
var txt_value = $(this).val(); // 得到當(dāng)前文本框的值
if(txt_value==this.defaultValue){
$(this).val(""); // 如果符合條件,則清空文本框內(nèi)容
}
});
注:this.defaultValue就是當(dāng)前文本框的默認(rèn)值。
val()方法還有另外的一個(gè)用處,就是它能使select(下拉列表框),checkbox(多選框)和radio(單選框)相應(yīng)的項(xiàng)被選中,這在表單操作中經(jīng)常會(huì)用到??聪旅娴囊粋€(gè)例子:
<body>
<input type="button" value="設(shè)置單選下拉框選中"/>
<input type="button" value="設(shè)置多選下拉框選中"/>
<input type="button" value="設(shè)置單選框和多選框選中"/>
<br/><br/>
<select id="single">
<option value="1">選擇1號(hào)</option>
<option value="2">選擇2號(hào)</option>
<option value="3">選擇3號(hào)</option>
<option value="4">選擇4號(hào)</option>
<option value="5">選擇5號(hào)</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
<option value="1" selected="selected">選擇1號(hào)</option>
<option value="2">選擇2號(hào)</option>
<option value="3">選擇3號(hào)</option>
<option value="4">選擇4號(hào)</option>
<option value="5" selected="selected">選擇5號(hào)</option>
</select>
<br/><br/>
<input type="checkbox" value="check1"/> 多選1
<input type="checkbox" value="check2"/> 多選2
<input type="checkbox" value="check3"/> 多選3
<input type="checkbox" value="check4"/> 多選4
<br/>
<input type="radio" value="radio1"/> 單選1
<input type="radio" value="radio2"/> 單選2
<input type="radio" value="radio3"/> 單選3
</body>
運(yùn)行后,默認(rèn)的顯示效果如下圖:

這個(gè)時(shí)候想要改變選中的項(xiàng),該怎么辦呢?在javascript區(qū)域添加如下代碼:
$(function(){
//設(shè)置單選下拉框選中
$("input:eq(0)").click(function(){
//$("#single").val("選擇5號(hào)");
$("#single").val("5"); // 和$("#single").val("選擇5號(hào)");這 種方式都可以達(dá)到效果
var options=$('#single option:selected')
alert(options.val());
});
//設(shè)置多選下拉框選中
$("input:eq(1)").click(function(){
// $("#multiple").val(["選擇2號(hào)", "選擇3號(hào)"]);
$("#multiple").val(["3", "4"]); //以數(shù)組的形式賦值
});
//設(shè)置單選框和多選框選中
$("input:eq(2)").click(function(){
$(":checkbox").val(["check2","check3"]); //以數(shù)組的形式賦值
$(":radio").val(["radio2"]);
});
});
然后分別點(diǎn)擊如下的三個(gè)按鈕:
則會(huì)發(fā)現(xiàn),默認(rèn)的選中項(xiàng)已經(jīng)變?yōu)槟阋O(shè)置的項(xiàng)了。如下所示:
- jquery text(),val(),html()方法區(qū)別總結(jié)
- jQuery獲取文本節(jié)點(diǎn)之 text()/val()/html() 方法區(qū)別
- jQuery中height()方法用法實(shí)例
- jQuery中width()方法用法實(shí)例
- jQuery中animate()方法用法實(shí)例
- jQuery中fadeOut()方法用法實(shí)例
- jQuery中slideUp()方法用法分析
- jQuery中hide()方法用法實(shí)例
- jQuery的text()方法用法分析
- jquery中post方法用法實(shí)例
- jQuery中val()方法用法實(shí)例
相關(guān)文章
基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中
基于jQuery的輸入框在光標(biāo)位置插入內(nèi)容, 并選中功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-10-10jquery如何獲取元素的滾動(dòng)條高度等實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery如何獲取元素的滾動(dòng)條高度等實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-10-10jquery教程限制文本框只能輸入數(shù)字和小數(shù)點(diǎn)示例分享
這篇文章主要介紹了JQuery限制文本框只能輸入數(shù)字和小數(shù)點(diǎn)的方法,大家參考使用吧2014-01-01jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)瀏覽器縮放大小并改變背景顏色,比較實(shí)用,也很簡(jiǎn)單,使用到了一個(gè)resize事件需要的朋友可以參考下2014-10-10jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁(yè)面的代碼
jquery+ajax每秒向后臺(tái)發(fā)送請(qǐng)求數(shù)據(jù)然后返回頁(yè)面(包括jquery頁(yè)面加載完畢才執(zhí)行方法)2011-01-01jquery如何通過(guò)name名稱獲取當(dāng)前name的value值
本文為大家介紹下jquery通過(guò)name名稱獲取當(dāng)前name的value值的具體實(shí)現(xiàn),感興趣的朋友可以參考下2013-12-12jQuery簡(jiǎn)單實(shí)現(xiàn)MD5加密的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)MD5加密的方法,基于jquery.md5.js插件實(shí)現(xiàn)md5加密功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-03-03