-
正常情況下offsetWidth，offsetHeigth獲取元素的尺寸是足夠了，但是某些元素比如SVG，MathML返回尺寸出錯(cuò)（這里不考慮）。即便如此CSS3還增加了一個(gè)box-sizing選擇盒子模型，于是jQuery里面就引入augmentWidthOrHeight這個(gè)方法來(lái)處理因?yàn)閎ox-sizing設(shè)置導(dǎo)致的尺寸問(wèn)題，augmentWidthOrHeight方法其實(shí)就是對(duì)盒子模型的一個(gè)處理，所以jQuery獲取一個(gè)元素的widht/height 都是，ele.offsetWidt/offsetHeigth + augmentWidthOrHeight()方法才可以。查看全部
-
scrollWidth、clientWidth、offsetWidth的區(qū)別 當(dāng)textarea沒(méi)有輸入內(nèi)容時(shí)，scrollWidth和clientWidth值一樣； 當(dāng)textarea輸入值并且出現(xiàn)橫向滾動(dòng)條時(shí)，scrollWidth發(fā)生改變，clientWidth不變； 兩種情況下offsetWidth的值均未改變，并且大于clientWidth； 可見(jiàn)，scrollWidth是對(duì)象實(shí)際內(nèi)容的寬度，clientWidth是對(duì)象可見(jiàn)內(nèi)容的寬度（不含邊線），offsetWidth也是對(duì)象可見(jiàn)內(nèi)容的寬度（含邊線）查看全部
-
innerHTML的缺陷查看全部
-
.detach() 如果你想刪除元素，不破壞他們的數(shù)據(jù)或事件處理程序（這些綁定的信息還可以在之后被重新添加回來(lái)）。.detach() 方法和.remove()一樣, 除了 .detach()保存所有jQuery數(shù)據(jù)和被移走的元素相關(guān)聯(lián)。當(dāng)需要移走一個(gè)元素，不久又將該元素插入DOM時(shí)，這種方法很有用。 detach: function(selector) { return this.remove(selector, true); }查看全部
-
內(nèi)部就會(huì)把 '<p>Test</p>' 通過(guò)buildFragment構(gòu)建出文檔elem，然后通過(guò) this.parentNode.insertBefore( elem, this.nextSibling ); 這里的this 就是對(duì)應(yīng)著inner ，elem就是‘<p>Test</p>’，看到這里就很好理解after的實(shí)現(xiàn)了。查看全部
-
createDocumentFragment有什么作用 多次使用節(jié)點(diǎn)方法(如：appendChild)繪制頁(yè)面，每次都要刷新頁(yè)面一次。效率也就大打折扣了，而使用document_createDocumentFragment()創(chuàng)建一個(gè)文檔碎片，把所有的新結(jié)點(diǎn)附加在其上，然后把文檔碎片的內(nèi)容一次性添加到document中，這也就只需要一次頁(yè)面刷新就可以了。查看全部
-
總結(jié)下來(lái)，domManip主要就做了兩件事： 1.根據(jù)用戶傳入的參數(shù)，創(chuàng)建了多個(gè)fragment，然后通過(guò)回調(diào)函數(shù)參數(shù)傳入 2.控制script的執(zhí)行過(guò)程，在創(chuàng)建fragment的時(shí)候不執(zhí)行，最后dom操作結(jié)束后會(huì)統(tǒng)一執(zhí)行查看全部
-
/** * 一個(gè)簡(jiǎn)單的流程 * 用于描述文檔處理的設(shè)計(jì)結(jié)構(gòu)與流程 * * */ function buildFragment(elems, context) { var fragment = context.createDocumentFragment(), nodes = [], i = 0, elem, l = elems.length; for (; i < l; i++) { elem = elems[i]; //創(chuàng)一個(gè)元素div做為容器 tmp = fragment.appendChild(context.createElement("div")); //放到文檔碎片中 tmp.innerHTML = elem; } return fragment; } function domManip(parentEles, target, callback) { var l = parentEles.length; var iNoClone = l - 1; if (l) { var fragment = buildFragment([target], parentEles[0].ownerDocument); first = fragment.firstChild; if (fragment.childNodes.length === 1) { fragment = first; } if (first) { callback.call(parentEles, first); } } } function append(parentEles, target) { return domManip([parentEles], target, function(elem) { parentEles.appendChild(elem) }); } $("button").click(function(){ append(document.getElementById('test'),'<div>通過(guò)append加入慕課網(wǎng)</div>' ) }) </script>查看全部
-
沒(méi)看懂這節(jié)查看全部
-
DOM樹(shù)的遍歷： eq filter not children closest find查看全部
-
jQuery children() 方法 獲得匹配元素集合中每個(gè)元素的子元素，選擇器選擇性篩選。 因?yàn)榫蚸Query可以是一個(gè)DOM的合集對(duì)象，所以children就需要遍歷每一個(gè)合集中的直接子元素了，并且最后需要構(gòu)建一個(gè)新的jQuery對(duì)象。 jQuery find() 方法 1、.find()方法返回被選元素的后代元素，一路向下直到最后一個(gè)后代。 2、.find()方法允許我們能夠通過(guò)查找DOM樹(shù)中的這些元素的后代元素，匹配的元素將構(gòu)造一個(gè)新的jQuery對(duì)象。 3、.find()和.children()方法是相似的，但后者只是再DOM樹(shù)中向下遍歷一個(gè)層級(jí)。 4、.find()方法還可以接受一個(gè)選擇器表達(dá)式，該選擇器表達(dá)式可以是任何可傳給$()函數(shù)的選擇器表達(dá)式。如果緊隨兄弟匹配選擇器，它將被保留在新構(gòu)建的jQuery對(duì)象中；否則，它被排除在外。 這個(gè)方法用的概率相當(dāng)高，除了接受一個(gè)選擇器外，還可以接受一個(gè)jQuery對(duì)象，我們可以看到.find()方法的內(nèi)部實(shí)際上是調(diào)用的jQuery.find 也就是sizzle的引擎選擇器。查看全部
-
元素本身綁定事件的順序處理機(jī)制。 分幾種情況： 假設(shè)綁定事件元素本身是 A，委派元素 B.C。 第一種： A,B,C各自綁定事件，事件按照節(jié)點(diǎn)的冒泡層次觸發(fā) 第二種： 元素 A 本身有事件，元素還需要委派元素 B.C 事件 委派的元素 B.C 肯定是該元素 A 內(nèi)部的，所以先處理內(nèi)部的委派，最后處理本身的事件 第三種： 元素本身有事件，元素還需要委派事件，內(nèi)部委派的元素還有自己的事件，這個(gè)有點(diǎn)繞 先執(zhí)行 B,C 自己本身的事件，然后處理 B,C 委派的事件，最后處理 A 事件 為什么需要了解這個(gè)處理的順序呢？ 因?yàn)閖Query做委托排序的時(shí)候要用到。查看全部
-
文檔片段繼承了Node的所有方法，通常用于執(zhí)行那些針對(duì)文檔的DOM操作。如果將文檔中的節(jié)點(diǎn)添加到文檔片段中，就會(huì)從文檔樹(shù)中再看到該節(jié)點(diǎn)。添加到文檔片段中的新節(jié)點(diǎn)同樣也不屬于文檔樹(shù)?？梢酝ㄟ^(guò)appendChild()或insertBefore()將文檔片段中內(nèi)容添加到文檔中。在將文檔片段作為參數(shù)傳遞給這兩個(gè)方法時(shí)，實(shí)際上只會(huì)將文檔片段的所有子節(jié)點(diǎn)添加到相應(yīng)的位置上；文檔片段本身永遠(yuǎn)不會(huì)稱為文檔樹(shù)的一部分。 createElement是創(chuàng)建一個(gè)新的節(jié)點(diǎn)，createDocumentFragment是創(chuàng)建一個(gè)文檔片段。 DocumentFragment 接口表示文檔的一部分（或一段）。更確切地說(shuō)，它表示一個(gè)或多個(gè)鄰接的 Document 節(jié)點(diǎn)和它們的所有子孫節(jié)點(diǎn)。 DocumentFragment 節(jié)點(diǎn)不屬于文檔樹(shù)，繼承的 parentNode 屬性總是 null。 不過(guò)它有一種特殊的行為（非常有用）： 即當(dāng)請(qǐng)求把一個(gè) DocumentFragment 節(jié)點(diǎn)插入文檔樹(shù)時(shí)，插入的不是 DocumentFragment 自身，而是它的所有子孫節(jié)點(diǎn)。這使得 DocumentFragment 成了有用的占位符，暫時(shí)存放那些一次插入文檔的節(jié)點(diǎn)。它還有利于實(shí)現(xiàn)文檔的剪切、復(fù)制和粘貼操作，尤其是與 Range 接口一起使用時(shí)更是如此。 可以用 Document.createDocumentFragment() 方法創(chuàng)建新的空 DocumentFragment 節(jié)點(diǎn)。 也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 獲取包含現(xiàn)有文檔的片段的 DocumentFragment 節(jié)點(diǎn)。 除此之外，createElement創(chuàng)建的元素可以使用innerHTML，createDocumentFragment創(chuàng)建的元素使用innerHTML并不能達(dá)到預(yù)期修改文檔內(nèi)容的效果，只是作為一個(gè)屬性而已。兩者的節(jié)點(diǎn)類型完全不同，并且createDocumentFragment創(chuàng)建的元素在文檔中沒(méi)有對(duì)應(yīng)的標(biāo)記，因此在頁(yè)面上只能用js中訪問(wèn)到。 createElement創(chuàng)建的元素可以重復(fù)操作，添加之后就算從文檔里面移除依舊歸文檔所有，可以繼續(xù)操作，但是createDocumentFragment創(chuàng)建的元素是一次性的，添加之后再就不能操作了查看全部
-
文檔碎片 參考標(biāo)準(zhǔn)的描述，DocumentFragment是一個(gè)輕量級(jí)的文檔對(duì)象，能夠提取部分文檔的樹(shù)或創(chuàng)建一個(gè)新的文檔片段，即有文檔緩存的作用。 createDocumentFragment作用 多次使用節(jié)點(diǎn)方法(如：appendChild)繪制頁(yè)面，每次都要刷新頁(yè)面一次。效率大打折扣，而使用document_createDocumentFragment()創(chuàng)建一個(gè)文檔碎片，把所有的新結(jié)點(diǎn)附加在其上，然后把文檔碎片的內(nèi)容一次性添加到document中，這也就只需要一次頁(yè)面刷新就可以了。 DocumentFragment類型 在所有節(jié)點(diǎn)類型中，只有DocumentFragment在文檔中沒(méi)有對(duì)應(yīng)的標(biāo)記。DOM規(guī)定文檔片段（documentfragment）是一種“輕量級(jí)”的文檔，可以包含和控制節(jié)點(diǎn)，但不會(huì)像完整的文檔那樣占用額外資源。DocumentFragment節(jié)點(diǎn)具有下列特征： 1. nodeType的值為11 2. nodeName的值為“#document-fragment” 3. nodeValue的值為 null 4. parentNode的值為 null 5. 子節(jié)點(diǎn)可以是 Element、ProcessingInstruction、Comment、Text、CDATASection 或 EntityReference 雖然不能把文檔片段直接添加到文檔中，但可以將它作為一個(gè)“倉(cāng)庫(kù)”來(lái)使用，即可以在里面保存將來(lái)可能會(huì)添加到文檔中的節(jié)點(diǎn)。要?jiǎng)?chuàng)建文檔片段，可以使用 document.createDocumentFragment()方法，如下所示： var fragment = document.createDocumentFragment();查看全部
-
元素父節(jié)點(diǎn)的獲取方法ele.parentNode==ele["parentNode"]查看全部
舉報(bào)
0/150
提交
取消