JQuery常用選擇器總結

1.基本選擇器

 #id       $("#test").css("background","#bbffaa")//選取id為test的元素
 element   $("p") ;//選取所有的<p>元素
  *        $("*");//選取所有元素
 .class  $(".test");//選取類名為test的元素
  selector1,selector2   $("p,p.myClass,span");//組合選擇

2.層次選擇器

$("p span")//選取<p>裡所有<span>元素(所有後代元素)
$("p>span")//選取<p>元素下元素名為<span>的子元素(隻限於子元素)
$(".one+p")//選取class 為one的下一個<p>同輩元素
等價於$(".one").next("p")
$("#two~p")//選取id為two的元素後面的所有<p>同輩元素
等價於$("#two").nextAll("p")

3.過濾選擇器(以“:”開頭)
1.基本過濾

:first  選取第一個元素:  $("p:first")  選區所有<p>元素中第一個<p>元素
:last   選取最後一個元素  $("p:last")
:not(selector) 去除所有給定選擇器匹配的元素           $("input:not(.myClass)") 選取class不是myClass的<input>元素
:even 選取索引數是偶數的元素 索引從0開始 $("p:even")
:odd 選取索引數是偶數的元素 索引從0開始 $("p:odd")
:eq(index)選取索引數等於index的元素  $("p:eq(2)")
:gt(index)選取索引數大於index的元素  $("p:gt(2)")
:lt(index)選取索引數小於index的元素   $("p:lt(2)")
:header   選取所有標題元素<h1>..<h6> $(":header")
:animated  選取所有當前正在執行動畫的的所有元素 $("p:animated")選取正在執行動畫的<p>元素
:focus 選取當前獲得焦點的元素 $(":focus")

2.內容過濾

:contains(text)選取含有文本內容為text的元素 $("p:contains('我')")選取含有文本"我"的<p>元素
:empty 選取不包含子元素或者文本的空元素 $("p:empty")選取不包含子元素(包括文本元素)的<p>空元素
:has(selector)選取含有選擇器所匹配的元素的元素 $("p:has(p)")選取含有<p>元素的<p>元素
:parent 選取還有子元素或文本的元素 $("p:parent")選取擁有子元素(包括文本元素)的<p>元素 

3.可見性過濾

:hidden 選取所有不可見元素 $(:hidden)選取所有不可見元素 包括<input type="hidden"> <p> 和<p>等 如果隻想選取<input>元素,可以使用 $("input:hidden")
:visible 選取所有可見元素  $(p:visible) 選取所有可見的<p>元素
  例如 顯示隱藏的<p>元素 $(p:hidden).show(3000)

4.屬性過濾(Jquery中的單引號和雙引號沒有區別,如果一個字符串,外面用單引號裡面的雙引號就字符串瞭,反之,如果外面是雙引號裡面的單引號就是字體串,雙引號不能組合雙引號使用 ,單引號亦然,但是平時要盡量使用單引號)

[attribute] 選取擁有此屬性的元素 $("p[id]")選取擁有屬性id的元素
[attribute=value] 選取屬性值為value的元素 $("p[title=test]") 選取屬性title為“test”的<p>元素
[attribute!=value] 選取屬性的值不等於value的元素 $("p[title!=test]")
[attribute^=value] 選取屬性的值以value開始的元素 $("p[title^=te]")選取屬性title的值以te開始的p元素
[attribute$=value] 選取屬性的值以value結束的元素 $("p[title$=est]")選取屬性title的值以est結束的p元素
[attribute*=value] 選取屬性的值含有value的元素 $("p[title*=es]")選取屬性title的值含有es的p元素
[attribute|=value] 選取屬性等於給定字符串或以該字符串為前綴(該字符串後跟一個連字符"-")的元素 $('p[title|="en"]')
[attribute~=value] 選取屬性用空格分隔的值中包含一個給定值的元素 $('p[title~="uk"]')
[attribute1][attribute2][attributeN] 用屬性選擇器合並成一個復合屬性選擇器,滿足多個條件。每選擇一次,縮小一次范圍 
$("p[id][title$='test']")

5.子元素過濾

