屬性選擇器

jQuery初試

$(document).ready(function(){});//表示document加載完畢執行函數
$('div').html("在ｄｉｖ中顯示的內容");

一、jQuery對象

<p id="pid"></p>

var p = document.getElementById("pid");//p爲ＤＯＭ對象

var $p = $('pid');//$p爲jQuery對象，這是一個類數組對象
$p.html('p標籤中顯示的內容').css('color','red');

1.jQuery對象轉成DOM對象

第一種方式:

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

var $div = $('div') //jQuery對象
var div = $div[0] //轉化成DOM對象
div.style.color = 'red' //操作dom對象的屬性

第二種方式:

var $div = $('div') //jQuery對象
var div = $div.get(0) //通過get方法，轉化成DOM對象
div.style.color = 'red' //操作dom對象的屬性

2.DOM對象轉成jQuery對象

通過$(dom)方法將普通的dom對象加工成jQuery對象

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

var div = document.getElementsByTagName('div'); //dom對象
var $div = $(div); //jQuery對象
var $first = $div.first(); //找到第一個div元素
$first.css('color', 'red'); //給第一個元素設置顏色

通過getElementsByTagName獲取到所有div節點的元素，結果是一個dom合集對象，不過這個對象是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery對象，通過調用jQuery對象中的first與css方法查找第一個元素並且改變其顏色。

二、jQuery選擇器

1.id選擇器

$( "#id" )

基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。
在操作DOM的獲取上，如果能採用id的話盡然考慮用這個選擇器

2.類選擇器

$( ".class" )

var divs = document.getElementsByClassName('aaron');
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.border = "3px solid blue";
        }
//原生的需要逐個遍歷之後添加樣式

$('.imooc').css("border", "3px solid red");
//jQuery除了選擇上的簡單，而且沒有再次使用循環處理

3.元素選擇器

$( "element" )

搜索指定元素標籤名的所有節點，這個是一個合集的操作。
同樣的也有原生方法getElementsByTagName()函數支持

4.*選擇器

$( "*" )

拋開jQuery，如果要獲取文檔中所有的元素，通過document.getElementsByTagName(“*”)同樣可以獲取到

5.層級選擇器

$("parent > child")//子代選擇器　選擇所有制定"parent"元素中制定的"child"的　　直接子元素

$("ancestor descendant")//後代選擇器　選擇給定的的祖先元素的　　所有後代元素

$("prev + next")//相鄰兄弟選擇器　所有相鄰在"prev"元素後的"next"元素

$("prev ~ siblings")//一般兄弟選擇器　匹配"prev"元素之後的所有兄弟元素。具有相同的父元素，並匹配    過濾"siblings"選擇器

6.基本篩選選擇器

篩選選擇器的用法與CSS中的僞元素相似，選擇器用冒號“：”開頭，通過一個列表，看看基本篩選器的描述：

:eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引

gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始

7.內容篩選選擇器

基本篩選選擇器針對的都是元素DOM節點，如果我們要通過內容來過濾

:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同樣認爲是符合條件的。

:parent與:empty是相反的，兩者所涉及的子元素，包括文本節點

8.可見性篩選選擇器

:hidden選擇器，不僅僅包含樣式是display=”none”的元素，還包括隱藏表單、visibility等等

我們有幾種方式可以隱藏一個元素：

CSS display的值是none。
type="hidden"的表單元素。
寬度和高度都顯式設置爲0。
一個祖先元素是隱藏的，該元素是不會在頁面上顯示
CSS visibility的值是hidden//被認爲是可見的
CSS opacity的指是0//被認爲是可見的

如果元素中佔據文檔中一定的空間,元素被認爲是可見的。
可見元素的寬度或高度，是大於零。

9.屬性篩選選擇器

在這麼多屬性選擇器中[attr=”value”]和[attr*=”value”]是最實用的

[attr="value"]能幫我們定位不同類型的元素，
特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等

[attr*="value"]能在網站中幫助我們匹配不同類型的文件

10.子元素篩選選擇器

:first只匹配一個單獨的元素，
    :first-child選擇器可以匹配多個：即爲每個父級元素匹配第一個子元素。這相當於:nth-child(1)
:last 只匹配一個單獨的元素，
    :last-child 選擇器可以匹配多個元素：即，爲每個父級元素匹配最後一個子元素

:only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配

jQuery實現:nth-child(n)是嚴格來自CSS規範，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的

11.表單元素選擇器

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

12.表單對象屬性篩選選擇器


適用於複選框和單選框，對於下拉框元素, 使用 :selected 選擇器

在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，所以保險起見換用選擇器input:checked，確保只會選取<input>元素

13.特殊選擇器this

假如給頁面一個P元素綁定一個事件:

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

通過addEventListener綁定的事件回調中，this指向的是當前的dom對象

 this.style.color = "red"

但是這樣的操作其實還是很不方便的，這裏面就要涉及一大堆的樣式兼容，
如果通過jQuery處理就會簡單多了，我們只需要把this加工成jQuery對象

換成jQuery的做法：

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

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

*this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。
$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jQuery的方法和屬性值。*