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 变量命名规则
Sep 23 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
Script的加载方法小结
Jan 12 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
js打造数组转json函数
Jan 14 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
微信小程序实现侧边分类栏
Oct 21 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设计模式 Builder(建造者模式)
2011/06/26 PHP
10个实用的PHP代码片段
2011/09/02 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
python中Apriori算法实现讲解
2017/12/10 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python读取YAML文件过程详解
2019/12/30 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
担保书格式及范文
2014/04/01 职场文书
个人委托书怎么写
2014/04/04 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
单位工作证明
2014/10/07 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
改进工作作风心得体会
2016/01/23 职场文书