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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery实现视频展示效果
May 30 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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入门小知识
2008/03/24 PHP
关于页面优化和伪静态
2009/10/11 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php实现中文转数字
2016/02/18 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python中list初始化方法示例
2016/09/18 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python 加密与解密小结
2018/12/06 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
节约用水倡议书
2014/04/16 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
三峡大坝导游词
2015/01/31 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技