jQuery基礎樣式——選擇器

一、符合CSS規範的選擇器

問題一：以下是一段HTML結構，通過jQuery的基本選擇器，我們有多少方法可以獲取？<div id="left" class="may"></div>

 $('.may') //類選擇器—— document.getElementsByClassName('may');
 $('#left')//ID選擇器——document.getElementById('left');
 $("div")// 元素選擇器——document.getElementsByTagName('div');
 $("*") //全選擇器 ——document.getElementsByTagName(*);

層級選擇器
問題二：通過選擇器方法，判斷選擇器名稱

$( "parent > child" )//子選擇器：選擇所有指定“parent”元素中指定的"child"的直接子元素。
$("prev + next")//後代選擇器：選擇給定的祖先元素的所有後代元素, 一個元素的後代可能是該元素的一個孩子，孫子，曾孫等
$("ancestor descendant")//相鄰兄弟選擇器：選擇所有緊接在“prev”元素後的“next”元素
$("prev ~ siblings")//一般兄弟選擇器：匹配“prev”元素之後的所有 兄弟元素。具有相同的父元素，並匹配過濾“siblings”選擇器

上面這幾種選擇器和css中的選擇器非常相似，除此之外，jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。篩選選擇器很多都不是CSS的規範，而是jQuery自己為了開發者的便利延展出來的選擇器

二、篩選選擇器

篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭

2.1基本篩選選擇器
基本篩選選擇器針對的都是元素DOM節點

2.2內容篩選選擇器
內容篩選選擇器，體現在篩選它所包含的子元素或者文字內容上

1. :contains與:has都有查詢的意思，但是contains查詢包含“指定文字”的元素，has查詢包含“指定元素”的元素
2. 如果:contains匹配的文字包含在元素的子元素中，同樣認為是符合條件的。
3. :parent與:empty是相反的，兩者所涉及的子元素，包括文字節點

2.3可見性篩選選擇器

元素隱藏：

1. CSS display的值是none。
2. type="hidden"的表單元素。
3. 寬度和高度都顯式設定為0。
4. 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
5. CSS visibility的值是hidden
6. CSS opacity的指是0
   元素顯示：
7. 如果元素中佔據文件中一定的空間,元素被認為是可見的
   2.元素的visibility: hidden 或 opacity: 0被認為是可見的

2.4屬性篩選選擇器
屬性選擇器讓你可以基於屬性來定位一個元素。

2.5元素篩選選擇器

//查詢class="first-div"下的第一個a元素
//針對所有父級下的第一個
$('.first-div a:first-child').css("color", "#CD00CD”);

//查詢class="first-div"下的最後一個a元素
//針對所有父級下的最後一個
//如果只有一個元素的話，last也是第一個元素
$('.first-div a:last-child').css("color", "red”);
//查詢class="first-div"下的只有一個子元素的a元素
$('.first-div a:only-child'.css("color", "blue”);
//查詢class="last-div"下的第二個a元素
$('.last-div a:nth-child(2)').css("color", "#CD00CD”);
//查詢class="last-div"下的倒數第二個a元素
$('.last-div a:nth-last-child(2)').css("color", "red”);
2.6子元素篩選選擇器

2.7表單元素選擇器
表單元素

    <form>
        <input type="text" value="text型別"/>
        <input type="password" value="password"/>
        <input type="radio"/>
        <input type="checkbox"/>
        <input type="submit" />
        <input type="image" />
        <input type="reset" />
        <input type="button" value="Button" />
        <input type="file" />
    </form>

除了input篩選選擇器，幾乎每個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如 $(':password') == $('[type=password]’)

2.8表單物件屬性篩選選擇器
表單物件屬性篩選選擇器也是專門針對表單元素的選擇器，可以附加在其他選擇器的後面，主要功能是對所選擇的表單元素進行篩選

注意事項：

1. 選擇器適用於核取方塊和單選框，對於下拉框元素, 使用 :selected 選擇器
2. 在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，所以保險起見換用選擇器input:checked，確保只會選取<input>元素

2.9特殊選擇器this
this，是JavaScript中的關鍵字，表示當前的上下文物件是一個html物件，可以呼叫html物件所擁有的屬性和方法。
$(this),代表的上下文物件是一個jquery的上下文物件，可以呼叫jQuery的方法和屬性值。

imooc是一個物件，擁有name屬性與getName方法,在getName中this指向了所屬的物件imooc

var imooc = { 
      name:"慕課網", 
     getName:function(){ 
              //this,就是imooc物件 
              return this.name; 
     }
 }
imooc.getName(); //慕課網

在DOM中this就是指向了這個html元素物件，因為this就是DOM元素本身的一個引用：給頁面一個P元素繫結一個事件: 通過addEventListener繫結的事件回撥中，this指向的是當前的dom物件，所以再次修改這樣物件的樣式，只需要通過this獲取到引用即可

p.addEventListener('click',function(){ 
    //this === p
     //以下兩者的修改都是等價的
     this.style.color = "red";
     p.style.color = "red";
 },false);

把$()方法傳入當前的元素物件的引用this，把這個this加工成jQuery物件，我們就可以用jQuery提供的快捷方法直接處理樣式了

$('p').click(function(){     
    //把p元素轉化成jQuery的物件     
    var $this= $(this)
    $this.css('color','red')
})