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 mobile changepage的三种传参方法介绍
Sep 13 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
原生js+ajax分页组件
Jan 30 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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中文乱码的解决方法
2006/12/17 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jquery select下拉框操作的一些说明
2010/04/02 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
高级工程师英文求职信
2014/03/19 职场文书
质量保证书格式
2015/02/27 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
MySQL分库分表详情
2021/09/25 MySQL
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL
浅析Python OpenCV三种滤镜效果
2022/04/11 Python