jQuery(二)——jQuery選擇器之表單物件過濾選擇器
阿新 • • 發佈：2021-01-31
技術標籤：JavaWeb過濾器jquerycheckboxcssjs
4. 表單物件過濾選擇器
在開始之前，先介紹兩個屬性disabled屬性和multiple屬性，它們和checked屬性、selected屬性一樣：
checked=“checked” 表示多選框或單選框中的被初始時選中，不寫就不選中。
selected=“selected” 表示下拉列表中的option項是否被選中
disabled=“disabled” 表示input輸入框是否可用，預設可用，為enabled，disabled時不可用
multiple=“multiple” 表示下拉列表是否允許多選，預設不允許多選，當multiple屬性被賦值後允許多選。
可用元素: <input name="add" value="可用文字框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文字框1"/><br>
可用元素: <input name="che" value="可用文字框2"/><br>
不可用元素: <input name 
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected=" 
表單過濾器
- :input 匹配所有 input, textarea, select 和 button 元素
- :text 匹配所有 文字輸入框
- :password 匹配所有的密碼輸入框
- :radio 匹配所有的單選框
- :checkbox 匹配所有的複選框
- :submit 匹配所有提交按鈕
- :image 匹配所有 img 標籤
- :reset 匹配所有重置按鈕
- :button 匹配所有 input type=button 按鈕
- :file 匹配所有 input type=file 檔案上傳
- :hidden 匹配所有不可見元素 display:none 或 input type=hidden
表單物件屬性過濾器：
- :enabled 匹配所有可用元素
- :disabled 匹配所有不可用元素
- :checked 匹配所有選中的單選，複選以及下拉列表中選中的 option 標籤物件
- :selected 匹配所有選中的 下拉列表中選中的 option 標籤物件
注意： 3:checked 過濾得到的元素是要 包含4:selected 的，可以對3的全集加以限制，只得到選中的單選、複選框的內容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-30</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//1.對錶單內 可用input 賦值操作
//2.對錶單內 不可用input 賦值操作
//3.獲取多選框選中的個數 使用size()方法獲取選取到的元素集合的元素個數
//4.獲取多選框，每個選中的value值
//5.獲取下拉框選中的內容
</script>
</head>
<body>
<h3>表單物件屬性過濾選擇器</h3>
<button id="btn1">對錶單內 可用input 賦值操作.</button>
<button id="btn2">對錶單內 不可用input 賦值操作.</button><br /><br />
<button id="btn3">獲取多選框選中的個數.</button>
<button id="btn4">獲取多選框選中的內容.</button><br /><br />
<button id="btn5">獲取下拉框選中的內容.</button><br /><br />
<form id="form1" action="#">
可用元素: <input name="add" value="可用文字框1"/><br>
不可用元素: <input name="email" disabled="disabled" value="不可用文字框1"/><br>
可用元素: <input name="che" value="可用文字框2"/><br>
不可用元素: <input name="name" disabled="disabled" value="不可用文字框2"/><br>
<br>
多選框: <br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1: <br>
<select name="test" multiple="multiple" style="height: 100px" id="sele1">
<option>浙江</option>
<option selected="selected">遼寧</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br><br>
下拉列表2: <br>
<select name="test2">
<option>浙江</option>
<option>遼寧</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
</form>
</body>
</html>
介面效果如圖所示：
功能實現：分別給5個按鈕都繫結上相應的單擊事件
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.對錶單內 可用input 賦值操作
$("#btn1").click(function () {
$(":text:enabled").val("我是陸億行-2021-01-31");
}); //jQuery物件
// val()可以操作表單項的value屬性值(對jQuery物件而言)，相當於dom物件的value
// 它可以進行設定和獲取
//2.對錶單內 不可用input 賦值操作
$("#btn2").click(function () {
$(":text:disabled").val("我不是陸億行-2021-01-31");
});
//3.獲取多選框選中的個數 使用size()方法獲取選取到的元素集合的元素個數
$("#btn3").click(function () {
alert('多選框的個數：'+$(":checkbox").length);
alert('選中的個數：'+$(":checkbox:checked").length);
});
//4.只獲取多選框，每個選中的value值
$("#btn4").click(function () {
//var $checkboxs=$(":checkbox:checked");
var $checkboxs=$("input:checked");
//都可，前面必須要加以限制，否則只用checked還會獲得下拉列表select裡選中的內容
//法一：老式遍歷
for (var i=0;i<$checkboxs.length;i++){
alert( $checkboxs[i].value );
}
//Dom物件
//法二：each方法是jQuery物件提供用來遍歷元素的方法
$checkboxs.each(function () {
alert( this.value );
});//在遍歷的function函式中，有一個this物件，這個this物件，就是當前遍歷到的dom物件
});
//5.獲取下拉框選中的內容
$("#btn5").click(function () {
var $options=$(":selected");
// var $options = $("select option:selected"); 一樣
$options.each(function () {
//alert( this.value );
alert( this.innerHTML );
}); //二者效果是一樣的
});
});
</script>