jquery属性选择器

原创 2012年03月22日 20:24:30

1)[attribute]:匹配包含给定属性的元素

   eg:$("#btn").click(function(){

       //点击按钮后将含有id属性的div背景变为绿色

       $("div[id]").css("background","color");

       });

      <body>

        <input type="button" value="将含有id属性的div背景变为绿色" id="btn">

        <div id="one"></div>-----------绿色

        <div></div>

        <div id="three"></div>---------绿色

      </body>

2)[attribute=value]:匹配给定的属性是某个特定值的元素

   eg:$("#btn").click(function(){

       //点击按钮后将id=one的div背景变为绿色

       $("div[id=one]").css("background","color");

       });

      <body>

        <input type="button" value="将id=one属性的div背景变为绿色" id="btn">

        <div id="one"></div>---------绿色

        <div></div>

        <div id="three"></div>

      </body>

3)[attribute!=value]:匹配所有不含有指定的属性,或者属性不等于特定值的元素。

   eg:$("#btn").click(function(){

       //点击按钮后将id!=one的div背景变为绿色

       $("div[id!=one]").css("background","color");

       });

      <body>

        <input type="button" value="将id!=one属性的div背景变为绿色" id="btn">

        <div id="one"></div>

        <div></div>--------------绿色

        <div id="three"></div>--------------绿色

      </body>

4)[attribute^=value]:匹配给定的属性是以某些值开始的元素

   eg:$("#btn").click(function(){

       //点击按钮后将id以a开头的div背景变为绿色

       $("div[id^=a]").css("background","color");

       });

      <body>

        <input type="button" value="将id以a开头的div背景变为绿色" id="btn">

        <div id="one"></div>

        <div id="abcd"></div>---------------绿色

        <div id="three"></div>

      </body>

5)[attribute$=value]:匹配给定的属性是以某些值结尾的元素

     eg:$("#btn").click(function(){

       //点击按钮后将id以d结束的div背景变为绿色

       $("div[id$=d]").css("background","color");

       });

      <body>

        <input type="button" value="将id以d结束的div背景变为绿色" id="btn">

        <div id="one"></div>

        <div id="abcd"></div>-------------绿色

        <div id="three"></div>

      </body>

6)[attribute*=value]:匹配给定的属性是以包含某些值的元素

    eg:$("#btn").click(function(){

       //点击按钮后将id包含b的div背景变为绿色

       $("div[id*=b]").css("background","color");

       });

      <body>

        <input type="button" value="将id包含b的div背景变为绿色" id="btn">

        <div id="one"></div>

        <div id="abcd"></div>---------------绿色

        <div id="three"></div>

      </body>

7)[selector1][selector2][selectorN]:复合属性选择器,需要同时满足多个条件时使用

   eg:$("#btn").click(function(){

      //点击按钮后将有class属性且id含有f的div背景颜色变为绿色

       $("div[class][id*=f]").css("background","color");

       });

      <body>

        <input type="button" value="将含有id属性的div背景变为绿色" id="btn">

        <div id="one"></div>

        <div id="two"></div>

        <div id="three"></div>

        <div id="four" class="abcd">--------------------------绿色

      </body>

 

 

 

 

 

  

jQuery 层次选择器,属性选择器

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")...
  • tangdou5682
  • tangdou5682
  • 2016年12月01日 10:40
  • 649

jQuery 属性选择器 Demo like: element[herf*='value']

一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解: a{ margin-right:20px; } ol{ ...
  • ziwen00
  • ziwen00
  • 2013年10月19日 09:05
  • 2798

jquery用户自定义选择器及选择器高级用法实验

//用户自定义选择器       $(function(){        // Define custom filter by extending $.expr[":"]        $.expr...
  • luozhonghua2014
  • luozhonghua2014
  • 2015年05月17日 12:19
  • 1444

jquery选择器之属性过滤选择器

/*高亮显示*/ .highlight{ background-color: gray } Hello ID为test的DIV 足球 ...
  • itmyhome
  • itmyhome
  • 2013年11月04日 21:15
  • 5672

jquery依据自定义属性选择标签

jquery根据自定义属性选择标签   amp;$lt;/div>   使用$("div[myattr='test']")进行选择...
  • u013766398
  • u013766398
  • 2016年06月02日 17:55
  • 11758

jquery选择器-根据多个属性选择E[attr=val][attr=val]

根据多个属性选择E[attr=val][attr=val] $("div[title='ttt'][class='aaaa']").click()................   所有div元...
  • Elite_1989
  • Elite_1989
  • 2013年10月21日 10:50
  • 9448

jquery选择器中使用变量

$("span[name=" + name + "]") 选择span元素中name值等于变量name的元素 $("#ConditionExpression span[checked='che...
  • qq_15237993
  • qq_15237993
  • 2017年03月25日 11:05
  • 677

jquery 属性选择器

第一种根据属性选择E[attr] $("[title]").click().......... 即选择所有元素内 属性带有title的元素 即 li-1 li-2 li-1 li-2 ...
  • linshichen
  • linshichen
  • 2016年06月03日 09:31
  • 130

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#...
  • wsxsom
  • wsxsom
  • 2014年08月01日 13:53
  • 146

商品多属性选择效果

类似于淘宝选择商品多个属性后,组合生成库存信息
  • gong0585
  • gong0585
  • 2016年02月02日 17:38
  • 855
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery属性选择器
举报原因:
原因补充:

(最多只允许输入30个字)