<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1. 為 #address 添加 focus(獲取焦點), blur(失去焦點) 響應函數
$(":text").focus(function(){
//2. 當獲取焦點時, 若 #address 中是默認值
//(defaultValue 屬性, 該屬性是 DOM 對象的屬性), 就使其值置為 ""
var val = $(this).val();
if(val == this.defaultValue){
$(this).val("");
}
}).blur(function(){
//3. 失去焦點是, 若 #address 的值在去除前后空格后等于 ""
//則為其恢復默認值.
var val = this.value;
if($.trim(val) == ""){
this.value = this.defaultValue;
}
});
//2. 使單選下拉框的'選擇3號'被選中
$(":button:eq(1)").click(function(){
$("#single").val("選擇3號");
});
//使多選下拉框選中的'選擇2號'和'選擇4號'被選中
$(":button:eq(2)").click(function(){
$("#multiple").val(["選擇2號", "選擇4號"]);
});
//使多選框的'多選2'和'多選4'被選中
$(":button:eq(3)").click(function(){
$(":checkbox[name='c']").val(["check2", "check4"]);
});
//使單選框的'單選2'被選中
$(":button:eq(4)").click(function(){
//即便是為一組 radio 賦值, val 參數中也應該使用數組.
//使用一個值不起作用。
$(":radio[name='r']").val(["radio2"]);
});
//打印已經被選中的值
$(":button:eq(5)").click(function(){
//val() 可以直接獲取 select 的被選擇的值.
alert($("#single").val());
alert($("#multiple").val());
//val 不能直接獲取 checkbox 被選擇的值
//若直接獲取, 只能得到第一個被選擇的值.
//因為 $(":checkbox[name='c']:checked") 得到的是一個
//數組. 而使用 val() 方法只能獲取數組元素的第一個值
//若希望打印被選擇的所有制, 需要使用 each 遍歷.
//alert($(":checkbox[name='c']:checked").val());
$(":checkbox[name='c']:checked").each(function(){
alert(this.value);
});
//而 raido 被選擇的只有一個, 所以可以直接使用 val() 方法.
alert($(":radio[name='r']:checked").val());
});
})
</script>
</head>
<body>
<input type="text" id="address" value="請輸入郵箱地址"><br>
<input type="text" id="password" value="請輸入郵箱密碼"><br>
<input type="button" value="登錄">
<br><br><br>
<input type="button" value="使單選下拉框的'選擇3號'被選中"/>
<input type="button" value="使多選下拉框選中的'選擇2號'和'選擇4號'被選中"/><br>
<input type="button" value="使多選框的'多選2'和'多選4'被選中"/>
<input type="button" value="使單選框的'單選2'被選中"/><br>
<input type="button" value="打印已經被選中的值"><br>
<br/>
<select id="single">
<option>選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
</select>
<select id="multiple" multiple="multiple" >
<option selected="selected">選擇1號</option>
<option>選擇2號</option>
<option>選擇3號</option>
<option>選擇4號</option>
<option selected="selected">選擇5號</option>
</select>
<br/><br/>
<input type="checkbox" name="c" value="check1"/> 多選1
<input type="checkbox" name="c" value="check2"/> 多選2
<input type="checkbox" name="c" value="check3"/> 多選3
<input type="checkbox" name="c" value="check4"/> 多選4
<br/>
<input type="radio" name="r" value="radio1"/> 單選1
<input type="radio" name="r" value="radio2"/> 單選2
<input type="radio" name="r" value="radio3"/> 單選3
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
