這幾天遇到的 jQuery 問題

張倫發表於2014-07-19
jQuery

過去一直對 jQuery 一知半解的狀態，在這段時間的工作中暴露了。事實證明，實踐出真知！現在把遇到的不熟練的記下來。見一個，補充一個！
（試試看 SegmentFault 部落格的效果如何）

DOM操作

搜尋父元素操作

parents([selector])

用於獲取當前匹配元素集合中每個元素的祖先元素，根據需要還可以使用一個選擇器進行篩選。

$("p").parents(“li”); //搜尋p 的父元素中的 li 元素

這個方法要注意的問題：

  1. 從父元素開始匹配查詢
  2. 一直向上查詢直到根元素，然後把這些元素放進一個臨時集合中，再用給定的選擇器表示式去過濾
  3. 可能包含0個、1個或者多個元素

closest(selector[, context])

該方法從元素本身開始，逐級向上級元素匹配，並返回最先匹配的元素。

$("a").closest("div").css("border", "1px solid blue");

這個方法要注意的問題：

  1. 從當前元素匹配查詢
  2. 逐級向上查詢，直到發現匹配的元素後就停止了， 其實可以說是找到最近的父元素
  3. 返回0或者1個元素

parent([selector])

用於獲取當前匹配元素集合中每個元素的父元素，根據需要，還可以使用一個選擇器進行篩選。

parentsUtil([selector])

用於獲取當前匹配元素集合中每個元素的祖先元素，直至給定選擇器匹配的元素(但不包括該元素)

//從 li#li2 開始向上找它的父元素直到 遇到元素 #ul1_li2，但是不將 #ul1_li2 加入包裝集 
$("li#li2").parentsUtil("#ul1_li2").css("background", "#FCF");

offsetParent( )方法

格式如下：offsetParent( )，用於搜尋第一個匹配元素的已定位的父元素，僅對可見元素有效。
該方法查詢第一個匹配元素的已定位元素，並返回由該元素包裝成的jQuery物件。

查詢兄弟元素

prev([selector])

Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

假設有一個包含一系列 DOM 元素的 jQuery 物件包裝集，利用 .prev() 方法搜尋每一元素在 DOM 樹中的緊鄰的兄弟元素並且返回一個包含匹配元素的 jQuery 物件包裝集。

這個方法也接受一個選擇器來過濾匹配的結果。比如下面的例子，demo請戳這裡

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

$( "li.third-item" ).prev().css( "background-color", "red" );

先找到 class 為 third-item 的li，使用 prev( ) 向前找到它的第一個兄弟元素，修改父元素的背景顏色。

prevAll( )

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

假設有一個包含一系列 DOM 元素的 jQuery 物件包裝集，利用 .prevAll() 方法搜尋每一元素在 DOM 樹中的所有的前面的兄弟元素並且返回一個包含匹配元素的 jQuery 物件包裝集。
這個方法也接受一個選擇騎來過濾匹配的集合。

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

$( "li.third-item" ).prevAll().css( "background-color", "red" );

prevUtil( )

Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

Event物件

to be continued

相關文章