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 相关文章推荐
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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
php 引用(&amp;)详解
2009/11/20 PHP
解析PHP提交后跳转
2013/06/23 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
PyQt5多线程防卡死和多窗口用法的实现
2020/09/15 Python
python3代码中实现加法重载的实例
2020/12/03 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
购房委托书范本
2014/09/18 职场文书
交通安全主题班会
2015/08/12 职场文书
2016寒假假期总结
2015/10/10 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书