:nth-child(index/evenn/odd/equation) 選取每個父元素下得第index個子元素或者奇偶元素(index從1算起) 
解析::eq(index)隻匹配一個元素,而:nth-child將為每一個父元素匹配子元素,並且:nth-child(index)的index是從1開始的,而:eq(index)是從0開始的
:first-child 選取每個父元素的第一個子元素  集合元素 
解析::first隻返回單個元素,而:first-child選擇符將為每個父元素匹配第一個子元素。例如$("ul li:first-child");選取每個<ul>中第一個<li>元素
:last-child 選取每個父元素的最後一個子元素 
解析::last隻返回單個元素,:last-child選擇符將為每個父元素匹配最後一個子元素 例如$("ul li:last-child");選擇<ul>中最後一個<li>元素
:only-child 如果某個元素是他父元素中唯一的子元素,那麼將會被匹配。如果父元素中含有其他元素,則不會被匹配 $("ul li:only-child")在<ul>中選取是唯一子元素的<li>元素 

6.表單對象屬性過濾

:enabled 選取所有可用元素 $("#form1:enabled") 選取id為form1的表單內所有可用元素
:disabled 選取所有不可用元素 $("#form1:disabled")
:checked 選取所有被選中的元素(單選框,復選框)$("input:checked")選取所有被選中的<input>元素
:selected 選取所有被選中的選項元素(下拉列表)
$("select option:selected") 選取所有被選中的選項元素 

4.表單選擇器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
選擇器的註意事項
\\為轉義字符

$(".test :hidden") 帶空格表示選取class為test裡的隱藏元素
$(".test:hidden")不帶空格表示選取隱藏的class為test的元素

JQuery 提供的選擇器的擴展
MoreSelectors for jQuery
這是一個jQuery的插件 用於增加更多的選擇器,例如.color可以匹配顏色, :colIndex可以匹配表格中的列
插件地址:https://plugins.jquery.com/project/moreSelectors

其他使用CSS選擇器的方法
1.document.getElementsBySelector() 通過選擇器來獲取文檔元素
document.getElementBySelector(‘p#main p a.external’)
2.cssQuery() 利用css選擇器查找元素的腳本 支持css1 css2 以及部分css3選擇器,它支持一些jQuery尚不能支持的選擇器
elements=cssQuery(selector[.form]);
官方網站 https://dean.edwards.name/my/cssQuery/

選擇器實例舉例
初步隱藏部分品牌,按鈕為 顯示全部品牌
點擊前樣式
點擊按鈕 按鈕內容變為精簡顯示品牌,並且顯示全部隱藏元素,高亮顯示推薦品牌
點擊後樣式

大體代碼框架:

if(元素顯示){元素隱藏}
else{元素顯示}

源代碼:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script type="text/javascript" src="jquery-1.12.4.js"></script>

<script type="text/javascript">
$(document).ready(function(e) {

    var $category=$(".SubCategoryBox ul li:gt(5):not(:last)");/*從第七個開始隱藏 除“其他品牌”以外*/
    $category.hide();
    var $toggleBtn=$("p.showmore>a");/*類名為showmore的p元素的子元素a*/
    $toggleBtn.click(function(){

        if($category.is(":visible")){
            $category.hide();
            $(this).text("顯示全部品牌");
            $("ul li").removeClass("promoted");/*移除class類*/
            }
        else{
        $category.show();

        $(this).text("精簡顯示品牌");
    $("ul li").filter(":contains('e'),:contains('f'),:contains(c)").addClass("promoted");/*filter(expr)為篩選出符合要求的元素 addClass是添加class類*/
    return false;
        }
        });
});

</script>
<style type="text/css">
a{color:#000000;
text-decoration:none; }
a:hover{ color:#E10E12;}
ul{
    list-style-type:none;   }
.SubCategoryBox ul li {  display:block;float:left; width:200px; line-height:20px;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a{
    color:#F1F007;}
</style>
</head>

<body>
<p class="SubCategoryBox">
   <ul>
       <li><a href="">a</a></li>
       <li><a href="">b</a></li>
       <li><a href="">c</a></li>
       <li><a href="">d</a></li>
       <li><a href="">e</a></li>
       <li><a href="">f</a></li>
       <li><a href="">g</a></li>
       <li><a href="">h</a></li>
       <li><a href="">i</a></li>
       <li><a href="">j</a></li>
       <li><a href="">k</a></li>
       <li><a href="">l</a></li>
       <li><a href="">m</a></li>
       <li><a href="">其他品牌相機</a></li>

   </ul>
   <p class="showmore">
      <a href="more.html"><span>顯示全部品牌</span></a>
   </p>
</p>

</body>
</html>

發佈留言