`

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选择器特殊字符与属性空格问题。通过选择器中含有特殊符号的注意事项和选择器中含有空格的注意事项详细介绍了解决问题的办法,需要的朋友可以参考下

    锋利的jQuery_高清_书签.part2

    2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 2.3.1 基本选择器 2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery改写示例 2.5 选择器中的一些注意事项 2.5.1 选择器中含有...

    JQuery权威指南源代码

    使用jQuery选择器实现隔行变色 JavaScript代码检测页面元素 jQuery代码检测页面元素 使用jQuery基本选择器 使用jQuery层次选择器 使用jQuery基本过滤选择器 使用jQuery内容过滤选择器 使用jQuery可见性过滤...

    jQuery权威指南-源代码

    2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容过滤选择器/25 2.2.5 可见性过滤选择器/27 2.2.6 属性过滤选择器/28 2.2.7 子元素过滤选择器/30 ...

    【推荐】高清jquery视频教程下载

    jquery缩写 4:基本选择器1 5:基本选择器2 6:基本选择器3 7:基本选择器4 8:层次选择器1 9:层次选择器2 10:层次选择器3 11:层次选择器4 12:过滤选择器1 13:过滤选择器2 14:过滤选择器3 15:过滤选择器4 16:过滤选择器5 ...

    jQuery特殊符号转义的实现

    我们在使用jquery选择器的时候 对一些ID属性中有特殊符号的地方需要进行转义。 列举部分如下: &lt;input id="entity.username" type="text" value="hello" /&gt; alert&#40;$("#entity\\.username"&#41;.val()); &...

    jQuery权威指南366页完整版pdf和源码打包

    jquery 选择器/12 2.1 jquery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jquery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器 2.2.4 内容过滤...

    超实用的jQuery代码段

    全书分为11章,包含网页效果、DOM元素与属性、HTML事件、CSS样式、用户输入自动完成、拖放、图形图像、AJAX、算法、jQuery Mobile应用、浏览器、Cookies等jQuery技术内容,对提高网站开发人员和设计人员的jQuery技术...

    jQuery1.8.0 API 中文版

    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的或省略,当它到达选定的元素,事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的...

    Web前端高级作业一.txt

    ... 2.html标签,标签由标签加属性组成,html有自己的标签树 &lt;head&gt;&lt;/head&gt; &lt;body&gt;&lt;/body&gt; ...table标签里还可以设置很多属性 ...还有封装的jQuery,里面也有选择器 还有各种数据库用来存储数据 Ajax

    jquery1.9.1中文版

    jquery中文汉化版 (function( window, undefined ) { //不要做这个因为各自的应用程序包括ASP.NET查找 // the stack via arguments.caller.callee and Firefox dies if //你尝试查找通过“精确使用”呼叫链接(#...

    jQuery完全实例.rar

    这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最...

    jQuery中on()方法用法实例

    本文实例讲述了jQuery中on()方法用法。...一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序。 如果选择是空或被忽略,当它到达选定的元素,事件总是触发。 data 可选。作为

    prettifyHTML:这个jQuery插件可修饰给定HTML

    {tab:'',//要用作字符的字符串,它可以是tab字符或多个空格maxCols:120,//如果元素只有文本excludeAttributes,则用于在多行中中断该元素的最大字符数:['^ ng-'],//匹配给定模式的属性将不包含在输出...

    jquery 注意事项与常用语法小结

    1、关于选择器中含有特殊符号 选择器中含有”.”,”#”,”(“,”]”等特殊字符,根据W3C的规定,属性值中是不能含有这些特殊字符的,例如: 代码如下: ”id#b”&gt;bb&lt;/div&gt; ”id[1]”&gt;&lt;/div&gt; 如果按照普通的方式来...

    jQuery中的on与bind绑定事件区别实例详解

    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代. data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。 ...

    jquery1.9.1中文汉化版

    jquery中文汉化版 (function( window, undefined ) { //不要做这个因为各自的应用程序包括ASP.NET查找 // the stack via arguments.caller.callee and Firefox dies if //你尝试查找通过“精确使用”呼叫链接(#...

    jQuery中on()方法用法实例详解

    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时...

    jQuery formValidator 表单校验插件 4.1.0

    •支持jQuery所有的选择器语法,只要控件有唯一ID和type属性 •支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。 •支持2种校验模式。第一种:文字提示...

Global site tag (gtag.js) - Google Analytics