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 相关文章推荐
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
js中javascript:void(0) 真正含义
Nov 05 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
vue权限问题的完美解决方案
May 08 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
js实现带有动画的返回顶部
Aug 09 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实现递归无限级分类
2015/10/22 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
pytorch中的inference使用实例
2020/02/20 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
银行财务部实习生的自我鉴定
2013/11/27 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
保洁员岗位职责
2015/02/04 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2016春节慰问信范文
2015/03/25 职场文书
宣传稿格式范文
2015/07/23 职场文书
尊师重教主题班会
2015/08/14 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python