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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 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实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JQuery Dialog的内存泄露问题解决方法
2010/06/18 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
Python基础语法(Python基础知识点)
2016/02/28 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python语言的优势是什么
2020/06/17 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
我的画教学反思
2014/04/28 职场文书
国庆宣传标语
2014/06/30 职场文书
装修施工安全责任书
2014/07/24 职场文书
十佳少年事迹材料
2014/12/25 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python