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 提升运行速度之循环篇 译文
Aug 15 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
JS创建对象的写法示例
Nov 04 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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+mysql写的简单留言本实例代码
2008/07/25 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
php简单实现快速排序的方法
2015/04/04 PHP
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
尝试使用Python爬取城市租房信息
2022/04/12 Python