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 uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
Servlet返回的数据js解析2种方法
Dec 12 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
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
利用PHP如何实现Socket服务器
2015/09/23 PHP
php实现微信企业转账功能
2018/10/02 PHP
js停止输出代码
2008/07/20 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Python3实现二叉树的最大深度
2019/09/30 Python
Python列表list操作相关知识小结
2020/01/29 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
学校安全检查制度
2014/01/27 职场文书
2014年高考决心书
2014/03/11 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
物资采购管理制度
2015/08/06 职场文书
python基础入门之字典和集合
2021/06/13 Python