亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

jQuery children()?方法

獲得匹配元素集合中每個元素的子元素，選擇器選擇性篩選。

因為就jQuery可以是一個DOM的合集對象，所以children就需要遍歷每一個合集中的直接子元素了，并且最后需要構建一個新的jQuery對象。

jQuery find()?方法

1、.find()方法返回被選元素的后代元素，一路向下直到最后一個后代。

2、.find()方法允許我們能夠通過查找DOM樹中的這些元素的后代元素，匹配的元素將構造一個新的jQuery對象。

3、.find()和.children()方法是相似的，但后者只是再DOM樹中向下遍歷一個層級。

4、.find()方法還可以接受一個選擇器表達式，該選擇器表達式可以是任何可傳給$()函數的選擇器表達式。如果緊隨兄弟匹配選擇器，它將被保留在新構建的jQuery對象中；否則，它被排除在外。

.next()?獲得匹配元素集合中每個元素緊鄰的同輩元素。.prev()?獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。.siblings()?獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。

相鄰節點的處理是最簡單的，在節點上調用nextSibling或者previousSibling，但是我們也要注意相同處理復用的問題：

Siblings的意思就是找到5個li中除去class="third-item"的其余4個，那么我們可以換個思路，可以通過class="third-item"父級ul的第一個子元素開始遍歷去篩選，排除class="third-item"即可

function sibling(cur, dir) {

? while ((cur = cur[dir]) && cur.nodeType !== 1) {}

? return cur;

}

function next(elem) {

? return sibling(elem, "nextSibling");

}

function prev(elem) {

? return sibling(elem, "previousSibling");

}

通過jQuery能夠在DOM樹中遍歷元素的同胞元素。

其中nextAll、prevAll、nextUntil、prevUntil其實與遍歷祖先的的查找處理是非常類似。

.nextAll()?獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。.nextUntil()?獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。.prevAll()?獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。.prevUntil()?獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。

?alert(item.nextAll()[0].className)

? alert(item.prevAll()[0].className)

? alert(item.nextUntil('.end')[0].className)

? alert(item.prevUntil('.first')[0].className)

同胞就是擁有相同的父元素。

通過jQuery能夠在DOM樹中遍歷元素的同胞元素。

其中nextAll、prevAll、nextUntil、prevUntil其實與遍歷祖先的的查找處理是非常類似。

.nextAll()?獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。.nextUntil()?獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。.prevAll()?獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。.prevUntil()?獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。

通過 jQuery，能夠向上遍歷 DOM 樹，以查找元素的祖先。

向上遍歷 DOM 樹，這些 jQuery 方法很有用，它們用于向上遍歷 DOM 樹：

parent()
parents()
parentsUntil()

.parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素，從有序的向上匹配元素，并根據匹配的元素創建一個新的 jQuery 對象。

.parents()和.parent()方法是相似的，但后者只是進行了一個單級的DOM樹查找

.parentsUntil()?方法會找遍所有這些元素的前輩元素，直到遇到了跟參數匹配的元素才會停止。返回的jQuery對象中包含了所有找到的前輩元素，除了與?.parentsUntil()?選擇器匹配的那個元素。

遍歷的接口很多都是具有相似或者說是一類的處理功能，那么這種接口的設計我們不能就事論事的一個一個去實現，這樣代碼就會顯得非常累贅也不容易維護，那么就這么幾大類Query分了好幾十API出來，豐富的接口可以讓高層的設計更為簡單。但是框架內部的卻要簡練。那么針對這種類似功能的接口，jQuery內部就會做更多的抽象處理了。

1.針對層級關系的處理，jQuery就抽出了一個dir的方法，用于根據傳遞的元素與詞素的位置關系，查找指定的元素。

parent，parents，parentsUntil等方法如代碼所示：

function?dir(elem,?dir,?until)?{?
???//參考右邊代碼??
???return?matched;
}

2.我們在上半部的第一章中就提到過迭代器，迭代器是一個框架的重要設計。

我們經常需要提供一種方法順序的用來處理聚合對象中各個元素，而又不暴露該對象的內部，這也是設計模式中的迭代器模式。

迭代器除了單純的遍歷，在jQuery內部的運用最多的就是接口的抽象合并，相同功能的代碼功能合并處理：

