`

jQuery选择器特殊字符与属性空格问题。

 
阅读更多
一、选择器中含有特殊符号的注意事项

1.选择器中含有“.”、“#”、“(”或“]”等特殊字符
根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符,如果按照普通的方式去处理出来的话就会出错。解决此类错误的方法是使用转义符转义。

<div id="id#b">bb</div>
< div id="id[1]">cc</div>

不能这样写:
$('#id#b');
$('#id[1]');

应该使用转义符号:
$('#id\\#b'); //转义特殊字符“#”
$('#id\\[1\\]'); //转义特殊字符“[ ]”

2.属性选择器的引号问题
1.3.1版本彻底放弃了1.1.0版本遗留下的@符号,如果你使用1.3.1以上的版本,那么你不能在属性前添加@符号,比如:
$('div[@title="test"'];

正确的写法是:
$('div[title="test"'];

二、选择器中含有空格的注意事项

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

<div class="test">
<div style="display:none;">aa</div>
<div style="display:none;">bb</div>
<div style="display:none;">cc</div>
<div class="test" style="display:none;">dd</div>
< /div>
< div class="test" style="display:none;">ee</div>
< div class="test" style="display:none;">ff</div>


使用如下的jQuery选择器分别获取它们。

//注意区分类似这样的选择器
//虽然一个空格,却截然不同的效果.
var $t_a = $('.test :hidden');
var $t_b = $('.test:hidden');
var len_a = $t_a.length;
var len_b = $t_b.length;
alert("$('.test :hidden') = "+len_a); //输出 4
alert("$('.test:hidden') = "+len_b); //输出 3

之所以会出现不同的结果,是因为后代选择器与过滤选择器的不同。
var $t_a = $('.test :hidden'); //有空格 是选取class为“test”的元素里面的隐藏元素。

var $t_b = $('.test:hidden'); //没有空格 则是选取隐藏的class为“test”的元素。
这点和css是一样的 css中假如有个div有两个class属性.top 和 .right <div class="top right "></div>,在css中我们要选择它定义样式只能这样写 .top.right{ } 而不能写成.top .right{ }
分享到:
评论

相关推荐

    jQuery选择器特殊字符与属性空格问题

    本文将深入探讨jQuery选择器在处理特殊字符和属性空格时可能遇到的问题及其解决方案。 首先,让我们来看看选择器中含有特殊字符的情况。根据W3C的标准,属性值不应该包含像"."、 "#"、 "[" 或 "]" 这样的特殊字符。...

    jQuery基础选择器练习题

    在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。

    JQuery选择器详解JQuery选择器详解

    JQuery选择器是jQuery库中的核心功能之一,它极大地简化了JavaScript中对DOM元素的选取,使得开发者可以更高效地操作网页元素。本篇将详细阐述JQuery选择器的使用和原理。 一、基础选择器 JQuery的基础选择器包括ID...

    Jquery选择器教程

    **jQuery选择器教程** 在Web开发中,jQuery作为一个强大的JavaScript库,极大地简化了DOM操作、事件处理和动画制作。尤其在选择元素方面,jQuery提供了一系列高效且易用的选择器,使得开发者可以更方便地选取页面上...

    JQuery选择器帮助文档

    ### JQuery选择器帮助文档 #### 一、简介 本文档主要介绍了JQuery 1.3.2版本中的选择器功能,这些选择器可以帮助开发者高效地选取网页中的元素,从而实现对DOM的操作。JQuery的选择器简化了JavaScript原生操作DOM...

    jquery选择器实例和jar包

    **jQuery选择器是jQuery库中的核心功能之一,用于在HTML文档中高效地选取元素。它提供了丰富的选择方式,使得操作DOM变得简单而...同时,了解jQuery选择器与CSS选择器的兼容性,可以帮助你在不同场景下做出合适的选择。

    jquery选择器的几种用法

    本文将深入探讨jQuery选择器的几种常见用法,帮助你更好地理解和运用这个强大的工具。 1. 基本选择器: jQuery的基本选择器包括ID选择器(`#id`),类选择器(`.class`)和元素选择器(`tag`)。例如,`$("#myID")...

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

    2. 在实际应用中,属性值中的特殊字符,如引号、空格等,需要适当地使用转义字符。不过在上述的示例中,属性值已经使用了引号,这符合了HTML属性的规范。 3. 组合使用多个属性选择器时,可能会因为选择器过于具体而...

    Jquery css选择器

    本文将深入探讨Jquery CSS选择器的重要特性,特别是属性选择器、子选择器以及兄弟组合选择器的应用。 #### 二、属性选择器 属性选择器是一种根据元素的属性及其值来进行选择的方式。它提供了六种不同的类型,用于...

    jQuery选择器

    **jQuery选择器详解** jQuery库以其简洁易用的API闻名,其中最重要的部分之一就是选择器。选择器在jQuery中扮演着查找HTML元素的关键角色,使得开发者可以轻松地选取DOM中的特定元素进行操作。本文将深入探讨jQuery...

    jquery选择器

    通过上述介绍,我们可以看到jQuery选择器的强大与灵活性。它们不仅简化了DOM元素的查找过程,还提供了丰富的选择模式,使得页面元素的操作更加高效和精确。掌握这些选择器,对于前端开发者来说是必不可少的技能。在...

    JQuery选择器

    **jQuery选择器详解** 在Web开发中,jQuery库极大地简化了JavaScript操作,特别是其强大的选择器功能。jQuery选择器是jQuery库的核心特性之一,它允许开发者高效地选取DOM(Document Object Model)中的元素,进行...

    jQuery应用中特殊字符处理的问题

    在本案例中,开发人员在制作动态菜单时遇到的困难是由于ID中包含特殊字符“/”,导致无法使用常规的方法通过jQuery选择器获取对应的节点。这是一个在实际开发中相当常见的问题,因为HTML ID属性所允许的字符范围要比...

    L06.02jQuery选择器参考1

    jQuery选择器是jQuery库的核心功能之一,用于在DOM(文档对象模型)中高效地选取元素。以下是对jQuery选择器的详细解释: 1. **All Selector ("*")**: 选择所有元素,无论其类型如何。 2. **:animated Selector**:...

    JQuery中属性过滤选择器用法实例分析

    本文将对JQuery中属性过滤选择器的用法进行实例分析,帮助理解各种属性过滤选择器的实际应用。 1. 包含特定属性的选择器 使用`[attribute]`形式可以匹配所有包含给定属性的元素。例如,选择所有带有`id`属性的`div`...

    jQuery 之基本选择器

    - **后代选择器**: 使用空格分隔,如`$("div p")`会选择所有在div内的p元素。 - **子元素选择器**: 使用`&gt;`分隔,如`$("div &gt; p")`会选择所有div的直接子元素p。 - **相邻兄弟选择器**: 使用`+`分隔,如`$("div +...

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

    在jQuery选择器中,空格、大于号(&gt;)、加号(+)和波浪号(~)都是重要的符号,它们用来表示不同种类的元素关系。接下来,我们将详细探讨这些选择器的区别与使用场景。 首先,空格选择器可以用来选择指定元素下的...

Global site tag (gtag.js) - Google Analytics