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


Posted in jQuery onAugust 14, 2017

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

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插件imgAreaSelect基础讲解
May 26 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jQuery实现手势解锁密码特效
Aug 14 #jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 #jQuery
jQuery:unbind方法的使用详解
Aug 14 #jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
jquery对table做排序操作的实例演示
Aug 10 #jQuery
You might like
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
PHP可变函数的使用详解
2013/06/14 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
javascript 面向对象思想 附源码
2009/07/07 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
总结JavaScript三种数据存储方式之间的区别
2016/05/03 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
正规的求职信范文分享
2013/12/11 职场文书
一体化教学实施方案
2014/05/10 职场文书
学校周年庆活动方案
2014/08/22 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
行政司机岗位职责
2015/04/10 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL