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生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
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
php4的session功能评述(二)
2006/10/09 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php mysql 封装类实例代码
2016/09/18 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
好矿嫂事迹材料
2014/01/21 职场文书
设备售后服务承诺书
2014/05/30 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
融资合作协议书范本
2014/10/17 职场文书
追悼会答谢词范文
2015/09/29 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书