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查找dom的几种方法效率详解
May 17 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery实现简单聊天室
Feb 08 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
世界收音机发展史
2021/03/01 无线电
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
使用js获取伪元素的content实例
2017/10/24 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python3字符串操作总结
2019/07/24 Python
Python配置文件处理的方法教程
2019/08/29 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
本科毕业生求职自荐信
2014/04/09 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python