苏飞论坛

标题: jQuery的表单对象属性选择器解析大全 [打印本页]

---

作者: 范范    时间: 2018-3-20 22:29
标题: 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的区别
(, 下载次数: 87)

上传

点击文件名下载附件
不可用的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>

备注：
可以从下图，清晰看到获取的内容，以及页面展示的效果
(, 下载次数: 73)

上传

点击文件名下载附件



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>

备注：
具体的页面展示内容效果如下：
(, 下载次数: 71)

上传

点击文件名下载附件    可以看到，如果下拉框中，显示的内容，就是我们选中的内容的展示

---

作者: 范范    时间: 2018-3-20 22:31
属性选择器是比较重要的选择器     最常见的用处就是，获取所有页面table中选择的tr行   以及获取选中的单元按钮内容等

---

作者: 站长苏飞    时间: 2018-3-21 08:01
强烈支持楼主ing……

---

作者: 范范    时间: 2018-3-22 22:22
谢老大支持，努力ing

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4