初学jQuery之jQuery选择器

今天我们就谈论一下jquery选择器,它们大致分成了四种选择器!!!!

1.基本选择器(标签，ID,类，并集，交集，全局)

1.0(模板)

<body>
    <div >我是第一个div</div>
    <div><span>我是第二个div</span></div>
  </body>

1.1（标签)

 //标签
  $(function(){
   $("div").css("background-color","red");
  });

1.2（ID)

$(function(){
     $("#o").css("background-color","green");
  });

1.3（类）

 $(function(){
   $(".myc").css("background-color","red");
  });

1.4(并集)

 $(function(){
   $("div,#o").css("background-color","red");
  });

1.5（交集）

$(function(){
   $("div#o").css("background-color","yellow");
  });

1.6(全局)

$(function(){
     $("*").css("background-color","blue");
  });

2.层次选择器（后代，子，相邻，同辈，）

2.1(后代）

 $(function(){
     $("div span").css("background-color","green");
  });

2.2（子）

$(function(){
   $("div>span").css("color","blue");
 });

2.3(相邻）

$(function(){
   $("div+div").css("color","green");
 });

2.4(同辈）

 $(function(){
   $("div~div").css("color","red");
 });

3属性选择器

3.0（模板）

<body>
    <a id="12" href="#123">第一个链接</a>
    <a id="23" href="@">第二个链接</a>
    <a id="34" href="#">第三个链接</a>
  </body>

语法：

3.1

[attribute] 选取包含给定属性的元素

$(function(){
       $("[href]").css("color","red");
 });

3.2 [attribute=value] 选取等于给定属性是某个特定值的元素

$(function(){
       $("[href=#]").css("color","red");
 });

3.3[attribute!=value] 选取不等于给定属性是某个特定值的元素

$(function(){
    $("[href！=#]").css("color","red");
  });

3.4[attribute^=value] 选取给定属性是某个特定值开始的元素

$(function(){
$("[href^#).css("color","red");
    });

3.5[attribute$=value] 选取特定值是以某些特定值结尾的元素

$(function(){
    $("[href$=123]").css("color","red");
    });

3.6[attribute*=value] 选取给定属性是包含某些值

$(function(){
    $("[href*'2']").css("color","yellow");
    });

3.7[selector][selectorN] 选取满足多个条件的复合属性的元素

$(function(){
    $("a[href][id=12]").css("background-color","red");
    });

4.过滤选择器(规律选择器两大类：基本过滤选择器，可见性过滤选择器)

4.0（模板）

<body>
 <h2>你的生命值</h2>
   <ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li class="a">4</li>
   <li>5</li>
   <li>6</li>
   </ul>
  </body>

4.1

语法：

：first 选取第一个元素

 $(function(){
      $("li:first").css("background","red");
     });

4.2

：last 选取最后一个元素

 $(function(){
      $("li:last").css("background","blue");
     });

4.3

：not（selector）选取去除所有与定选择器匹配的元素

 $(function(){
          $("li:not(.a)").css("background","blue");
     });

4.4

：even 选取索引是偶数的所有元素（index从0开始）

$(function(){
         $("li:even").css("background","blue");
     });

4.5

：odd 选取索引是奇数的所有元素（index从0开始）

$(function(){
       $("li:odd").css("background","blue");
     });

4.6

：eq（index）选取索引等于index的元素（index从0开始）

$(function(){
       $("li:eq(1)").css("background","blue");
     });

4.7

：gt（index）选取索引大于index的元素（index从0开始）

 $(function(){
       $("li:gt(1)").css("background","blue");
     });

4.8

：lt（index）选取索引小于index的元素（index从0开始）

 $(function(){
       $("li:lt(1)").css("background","blue");
     });

4.9

：header 选取所有标题元素，如h1~h6

$(function(){
       $(":header").css("background","blue");
     });

4.10

:focus 选取当前获取焦点的元素

$(function(){
       $(":focus").css("background","red");
     });

5.0（模板）

<body>
    <p id="text_hide">点击按钮，我会被隐藏</p>
    <p id="text_show">隐藏的我，被显示了，嘿嘿</p>
    <input name="shwo" type="button" value="点击显示文字"/> 
    <input name="hide" type="button" value="点击显示文字"/> 
  </body>

语法：

5.1

hideen 选取所有隐藏的元素

 $(function(){
      $("p:hidden").show(100);
   });

5.2

visible 选取所有可见的元素

$(function(){
       $("p:visible").hide(100);
   });

相关推荐