jQuery.each({??
???parent:?function(elem)?{},?
???parents:?function(elem)?{},??
???nextAll:?function(elem)?{},??
???prevAll:?function(elem)?{},??
???................
},?function(name,?fn)?{??
???api[name]?=?function(until,?selector){????
??//代碼右圖??
};
});

? <div> 元素是 <ul> 的父元素，同時是其中所有內容的祖先。

? <ul> 元素是 <li> 元素的父元素，同時是 <div> 的子元素

? 左邊的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同時是 <div> 的后代。

? <span> 元素是 <li> 的子元素，同時是 <ul> 和 <div> 的后代。

? 兩個 <li> 元素是同胞（擁有相同的父元素）。

? 右邊的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同時是 <div> 的后代。

? <b> 元素是右邊的 <li> 的子元素，同時是 <ul> 和 <div> 的后代。

提示：祖先是父、祖父、曾祖父等等。后代是子、孫、曾孫等等。同胞擁有相同的父。

jQuery的遍歷處理不僅只是針對基本的層級關系，還擴展了大量的篩選接口，包括了用于篩選、查找和串聯元素的方法。之后我們會介紹到各自的實現。

?

Range? dom 接口
createDocumentFragment? ; nodeType 11

? 插入document時, 插入子節點

domManip 抽象

節點操作:

? cloneNode,appendNode,hasChildNodes,insertBefore,removeChild

next nextSibling

prev prevSibling

nodeType :1 element,2 attr,3 text ,9 document,11 fragment

dir // move :from elem, path dir, stop until?

-? $('li').eq(2) //先序遍歷,而不是一層層遍歷

-? $('ul.level-2').children() //只子

-? find 查找所有子集

d

通過一個 Tween 類構造出來的緩動對象，其實就是針對每一個屬性的封裝對象，這樣我們只需要設計一個定時器，在指定的時間內調用 Tween 生成的這些對象就可以了，Tween 內部控制著各自屬性的狀態改變。 其實動畫的整個設計就是這么簡單的，代碼的復雜是因為還兼容了各種不同情況的處理，比如實現 deferred 機制，針對寬高變化的 overflow 處理，針對 display 為 inline 情況下的處理，那么這些都是一些預處理的機制，在對應的 defaultPrefilter 函數中就能找到，我們沒有必要是單獨實現了。 其實動畫的設計，我們可以學到一個很重要的一點: 封裝變化，把每一個屬性變化都獨立封裝一個對象，讓其自己管理與控制。

deffered -- 那么這樣操作的一個好處就是，可以把邏輯處理都放到一塊，我們在代碼的某一個環節針對特別的處理，需要臨時改變一些東西，但是在之后我們希望又恢復原樣，為了邏輯的清晰，我們可以引入 deferred.alway 方法，在某一個環節改了一個屬性，然后注冊到 alway 方法上一個完成的回調用來恢復，這樣的邏輯塊是很清晰的。 在動畫預初始化之后(為了支持動畫，臨時改變元素的一些屬性與狀態)，我們就需要給每一個屬性生成一個獨立的緩動對象了 createTween，主要用于封裝這個動畫的算法與執行的一些流程操作控制。 屬性預處理 針對 height/width 動畫的時候，要先處理本身元素溢出 針對 height/width 動畫的時候，元素本身的 inline 狀態處理 我們知道元素本身在布局的時候可以用很多屬性對其設置，可是一旦進行動畫的話，某些屬性的設置可能會對動畫的執行產生副作用，所以針對這樣的屬性，jQuery 直接在內部做了最優的處理，如果我們進行元素 height/width 變化的時候，比如 height:1，這樣的處理 jQuery 就需要針對元素做一些強制性的處理。 1 添加 overflow =“hidden” 2.如果設置了內聯并且沒有設置浮動 display = "inline-block"; 因為內容溢出與內聯元素在執行動畫的時候，與這個 height/width 的邏輯是符合的，當然針對這樣的修改 jQuery 非常巧妙了用到了 deferred.always 方法，我們在執行動畫的時候，由于動畫的需要改了原始的屬性，但是動畫在結束之后，我們還是需要還原成其狀態。 deferred 量身定做的 always 方法，不管成功與失敗都會執行這個復原的邏輯。