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