CSS上下文選擇器與使用DOM節點的方法

本篇內容主要講解“CSS上下文選擇器與使用DOM節點的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS上下文選擇器與使用DOM節點的方法”吧!

　　Selector Context(上下文選擇器)

　　默認情況下,選擇器是從文檔根節點開始執行搜索。然而,可以給$()函數傳遞一個用于上下文檢索的第二個可選參數(注：第二個上下文參數用于來指定選擇器查找的范圍)。 舉個例子，如果在一個回調函數中我們希望為一個元素做一個檢索， 我們可以限制搜索的范圍:

　　$( "div.foo" ).click(function() {

　　$(  "span", this ).addClass( "bar" );

　　});

　　由于我們限制這個span選擇器的上下文為 this, 只有在點擊元素里的span將會被附加樣式。

　　在jQuery內部，選擇器上下文是使用.find()方法的，所以  $('span', this) 等價于$(this).find('span')。

　　Using DOM elements(使用DOM節點)

　　這個函數的第二個和第三個的方式使用一個或多個DOM元素或者我們用其他一些方式已找到的元素,創建一個jQuery對象.

　　注意：這些方式意思僅消耗DOM元素;輸送混合數據給 elementArray（元素數組） 的形式是特別鼓勵。

　　這個設備普遍使用jQuery方法通過一個回調函數傳遞this關鍵字 ：

　　$( "div.foo" ).click(function() {

　　$(this).slideUp();

　　});

　　這個例子，當點擊使得這些元素隱藏的時候使用了滑動動畫。因為事件處理通過 this 關鍵字，接收到了被點擊的元素，但是該元素是原生的 DOM 元素，所以需要通過 $() 函數，將它轉換成 jQuery 對象，然后就可以在該 jQuery 對象上調用 jQuery 方法了。

　　當一個Ajax請求返回XML數據時，我們可以使用 $() 方法去把他包含在jQuery對象中，我們可以很容易的工作。一旦這樣做了之后，我們可以使用.find()和其他DOM遍歷方法在XML結構中檢索特定元素。

　　$.post( "url.xml", function(data) {

　　var $child = $(data).find("child");

　　})

　　Cloning jQuery Objects(克隆jQuery對象)

　　當一個jQuery對象作為一個參數傳遞給$()方法時，這個對象的一個克隆對象將被創建。這個新的jQuery對象引用同一DOM元素。

　　Returning an Empty Set(返回一個空集合)

　　在jQuery 1.4中，如果你傳遞給jQuery()方法一個空參數，一個空的jQuery設置將被返回（.length屬性為0）。 在以前的jQuery版本中，一個包含整個文檔節點的集合將被返回。

到此，相信大家對“CSS上下文選擇器與使用DOM節點的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！