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

此文摘自《锋利的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");//这样才是正确的

时间: 2024-10-10 23:27:03

jQuery选择器中含有空格的使用示例及注意事项_jquery的相关文章

jQuery选择器中含有空格和特殊符号的注意事项

文章简介:使用jQuery选择器应注意的问题. 一.选择器中含有特殊符号的注意事项 1.选择器中含有"."."#"."("或"]"等特殊字符根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符,如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. <div id="id#b"&

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

带空格 表示的是选择class为test里面隐藏的元素:不带空格 表示的是选择隐藏的class为test的元素,在使用过程中一定需要注意下   原理解释: var $t_a=$(".test :hidden") //带空格 表示的是选择class为test里面隐藏的元素: var $t_a=$(".test:hidden")//不带空格 表示的是选择隐藏的class为test的元素: 举例说明: 复制代码 代码如下: <html> <head>

jquery选择器中的空格与大于号&amp;gt;、加号+与波浪号~的区别介绍_jquery

概念 空格:$('parent childchild')表示获取parent下的所有的childchild节点 大于号:$('parent > childchild')表示获取parent下的所有下一级childchild 加号:$('pre + nextbrother')表示获得pre节点的下一个兄弟节点,相当于next()方法 波浪号:$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点,相当于nextAll()方法 详解描述 现有代码如下 <meta charset

jQuery选择器中空格的注意事项

  首先来解释一下选择器里带空格是什么意思,如果选择器中两个元素之间用空格隔开,则表示为前一个元素的后代元素.比如$('div :hidden'),表示的是div里所有的隐藏元素,这个隐藏元素可以是div的子元素,也可以是div子元素的子元素.如果选择器中没有空格的话,表示一个并且的关系,如果说$('div:hidden'),表示的是所有隐藏的div,这个就和元素的层次没有关系了! 下面看一个实例:HTML代码部分 <div> <div style="display: none

Jquery选择器中使用变量实现动态选择例子_jquery

例子一: <table> <tr> <th>用户名</th> <th>状态</th> <tr> <tr> <td>张三</td> <td data-uid="10000">正常</td> <tr> <tr> <td>李四</td> <td data-uid="10001"

jQuery选择器源码解读(八):addCombinator函数_jquery

function addCombinator(matcher, combinator, base) 1.源码 复制代码 代码如下: function addCombinator(matcher, combinator, base) {  var dir = combinator.dir, checkNonElements = base    && dir === "parentNode", doneName = done++;  return combinator.fi

jQuery中animate的几种用法与注意事项_jquery

一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

jquery选择器-根据多个属性选择示例代码_jquery

根据多个属性选择E[attr=val][attr=val] $("div[title='ttt'][class='aaaa']").click()................ 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素

Tomcat下获取当前类的路径中含有空格的解决方案

web项目发布到Tomcat之后,如果tomcat是安装在比如 C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\**** 那么你获取当前类的路径的时候,就会出现问题,因为它会报出%20 C:\Program%20Files\Apache%20Software%20Foundation\Tomcat 6.0\webapps\**** 这个时候你再做一些关于文件的操作,程序就挂了,报一些未知错误,那么解决方案就是使用字符串