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-属性选择器

$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素  $("div")          ...
  • N_ou25
  • N_ou25
  • 2015年07月02日 14:34
  • 267

jQuery-属性选择器

$("li:first"),得到一组相同标签中的第一个元素 $("li:last"),得到一组相同标签中的最后一个元素 $("list:eq(index)"),灵活的选取一组中任意一个元素...

jQuery中的属性选择器

本篇文章只是《jQuery in Action》中属性选择器章节的翻译,翻译的主要原因是本人最近买了一本《jQuery实战(第三版)》,打算系统的过一遍知识点。结果那个翻译的实在不敢恭维(我怀疑好多地...

jQuery(2-8)表单对象过滤属性选择器

表单对象属性过滤选择器.html                   -->     可用元素 : 不可用元素 : 可用元素 : 不可用元素 : ...

jQuery笔记之属性选择器

//验证以上理论 $(function() { //改变含有title属性的元素的背景颜色,语法(选取包含给定属性的元素)实例$(" [href]" ...

jQuery属性选择器

CSS规范允许我们使用元素的属性来识别元素。虽然多样式化的文档需求在一些老的浏览器中不支持,但jQuery允许你使用他们,而忽视不同浏览器的使用。 当使用下面的属性选择器的时候,我们应该考虑到属性是...
  • ahuter9
  • ahuter9
  • 2013年01月01日 19:57
  • 401

【开发日记】【HTML】jQuery 属性选择器

jQuery 属性选择器 jQuery 属性选择器 $("div[id]") 查找所有含有 id 属性的div元素 $("div[id='ajaxa']") 查找 id 为 ajaxa 的 di...
  • GeekLei
  • GeekLei
  • 2014年05月26日 01:41
  • 764

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

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")...

jquery选择器之属性选择器

属性选择器中的类别: 1、[attribute]      匹配包含给定属性的元素      例:查找所有含id属性的div元素;$("div[id]"); 2、[attribute=va...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery属性选择器
举报原因:
原因补充:

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