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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
PHPExcel中的一些常用方法汇总
Jan 23 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
基于node.js之调试器详解
Aug 22 Javascript
react 创建单例组件的方法
Apr 26 Javascript
微信小程序实现左右列表联动
May 19 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
详解爬虫被封的问题
2019/04/23 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
Python如何实现远程方法调用
2020/08/07 Python
介绍一下linux文件系统分配策略
2013/02/25 面试题
财务担保书范文
2014/04/02 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
国际会计专业求职信
2014/08/04 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
公司文体活动总结
2015/05/07 职场文书
尼克胡哲观后感
2015/06/08 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL