jquery选择器之属性过滤选择器详解


Posted in Javascript onJanuary 27, 2014
<style type="text/css">
  /*高亮显示*/
  .highlight{   
   background-color: gray
  }
 </style>

<body>
   <div>
      <p>Hello</p>
   </div>
   <div id="test">ID为test的DIV</div>
   <input type="checkbox" id="s1" name="football" value="足球" />足球
   <input type="checkbox" name="volleyball" value="排球" />排球
   <input type="checkbox" id="s3" name="basketball" value="篮球" />篮球
   <input type="checkbox" id="s4" name="other" value="其他" />其他
  </body>

1. [attribute]用法
定义:匹配包含给定属性的元素
$("div[id]").addClass("highlight"); //查找所有含有ID属性的div元素

2. [attribute=value]用法
定义:匹配给定的属性是某个特定值的元素
$("input[name='basketball']").attr("checked",true);   //name属性值为basketball的input元素选中

3. [attribute!=value]用法
定义:匹配给定的属性是不包含某个特定值的元素
$("input[name!='basketball']").attr("checked",true);   //name属性值不为basketball的input元素选中 
//此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
$("input:not(input[name='basketball'])").attr("checked",true);

4. [attribute^=value]用法
定义:匹配给定的属性是以某些值开始的元素
$("input[name^='foot']").attr("checked",true);  //查找所有 name 以 'foot' 开始的 input 元素

5. [attribute$=value]用法
定义:匹配给定的属性是以某些值结尾的元素
$("input[name$='ball']").attr("checked",true); //查找所有 name 以 'ball' 结尾的 input 元素

6. [attribute*=value]用法
定义:匹配给定的属性是以包含某些值的元素
$("input[name*='sket']").attr("checked",true);  //查找所有 name 包含 'sket' 的 input 元素

7. [selector1][selector2][selectorN]用法
定义:复合属性选择器,需要同时满足多个条件时使用
$("input[id][name$='ball']").attr("checked",true);  //找到所有含有 id属性,并且它的 name属性是以 ball结尾的
Javascript 相关文章推荐
JavaScript 常用函数库详解
Oct 21 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
让table变成exls的示例代码
Mar 24 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
jQuery自定义事件的简单实现代码
Jan 27 #Javascript
jQuery中bind与live的用法及区别小结
Jan 27 #Javascript
jQuery实现动画效果的简单实例
Jan 27 #Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 #Javascript
js修改原型的属性使用介绍
Jan 26 #Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 #Javascript
JS批量修改PS中图层名称的方法
Jan 26 #Javascript
You might like
php木马攻击防御之道
2008/03/24 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
JS打印组合功能
2016/08/04 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
星球大战与Python之间的那些事
2016/01/07 Python
python opencv之分水岭算法示例
2018/02/24 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python如何将两个txt文件内容合并
2019/10/18 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python实现UDP协议下的文件传输
2020/03/20 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Python如何将装饰器定义为类
2020/07/30 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
自荐书4要点
2014/01/25 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
新人入职感言
2015/07/31 职场文书