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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
微信小程序实现刷脸登录
May 25 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
js身份证验证超强脚本
2008/10/26 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
自制简易打赏功能的实例
2017/09/02 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python常见数制转换实例分析
2015/05/09 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python双链表原理与实现方法详解
2020/02/22 Python
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
市场营销专业个人自荐信格式
2013/09/21 职场文书
企业安全生产责任书
2014/04/14 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
旅游节目策划方案
2014/05/26 职场文书
教室布置标语
2014/06/26 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