jQuery原型屬性和原型方法詳解
首先看一下在jQuery1.7.1中定義的原型屬性和方法有哪些?
首先是constructor屬性
相信熟悉js面向?qū)ο蟛糠值拈_發(fā)人員都熟悉,就是用來返回對象屬性創(chuàng)建的函數(shù),舉個簡單的例子:
function Person(){}; var person=new Person(); alert(person.constructor); //function Person(){}
我們寫繼承的時候喜歡把所有的原型屬性和方法放在一個單獨(dú)的對象字面量中,這樣就會導(dǎo)致constructor屬性與“實際”指向不符合例如:
function Person(){ } Person.prototype={ say:function(msg){ alert(msg); } } var person=new Person(); person.say('hello'); alert(person.constructor); //function Object(){[native code]}
這個時候的指向就會變化因為字面量對象是Object的一個實例自然constructor屬性就會執(zhí)行Object為了糾正這個“錯誤”通常需要手動修改回來這就是源碼,源碼中constructor:jQuery的解釋
selector屬性
selector屬性對于使用jquey作為js庫來說沒有用處它主要是用于開發(fā)基于jquery的插件或者改造使用,該屬性會返回獲取當(dāng)前的jquery對象的選擇器字符串,例如:
var obj=$('div a'); console.log(obj.selector);//'div a'
jquery屬性
該屬性返回當(dāng)前使用的jQuery版本
console.log($('body').jquery); //1.7.1
length屬性
該屬性返回jquery對象包含的元素個數(shù)例如:
console.log ( $('body') .length); //1
這4個屬性源碼如下:
constructor: jQuery, // Start with an empty selector selector: "", // The current version of jQuery being used jquery: "1.7.1", // The default length of a jQuery object is 0 length: 0,
size方法
// The number of elements contained in the matched element set size: function() { return this.length; },
該方法就是返回jquery對象的length屬性兩者而言推薦使用length屬性,可以減少不必要的函數(shù)調(diào)用開銷
toArray方法
toArray: function() { return slice.call( this, 0 ); },
把jQuery集合中所有DOM元素恢復(fù)成一個數(shù)組。
alert($('li').toArray()); [<li id="foo">, <li id="bar">]
首先這里的slice方法在jQuery的構(gòu)造函數(shù)里面已經(jīng)被保留下來,就是Array的原型方法
// Save a reference to some core methods 87 toString = Object.prototype.toString, 88 hasOwn = Object.prototype.hasOwnProperty, 89 push = Array.prototype.push, 90 slice = Array.prototype.slice, 91 trim = String.prototype.trim, 92 indexOf = Array.prototype.indexOf,
通過call方法實現(xiàn)對象冒充,傳入?yún)?shù)0表示不進(jìn)行截取,由于此方法會返回一個 clean array 也就是純數(shù)組這樣就實現(xiàn)了從jquery對象到純數(shù)組的轉(zhuǎn)變,在以后遇到其他類數(shù)組形式時也可以采用此方法進(jìn)行轉(zhuǎn)換例如:
<!doctype html> <html> <head> <meta charset='utf-8'/> <title>jQuery源碼分析-原型屬性和方法</title> </head> <body> <div> </div> <div></div> </body> <script src='jquery-1.7.1.js'></script> <script> var divs=document.getElementsByTagName('div'); console.log(divs); //[div, div] alert(divs instanceof Array); //fasle alert(Array.prototype.slice.call(divs,0) instanceof Array); //true </script> </html>
所以學(xué)習(xí)jqeury源碼除了對使用jquery有幫助之外還能學(xué)到很多js的使用技巧
get方法
// Get the Nth element in the matched element set OR // Get the whole matched element set as a clean array get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( num < 0 ? this[ this.length + num ] : this[ num ] ); },
此方法的作品是從jquery對象的元素數(shù)組中找到其中的某一個并且返回js原聲node元素對象而不是jquery對象,這是跟eq方法不同的地方 ,此方法接受一個參數(shù)如果參數(shù)不存則調(diào)用toArray方法返回包涵所有元素的數(shù)組,如果是大于0的數(shù)直接通過下下標(biāo)的方式獲取即可如果是負(fù)數(shù)則通過與長度相加獲得我們寫某些方法需要支持正負(fù)數(shù)下標(biāo)的一個很好的方法。如果寫的不是數(shù)字,或者超過當(dāng)前對象所包含的元素長度會返回undefined.
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
這篇文章主要介紹了Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05鋒利的jQuery 要點(diǎn)歸納(二) jQuery中的DOM操作(下)
鋒利的jQuery 要點(diǎn)歸納(二) jQuery中的DOM操作(下)2010-03-03jquery ajax后臺返回list,前臺用jquery遍歷list的實現(xiàn)
下面小編就為大家?guī)硪黄猨query ajax后臺返回list,前臺用jquery遍歷list的實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jQuery 常用特效實例小結(jié)【顯示與隱藏、淡入淡出、滑動、動畫等】
這篇文章主要介紹了jQuery 常用特效,結(jié)合實例形式總結(jié)分析了jquery顯示與隱藏、淡入淡出、滑動、動畫等常用特效實現(xiàn)技巧,需要的朋友可以參考下2020-05-05jQuery實現(xiàn)checkbox全選、反選及刪除等操作的方法詳解
這篇文章主要介紹了jQuery實現(xiàn)checkbox全選、反選及刪除等操作的方法,結(jié)合實例形式形式詳細(xì)分析了jQuery針對checkbox多選按鈕常見批量操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-08-08jQuery實現(xiàn)選項聯(lián)動輪播效果【附實例】
下面小編就為大家?guī)硪黄猨Query實現(xiàn)選項聯(lián)動輪播效果【附實例】。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-04-04基于jquery實現(xiàn)的銀行卡號每隔4位自動插入空格的實現(xiàn)代碼
這篇文章主要介紹了基于jquery實現(xiàn)的銀行卡號每隔4位自動插入空格的實現(xiàn)代碼,需要的朋友可以參考下2016-11-11