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读取中文COOKIE的解决办法
Feb 15 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
JavaScript中的16进制字符(改进)
Nov 21 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python3生成手写体数字方法
2018/01/30 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
python操作文件的参数整理
2019/06/11 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python实现最速下降法
2020/03/24 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
Shell如何接收变量输入
2016/08/06 面试题
新学期国旗下演讲稿
2014/05/08 职场文书
英语教师自荐信
2014/05/26 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
python可视化之颜色映射详解
2021/09/15 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