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

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

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

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

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

查看: 4127|回复: 7

[Jquery] jQuery属性选择器轻松了解

[复制链接]
发表于 2018-3-8 20:33:16 | 显示全部楼层 |阅读模式
jQuery属性选择器,顾名思义,就是根据jQuery的各个属性进行页面元素的选择。常见的jQuery属性选择器,有如下几种:
1.  [attribute]  匹配包含给定属性的元素(如: 包含id、name、class等 )
2.  [attribute=value]  匹配给定的属性是某个特定值的元素(如: 查找name=‘text’的元素 )


3.  [attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素。(如:查找name !=‘text’的元素 )


4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素(如:查找 name 以btn_开头的元素 )


5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素(如: 查找 name 以news结束的元素 )


6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素(如: 查找 name 包含news的元素 )


7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用。( 如: 查找所有input元素中,name=‘text’的元素 )



从上面可以看到,属性选择器,主要就是根据各个属性,不同的内容,获取不同的元素列表。
在日常的开发中,经常使用的,查找所有的,name=固定值的所有元素,然后进行相应操作。


1.  [attribute] 匹配包含给定属性的元素
详细解析如下:
html代码:
[HTML] 纯文本查看 复制代码
<div>
  <p>Hello!</p>
</div>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div name="test4"></div>


jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("div[id]")


输出结果:
[JavaScript] 纯文本查看 复制代码
[ <div id="test1"></div>,  <div id="test2"></div>,  <div id="test3"></div> ]


从上面可以看到,此处获取的是,所有包含id属性的div元素
从html中可以看到, 总共有5个div,其中3个div包含id属性,1个div包含name属性, 还有一个div不包含任何属性   故输出结果中,有3个输出


2.  [attribute=value] 匹配给定的属性是某个特定值的元素(如: 查找name=‘text’的元素 )
   点击查看详细解析

3.  [attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素。(如:查找name !=‘text’的元素 )
   点击查看详细解析


4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素(如:查找 name 以btn_开头的元素 )
   点击查看详细解析


5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素(如: 查找 name 以news结束的元素 )
   点击查看详细解析


6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素(如: 查找 name 包含news的元素 )
   点击查看详细解析


7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用。( 如: 查找所有input元素中,name=‘text’的元素 )
   点击查看详细解析







1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
 楼主| 发表于 2018-3-8 20:39:10 | 显示全部楼层
2.  [attribute=value]  匹配给定的属性是某个特定值的元素
详细讲解如下:
实例如下: 查找所有 name 属性是 newsletter 的 input 元素

html代码:
[HTML] 纯文本查看 复制代码
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />



jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("input[name='newsletter']").attr("checked", true);



输出结果:
[HTML] 纯文本查看 复制代码
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]


 楼主| 发表于 2018-3-8 20:43:32 | 显示全部楼层
3.  [attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素


详细讲解实例如下:
   **** 查找所有 name 属性不是 newsletter 的 input 元素, 并给这些元素添加 checked=true的属性


html代码:
[HTML] 纯文本查看 复制代码
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />



jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("input[name!='newsletter']").attr("checked", true);



输出结果:
[HTML] 纯文本查看 复制代码
[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

 楼主| 发表于 2018-3-8 20:46:19 | 显示全部楼层
4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素
详细代码讲解如下:
  **** 查找所有 name 以 'news' 开始的 input 元素


html代码:
[HTML] 纯文本查看 复制代码
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />



jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("input[name^='news']")



输出结果:
[HTML] 纯文本查看 复制代码
[ <input name="newsletter" />, <input name="newsboy" /> ]

 楼主| 发表于 2018-3-8 20:48:58 | 显示全部楼层
5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素
详细实例代码如下:

  *** 查找所有 name 以 'letter' 结尾的 input 元素


html代码:
[HTML] 纯文本查看 复制代码
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />



jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("input[name$='letter']")



输出结果:
[HTML] 纯文本查看 复制代码
[ <input name="newsletter" />, <input name="jobletter" /> ]




 楼主| 发表于 2018-3-8 20:52:50 | 显示全部楼层
6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素


详细代码实例如下:
  *** 查找所有 name 包含 'man' 的 input 元素


html代码:
[HTML] 纯文本查看 复制代码
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />



jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("input[name*='man']")



输出结果:
[HTML] 纯文本查看 复制代码
[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

 楼主| 发表于 2018-3-8 20:55:29 | 显示全部楼层
7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用


详细实例代码如下:
   *** 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾

html代码:
[HTML] 纯文本查看 复制代码
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />



jQuery代码:
[JavaScript] 纯文本查看 复制代码
$("input[id][name$='man']")



输出结果:
[HTML] 纯文本查看 复制代码
[ <input id="letterman" name="new-letterman" /> ]

 楼主| 发表于 2018-3-8 21:01:40 | 显示全部楼层
以上就是所有的 属性选择器 实例详解,  其实属性选择器,就是根据 各个元素的各种属性,进行页面html元素的选择,查询等操作
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

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

GMT+8, 2024-3-29 01:37

© 2014-2021

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