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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
js转义字符介绍
Nov 05 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
May 05 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
js实现密码强度检验
Jan 15 Javascript
jQuery常用选择器详解
Jul 17 jQuery
微信小程序代码上传、审核发布小程序
May 18 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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
JavaScript检测实例属性, 原型属性
2015/02/04 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
Python内置函数OCT详解
2016/11/09 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
python Tornado框架的使用示例
2020/10/19 Python
python 实现性别识别
2020/11/21 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
群众路线批评与自我批评发言稿
2014/10/16 职场文书