http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 2665|回复: 3

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

[复制链接]
发表于 2018-3-20 22:29:12 | 显示全部楼层 |阅读模式
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的区别
1.png
不可用的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>


备注:
可以从下图,清晰看到获取的内容,以及页面展示的效果
2.png



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>


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







1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-3-20 22:31:29 | 显示全部楼层
属性选择器是比较重要的选择器     最常见的用处就是,获取所有页面table中选择的tr行   以及获取选中的单元按钮内容等
发表于 2018-3-21 08:01:25 | 显示全部楼层
强烈支持楼主ing……
 楼主| 发表于 2018-3-22 22:22:49 | 显示全部楼层
谢老大支持,努力ing
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-3-29 12:55

© 2014-2021

快速回复 返回顶部 返回列表