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 16 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
phpfans留言版用到的install.php
2007/01/04 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
详解如何使用Python编写vim插件
2017/11/28 Python
python之django母板页面的使用
2018/07/03 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python with标签使用方法解析
2020/01/17 Python
求职推荐信
2013/10/28 职场文书
初三学生个人自我评定
2014/04/06 职场文书
行政求职信
2014/07/04 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
思想工作总结范文
2015/08/12 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python
Python中第三方库Faker的使用详解
2022/04/02 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis