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 Form轻松实现文件上传
May 24 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
flask应用部署到服务器的方法
2019/07/12 Python
python使用建议与技巧分享(一)
2020/08/17 Python
python 解决函数返回return的问题
2020/12/05 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
英语专业学生的自我评价
2013/12/30 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
员工工作及收入证明
2014/10/28 职场文书
骨干教师个人总结
2015/02/11 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python