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{ }

时间: 2024-08-28 17:56:49

jQuery选择器特殊字符与属性空格问题的相关文章

jQuery选择器,筛选器,属性选择器

jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:“Write less, do more.“ jQuery的优势 一款轻量级的JS框架.jQuery核心js文件才几十kb,不会影响页面加载速度. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻

Jquery选择器特殊字符问题

场景: $("#" + AAA + ""),AAA代表某表单ID 当AAA为普通字符串时,ok: 当AAA含有特殊符号时(eg:a.b),获取不到该对象: 原因:特殊符号会进行转义,上面那种方式就无法获取的该ID. // Does not work: $( "#some:id" ) // Works! $( "#some\\:id" ) // Does not work: $( "#some.id" ) /

jQuery选择器全解-基础选择器

Id选择: 根据元素Id选择,$(“layer1”) 选择ID为layer1的元素 <div id="layer1" style="width: 300px;height: 300px;border: 1px solid red"></div> alert($("#layer1").height()); element element选择器是一个用于搜索的元素.指向DOM节点的标签名 <a href="&q

深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容 简单属性选择器 [attribute] [attribute]选择器选择拥有该属性的元素,返回集合元素 //选择拥有title属性的所有元素 $('[title]') //选择拥有title属性的所有span元素 $('span[title]') //

jquery 选择器(name,属性,元素)大全

jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象属性过滤选择器.选择器是jQuery最基础的东西,下面向大家介绍jquery+%D1%A1%D4%F1%C6%F7/" target="_blank">jquery 选择器的用法 选择器是jQuery的核心组成部分,因为使用jQuery操作DOM时所做的每件事都和选择器密切

jQuery选择器遇上一些特殊字符

学习jQuery过程中,发现一些特殊字符,如“.”,“#”,"(","]"等.它在选择器应用时,按照普通处理就会出错.解决办法,就是使用转义字符来处理,这有点象C#的转义一样. 如"\\": 例如(Insus.NET只列举一个例子,其它特殊字符处理是一样的.):先在MVC视图中,写上一个Div标签: 为了做到演示,我们再放一个铵钮: 接下来,我们可以写JQuery脚本了: 实时操作演示看看: jQuery选择器遇上一些特殊字符

前端 之 jQuery: 简介, 选择器, 动画效果, 属性操作; (一)

jQuery 简介 jQuery 选择器 jQuery 动画效果 jQuery 属性操作 jQuery 简介 为什么要使用jQuery: 答: 因为优秀. 什么是 jQuery: jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可. 关于jQuery的相关资料: 官网:http://jquery.com/ 官网API文档:http://api.jquery.com/

jQuery选择器中的一些注意事项

选择器中含有特殊符号: 选择器中含有"."."#"."("或"]"等特殊字符.根据W3C的规定,属性值中是不能含有这些特殊字符的.但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符.如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. HTML代码如下: <div id="id#b">bb</div> <

【jQuery基础学习】01 jQuery选择器

关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选择器 以文档元素作为选择符 a{ text-decoration:none; } ID选择器 以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器 以文档元素的class作为选择符 div.note{ font-size