-
每次在body上點擊其實都會觸發(fā)事件，但是只目標為p元素的情況下才會觸發(fā)回調(diào)的處理函數(shù)。通過源碼不難發(fā)現(xiàn)on方法實質(zhì)只完成一些參數(shù)調(diào)整的工作，而實際負責事件綁定的是其內(nèi)部 jQuery.event.add方法查看全部
-
test查看全部
-
用來綁定一個事件： var body = $('body') body.on('click','p',function(){ console.log(this) }) 用 on 方法給 body 上綁定一個 click 事件，冒泡到 p 元素的時候才出發(fā)回調(diào)函數(shù)，這里大家需要明確一點： 每次在body上點擊其實都會觸發(fā)事件，但是只目標為p元素的情況下才會觸發(fā)回調(diào)的處理函數(shù)。通過源碼不難發(fā)現(xiàn)on方法實質(zhì)只完成一些參數(shù)調(diào)整的工作，而實際負責事件綁定的是其內(nèi)部 jQuery.event.add方法查看全部
-
1. 可以在一個事件類型上添加多個事件處理函數(shù)，可以一次添加多個事件類型的事件處理函數(shù) 2. 提供了常用事件的便捷方法 3. 支持自定義事件 4. 擴展了組合事件 5. 提供了統(tǒng)一的事件封裝、綁定、執(zhí)行、銷毀機制查看全部
-
jQuery 遍歷，意為“移動”，用于根據(jù)其相對于其他元素的關系來“查找”（或選?。〩TML 元素。以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止。查看全部
-
總結(jié)： 在下列情況下，應該使用 .live()或 .delegate()，而不能使用 .bind()： 1. 為DOM中的很多元素綁定相同事件； 2. 為DOM中尚不存在的元素綁定事件； 3. 用.bind()的代價是非常大的，它會把相同的一個事件處理程序hook到所有匹配的DOM元素上 4. 不要再用.live()了，它已經(jīng)不再被推薦了，而且還有許多問題 5. .delegate()會提供很好的方法來提高效率，同時我們可以添加一事件處理方法到動態(tài)添加的元素上 我們可以用 .on() 來代替上述的 3 種方法。 不足點也是有的： 1. 并非所有的事件都能冒泡，如load, change, submit, focus, blur 2. 加大管理復雜 3. 不好模擬用戶觸發(fā)事件 4. 如何取舍就看項目實際中運用了查看全部
-
利用事件傳播（這里是冒泡）這個機制，就可以實現(xiàn)事件委托 具體來說，事件委托就是事件目標自身不處理事件，而是把處理任務委托給其父元素或者祖先元素，甚至根元素（document）查看全部
-
事件傳送可以分為3個階段。 （1）在事件捕捉（Capturing）階段，事件將沿著DOM樹向下轉(zhuǎn)送，目標節(jié)點的每一個祖先節(jié)點，直至目標節(jié)點。例如，若用戶單擊了一個超鏈接，則該單擊事件將從document節(jié)點轉(zhuǎn)送到html元素，body元素以及包含該鏈接的p元素。在此過程中，瀏覽器都會檢測針對該事件的捕捉事件監(jiān)聽器，并且運行這件事件監(jiān)聽器。 （2）在目標（target）階段，瀏覽器在查找到已經(jīng)指定給目標事件的事件監(jiān)聽器之后，就會運行該事件監(jiān)聽器。目標節(jié)點就是觸發(fā)事件的 DOM 節(jié)點。例如，如果用戶單擊一個超鏈接，那么該鏈接就是目標節(jié)點（此時的目標節(jié)點實際上是超鏈接內(nèi)的文本節(jié)點）。 （3）在冒泡（Bubbling）階段，事件將沿著DOM樹向上轉(zhuǎn)送，再次逐個訪問目標元素的祖先節(jié)點到document節(jié)點。該過程中的每一步。瀏覽器都將檢測那些不是捕捉事件監(jiān)聽器的事件監(jiān)聽器，并執(zhí)行它們。查看全部
-
DOM2.0 模型將事件處理流程分為三個階段： 一、事件捕獲階段 二、事件目標階段 三、事件起泡階段 事件傳送可以分為3個階段。查看全部
-
這樣的代碼再正常不過了，但是，如果頁面上有幾百個元素需要綁定（假設），那么務必就要綁定幾百次啦。 這樣問題就出現(xiàn)了： 第一：大量的事件綁定，性能消耗，而且還需要解綁（IE會泄漏） 第二：綁定的元素必須要存在 第三: 后期生成HTML會沒有事件綁定，需要重新綁定 第四: 語法過于繁雜 有沒有辦法優(yōu)化呢？答案是肯定的，那就是采用委托的機制查看全部
-
1.轉(zhuǎn)化樣式命名 2.處理特殊的屬性比如float 3.分離出一個鉤子，用于處理跟尺寸有關的屬性 4.其余元素采用getComputedStyle獲取對應的值查看全部
-
此時我看可以采用一個CSS hook 可以標準化這些供應商前綴的屬性，讓 css 接受一個單一的標準的屬性的名稱（border-radius 或用 DOM 屬性的語法 borderRadius）判斷的代碼省略，直接看實現(xiàn)，給某一元素設置borderRadius 為10px。 $("#element").css("borderRadius", "10px"); 為了做瀏覽器兼容，我們不得不： if(webkit){ ........................ }else if(firefox){ ........................... }else if(...)更多 這是一種最沒技術(shù)含量的寫法了，如果我們換成一種 hook 的話： $.cssHooks.borderRadius = { get: function( elem, computed, extra ) { return $.css( elem, borderRadius ); }, set: function( elem, value) { elem.style[ borderRadius ] = value; } }; $.cssHooks 對象提供了一種方法通過定義函數(shù)來獲取和設置特定的CSS值的方法，它也可以被用來創(chuàng)建新的 cssHooks 以標準化 CSS3 功能，如框陰影和漸變。 例如 border-radius 屬性，在早起的時候還沒有形成標準化瀏覽器都有各自的實現(xiàn)，比如基于 webkit 的谷歌瀏覽器就需要寫成 webkit-border-radius，F(xiàn)irefox 就需要寫成 -moz-border-radius ，所以我們需要一個鉤子都判斷這個標準實現(xiàn)這個頭部的前綴添加。查看全部
-
getComputedStyle與style的區(qū)別 區(qū)別就在于 getComputedStyle 是只能讀的，style是可以可讀可寫的。 看看jQuery的： elem.ownerDocument.defaultView.getComputedStyle(elem, null); 實際就是： function getStyles( elem ) { return window.getComputedStyle( elem, null ) }查看全部
-
dom查詢查看全部
-
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")) //代碼很簡單通過判斷得到的值 當檢測到是none的情況下，就要把display置為block？不行這樣就改變了布局的原意了，本來就是隱藏的。jQuery就會對元素增加position: absolute; visibility: hidden;這樣的屬性達到display:none的效果，因為在visibility: hidden的情況下，是可以獲取到值的，只是對于用戶不可見而已。 獲取元素的尺寸值我們有offsetWidth,與offsetHeight,大多情況下是夠用了，但是有一種情況如果元素采用boxSizing處理，所以jQuery還要對BorderBox情況的檢測，如果如果是采用了border-box樣式的話，針對值的獲取還要減去padding,border，這又是一個相當繁瑣的過程，我們在之前就提到過這個過程的處理了。查看全部
舉報
0/150
提交
取消