本文為叩丁狼高級講師原創(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í)行效率方面:
通過這個鏈接可以查看到兩者的執(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)秀痰哨。