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 相关文章推荐
jquery遍历select元素(实例讲解)
Dec 31 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
JS实现判断移动端PC端功能
Feb 21 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
php分页示例代码
2007/03/19 PHP
Phpbean路由转发的php代码
2008/01/10 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
金融行业职业生涯规划范文
2014/01/17 职场文书
农业开发项目建议书
2014/05/16 职场文书
小区推广策划方案
2014/06/06 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis