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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
深入理解(function(){... })();
Aug 16 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
纯js+css实现在线时钟
Aug 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
PHP语法速查表
2006/12/06 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python对文件操作知识汇总
2016/05/15 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
美国钻石商店:Zales
2016/11/20 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
集中整治工作方案
2014/05/01 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL