JQuery學(xué)習(xí)筆記整理：選擇元素

add(selector)、add(selector,context)  把匹配選擇器（可選上下文）的所有元素添加到調(diào)用add()方法的jQuery對象
add(HTMLElement)、add(HTMLElement[])  把一個或多個HTMLElement添加到j(luò)Query對象
add(jQuery)  把參數(shù)jQuery對象中的元素添加到當(dāng)前jQuery對象。

/*
*<div class="example">   
*  <input type="text" />   
*  <span></span>   
*  <button>Button</button>
*  <div class="item"></div>   
*</div>
*/

var btn = $(':button');
var span = document.querySelectorAll('.example span');
$('.example input').add('.example .item').add(btn).add(span).addClass('add');

//執(zhí)行結(jié)果
//<div class="example">    
//  <input type="text" class="add" />     
//  <span class="add"></span>     
//  <button class="add">Button</button>   
//  <div class="item add"></div>
//</div> 

eq(index)  得到第index個元素（刪除其他元素）
filter(condition)  得到符合condition參數(shù)的元素（刪除不符合條件的元素）
first()    得到第一個元素（刪除其他元素）
last()     得到最后一個元素（刪除其他元素）
has(selector)、has(jQuery)、has(HTMLElement)、has(HTMLElement[])  得到匹配selector后代元素的元素，或返回包含jQuery對象內(nèi)的元素或HTMLElement所對應(yīng)的元素的元素（刪除沒有匹配后代的元素）
not(condition)  刪除匹配condition參數(shù)的元素
slice(start,end)  得到start、end參數(shù)指定范圍的元素子集、刪除子集之外的其他元素

/*
* <div class="example">
*   <span>1</span>
*   <span>2</span>
*   <span>3</span>
* </div>
*/

var spans = $('.example span');
spans.first().addClass('one');
spans.eq(0).addClass('one');

spans.last().addClass('last');
spans.eq(-1).addClass('last');

spans.slice(1,2).addClass('slice')

// 結(jié)果 
// <div class="example">  
//   <span>1</span>  
//   <span class="slice">2</span>  
//   <span>3</span>  
// </div>
//

spans.slice(-2).addClass('slice');

// 結(jié)果   
// <div class="example">    
//   <span>1</span>    
//   <span class="slice">2</span>    
//   <span class="slice">3</span>    
// </div> 
//

var first = $('.example span:first');   
var last = document.querySelector('.example span:last-child');   
spans.filter('.example span:nth-child(2)').addClass('second');   
spans.filter(first).addClass('first');   
spans.filter(last).addClass('last');

/*結(jié)果
*<div class="example">   
*  <span class="first">1</span>   
*  <span class="second">2</span>   
*  <span class="last">3</span>   
*</div>
*/

spans.filter(function(index){   
  return index == 2 || this.textContent == '1';   
}).addClass('filter');

// 結(jié)果
//<div class="example">   
//  <span class="filter">1</span>
//  <span>2</span>   
//  <span class="filter">3</span>   
//</div>
//

spans.not(function(index){   
  return index == 2 || this.textContent == '1';   
}).addClass('not');

// 結(jié)果  
//<div class="example">     
//  <span>1</span>  
//  <span class="not">2</span>     
//  <span>3</span>     
//</div>  
//

/*<div class="example">
*  <span><b>1</b></span>
*  <span><i>2</i></span>
*  <span><span class="col"></span></span>
*</div>
*/

spans.has('.col').addClass('a');   
var b = $('b');   
spans.has(b).addClass('b');   
var i = document.querySelector('i');   
spans.has(i).addClass('i');

// 結(jié)果
//<div class="example">  
//  <span class="b"><b>1</b></span>  
//  <span class="i"><i>2</i></span>  
//  <span class="a"><span class="col"></span></span>  
//</div>  
//

is(selector)  如果結(jié)果集中至少有一個元素匹配選擇器selector，返回true
is(HTMLElement)、is(HTMLElement[])  如果結(jié)果集中包含指定的HTMLElement或者至少包含指定HTMLElement[]中的一個元素，返回true
is(jQuery)    如果結(jié)果集中至少包含一個參數(shù)對象中的元素，返回true
is(function(index))  如果至少有一次參數(shù)函數(shù)返回true，則返回true

/*  
* <div class="example">  
*   <span>1</span>  
*   <span>2</span>  
*   <span>3</span>  
* </div>  
*/

spans.is(function(index){   
  return this.textContent == '2';   
});
// true

spans.is(function(index){   
  return this.textContent == '5';   
});
// false

end()   扔掉當(dāng)前結(jié)果集，返回jQuery對象中緩存著的上一個結(jié)果集
addBack()、addBack(selector)  得到原結(jié)果集與當(dāng)前選擇結(jié)果的集合，支持可選選擇器參數(shù)，利用這個可過濾原結(jié)果集

（1）end()

end()方法返回一個jQuery對象。

spans.first().addClass('first').end().addClass('span');

// 結(jié)果 
// <div class="example">    
// <span class="first span">1</span>    
// <span class="span">2</span>    
// <span class="span">3</span>    
// </div>    
//

上面的代碼中，我們首先用first()方法獲取到匹配的第一個元素，給它添加類名first，然后調(diào)用end()方法，這時會返回到上一次結(jié)果集（也就是spans），給所有匹配的spans元素添加類名span。

（2）addBack()

addBack()返回一個jQuery對象

$('.example').children('span:first').addBack().addClass('addBack');

// 結(jié)果   
// <div class="example addBack">      
// <span class="addBack">1</span>      
// <span>2</span>      
// <span>3</span>      
// </div>      
//

注意：當(dāng)傳入一個selector參數(shù)時，它過濾的是原結(jié)果集，而不是當(dāng)前選擇結(jié)果。

2.5 訪問DOM

以一個結(jié)果集為起點(diǎn)，我們可以在DOM中訪問其他部分，使用一個結(jié)果集得到另一個結(jié)果集。

下面的方法都返回jQuery對象，即使沒有匹配，也會返回一個空的jQuery對象（length等于0）

（1）訪問后代元素

children()  得到結(jié)果集內(nèi)所有元素的直接子元素
children(selector)  得到結(jié)果集內(nèi)所有元素的匹配selector選擇器的直接子元素
contents()  得到結(jié)果集內(nèi)所有元素的直接子元素和文本內(nèi)容
find()  得到結(jié)果集內(nèi)所有元素的后代元素
find(selector)  得到結(jié)果集內(nèi)所有元素的匹配selector選擇器的后代元素
find(jQuery)、find(HTMLElement)、find(HTMLElement[])  得到結(jié)果集內(nèi)所有元素的子元素與參數(shù)對象對應(yīng)元素的交集

children()和find()方法返回的結(jié)果集中沒有重復(fù)元素。

實(shí)例：children()

childrend()方法得到結(jié)果集內(nèi)所有元素的 直接子元素 。

/*
*<div class="example">   
*  <div><span></span></div>   
*  <span></span>   
*</div>
*/

var ex = $('.example');   
ex.children().addClass('child');   
ex.children('span').addClass('span');

// 結(jié)果
//<div class="example">   
//  <div class="child"><span></span></div>
//  <span class="child span"></span>   
//</div>
//

在上面的代碼中，第二行會選中結(jié)果集ex中的所有直接子元素添加類名child，第三行會選中結(jié)果集ex中的所有類型為span的直接子元素添加類名span。

實(shí)例：contents()

console.log(ex.contents())

// 打印結(jié)果
//0:text  
//1:div 
//2:text  
//3:span
//4:text
//

注意：換行符會導(dǎo)致出現(xiàn)text文本節(jié)點(diǎn)

實(shí)例：find()

find()方法得到結(jié)果集內(nèi)所有元素的 后代元素 。

var span = $('.example div>span');   
var span2 = document.querySelectorAll('.example>span');   
ex.find('div').addClass('div');   
ex.find(span).addClass('span');   
ex.find(span2).addClass('span2');

// 結(jié)果
//<div class="example">   
//  <div class="div">   
//    <span class="span"></span>   
//  </div>   
//  <span class="span2"></span>
//</div>
//

在上面的代碼中，分別傳入一個selector選擇器、一個HTMLElement、一個jQuery對象，仔細(xì)看結(jié)果。

（2）訪問祖先元素

closest(selector)、closest(selector,context)  得到結(jié)果集內(nèi)元素的祖先元素中匹配selector選擇器的最接近的那個祖先元素
closest(jQuery)、closest(HTMLElement)  得到結(jié)果集內(nèi)的祖先元素與參數(shù)元素的交集
offsetParent()  得到距離最近的祖先定位元素（使用fixed、absolute或rela定位的元素）
parent()、parent(selector)  得到結(jié)果集內(nèi)元素的父元素（可選匹配selector選擇器的元素），最多返回一個父元素
parents()、parents(selector)  得到結(jié)果集內(nèi)元素的父元素（可選匹配selector選擇器的元素），可能返回多個父元素
parentsUntil(selector)、parentsUntil(selector,context)  得到結(jié)果集內(nèi)元素的匹配selector選擇器的祖先元素，可選的第二個選擇器參數(shù)用來過濾選擇結(jié)果
parentsUntil(HTMLElement)、parentsUntil(HTMLElement,selector)、parentsUntil(HTMLElement[])、parentsUntil(HTMLElement[],selector)  得到結(jié)果集內(nèi)元素的祖先元素與參數(shù)元素的交集，可選的第二個參數(shù)選擇器用來過濾選擇結(jié)果

實(shí)例：parent()、parents()

/*<div class="example" style="position:relative">   
*  <div>   
*    <span class='child'></span>   
*  </div>   
*  <span></span>   
*</div>
*/

var child = $('.child');   
child.parent().addClass('parent');   
child.parent('div').addClass('parentSpan');   
child.parents().addClass('parents');   
child.parents('div').addClass('parentsDiv');

// 結(jié)果
//<div class="example parents parentsDiv">   
//  <div class="parent parentSpan parents parentsDiv">   
//    <span class="child"></span>   
//  </div>   
//  <span></span>   
//</div>
//

parent()和parents()都是用來選擇父元素，兩者的區(qū)別是：前者只會返回一個父元素，而后者會返回多個父元素，依據(jù)DOM樹，會一直向上匹配，直到當(dāng)前文檔的根元素（html）；當(dāng)傳入?yún)?shù)時，前者可能返回包含0個或1個父元素的jQuery對象，而后者可能返回包含0個或多個父元素的jQuery對象。

實(shí)例：offsetParent()

child.offsetParent().addClass('offsetParent')

// 結(jié)果  
//<div class="example offsetParent" style="position:relative">     
//  <div>     
//    <span class="child"></span>     
//  </div>     
//  <span></span>     
//</div>  
//

從上面的代碼可以看到，具有類名為child的元素調(diào)用offsetParent()方法返回的是div.example元素，因?yàn)槟J(rèn)情況下，元素的定位方式是position:static，而我們給div.example設(shè)置了relative。

實(shí)例：closest()

closest()方法和parents()方法很類似，不同之處在于它只會返回一個節(jié)點(diǎn)，也就是第一個匹配的祖先元素。（在開發(fā)中相對用的多）

child.closest('div').addClass('closest');

// 結(jié)果    
//<div class="example">       
// <div class="closest">       
// <span class="child"></span>       
// </div>       
// <span></span>       
//</div>    
//

closest()還可以傳入jQuery對象、HTMLElement對象，得到結(jié)果集內(nèi)元素的祖先元素與參數(shù)元素的交集；如無匹配，返回一個空的jQuery對象。

實(shí)例：parentsUntil()

parentsUntil()用來選擇祖先猿。對于jQuery對象中的每一個元素，parentsUntil()方法會沿著DOM樹向上查找，選中沿途的祖先元素，直到當(dāng)前祖先元素匹配參數(shù)選擇器為止。

child.parentsUntil('.example').addClass('parentsUntil');

// 結(jié)果      
//<div class="example">         
// <div class="parentsUntil">         
// <span class="child"></span>         
// </div>         
// <span></span>         
//</div>      
//

上面的代碼中，具有類名為child的元素會一直向上匹配祖先元素，直到匹配到一個具有類名為example的元素才會停止，而且并不會包含具有類名為example的元素。

注意：parentsUntil()方法并不會包含匹配selector參數(shù)的元素。

parentsUntil()還可傳入第二個參數(shù)作進(jìn)一步過濾，過濾原理和filter一樣。

（3）訪問兄弟元素

next()、next(selector)  得到下一個兄弟元素，可選的selector參數(shù)用來過濾選擇結(jié)果
nextAll()、nextAll(selector)  得到后面的所有兄弟元素，可選的selector參數(shù)用來過濾選擇結(jié)果
nextUntil(selector)、nextUntil(selector,selector)、nextUntil(jQuery)、nextUntil(jQuery,selector)、nextUntil(HTMLElement[])、nextUntil(HTMLElement[],selector)  得到后面的兄弟元素，直到（不包含）匹配（選擇器、jQuery對象、HTMLElement對象或HTMLElement對象數(shù)組）。可選的第二個selector參數(shù)用來過濾選擇結(jié)果。
prev()、prev(selector)  得到上一個兄弟元素，可選的selector參數(shù)用來過濾選擇結(jié)果
prevAll()、prevAll(selector)  得到前面的所有兄弟元素，可選的selector參數(shù)用來過濾選擇結(jié)果
prevUntil(selector)、prevUntil(selector,selector)、prevUntil(jQuery)、prevUntil(jQuery,selector)、prevUntil(prevHTMLElement[])、prevUntil(HTMLElement[],selector)  得到前面所有兄弟元素，直到（不包含）匹配參數(shù)（選擇器、jQuery對象、HTMLElement對象或HTMLElement對象數(shù)組）。可選的第二個selector參數(shù)用來過濾選擇結(jié)果
siblings()、siblings(selector)  選擇所有的兄弟元素，可選的selector參數(shù)用來過濾選擇結(jié)果

實(shí)例：next()、nextAll()、prev()、prevAll()、siblings()

/ <div class="example">   
    <span>1</span>   
    <span>2</span>   
    <span class="child">3</span>   
    <span>4</span>   
    <span>5</span>   
/ </div>

var child = $('.child');   
child.next().addClass('next');   
child.nextAll().addClass('nextAll');   
child.prev().addClass('prev');   
child.prevAll().addClass('prevAll');   
child.siblings().addClass('siblings');

// 結(jié)果
//<div class="example">   
//  <span class="prevAll siblings">1</span>   
//  <span class="prev prevAll siblings">2</span>   
//  <span class="child">3</span>   
//  <span class="next nextAll siblings">4</span>   
//  <span class="nextAll siblings">5</span>   
//</div>

next()返回下一個兄弟節(jié)點(diǎn)、nextAll()返回后面所有的兄弟節(jié)點(diǎn)、prev()返回上一個兄弟節(jié)點(diǎn)、prevAll()返回前面的所有兄弟節(jié)點(diǎn)、siblings()返回所有的兄弟節(jié)點(diǎn)（并不包含自身）。

上面五個方法都可以傳入一個selector參數(shù)作過濾。

實(shí)例：nextUntil()、prevUntil()

nextUntil()、prevUntil()兩個方法其實(shí)和parentsUntil()原理一樣，只不過parentsUntil()是匹配祖先元素，而nextUntil()、prevUntil()兩個方法分別是根據(jù)前面的所有兄弟元素和后面的所有兄弟元素。

3、jQuery對象

jQuery對象是包裝DOM對象后產(chǎn)生的對象，可以說它是一個數(shù)組對象，代表0個或多個DOM元素，具有jQuery對象的屬性和方法。

使用jQuery執(zhí)行的很多操作返回的都是一個jQuery對象。

3.1屬性方法

length  返回jQuery對象中包含元素的個數(shù)，等價于size()
size()  返回jQuery對象中包含元素的個數(shù)，等價于length
each(function())  在每個選中元素上運(yùn)行給定的function，并返回function修改之后的jQuery對象
get(index)   返回給定索引（index）對應(yīng)的HTMLElement對象
index(selecotr)、index(HTMLElement)、index(jQuery)  返回給定參數(shù)中匹配元素的索引序號（為HTMLElement和jQuery對象時，取第一個元素）
toArray()   返回一個由jQuery對象中包含的元素構(gòu)成的HTMLElement對象數(shù)組。

3.2 jQuery對象轉(zhuǎn)換成DOM對象

jQuery對象是一個數(shù)組對象，使用 [index] 或 .get(index) 方法得到的都是一個DOM對象。

3.3 DOM對象轉(zhuǎn)換成jQuery對象。

要將DOM對象轉(zhuǎn)換成jQuery對象，其實(shí)只要將DOM對象傳入 $(DOM) 即可

4、鏈?zhǔn)椒椒?/b>

前面多次提到，大多數(shù)jQuery的操作都是返回一個jQuery對象，也正是基于此，我們可以采用方法鏈：

$('body').find('div').filter('.item')........

上面的都是個人筆記，如有錯誤，歡迎指正！