jquery选择器需要注意的问题


Posted in Javascript onNovember 26, 2014

我们先来看段代码,很简单,如下

<div id="div1">

    <span>111</span>

    <span>222</span>

    <span>333</span>

    <button id="button1">clear</button>

</div>
$(function() {

     $("#button1").click(function() {

         $("#div1 span").html("aaa");

     });

 });

$("#div1 span")获得三个对象的数组

1.如果执行 $("#div1 span").html("aaa"),则数组内的所有对象都会改变.如下图

jquery选择器需要注意的问题

2.如果执行$("#div1 span").html(),只取值的话,则只会取数组第一个对象的值

jquery选择器需要注意的问题

所以如果选择器获得是一个数组,要对数组每个元素都进行操作时,最好用each().

另外还有些注意事项

选择器中含有特殊符号的注意事项选择器中含有“.”、“#”、“(”或“]”等特殊字符根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有“#”和“.”等特殊字符,如果按照普通的方式去处理出来的话就会出错。

解决此类错误的方法是使用转义符转义。
<div id="id#b">bb</div>
<div id="id[1]">cc</div>

不能这样写:
$('#id#b');  $('#id[1]');
应该使用转义符号:
$('#id\\#b');       //转义特殊字符“#”
$('#id\\[1\\]');    //转义特殊字符“[ ]”

Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
js获取json元素数量的方法
Jan 27 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
JS实现的自定义map方法示例
May 17 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
jquery操作对象数组元素方法详解
Nov 26 #Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 #Javascript
JavaScript定义类和对象的方法
Nov 26 #Javascript
node.js操作mongoDB数据库示例分享
Nov 26 #Javascript
教你如何使用node.js制作代理服务器
Nov 26 #Javascript
浅析node.js中close事件
Nov 26 #Javascript
node.js超时timeout详解
Nov 26 #Javascript
You might like
Adodb的十个实例(清晰版)
2006/12/31 PHP
php实现网站插件机制的方法
2009/11/10 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
php数组遍历类与用法示例
2019/05/24 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
人力资源专员自我评价怎么写
2013/09/19 职场文书
物业管理毕业生个人的求职信
2013/11/30 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
志愿者活动总结报告
2014/06/27 职场文书
员工辞职信范文
2015/03/02 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
入党函调证明材料
2015/06/19 职场文书
《失物招领》教学反思
2016/02/20 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python