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

时间:2022-02-07 15:57:26

最近在写一个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才对,运行页面结果如图:

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

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

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

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

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

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

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