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

更新时间：2017年08月14日 15:26:58 作者：享受生活

这篇文章主要介绍了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 逐渐从其他 JavaScript 库选择中脱颖而出，并且成为 Web 开发人员的最佳选择。它迅速成为希望简化客户端开发和快速高效地创建富 Internet 应用程序（RIA）的程序员的首选。
2010-11-11
jquery实现垂直手风琴菜单
这篇文章主要为大家详细介绍了jquery实现垂直手风琴菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
基于jquery的代码显示区域自动拉长效果
今天看到一个技术类网站，在显示代码的地方，边框会拉长，很方便用户阅读体验，特看了下代码，原理很简单，使用了jquery，不适用也可以实现
2011-12-12
Jquery优化效率提升性能解决方案
jQuery是目前非常流行的Javascript库之一，随着jQuery应用程序的逐渐增多，其性能优化问题是程序员们不可忽视的，我们知道在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。
2010-09-09
jQuery中not()方法用法实例
这篇文章主要介绍了jQuery中not()方法用法,实例分析了not()方法的功能、定义及删除与指定表达式匹配的元素的使用技巧,需要的朋友可以参考下
2015-01-01
jquery ajax提交表单数据的两种实现方法
貌似AJAX越来越火了，作为一个WEB程序开发者要是不会这个感觉就要落伍，甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者，当然我也要“随波逐流”一把，不然饭碗不保啊！
2010-04-04
30个最佳jQuery Lightbox效果插件分享
Lightbox 应该是最流行的图片浏览效果了，常具有功能包括：自动根据窗口的大小缩放图片，模式窗口，幻灯片方式播放，内容预加载，渐变等效果。
2011-04-04
jQuery学习笔记之jQuery构建函数的7种方法
jQuery把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口，这为jQuery操作降低了门槛。那我们来看下具体构造函数的“七种武器”吧。
2014-06-06
jQuery获取同级元素的简单代码
下面小编就为大家带来一篇jQuery获取同级元素的简单代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JQuery中$.each 和$(selector).each()的区别详解
这篇文章主要介绍了JQuery中$.each 和$(selector).each()的区别详解,本文给出了多个例子讲解了它们之间的不同之处,需要的朋友可以参考下
2015-03-03