jQuery length 和 size

本文為叩丁狼高級講師原創(chuàng)文章旦万,轉(zhuǎn)載請注明出處棋恼。

總是有些時候,會發(fā)現(xiàn)一些屬性或者方法在存在一些相同或者相似相近的東西脂崔,比如最近看到到的jquery中的length和size滤淳。兩個都表示jquery中對象元素的個數(shù)。

首先最明顯的區(qū)別:

length是屬性砌左,size()是方法

如果只是想獲取元素的個數(shù)脖咐,兩者的結(jié)果數(shù)據(jù)是一樣的。

比如

HTML 代碼: <img src="test1.jpg"/>

<img src="test2.jpg"/>

jQuery 代碼: $("img").length; //結(jié)果:2

HTML 代碼: <img src="test1.jpg"/>

<img src="test2.jpg"/>

jQuery 代碼: $("img").size(); //結(jié)果:2

只不過汇歹,從1開始計算數(shù)組長度

但是如果是獲取字符串的長度就只得用length, 比如:

HTML 代碼: <p id="text">你是我的小丫小蘋果</p>

jQuery 代碼: $("#text").val().length

執(zhí)行效率方面:

圖片1.png

通過這個鏈接可以查看到兩者的執(zhí)行情況:<u>https://jsperf.com/size-vs-length</u>

通過以上的鏈接測試結(jié)果來看屁擅,length的效率顯然要高于size方法。

<u>http://api.jquery.com/size/</u>

The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.

The .size() method is functionally equivalent to the .length property; however, the ****.length**** property is preferredbecause it does not have the overhead of a function call.

Given a simple unordered list on the page:

<ul>

<li>foo</li>

<li>bar</li>

</ul>

Both .size() and .length identify the number of items:

alert( "Size: "+ $( "li" ).size() );

alert( "Size: "+ $( "li" ).length );

This results in two alerts:

Size: 2

Size: 2

Example:

Count the divs. Click to add more.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>size demo</title>

<style>

body {

cursor: pointer;

min-height: 100px;

}

div {

width: 50px;

height: 30px;

margin: 5px;

float: left;

background: blue;

}

span {

color: red;

}

</style>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>

<span></span>

<div></div>

<script>

$( document.body )

.click(function() {

$( this ).append( $( "<div>" ) );

var n = $( "div" ).size();

$( "span" ).text( "There are " + n + " divs. Click to add more." );

})

// Trigger the click to start

.click();

</script>

</body>

</html>

可以看出來产弹,size()是調(diào)用length屬性實(shí)現(xiàn)的派歌。在jquery 1.8后 length取代了 size() ,因?yàn)閘ength不需要返回一個函數(shù)調(diào)用,更優(yōu)秀痰哨。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末胶果,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子斤斧,更是在濱河造成了極大的恐慌早抠,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,324評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撬讽,死亡現(xiàn)場離奇詭異蕊连,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)锐秦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評論 3 392
  • 文/潘曉璐 我一進(jìn)店門咪奖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盗忱,“玉大人酱床,你說我怎么就攤上這事√说瑁” “怎么了扇谣?”我有些...
    開封第一講書人閱讀 162,328評論 0 353
  • 文/不壞的土叔 我叫張陵昧捷,是天一觀的道長。 經(jīng)常有香客問我罐寨,道長靡挥,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,147評論 1 292
  • 正文 為了忘掉前任鸯绿,我火速辦了婚禮跋破,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘瓶蝴。我一直安慰自己毒返,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,160評論 6 388
  • 文/花漫 我一把揭開白布舷手。 她就那樣靜靜地躺著拧簸,像睡著了一般。 火紅的嫁衣襯著肌膚如雪男窟。 梳的紋絲不亂的頭發(fā)上盆赤,一...
    開封第一講書人閱讀 51,115評論 1 296
  • 那天,我揣著相機(jī)與錄音歉眷,去河邊找鬼牺六。 笑死,一個胖子當(dāng)著我的面吹牛姥芥,可吹牛的內(nèi)容都是我干的兔乞。 我是一名探鬼主播,決...
    沈念sama閱讀 40,025評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼凉唐,長吁一口氣:“原來是場噩夢啊……” “哼庸追!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起台囱,我...
    開封第一講書人閱讀 38,867評論 0 274
  • 序言:老撾萬榮一對情侶失蹤淡溯,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后簿训,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咱娶,經(jīng)...
    沈念sama閱讀 45,307評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,528評論 2 332
  • 正文 我和宋清朗相戀三年强品,在試婚紗的時候發(fā)現(xiàn)自己被綠了膘侮。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,688評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡的榛,死狀恐怖琼了,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤雕薪,帶...
    沈念sama閱讀 35,409評論 5 343
  • 正文 年R本政府宣布昧诱,位于F島的核電站,受9級特大地震影響所袁,放射性物質(zhì)發(fā)生泄漏盏档。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,001評論 3 325
  • 文/蒙蒙 一燥爷、第九天 我趴在偏房一處隱蔽的房頂上張望蜈亩。 院中可真熱鬧,春花似錦前翎、人聲如沸勺拣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽药有。三九已至,卻和暖如春苹丸,著一層夾襖步出監(jiān)牢的瞬間愤惰,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1 268
  • 我被黑心中介騙來泰國打工赘理, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宦言,地道東北人。 一個月前我還...
    沈念sama閱讀 47,685評論 2 368
  • 正文 我出身青樓商模,卻偏偏與公主長得像奠旺,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子施流,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,573評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,180評論 0 3
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式响疚。設(shè)計者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,335評論 0 2
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式瞪醋。設(shè)計者無需花費(fèi)時間糾纏JS復(fù)雜的高級特性忿晕。 1....
    LaBaby_閱讀 1,171評論 0 1
  • 通過jQuery,您可以選纫堋(查詢践盼,query)HTML元素,并對它們執(zhí)行“操作”(actions)宾巍。 jQuer...
    枇杷樹8824閱讀 655評論 0 3
  • 今天忙碌而充實(shí)咕幻,上午批作業(yè)、備課顶霞,下午上了一下午課肄程,樸實(shí)而有成效,學(xué)生給我越來越好,越來越踏實(shí)的感覺绷耍,這份感覺讓我...
    一農(nóng)小語閱讀 144評論 0 1