jQuery选择器之属性筛选选择器用法详解


Posted in jQuery onSeptember 19, 2017

jQuery选择器之属性筛选选择器用法详解

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等

[attr*="value"]能在网站中帮助我们匹配不同类型的文件

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>属性筛选选择器</h2>
  <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
  <div class="left" testattr="true" >
    <div class="div" testattr="true" name='p1'>
      <a>[att=val]</a>
    </div>
    <div class="div" testattr="true" p2>
      <a>[att]</a>
    </div>
    <div class="div" testattr="true" name="-">
      <a>[att|=val]</a>
    </div>
    <div class="div" testattr="true" name="a b">
      <a>[att~=val]</a>
    </div>
  </div>

  <script type="text/javascript">
     //查找所有div中,属性name=p1的div元素
     $("div[name = p1]").css("border", "3px groove red"); 
  </script>

  <script type="text/javascript">
    //查找所有div中,有属性p2的div元素
    $("div[p2]").css("border", "3px groove blue"); 
  </script>

  <script type="text/javascript">
    //查找所有div中,有属性name中的值只包含一个连字符“-”的div元素
    $("div[name|='-']").css("border", "3px groove #00FF00"); 
  </script>

  <script type="text/javascript">
    //查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素
    $("div[name~='a']").css("border", "3px groove #668B8B"); 
  </script>


  <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
  <div class="left" testattr="true" >
    <div class="div" testattr="true" name='imooc-aaorn'>
      <a>[att^=val]</a>
    </div>
    <div class="div" testattr="true" name='aaorn-imooc'>
      <a>[att$=val]</a>
    </div>
    <div class="div" testattr="true" name="attr-test-selector">
      <a>[att*=val]</a>
    </div>
    <div class="div" name="a b">
      <a>[att!=val]</a>
    </div>
  </div>


  <script type="text/javascript">
     //查找所有div中,属性name的值是用imooc开头的
     $("div[name ^= imooc]").css("border", "3px groove red"); 
  </script>

  <script type="text/javascript">
     //查找所有div中,属性name的值是用imooc结尾的
     $("div[name $= imooc]").css("border", "3px groove blue"); 
  </script>

  <script type="text/javascript">
    //查找所有div中,有属性name中的值包含一个test字符串的div元素
    $("div[name*='test']").css("border", "3px groove #00FF00"); 
  </script>

  <script type="text/javascript">
    //查找所有div中,有属性testattr中的值没有包含"true"的div
    $("div[testattr != 'true']").css("border", "3px groove #668B8B"); 
  </script>


</body>

</html>

以上这篇jQuery选择器之属性筛选选择器用法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现简单轮播图效果
Dec 27 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
jQuery选择器之子元素选择器详解
Sep 18 #jQuery
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 #jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 #jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 #jQuery
You might like
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
php、mysql查询当天,查询本周,查询本月的数据实例(字段是时间戳)
2017/02/04 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
JavaScript小技巧 2.5 则
2010/09/12 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
vue中appear的用法
2017/08/17 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
python自定义类并使用的方法
2015/05/07 Python
python flask框架实现重定向功能示例
2019/07/02 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
初一生物教学反思
2014/01/18 职场文书
体育口号大全
2014/06/18 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
食品质检员岗位职责
2015/04/08 职场文书
中标通知书格式
2015/04/17 职场文书
《包身工》教学反思
2016/02/23 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python