-
jQuery的each迭代器 jQuery的each方法從使用上就要分2種情況： ? $.each()函數(shù) ? $(selector).each() $.each()函數(shù)和$(selector).each()是不一樣的，后者是專門用來遍歷一個(gè)jQuery對(duì)象的，是為jQuery內(nèi)部服務(wù)的。 $.each()函數(shù)可用于迭代任何集合，無論是“名/值”對(duì)象（JavaScript對(duì)象）或數(shù)組。在迭代數(shù)組的情況下，回調(diào)函數(shù)每次傳遞一個(gè)數(shù)組索引和相應(yīng)的數(shù)組值作為參數(shù)。（該值也可以通過訪問this關(guān)鍵字得到，但是JavaScript始終將this值作為一個(gè)Object，即使它是一個(gè)簡(jiǎn)單的字符串或數(shù)字值。）該方法返回其第一個(gè)參數(shù)，這是迭代的對(duì)象。 jQuery的實(shí)例方法最終也是調(diào)用的靜態(tài)方法，我們?cè)谥熬徒忉屵^jQuery的實(shí)例與原型方法共享的設(shè)計(jì)。 其中each的實(shí)例方法如下： 可見內(nèi)部是直接調(diào)用的靜態(tài)方法： each: function(callback, args) { return jQuery.each(this, callback, args); },查看全部
-
我們簡(jiǎn)單的修改一下上面的代碼： function each(obj, callback, context, arg) { var i = 0; var value; var length = obj.length; for (; i < length; i++) { callback.call(context || null, obj[i], arg); } } var arr = ['a', 'b', 'c']; each(arr, function(name, arg) { console.log(name, arg ,this); }, this, 'aaa') 當(dāng)然根據(jù)回調(diào)的處理，從而判斷是否要立刻中斷這個(gè)循環(huán)，從而節(jié)約性能，也是很簡(jiǎn)單的，我們可以通過獲取處理的返回值來處理，如下代碼： function each(obj, callback, context, arg) { var i = 0; var value; var length = obj.length; for (; i < length; i++) { value = callback.call(context || null, obj[i], arg); if (value === false) { break; } } 可見只要通過回調(diào)函數(shù)callback返回的ture/false的布爾值結(jié)果就可以來判斷當(dāng)前是否要強(qiáng)制退出循環(huán)。查看全部
-
迭代器 迭代器是一個(gè)框架的重要設(shè)計(jì)。我們經(jīng)常需要提供一種方法順序用來處理聚合對(duì)象中各個(gè)元素，而又不暴露該對(duì)象的內(nèi)部，這也是設(shè)計(jì)模式中的迭代器模式(Iterator)。 jQuery中的$.each方法就是一個(gè)典型的迭代器，通過each我們可以傳入額外的function，然后來對(duì)所有的item項(xiàng)進(jìn)行迭代操作，如下代碼： $.each([52, 97], function(index, value) { alert(index + ': ' + value); }); $( "li" ).each(function( index ) { console.log( index + ": "" + $(this).text() ); }); 針對(duì)迭代器，這里有幾個(gè)特點(diǎn)： ? 訪問一個(gè)聚合對(duì)象的內(nèi)容而無需暴露它的內(nèi)部。 ? 為遍歷不同的集合結(jié)構(gòu)提供一個(gè)統(tǒng)一的接口，從而支持同樣的算法在不同的集合結(jié)構(gòu)上進(jìn)行操作。 ? 遍歷的同時(shí)更改迭代器所在的集合結(jié)構(gòu)可能會(huì)導(dǎo)致問題。 簡(jiǎn)單的說：封裝實(shí)現(xiàn)，然后迭代器的聚合對(duì)象不用關(guān)心迭代的過程，從而符合SRP原則。 拋開jQuery的each方法，我們自己實(shí)現(xiàn)一個(gè)有簡(jiǎn)單的迭代器功能的代碼： 1、簡(jiǎn)單回調(diào) function each(obj, callback) { var i = 0; var value; var length = obj.length; for (; i < length; i++) { callback(obj[i]); } } var arr = ['a', 'b', 'c']; each(arr, function(name) { console.log(name); }) 這樣就滿足了迭代模式的設(shè)計(jì)原則，對(duì)于集合內(nèi)部結(jié)果常常變化各異，我們不想暴露其內(nèi)部結(jié)構(gòu)，但又想讓客戶代碼透明地訪問其中的元素，通過回調(diào)把邏輯給解耦出來。但是這樣的處理其實(shí)太簡(jiǎn)單了，我們還要考慮至少四種情況： ? 聚合對(duì)象，可能是對(duì)象，字符串或者數(shù)組等類型 ? 支持參數(shù)傳遞 ? 支持上下文的傳遞 ? 支持循環(huán)中退出查看全部
-
jQuery的考慮很周到，通過eq方法只能產(chǎn)生一個(gè)新的對(duì)象，但是如果需要的是一個(gè)合集對(duì)象要怎么處理？因此jQuery便提供了一個(gè)slice方法： 語(yǔ)法： .slice( start [, end ] ) 作用： 根據(jù)指定的下標(biāo)范圍，過濾匹配的元素集合，并生成一個(gè)新的 jQuery 對(duì)象。 因?yàn)槭菙?shù)組對(duì)象，意味著我們可以用silce來直接取值了，所以針對(duì)合集對(duì)象我們可以這樣寫代碼： var arr = [] arr.push( this.slice(start[,end]) ) this.pushStack（arr） 這個(gè)this指的是jQuery對(duì)象，因?yàn)閖Query對(duì)象是數(shù)組集合，所以我們可以通過原生的silce方法直接取到集合數(shù)，然后通過包裝處理即可了。 slice: function() { return this.pushStack( slice.apply( this, arguments ) ); },查看全部
-
get與eq的區(qū)別 .eq() 減少匹配元素的集合，根據(jù)index索引值，精確指定索引對(duì)象。 .get() 通過檢索匹配jQuery對(duì)象得到對(duì)應(yīng)的DOM元素。 同樣是返回元素，那么eq與get有什么區(qū)別呢？ eq返回的是一個(gè)jQuery對(duì)象，get返回的是一個(gè)DOM對(duì)象。舉個(gè)例子： $( "li" ).get( 0 ).css("color", "red"); //錯(cuò)誤 $( "li" ).eq( 0 ).css("color", "red"); //正確 get方法本質(zhì)上是把jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象，但是css屬于jQuery構(gòu)造器的，DOM是不存在這個(gè)方法的，如果需要用jQuery的方法，我們必須這樣寫： var li = $( "li" ).get( 0 ); $( li ).css("color", "red"); //用$包裝 取出DOM對(duì)象li，然后用$再次包裝，使之轉(zhuǎn)變成jQuery對(duì)象，才能調(diào)用css方法，這樣要分2步寫太麻煩了，所以jQuery給我們提供了一個(gè)便捷方法eq()。 eq()的實(shí)現(xiàn)原理就是在上面代碼中的把eq方法內(nèi)部轉(zhuǎn)成jQuery對(duì)象： eq: function( i ) { var len = this.length, j = +i + ( i < 0 ? len : 0 ); return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] ); 上面實(shí)現(xiàn)代碼的邏輯就是跟get是一樣的，區(qū)別就是通過了pushStack產(chǎn)生了一個(gè)新的jQuery對(duì)象。查看全部
-
jQuery提供了.get()、:index()、 :lt()、:gt()、:even()及 :odd()這類索引值相關(guān)的選擇器，他們的作用可以過濾他們前面的匹配表達(dá)式的集合元素，篩選的依據(jù)就是這個(gè)元素在原先匹配集合中的順序。 我們來分別看一下這幾個(gè)選擇器的實(shí)現(xiàn)原理: get方法--是通過檢索匹配jQuery對(duì)象得到對(duì)應(yīng)的DOM元素，如下代碼實(shí)現(xiàn)： get: function(num) { return num != null ? // Return just the one element from the set (num < 0 ? this[num + this.length] : this[num]) : // Return all the elements in a clean array slice.call(this); } 原理很簡(jiǎn)單，因?yàn)閖Query查詢出來的是一個(gè)數(shù)組的DOM集合，所以就可以按照數(shù)組的方法通過下標(biāo)的索引取值，當(dāng)然如果num的值超出范圍，比如小于元素?cái)?shù)量的負(fù)數(shù)或等于或大于元素的數(shù)量的數(shù)，那么它將返回undefined。 假設(shè)我們頁(yè)面上有一個(gè)簡(jiǎn)單的無序列表，如下代碼： <ul> <li id="foo">foo</li> <li id="bar">bar</li> </ul> 如果指定了index參數(shù)，.get()則會(huì)獲取單個(gè)元素，如下代碼： console.log( $( "li" ).get( 0 ) ); 由于索引 index 是以 0 開始計(jì)數(shù)的，所以上面代碼返回了第一個(gè)列表項(xiàng)<li id="foo">foo</li>。 然而，這種語(yǔ)法缺少某些 .get() 所具有的附加功能，比如可以指定索引值為負(fù)值： console.log( $( "li" ).get(-1) ); 負(fù)的索引值表示從匹配的集合中從末尾開始倒數(shù)，所以上面這個(gè)例子將會(huì)返回列表中最后一項(xiàng)：<li id="bar">bar</li>。 由于是數(shù)組的關(guān)系，所以我們有幾個(gè)快速方法，比如頭跟尾的取值： first: function() { return this.eq( 0 ); }, last: function() { return this.eq(-1); },查看全部
-
$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green'); 鏈?zhǔn)降脑砭褪且祷禺?dāng)前操作的上下文。查看全部
-
回溯處理的設(shè)計(jì)： aaron.find('li').click(function() { alert(1); }).end().click(function() { alert(2); }) jQuery為我們操作這個(gè)內(nèi)部對(duì)象棧提供個(gè)非常有用的2個(gè)方法 .end() .addBack()查看全部
-
jQuery整體架構(gòu) 任何程序代碼不是一開始就復(fù)雜的，成功也不是一躇而蹴的，早期jQuery的作者John Resig在2005年提議改進(jìn)Prototype的“Behaviour”庫(kù)時(shí)，只是想讓其使用更簡(jiǎn)單才發(fā)布新的jQuery框架。起初John Resig估計(jì)也沒料想jQuery會(huì)如此的火熱。我們可以看到從發(fā)布的第一個(gè)1.0開始到目前最新的2.1.1其代碼膨脹到了9000多行，它兼容CSS3，還兼容各種瀏覽器，jQuery使用戶能更方便地處理DOM、事件、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。查看全部
-
jQuery對(duì)象的構(gòu)建如果在性能上考慮，所以就必須采用原型式的結(jié)構(gòu)： jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); } jQuery.fn = jQuery.prototype = { init：function(){ return this }, jquery: version, constructor: jQuery, ……………… } var a = $() ; 使用原型結(jié)構(gòu)，性能上是得到了優(yōu)化，但是ajQuery類這個(gè)結(jié)構(gòu)與目標(biāo)jQuery的結(jié)構(gòu)的還是有很大不一致： ? 沒有采用new操作符； ? return返回的是一個(gè)通過new出來的的對(duì)象 。查看全部
-
函數(shù)在充當(dāng)類的構(gòu)造器時(shí)，原型prototype是一個(gè)重要的概念。prototype是構(gòu)造函數(shù)的一個(gè)屬性, 該屬性指向一個(gè)對(duì)象。而這個(gè)對(duì)象將作為該構(gòu)造函數(shù)所創(chuàng)建的所有實(shí)例的基引用(base reference), 可以把對(duì)象的基引用想像成一個(gè)自動(dòng)創(chuàng)建的隱藏屬性。 當(dāng)訪問對(duì)象的一個(gè)屬性時(shí), 首先查找對(duì)象本身, 找到則返回；若不, 則查找基引用指向的對(duì)象的屬性(如果還找不到實(shí)際上還會(huì)沿著原型鏈向上查找, 直至到根)。 只要沒有被覆蓋的話, 對(duì)象原型的屬性就能在所有的實(shí)例中找到。 類一： function ajQuery() { this.name = 'jQuery'; this.sayName = function(){ return this.name } var a = new ajQuery() var b = new ajQuery() var c = new ajQuery() 類二: function ajQuery() { this.name = 'jQuery' } ajQuery.prototype = { sayName: function() { return this.name } } var a = new ajQuery() var b = new ajQuery() var c = new ajQuery() 類一與類二產(chǎn)生的結(jié)構(gòu)幾乎是一樣的，而本質(zhì)區(qū)別就是：類二new產(chǎn)生的a、b、c三個(gè)實(shí)例對(duì)象共享了原型的sayName方法，這樣的好處節(jié)省了內(nèi)存空間，類一則是要為每一個(gè)實(shí)例復(fù)制sayName方法，每個(gè)方法屬性都占用一定的內(nèi)存的空間，所以如果把所有屬性方法都聲明在構(gòu)造函數(shù)中，就會(huì)無形的增大很多開銷，這些實(shí)例化的對(duì)象的屬性一模一樣，都是對(duì)this的引用來處理。除此之外類一的所有方法都是拷貝到當(dāng)前實(shí)例對(duì)象上。類二則是要通過scope連接到原型鏈上查找，這樣就無形之中要多一層作用域鏈的查找了。查看全部
-
Var _jQuery = window.jQuery, _$ = window.$; jQuery.noConflict = function( deep ) { if ( window.$ === jQuery ) { window.$ = _$; } if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } return jQuery; }; 如果我們需要同時(shí)使用jQuery和其他JavaScript庫(kù)，我們可以使用 $.noConflict()把$的控制權(quán)交給其他庫(kù)。舊引用的$ 被保存在jQuery的初始化; noConflict() 簡(jiǎn)單的恢復(fù)它們。 通過類似swap交換的概念，先把之前的存在的命名空間給緩存起來，通過對(duì)比當(dāng)前的命名空間達(dá)到交換的目的，首先，我們先判斷下當(dāng)前的的$空間是不是被jQuery接管了，如果是則讓出控制權(quán)給之前的_$引用的庫(kù)，如果傳入deep為true的話等于是把jQuery的控制權(quán)也讓出去了。查看全部
-
如果我們需要同時(shí)使用jQuery和其他JavaScript庫(kù)，我們可以使用 $.noConflict()把$的控制權(quán)交給其他庫(kù)。舊引用的$ 被保存在jQuery的初始化; noConflict() 簡(jiǎn)單的恢復(fù)它們。 通過類似swap交換的概念，先把之前的存在的命名空間給緩存起來，通過對(duì)比當(dāng)前的命名空間達(dá)到交換的目的，首先，我們先判斷下當(dāng)前的的$空間是不是被jQuery接管了，如果是則讓出控制權(quán)給之前的_$引用的庫(kù)，如果傳入deep為true的話等于是把jQuery的控制權(quán)也讓出去了。查看全部
-
DOM文檔加載步驟: 1. 解析HTML結(jié)構(gòu) 2. 加載外部腳本和樣式表文件 3. 解析并執(zhí)行腳本代碼 4. 構(gòu)造HTML DOM模型 // ready 4完成后，$(document).ready(function() {//...}); 或 $(function() {//...})執(zhí)行 5. 加載圖片等外部文件 6. 頁(yè)面加載完畢 // load 6完成后，$(document).load(function() {//...});執(zhí)行查看全部
-
首先我們看jQuery的入口都是統(tǒng)一的$, 通過傳遞參數(shù)的不同，實(shí)現(xiàn)了9種方法的重載： 1. jQuery([selector,[context]]) 2. jQuery(element) 3. jQuery(elementArray) 4. jQuery(object) 5. jQuery(jQuery object) 6. jQuery(html,[ownerDocument]) 7. jQuery(html,[attributes]) 8. jQuery() 9. jQuery(callback) 9種用法整體來說可以分三大塊：選擇器、dom的處理、dom加載。 換句話說jQuery就是為了獲取DOM、操作DOM而存在的！所以為了更方便這些操作，讓節(jié)點(diǎn)與實(shí)例對(duì)象通過一個(gè)橋梁給關(guān)聯(lián)起來，jQuery內(nèi)部就采用了一種叫“類數(shù)組對(duì)象”的方式作為存儲(chǔ)結(jié)構(gòu)，所以我們即可以像對(duì)象一樣處理jQuery操作，也能像數(shù)組一樣可以使用push、pop、shift、unshift、sort、each、map等類數(shù)組的方法操作jQuery對(duì)象了。查看全部
舉報(bào)
0/150
提交
取消