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 继承详解(二)
Jul 13 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
浅谈React Event实现原理
Sep 20 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
jquery插件之easing使用
2010/08/19 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
微信小程序的生命周期的详解
2017/10/19 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python删除windows垃圾文件的方法
2015/07/14 Python
Python中特殊函数集锦
2015/07/27 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python解包用法详解
2021/02/17 Python
介绍一下Linux文件的记录形式
2013/09/29 面试题
求职信格式范本
2013/11/15 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
2014年科普工作总结
2014/12/06 职场文书
企业2014年度工作总结
2014/12/10 职场文书
学校施工安全责任书
2015/01/29 职场文书
公司禁烟通知
2015/04/23 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
2016年教师新年寄语
2015/08/18 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python