jQuery Selector 之表單對象屬性類
:enabled
:disabled
:checked
:selected
1、
:enabled
匹配所有可用元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單對象屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:enabled 匹配所有可用元素
//查找所有可用的input元素
var str=' ';//此變數顯示訊息用的
$("input:enabled").val(function() {
str += '-- name: ' + this.name;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
</body>
</html>
顯示結果：
2、
:disabled
匹配所有不可用元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單對象屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:disabled 匹配所有不可用元素
//查找所有不可用的input元素
var str=' ';//此變數顯示訊息用的
$("input:disabled").val(function() {
str += '-- name: ' + this.name;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
</body>
</html>
顯示結果：
3、
:checked
匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option)
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單對象屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:checked 匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option)
//查找所有選中的複選框元素
var str=' ';//此變數顯示訊息用的
$("input:checked").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
</body>
</html>
顯示結果：
4、
:selected
匹配所有選中的option元素
程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單對象屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script>
$(document).ready(function(){
//:selected 匹配所有選中的option元素
//查找所有選中的選項元素
var str=' ';//此變數顯示訊息用的
$("select option:selected").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
</body>
</html>
顯示結果：
沒有留言:
張貼留言