苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

分布式系统框架(V1.3) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper万能框架(V2.3) HttpHelper官方出品,无敌框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V1.9) 最牛的爬虫类,没有爬不到只有想不到 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 641|回复: 7

[Jquery] jQuery属性选择器轻松了解

[复制链接]
  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

    发表于 2018-3-8 20:33:16 | 显示全部楼层 |阅读模式
    jQuery属性选择器,顾名思义,就是根据jQuery的各个属性进行页面元素的选择。常见的jQuery属性选择器,有如下几种:
    1.  [attribute]  匹配包含给定属性的元素(如: 包含id、name、class等 )
    2.  [attribute=value]  匹配给定的属性是某个特定值的元素(如: 查找name=‘text’的元素 )


    3.  [attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素。(如:查找name !=‘text’的元素 )


    4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素(如:查找 name 以btn_开头的元素 )


    5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素(如: 查找 name 以news结束的元素 )


    6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素(如: 查找 name 包含news的元素 )


    7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用。( 如: 查找所有input元素中,name=‘text’的元素 )



    从上面可以看到,属性选择器,主要就是根据各个属性,不同的内容,获取不同的元素列表。
    在日常的开发中,经常使用的,查找所有的,name=固定值的所有元素,然后进行相应操作。


    1.  [attribute] 匹配包含给定属性的元素
    详细解析如下:
    html代码:
    [HTML] 纯文本查看 复制代码
    <div>
      <p>Hello!</p>
    </div>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <div name="test4"></div>


    jQuery代码:
    [JavaScript] 纯文本查看 复制代码
    $("div[id]")


    输出结果:
    [JavaScript] 纯文本查看 复制代码
    [ <div id="test1"></div>,  <div id="test2"></div>,  <div id="test3"></div> ]


    从上面可以看到,此处获取的是,所有包含id属性的div元素
    从html中可以看到, 总共有5个div,其中3个div包含id属性,1个div包含name属性, 还有一个div不包含任何属性   故输出结果中,有3个输出


    2.  [attribute=value] 匹配给定的属性是某个特定值的元素(如: 查找name=‘text’的元素 )
       点击查看详细解析

    3.  [attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素。(如:查找name !=‘text’的元素 )
       点击查看详细解析


    4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素(如:查找 name 以btn_开头的元素 )
       点击查看详细解析


    5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素(如: 查找 name 以news结束的元素 )
       点击查看详细解析


    6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素(如: 查找 name 包含news的元素 )
       点击查看详细解析


    7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用。( 如: 查找所有input元素中,name=‘text’的元素 )
       点击查看详细解析





  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

     楼主| 发表于 2018-3-8 20:39:10 | 显示全部楼层
    2.  [attribute=value]  匹配给定的属性是某个特定值的元素
    详细讲解如下:
    实例如下: 查找所有 name 属性是 newsletter 的 input 元素

    html代码:
    [HTML] 纯文本查看 复制代码
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />



    jQuery代码:
    [JavaScript] 纯文本查看 复制代码
    $("input[name='newsletter']").attr("checked", true);



    输出结果:
    [HTML] 纯文本查看 复制代码
    [ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]


  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

     楼主| 发表于 2018-3-8 20:43:32 | 显示全部楼层
    3.  [attribute!=value]  匹配所有不含有指定的属性,或者属性不等于特定值的元素


    详细讲解实例如下:
       **** 查找所有 name 属性不是 newsletter 的 input 元素, 并给这些元素添加 checked=true的属性


    html代码:
    [HTML] 纯文本查看 复制代码
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />



    jQuery代码:
    [JavaScript] 纯文本查看 复制代码
    $("input[name!='newsletter']").attr("checked", true);



    输出结果:
    [HTML] 纯文本查看 复制代码
    [ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

     楼主| 发表于 2018-3-8 20:46:19 | 显示全部楼层
    4.  [attribute^=value]  匹配给定的属性是以某些值开始的元素
    详细代码讲解如下:
      **** 查找所有 name 以 'news' 开始的 input 元素


    html代码:
    [HTML] 纯文本查看 复制代码
    <input name="newsletter" />
    <input name="milkman" />
    <input name="newsboy" />



    jQuery代码:
    [JavaScript] 纯文本查看 复制代码
    $("input[name^='news']")



    输出结果:
    [HTML] 纯文本查看 复制代码
    [ <input name="newsletter" />, <input name="newsboy" /> ]

  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

     楼主| 发表于 2018-3-8 20:48:58 | 显示全部楼层
    5.  [attribute$=value]  匹配给定的属性是以某些值结尾的元素
    详细实例代码如下:

      *** 查找所有 name 以 'letter' 结尾的 input 元素


    html代码:
    [HTML] 纯文本查看 复制代码
    <input name="newsletter" />
    <input name="milkman" />
    <input name="jobletter" />



    jQuery代码:
    [JavaScript] 纯文本查看 复制代码
    $("input[name$='letter']")



    输出结果:
    [HTML] 纯文本查看 复制代码
    [ <input name="newsletter" />, <input name="jobletter" /> ]




  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

     楼主| 发表于 2018-3-8 20:52:50 | 显示全部楼层
    6.  [attribute*=value]  匹配给定的属性是以包含某些值的元素


    详细代码实例如下:
      *** 查找所有 name 包含 'man' 的 input 元素


    html代码:
    [HTML] 纯文本查看 复制代码
    <input name="man-news" />
    <input name="milkman" />
    <input name="letterman2" />
    <input name="newmilk" />



    jQuery代码:
    [JavaScript] 纯文本查看 复制代码
    $("input[name*='man']")



    输出结果:
    [HTML] 纯文本查看 复制代码
    [ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

     楼主| 发表于 2018-3-8 20:55:29 | 显示全部楼层
    7.  [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用


    详细实例代码如下:
       *** 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾

    html代码:
    [HTML] 纯文本查看 复制代码
    <input id="man-news" name="man-news" />
    <input name="milkman" />
    <input id="letterman" name="new-letterman" />
    <input name="newmilk" />



    jQuery代码:
    [JavaScript] 纯文本查看 复制代码
    $("input[id][name$='man']")



    输出结果:
    [HTML] 纯文本查看 复制代码
    [ <input id="letterman" name="new-letterman" /> ]

  • TA的每日心情
    奋斗
    昨天 08:44
  • 签到天数: 199 天

    [LV.7]常住居民III

     楼主| 发表于 2018-3-8 21:01:40 | 显示全部楼层
    以上就是所有的 属性选择器 实例详解,  其实属性选择器,就是根据 各个元素的各种属性,进行页面html元素的选择,查询等操作
    您需要登录后才可以回帖 登录 | 马上注册

    本版积分规则

    QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备17001017号-1 )

    GMT+8, 2018-12-13 08:14

    © 2017-2018

    快速回复 返回顶部 返回列表