jQuery选择器中含有空格的使用示例及注意事项


Posted in Javascript onAugust 25, 2013

此文摘自《锋利的jQuery》,另外添加了一点自己的东西

选择器中的空格是不容忽视的,多一个空格或少一个空格也许得到的结果会截然不同的。下面来看一个例子。

先构建如下的HTML代码:

<div class="test"> 
<div style="display:none;">Jquery教程</div> 
<div style="display:none;">Jquery学习</div> 
<div style="display:none;">Jquery插件</div> 
<div class="test" style="display:none;">PHP学习</div> 
</div> 
<div class="test" style="display:none;">Jquery插件教程</div> 
<div class="test" style="display:none;">Jquery插件学习</div>

jQuery代码:
var $test_a = $(".test :hidden");//带空格的jQuery选择器 
var $test_b = $(".test:hidden");//不带空格的jQuery选择器 
var len_a = $test_a.length; 
var len_b = $test_b.length; 
alert("带空格的jQuery选择器选出的jQuery元素是:"+len_a+"个");//输出为4个 
alert("不带空格的jQuery选择器选出的jQuery元素是:"+len_b+"个");//输出为3个

之所以会出现不同的结果,这就是后代选择器和过滤选择器的不同了
var $test_a = $(".test :hidden");//带空格的jQuery选择器

上面这段代码是选取class为“test”的元素里面的隐藏元素。(后代选择器)
var $test_b = $(".test:hidden");//不带空格的jQuery选择器

这上面的代码则是选取隐藏的class为“test”的元素

注意:
有的选择器的用法,必须是空格,如果不带空格的话,那就取不到元素,比如:

$("select:selected").length;//不管任何时候,这个选择器都取不到元素,这个length必然是0 
$("select :selected");//这样才是正确的

有的选择器的用法,必须不带空格,如果带空格的话,那就取不到元素,比如:
$("input :checked").length;//不管任何时候,这个选择器都取不到元素,这个length必然是0 
$("input:checked");//这样才是正确的
Javascript 相关文章推荐
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
js中的json对象详细介绍
Oct 29 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
详解Angular路由之路由守卫
May 10 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
JS操作JSON要领详细总结
Aug 25 #Javascript
JS 两个字符串时间的天数差计算
Aug 25 #Javascript
js中onload与onunload的使用示例
Aug 25 #Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 #Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 #Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 #Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 #Javascript
You might like
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php 清除网页病毒的方法
2008/12/05 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
很可爱的输入框
2008/08/03 Javascript
ext 同步和异步示例代码
2009/09/18 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
详解 vue.js用法和特性
2017/10/15 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
详解Python中import机制
2020/09/11 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
学生会竞聘书范文
2014/03/31 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
六五普法宣传标语
2014/10/06 职场文书
同学聚会祝酒词
2015/08/10 职场文书
2019通用版导游词范本!
2019/08/07 职场文书