欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery中的length 和 size()区别是什么?

程序员文章站 2022-06-10 12:51:13
...
size()函数用于返回当前jQuery对象封装的元素个数。size()函数与length属性的作用相同。该函数属于jQuery对象(实例)。size()方法的返回值与jQuery对象的length属性一致。

语法结构:

$(selector).size()

实例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php.cn</title>
<style type="text/css">
span{color:red;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#btn").click(function(){ 
    $("span").text($("li").size()); 
  }) 
})
</script>
</head>
<body>
<div>
  <ul>
    <li>后台专区</li>
    <li>前台专区</li>
    <li>数据库专区</li>
    <li>站长交流</li>
  </ul>
</div>
<div>li元素集合中li元素的数量:<span></span></div>
<button id="btn">点击查看实例</button>
</body>
</html>

jQuery length和size()区别总结如下:
1.length是属性,size()是方法。针对标签对象元素,比如数html页面有多少个段落元素<p></p>那么此时的$("p").size() == $("p").length

2.如果你只是想获取元素的个数,两者效果一样既 $("img").length 和 $("img").size() 获取的值是一样的;但是如果是获取字符串的长度就只得用length, 如 $("#text").val().length

计算一个字符串的长度或者计算一个数组元素的个数那么此时只能用length而不能用size()

jQuery length和size()区别 从上可以看出size()是调用length属性实现的,而且在jquery 1.8后 length取代了 size() ,因为length不需要返回一个函数调用,更优秀。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js">
</script>
<script type="text/javascript">
$(function(){
    var imglength=$("img").length;   //2
    var imgsize=$("img").size();   //2
    var vallength=$("#text").val().length; //3
})
</script>
</head>
<body>
<img src="test1.jpg"/>
<img src="test2.jpg"/>
姓名<input type="text" id="text" value="aaa"/>
<!--
jQuery length和size()区别总结如下:
1.length是属性,size()是方法。
2.如果你只是想获取元素的个数,两者效果一样既 $("img").length 和 $("img").size() 获取的值是一样的;
但是如果是获取字符串的长度就只得用length, 如 $("#text").val().length
 
从上可以看出size()是调用length属性实现的,而且在jquery 1.8后 length取代了 size()  ,因为length不需要返回一个函数调用,更优秀。
 -->
</body>
</html>

以上就是jQuery中的length 和 size()区别是什么?的详细内容,更多请关注其它相关文章!