-
offset()方法允許我們檢索一個元素相對于文檔（document）的當(dāng)前位置，它和.position()的差別在于：.position()是相對于父級元素的位移。 offset() top: box.top + win.pageYOffset - docElem.clientTop, left: box.left + win.pageXOffset - docElem.clientLeft position() top: offset.top - parentOffset.top - jQuery.css(elem, "marginTop", true), left: offset.left - parentOffset.left - jQuery.css(elem, "marginLeft", true)查看全部
-
針對參數(shù)的多形式 jquery 在之前會通過一個 jQuery.access 方法過濾這些參數(shù)，原理就是針對字符串、數(shù)組、對象的一個遍歷而已。 樣式的賦值, jQuery的處理流程： 1. 分解參數(shù) 2. 轉(zhuǎn)換為駝峰式，修正屬性名 3. 如果有鉤子，則調(diào)用鉤子的set get 4. 最終實(shí)現(xiàn)都是依靠瀏覽器自己的API的查看全部
-
css 參數(shù)的處理也跟之前的 attr 屬性的處理保持一致，采用了jQuery.access 方法統(tǒng)一調(diào)配，這個具體之前就分析了，無非就是遞歸參數(shù)，但是有個可學(xué)的設(shè)計(jì)思路，分離不同的邏輯判斷通過回調(diào)傳遞進(jìn)去。 所以總結(jié) jquery.css 的接口其實(shí)也很簡單。 1.轉(zhuǎn)化樣式命名 2.處理特殊的屬性比如float 3.分離出一個鉤子，用于處理跟尺寸有關(guān)的屬性 4.其余元素采用getComputedStyle獲取對應(yīng)的值查看全部
-
.width()是我們經(jīng)常應(yīng)用獲取對象寬度的方法，但是就Query為了做這個兼容可不是表面上那么簡單的，首先整理下涉及到元素寬度處理,我們需要考慮的因素。 1 元素的寬素可以是內(nèi)聯(lián)或者通過link定義,所以通過style是不可取的 2 元素在隱藏狀態(tài)下是不能獲取任何尺寸的 display:none 3 CSS3引入了box-sizing的設(shè)置 我們看看jquery如何處理的： width，height在內(nèi)部最終調(diào)用的是jQuery.css(elem, type, extra)方法，jQuery.css是最終的一個針對所有CSS處理的接口，我們放在下一章，這里我們只涉及width與height的獲取。 display:none的狀態(tài)下是無法獲取元素的尺寸的，所以jQuery在最開始之前必須要檢測下這個狀態(tài)，這個處理是通過鉤子jQuery.cssHooks['widht'].get方法調(diào)用的： /^(none|table(?!-c[ea]).+)/test(jQuery.css(elem, "display")) //代碼很簡單通過判斷得到的值 當(dāng)檢測到是none的情況下，就要把display置為block？不行這樣就改變了布局的原意了，本來就是隱藏的。jQuery就會對元素增加position: absolute; visibility: hidden;這樣的屬性達(dá)到display:none的效果，因?yàn)樵趘isibility: hidden的情況下，是可以獲取到值的，只是對于用戶不可見而已。 獲取元素的尺寸值我們有offsetWidth,與offsetHeight,大多情況下是夠用了，但是有一種情況如果元素采用boxSizing處理，所以jQuery還要對BorderBox情況的檢測，如果如果是采用了border-box樣式的話，針對值的獲取還要減去padding,border，這又是一個相當(dāng)繁瑣的過程，我們在之前就提到過這個過程的處理了。查看全部
-
W3C的標(biāo)準(zhǔn) Box Model: 外盒尺寸計(jì)算（元素空間尺寸） Element空間高度 = content height + padding + border + margin Element空間寬度 = content width + padding + border + margin 內(nèi)盒尺寸計(jì)算（元素大?。? Element Height = content height + padding + border （Height為內(nèi)容高度） Element Width = content width + padding + border （Width為內(nèi)容寬度）查看全部
-
IE9/IE8: 這兩個差不多，唯一的區(qū)別是IE9包含window.innerWidth屬性，而IE8不包含window.innerWidth屬性。 1、document.documentElement.scrollWidth返回整個文檔的寬度，和FF等瀏覽器一致 2、document.documentElement.offsetWidth返回整個文檔的可見寬度（包含滾動條，值和innerWidth一致），注意，這里和FF等瀏覽器又有點(diǎn)區(qū)別。 3、document.documentElement.clientwidth返回整個文檔的可見寬度（不包含邊框），和FF等瀏覽器一致。clientwidth = offsetWidth - 滾動條寬度document.body.scrollWidth返回body的寬度。查看全部
-
document.documentElement與document.body的區(qū)別： document.body 是 DOM 中 Document 對象里的 body 節(jié)點(diǎn) document.documentElement 是文檔對象根節(jié)點(diǎn)(html)的引用 比較常見的三個值scrollWidth、offsetWidth和clientwidth： document.documentElement.scrollWidth 返回整個文檔的寬度 document.documentElement.offsetWidth 返回整個文檔的可見寬度 document.documentElement.clientwidth 返回整個文檔的可見寬度（不包含邊框 clientwidth = offsetWidth - borderWidth） 不過一般來說，我們不會給document.documentElement來設(shè)置邊框，所以這里的 clientwidth 與 offsetWidth 一致。 document.body.scrollWidth返回body的寬度: 這里的scrollWidth有個不一致的地方，基于 webkit 的瀏覽器（Chrome和Safari）返回的是整個文檔的寬度，也就是和 document.documentElement.scrollWidth 一致，opera 和 FF 返回的就是標(biāo)準(zhǔn)的 body 的 scrollWidth 個人覺得 opera 和 FF 算是比較合理的。 為什么offsetWidth始終比clientWidth大呢？: 原因就在于這個“邊線”。當(dāng)然，如果出現(xiàn)的滾動條，offsetWidth也會包含滾動條的寬度，而clientWidth是不包含滾動條的寬度的。查看全部
-
學(xué)習(xí)重點(diǎn)： 文檔中：圖+代碼 ps. scrollHeight計(jì)算方式 ： scrollHeight = topPadding + bottomPadding + 內(nèi)容margix box的高度。 FF、Chrome 認(rèn)為scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是clientHeight。??根據(jù)clientWidth、clientHeight的代碼公式，感覺和上邊是一樣的啊。 瀏覽器窗口的滾動條位置：window對象的 pageXoffset 和 pageYoffset , IE 8及更早版本可以通過scrollLeft和scrollTop屬性獲得滾動條位置。查看全部
-
因?yàn)椴僮鞫际歉鷇ata_priv與data_user掛鉤的所以我模擬的話實(shí)現(xiàn)的代碼量太大了，這里就直接給大概的流程吧。 首先我們elem.cloneNode(true)直接給這個元素克隆一份，我們要做的就是把克隆后的元素加入事件與數(shù)據(jù)。 jQuery內(nèi)部的數(shù)據(jù)都緩存在data_priv中，包括事件，data_user是提供給用戶操作的，用戶的數(shù)據(jù)。 所以就需要把這個2個緩存給找出來然后混入到新的克隆節(jié)點(diǎn)中，jQuery都是提供接口data_priv.access,data_priv.set。 值得注意的是 事件的復(fù)制是需要重新jQuery.event.add綁定的，如果節(jié)點(diǎn)是有嵌套的話，需要遍歷每一個元素節(jié)點(diǎn)，在每個節(jié)點(diǎn)上都要處理事件與數(shù)據(jù)。查看全部
-
jQuery.cleanData方法，就是通過元素判斷上綁定的expando的這個uuid在與之對應(yīng)的cache中找到數(shù)據(jù)與事件句柄加以刪除。 移除 涉及節(jié)點(diǎn)刪除的接口jQuery劃分了四個分別是detach，empty，remove，unwrap，因?yàn)槭褂玫姆秶煌?，所以功能有所差異，但是總的來說都是用來清理節(jié)點(diǎn)的。 .empty() 從DOM中移除集合中匹配元素的所有子節(jié)點(diǎn)，為了避免內(nèi)存泄漏，jQuery先移除子元素的數(shù)據(jù)和事件處理函數(shù)，然后移除子元素。 .remove() 將元素移出DOM，當(dāng)我們想將元素自身移除時我們用 .remove()，同時也會移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關(guān)的jQuery數(shù)據(jù)。remove是empty的加強(qiáng)版，把本身的父節(jié)點(diǎn)也清除掉了。因?yàn)閞emove支持過濾器所以支持傳遞selecor。remove需要刪除自身及其所有的子元素包括事件與數(shù)據(jù)，所以要通過找到父節(jié)點(diǎn)parnetNode移除。 .detach() 如果你想刪除元素，不破壞他們的數(shù)據(jù)或事件處理程序（這些綁定的信息還可以在之后被重新添加回來）。.detach() 方法和.remove()一樣, 除了 .detach()保存所有jQuery數(shù)據(jù)和被移走的元素相關(guān)聯(lián)。當(dāng)需要移走一個元素，不久又將該元素插入DOM時，這種方法很有用。查看全部
-
after、before、append、prepend都是用原生appendChild、inserBefore實(shí)現(xiàn)的查看全部
-
這個總結(jié)還行，然后看一下index.html中代碼這一節(jié)就可以過了： 回顧下幾組DOM插入有關(guān)的方法： innerHTML 設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML outerHTML 設(shè)置或獲取對象及其內(nèi)容的 HTML 形式 innerText 和 outerText 在讀取的時候是一樣的，只是在設(shè)置的時候 outerText 會連帶標(biāo)簽一起替換成目標(biāo)文本 firefox不支持innerText，但是可以用textContent作為替代方案。 jQuery封裝的方法html，text，val(放到屬性一章） .html()用為讀取和修改元素的HTML標(biāo)簽 .text()用來讀取或修改元素的純文本內(nèi)容 .val()用來讀取或修改表單元素的value .html() 方法對 XML 文檔無效。 1 .text() 在XML 和 HTML 文檔中都能使用。 2 .text() 方法返回一個字符串，包含所有匹配元素的合并文本。（由于在不同的瀏覽器中的HTML解析器的變化，返回的文本中換行和其他空白可能會有所不同。 3 .text() 方法不能使用在 input 元素或 scripts 元素上。 input 或 textarea 需要使用 .val() 方法獲取或設(shè)置文本值。得到scripts元素的值，使用.html()方法。查看全部
-
一：為什么使用innerHTML? 節(jié)點(diǎn)的創(chuàng)建innerHTML是一個很高效的接口，效率上來說至少比createElement快了2-10倍不等，而且還能一次性生成一堆的節(jié)點(diǎn)，但是隨之而來就有一些兼容性問題。 二：innerHTML的缺陷？ 1、innerHTML在IE下面會對字符串進(jìn)行trimLeft操作，用戶可能的本意就是需要空白 2、IE8有些元素innerHTML是只讀 3、IE下面innerHTML會忽略沒作用域元素，no-scope element(script,link,style,meta,noscript)等 4、大多情況下不執(zhí)行script腳本,當(dāng)然如果是支持defer的IE9之前的瀏覽器除外 5、一些標(biāo)簽不能作為div的子元素，如tr,tb, col等 三：針對以上缺陷的修復(fù)？ jQuery的節(jié)點(diǎn)操作最終是需要轉(zhuǎn)化成文檔碎片也就是要通過buildFragment()方法處理的，所以innerHTML兼容的修復(fù)也自然在buildFragment方法中。 1、如上 2、上邊文檔看最后一句： 如果遇到wrapMap[‘tr’]的標(biāo)簽就會自動包裝一層節(jié)點(diǎn)，這樣達(dá)到支持。對應(yīng)的應(yīng)該是二中的 5: 一些標(biāo)簽不能作為div的子元素，如tr,tb, col等查看全部
-
總結(jié)下來，domManip主要就做了兩件事： 1.根據(jù)用戶傳入的參數(shù)，創(chuàng)建了多個fragment，然后通過回調(diào)函數(shù)參數(shù)傳入 2.控制script的執(zhí)行過程，在創(chuàng)建fragment的時候不執(zhí)行，最后dom操作結(jié)束后會統(tǒng)一執(zhí)行查看全部
-
看提交代碼的注釋查看全部
舉報(bào)
0/150
提交
取消