99re热视频这里只精品,综合亚洲另类欧美久久成人精品,国产无人区卡一卡二扰乱码

jQuery的遍歷結(jié)構(gòu)設(shè)計(jì)

遍歷的接口我們可以歸為幾大類：

1 祖先
2 同胞兄弟
3 后代
4 過濾

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

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

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

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

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

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

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

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

可以看出上面代碼方法，針對相同的功能，節(jié)約了大量的代碼空間。

任務(wù)

?不會了怎么辦

||

index.html

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script> <title></title> </head> <body> <button id="test1">jQuery遍歷祖先</button> <button id="test2">模擬遍歷祖先</button> <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> <script type="text/javascript"> var ajQuery = {}; function dir(elem, dir, until) { var matched = [], truncate = until !== undefined; while ((elem = elem[dir]) && elem.nodeType !== 9) { if (elem.nodeType === 1) { if (truncate) { if (elem.nodeName.toLowerCase() == until || elem.className == until) { break; } } matched.push(elem); } } return matched; } jQuery.each({ parent: function(elem) { var parent = elem.parentNode; return parent && parent.nodeType !== 11 ? parent : null; }, parents: function(elem) { return dir(elem, "parentNode"); }, parentsUntil: function(elem, until) { return dir(elem, "parentNode", until); } }, function(name, fn) { ajQuery[name] = function(until, selector) { return fn(until, selector); }; }); $("#test1").click(function() { var item = $('.item-1'); alert(item.parent()[0]) alert(item.parents().length) alert(item.parentsUntil('body').length) }) $("#test2").click(function() { var item = document.querySelectorAll('.item-1')[0] alert(ajQuery.parent(item)) alert(ajQuery.parents(item).length) alert(ajQuery.parentsUntil(item, 'body').length) }) </script> </body> </html>

提問題

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記

提交

||

全屏

請驗(yàn)證，完成請求

由于請求次數(shù)過多，請先驗(yàn)證，完成再次請求

打開微信掃碼自動綁定

您還未綁定服務(wù)號

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問題答復(fù)提醒
· 賬號支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

1-2 jQuery的遍歷結(jié)構(gòu)設(shè)計(jì)

jQuery的遍歷結(jié)構(gòu)設(shè)計(jì)

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

1-2 jQuery的遍歷結(jié)構(gòu)設(shè)計(jì)

熱搜

最近搜索清空

jQuery的遍歷結(jié)構(gòu)設(shè)計(jì)

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～