-
遍歷祖先 通過jQ向上遍歷DOM樹,以查找元素的祖先 parent() .parent()方法允許我們能夠在DOM樹中搜索到這些元素的父級元素,從有序的向上匹配元素,并根據(jù)匹配的元素創(chuàng)建一個新的 jQuery 對象。 parents() .parents()和.parent()方法是相似的,但后者只是進行了一個單級的DOM樹查找 parentsUntil() .parentsUntil() 方法會找遍所有這些元素的前輩元素,直到遇到了跟參數(shù)匹配的元素才會停止。返回的jQuery對象中包含了所有找到的前輩元素,除了與 .parentsUntil() 選擇器匹配的那個元素。查看全部
-
此節(jié)待看查看全部
-
為什么需要用這個domManip函數(shù)呢? 我們知道節(jié)點操作瀏覽器提供的接口無非就是那么幾個: appendChild() 通過把一個節(jié)點增加到當前節(jié)點的childNodes[]組,給文檔樹增加節(jié)點: cloneNode() 復制當前節(jié)點,或者復制當前節(jié)點以及它的所有子孫節(jié)點: hasChildNodes() 如果當前節(jié)點擁有子節(jié)點,則將返回true: insertBefore() 給文檔樹插入一個節(jié)點,位置在當前節(jié)點的指定子節(jié)點之前。如果該節(jié)點已經(jīng)存在,則刪除之再插入到它的位置: removeChild() 從文檔樹中刪除并返回指定的子節(jié)點: replaceChild() 從文檔樹中刪除并返回指定的子節(jié)點,用另一個節(jié)點替換它。查看全部
-
對封裝的節(jié)點操作做了參數(shù)上的校正支持,與對應處理的調(diào)用:append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。 為什么需要用這個domManip函數(shù)呢? 我們知道節(jié)點操作瀏覽器提供的接口無非就是那么幾個: appendChild() 通過把一個節(jié)點增加到當前節(jié)點的childNodes[]組,給文檔樹增加節(jié)點: cloneNode() 復制當前節(jié)點,或者復制當前節(jié)點以及它的所有子孫節(jié)點: hasChildNodes() 如果當前節(jié)點擁有子節(jié)點,則將返回true: insertBefore() 給文檔樹插入一個節(jié)點,位置在當前節(jié)點的指定子節(jié)點之前。如果該節(jié)點已經(jīng)存在,則刪除之再插入到它的位置: removeChild() 從文檔樹中刪除并返回指定的子節(jié)點: replaceChild() 從文檔樹中刪除并返回指定的子節(jié)點,用另一個節(jié)點替換它。 以上接口都有一個特性,傳入的是一個節(jié)點元素。如果我們傳遞不是一個dom節(jié)點元素,如果是一個字符串,一個函數(shù)或者其他呢? 所以針對所有接口的操作,jQuery會抽象出一種參數(shù)的處理方案,也就是domManip存在的意義了,針對很多類似接口的參數(shù)抽象jQuery內(nèi)部有很多這樣的函數(shù)了,如之前屬性操作中的jQuery.access。查看全部
-
jQuery find() 方法 1、.find()方法返回被選元素的后代元素,一路向下直到最后一個后代。 2、.find()方法允許我們能夠通過查找DOM樹中的這些元素的后代元素,匹配的元素將構(gòu)造一個新的jQuery對象。 3、.find()和.children()方法是相似的,但后者只是再DOM樹中向下遍歷一個層級。 4、.find()方法還可以接受一個選擇器表達式,該選擇器表達式可以是任何可傳給$()函數(shù)的選擇器表達式。如果緊隨兄弟匹配選擇器,它將被保留在新構(gòu)建的jQuery對象中;否則,它被排除在外。 這個方法用的概率相當高,除了接受一個選擇器外,還可以接受一個jQuery對象,我們可以看到.find()方法的內(nèi)部實際上是調(diào)用的jQuery.find 也就是sizzle的引擎選擇器。查看全部
-
.next() 獲得匹配元素集合中每個元素緊鄰的同輩元素。 .prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素,由選擇器篩選(可選)。 .siblings() 獲得匹配元素集合中所有元素的同輩元素,由選擇器篩選(可選)。查看全部
-
.nextAll() 獲得匹配元素集合中每個元素之后的所有同輩元素,由選擇器進行篩選(可選)。 .nextUntil() 獲得每個元素之后所有的同輩元素,直到遇到匹配選擇器的元素為止。 .prevAll() 獲得匹配元素集合中每個元素之前的所有同輩元素,由選擇器進行篩選(可選)。 .prevUntil() 獲得每個元素之前所有的同輩元素,直到遇到匹配選擇器的元素為止。查看全部
-
JS 是單線程,定時器都是排隊列的,理論上也達不到 1ms 繪制一次 dom查看全部
-
總結(jié) 所以整個 trigger 的核心,還是圍繞著數(shù)據(jù)緩存在處理的,通過 on 機制在 jQuery.event.add 的時候預處理好了。trigger 的處理就是模擬冒泡的一個調(diào)度,具體的觸發(fā)還是交給 jQuery.event.dispatch 方法了,通過 trigger 很好的模擬了瀏覽器事件流程,但是美中不足的是對象的事件混淆其中,這就造成了觸發(fā)對象事件的時候最后會調(diào)用對象的相應方法。查看全部
-
1.將原生的事件對象 event 修正為一個新的可寫 event 對象,并對該 event 的屬性以及方法統(tǒng)一接口 2.該方法在內(nèi)部調(diào)用了 jQuery.Event(event) 構(gòu)造函數(shù)查看全部
-
事件對象中我們用的最多的就是 target了,這個是我們的點擊對象,別忘記了還有個 currentTarget 這個是事件的綁定對象,有什么區(qū)別? <div id="aaron"> <div> <p>Click me!</p> </div> </div> var aaron = document.getElementById('aaron') aaron.addEventListener('click',function(e){ console.log(this,this == e.currentTarget,e) },false) 如上結(jié)構(gòu),currentTarget 是 aaron 的 div 元素 , target 是 p 元素,事件對象是有作用域的 currentTarget 是等于 this 的。 事件對象的基礎(chǔ)大家都是知道了,jQuery為了實現(xiàn)統(tǒng)一的事件對象調(diào)用與委托的的處理,將事件對象單獨重寫,這樣如果用戶做了任何的行為處理 jQuery 內(nèi)部都能獲取到狀態(tài)值,從而用來處理同一個元素綁定多個模擬事件的判斷處理。這也是重寫后的一個重要意義。查看全部
-
第一種: A,B,C各自綁定事件,事件按照節(jié)點的冒泡層次觸發(fā) 第二種: 元素 A 本身有事件,元素還需要委派元素 B.C 事件 委派的元素 B.C 肯定是該元素 A 內(nèi)部的,所以先處理內(nèi)部的委派,最后處理本身的事件 第三種: 元素本身有事件,元素還需要委派事件,內(nèi)部委派的元素還有自己的事件,這個有點繞 先執(zhí)行 B,C 自己本身的事件,然后處理 B,C 委派的事件,最后處理 A 事件查看全部
-
默認的觸發(fā)循序是從事件源目標元素也就是 event.target 指定的元素,一直往上冒泡到 document 或者 body,途經(jīng)的元素上如果有對應的事件都會被依次觸發(fā)查看全部
-
(function ($) { if ('onpropertychange' in document) { var rinput = /^INPUT|TEXTAREA$/, isInput = function(elem) { return rinput.test(elem.nodeName); };$.event.special.input = { setup: function() { var elem = this; if (!isInput(elem)) return false; $.data(elem, '@oldValue', elem.value); $.event.add(elem, 'propertychange', function(event) { if ($.data(this, '@oldValue') !== this.value) { $.event.trigger('input', null, this); }; $.data(this, '@oldValue', this.value); }); }, teardown: function() { var elem = this; if (!isInput(elem)) return false; $.event.remove(elem, 'propertychange'); $.removeData(elem, '@oldValue'); } }; }; // 聲明快捷方式:$(elem).input(function () {}); // $.fn.input = function(callback) { // return this.bind('input', callback); // }; })(jQuery);查看全部
-
jQuery.event.add內(nèi)部實際上最終還是通過addEventListener綁定的事件查看全部
舉報
0/150
提交
取消