jQuery选择器中空格的问题再探究
jQuery选择器的空格问题,看似很小,但是差之毫厘谬以千里,让人很是恼火,《锋利的jQuery》书中有个经典的例子,我这里也拷贝下来,再加点自己的想法
<html>
<head>
<title>选择器空格的问题</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function()
{
alert("带空格的选择器的长度是:"+$(".test :hidden").length);
alert("不带空格的选择器的长度是:"+$(".test:hidden").length);
});
</script>
</head>
<body>
<div class="test">
<div style="display:none;">我是内部div</div>
<div style="display:none;">我是内部div</div>
<div style="display:none;">我是内部div</div>
<div class="test" style="display:none;">我是内部div</div>
</div>
<div class="test" style="display:none;">我是外部div</div>
<div class="test" style="display:none;">我是外部div</div>
</body>
</html>
对于上边的这两行来说:
“alert("带空格的选择器的长度是:"+$(".test :hidden").length);”的弹出结果为4
“alert("不带空格的选择器的长度是:"+$(".test:hidden").length);”的弹出结果为3
对于过滤选择器加上了空格的来说,它所获取的是其子元素的过滤,所以上边的例子是选取class为test的元素的子元素的隐藏元素。
而对于过滤选择器没有加上空格的来说,它所获取的是其自身元素的过滤,所以上边的例子选取隐藏的class为test的元素。
其实在表单选择器中也有这种情况:
表单对象属性过滤选择器深究:
#form1 :text <=== > input:text
前面有空格,后面没空格,按照上面红色两行的推理也可以成立,假设这里只有一个表单,#form1是form标签的id,那么它后面的 :text就要加空格,因为是选择它的子元素
而input:text中间就不能有标签,因为选择的就是它本身的属性
所以空格问题看似没有规律,其实是有迹可循的,jQuery选择器的规律和CSS一脉相承,所以学好了CSS的选择器,jQuery也不在话下!
jQuery选择器中空格的问题再探究的更多相关文章
- jquery选择器中两个class是什么意思?
jquery选择器中两个class是什么意思? $(".class1 .class2") 选择class1元素下class2的元素(中间有空格)$(".class1.cl ...
- jQuery选择器中的特殊符号和关键字
一般情况下,在jQuery选择器中,我们很少会用到诸如"."."#"."("."["等特殊字符,因为根据W3C规定,HT ...
- 处理jQuery选择器中的特殊符号,如(、#等
前几天解决一个外网问题,客服反馈页面数据加载不出来,首先看一下服务端日志也没报错异常,自己测试了一下,在chrome的Console发现有js报错,原来是js报错导致的数据加载不出来. 调试了一番,发 ...
- jQuery选择器 大于 空格 波浪线 加号
JQuery选择器 大于 空格 波浪线 加号的区别 元素遍历 符号 说明 空格 $(‘parent child’)表示获取parent下的所有的child节点(所有的子孙). 大于号 $(‘paren ...
- jQuery选择器中的空格问题
前几天就遇到过这样的问题,明明我用的是('tr :even').css('background','#ccc')想改变表格中行的背景色,反复试了还是没改变.还问了度娘还是没找到原因所在(当时问题描述的 ...
- JQuery选择器中的一些注意事项
1. 选择器中含有特殊符号的注意事项 1. 1 选择器中含有",","#","("或"]"等特殊字符 根据w3c的规定, ...
- jquery 选择器中含有空格注意
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery选择器中的find和空格,children和>的区别、及父节点兄弟节点,还有判断是否存在的写法
一.find和空格,children和>及其它的区别 空格:$('parent childchild')表示获取parent下的所有的childchild节点(所有的子孙). 等效成 = ...
- jquery选择器中中>和空格的区别
空格:$('parent childchild')表示获取parent下的所有的childchild节点 大于号:$('parent > childchild')表示获取parent下的所有下一 ...
随机推荐
- docker 提示 Drive has not been shared 错误
Creating laradock_docker-in-docker_1 ... Creating laradock_docker-in-docker_1 ... error ERROR: for l ...
- PAT甲级——A1155 HeapPaths【30】
In computer science, a heap is a specialized tree-based data structure that satisfies the heap prope ...
- JAVA中的面向对象与内存解析_1
对象的创建和引用 必须使用new关键字创建对象. 使用对象(引用成员变量或来引用对象的成员变量. 使用对象(引用)方法(参数列表)来调用对象的方法. 同一类的每个对象有不同的成员变量存储空间. 同 ...
- 蓝桥杯:排它平方数-java
问题描述: 小明正看着 203879 这个数字发呆.原来,203879 * 203879 = 41566646641这有什么神奇呢?仔细观察,203879 是个6位数,并且它的每个数位上的数字都是不同 ...
- Redis 系列(02)数据结构
目录 Redis 系列(02)数据结构 Redis 系列目录 1. String 1.1 基本操作 1.2 数据结构 1.3 Redis数据存储结构 2. Hash 2.1 基本操作 2.2 数据结构 ...
- sublime中使用插件anaconda而在代码中出现方框
这个标志是说不符合PEP8标准,比如使用了Tab做缩进:一行过长等问题. 可以在可以在 Sublime > Preferences > Package Settings > Anac ...
- 【记录】解决uni-app 用nginx反向代理出现Invalid Host header问题
之前解决过一次,后来给忘记了,今天又遇到这个问题,现记录一下 修改uni-app的manifest.json文件 - >源码视图 添加以下代码: "disableHostCheck& ...
- HDU-5072 补集转化+容斥原理
题意:给n个数,求满足一下条件的三元组(a,b,c)数量:a,b,c两两互质或者a,b,c两两不互质. 解法:这道题非常巧妙地运用补集转化和容斥原理.首先我们令这n个数为n个点,然后两两之间连边如果是 ...
- iframes
iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中.但我们需要慎重的使用iframe.iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级. ...
- 【和孩子一起学编程】 python笔记--第四天
第十一章: 可变循环 newStars = int(input("how many stars do you want?")) for i in range(newStars): ...