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 相关文章推荐
JavaScript入门学习书籍推荐
Jun 12 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
JavaScript基本编码模式小结
May 23 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
Jan 25 Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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输出Excel文件类
2010/02/08 PHP
学习php笔记 字符串处理
2010/10/19 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
php下连接mssql2005的代码
2011/01/17 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
vue.js实现三级菜单效果
2019/10/19 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python logging模块原理解析及应用
2020/08/13 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
十一酒店活动方案
2014/02/20 职场文书
调查研究项目计划书
2014/04/29 职场文书
软件项目实施计划书
2014/05/02 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
作文评语集锦
2014/12/25 职场文书
全陪导游词
2015/02/04 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
深入理解Vue的数据响应式
2021/05/15 Vue.js