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 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
详解Bootstrap按钮
Jan 04 Javascript
js实现不重复导入的方法
Mar 02 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
React路由管理之React Router总结
May 10 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 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多线程抓取网页实现代码
2010/07/22 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
实例讲解php实现多线程
2019/01/27 PHP
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python获取当前路径实现代码
2017/05/08 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Django自带的用户验证系统实现
2020/12/18 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
电子专业推荐信范文
2013/11/18 职场文书
实习心得体会
2014/01/02 职场文书
物流仓管员工作职责
2014/01/06 职场文书
高三生物教学反思
2014/01/25 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
小学语文教学随笔
2015/08/14 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL