关闭

jquery属性选择器

标签: jquerydivbuttonfunctioninputclass
686人阅读 评论(2) 收藏 举报

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>

 

 

 

 

 

  

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:107186次
    • 积分:1293
    • 等级:
    • 排名:千里之外
    • 原创:59篇
    • 转载:2篇
    • 译文:0篇
    • 评论:11条
    最新评论