jQuery的表单对象属性选择器解析大全

范范

jQuery的表单对象属性选择器解析大全

    本次主要讲解的是 表单元素属性选择器，从字面上的意思就可以看出，这些选择器，主要是根据表单元素的属性，作为条件，进行选择，区分的。


表单元素选择器主要有如下几种：

---

[C#] 纯文本查看 复制代码

1. :enabled  匹配所有可用元素
2. :disabled  匹配所有不可用元素
3. :checked  匹配所有选中的被选中元素(复选框、单选框等，select中的option)
4. :selected  匹配所有选中的option元素

下面就从每个表单元素属性选择器，进行逐个的实例讲解，以便于轻松掌握。

1. :enabled  

---

匹配所有可用元素

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input:enabled")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input name="id" /> ]

附件html代码：

[HTML] 纯文本查看 复制代码

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

备注：
从下图就可以清晰看出，不可用与可用的input的区别

不可用的input 是灰色的，鼠标的光标是不能进入的


2. :disabled

---

匹配所有不可用元素

jQuery代码：

[C#] 纯文本查看 复制代码

$("input:disabled")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <input name="email" disabled="disabled" /> ]

附件html代码：

[HTML] 纯文本查看 复制代码

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

3. :checked  

---

匹配所有选中的被选中元素(复选框、单选框等，select中的option)

jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("input:checked")

输出结果：

[JavaScript] 纯文本查看 复制代码

[<input type="checkbox" id="Checkbox1" value="532250" name="userflag" checked="checked">, <input type="checkbox" id="Checkbox5" value="531941" name="userflag" checked="checked"> ]

附件HTML代码：

[HTML] 纯文本查看 复制代码

<table class="table table-page" id="grid">
	<tbody>
		<tr>
			<td><input type="checkbox" id="Checkbox1" value="532250" name="userflag" checked="checked"></td>
			<td>532250</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox3" value="532249" name="userflag"></td>
			<td>532249</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox5" value="531941" name="userflag" checked="checked"></td>
			<td>531941</td>
		</tr>
		<tr>
			<td><input type="checkbox" id="Checkbox21" value="531665" name="userflag"></td>
			<td>531665</td>
		</tr>
		
		<tr>
			<td><input type="checkbox" id="Checkbox23" value="531657" name="userflag"></td>
			<td>531657</td>
		</tr>
	</tbody>
</table>

备注：
可以从下图，清晰看到获取的内容，以及页面展示的效果




4. :selected

---

匹配所有选中的option元素


jQuery代码：

[JavaScript] 纯文本查看 复制代码

$("select option:selected")

输出结果：

[JavaScript] 纯文本查看 复制代码

[ <option value="2" selected="selected">Gardens</option> ]

附件html内容：

[HTML] 纯文本查看 复制代码

<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

备注：
具体的页面展示内容效果如下：
   可以看到，如果下拉框中，显示的内容，就是我们选中的内容的展示

范范

属性选择器是比较重要的选择器     最常见的用处就是，获取所有页面table中选择的tr行   以及获取选中的单元按钮内容等

站长苏飞

强烈支持楼主ing……

范范

谢老大支持，努力ing