javascript学习笔记-2:jQuery中$("xx")返回值探究

最近在写一个jQuery插件的时候,需要用到一个条件:

一组img标签,每一个元素都需要被它前面的元素值src替换,如果是第一个(序列为0)则其值为最后一个元素值,如果是最后一个,那么其值为第一个元素值,以此形成一个闭环。

为此,我使用了三元运算符?:,其表达式为:var next=$(this).next()?$(this).next():imageItems.first();

运行测试发现如下问题,当运行到数组最后一个元素时,其next是始终不会是这一组img标签的第一个,为此对$(this).next()返回了什么进行了探究。

为简化起见,我在一个html页面上放置了一个p标签:

<!DOCTYPE Html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试用例</title>
	<link type="text/css" rel="stylesheet" href="../css/index.css">
</head>
<body>

	<p></p>
	
	<script src="../js/jquery-1.7.2.min.js"></script>
	<script src="../js/carousel.js"></script>
	<script>
		$(function(){	
			var next=$('p').next('p')?10:50;
			console.log(next)
			
		})
	</script>
</body>
</html>

 从理论上来说,因为只有一个p标签,那么是不存在next()的,在js中next的值应该是50才对,运行页面结果如图:

但显然,结果却不是这样,返回了10,表示$('p').next()返回的不是null或者未定义,那么这个到底返回了什么呢?修改代码,我把它打印了出来:

<script>
		$(function(){	
			var next=$('p').next('p')?10:50;
			console.log($('p').next('p'))
			
		})
	</script>

 

从这里可以比较清楚地看到,即使使用next()是获取不到其他元素的,这个方法的返回值也不是null或者未定义,而是一个对象,这就表明$("xx")无论有没有xx这个元素,它

返回的都是一个包含一系列信息的js对象而不是null或者未定义

因此如果希望用jquery选择器来作为boolean判断条件的,需要多一步,使用length属性或者get(0)等,如果length为0或者get(0)为undefined,那么说明你希望得到的元素不存在,反之存在。

原文地址:https://www.cnblogs.com/liaochong/p/jquery.html