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，那么说明你希望得到的元素不存在，反之存在。
javascript学习笔记-2：jQuery中$("xx")返回值探究的更多相关文章
- javascript 学习笔记之JQuery中的Deferred对象
Deffered是Jquery中的一个非常重要的对象,从1.5版本之后,Jquery中的ajax操作都基于Deffered进行了重构,这个对象的处理模式就像其他Javascript框中的Promise ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- Java程序猿的JavaScript学习笔记（9—— jQuery工具方法）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
随机推荐
- 9.Spark Streaming
Spark Streaming 1 Why Apache Spark 2 关于Apache Spark 3 如何安装Apache Spark 4 Apache Spark的工作原理 5 spark弹性 ...
- [技术] 如何正确食用cnblogs的CSS定制
用过cnblogs的估计都知道cnblogs提供了相对比较开放的个性化选项,其中最为突出的估计就是页面CSS定制了.但是没学过Web前端的人可能并不会用这个东西... 所以我打算在此分享一些定制CSS ...
- python中list总结
转自python中list总结 一.list可以看做是一个数据结构,也是一个class, 用help(list)可以看见其方法,元素的增删改查都有各种现成的方法, 二.list操作包含以下函数:1.c ...
- vscode--搭建自动编译sass环境
一,安装插件及使用步骤 1.vscode安装Live Sass Compiler,由于该插件依赖Live Server ,所以会自动安装Live Server 2.点击vscode底部的Watch m ...
- 一步一步学Vue（十二）
为了提升代码的逼格,之后代码改为Vue文件组件,之前代码虽然读起来容易理解,而且适合在小的项目中使用,但是有如下缺点: 全局定义(Global definitions) 强制要求每个 componen ...
- c++ STL 容器——联合容器
STL提供了四种联合容器 set,multiset,map,multimap; set and multiset在<set>头文件 map and multimap在<map> ...
- 总结jq的一些特效
Jquery代码总结 1.轮播图: <script src="jquery-1.8.3.min.js"></script><script> ...
- XML语法小结
语法结构主要要求: (1)有且仅有一个根元素. 根元素也称文档元素,整个 XML 文档的其他元素都包含在根元素中,并通过嵌套形成树 型结构.除了根元素外,其他元素都是子元素. (2)每个元素必须有开始 ...
- 设计模式(2)--Singleton--单例模式--创建型
1.模式定义: 单例模式确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 2.模式特点: (1)单例类只能有一个实例. (2)单例类必须自己创建自己的唯一实例. (3)单例类必须给所有 ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...