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 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 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中Object对象的笔记分享
2011/06/28 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
python类中super()和__init__()的区别
2016/10/18 Python
Python内置函数OCT详解
2016/11/09 Python
python自动化生成IOS的图标
2018/11/13 Python
python实现ip代理池功能示例
2019/07/05 Python
python 标准差计算的实现(std)
2019/07/29 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
Python 列表的清空方式
2020/01/13 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
国贸专业的职业规划范文
2014/01/23 职场文书
联谊活动策划书
2014/01/26 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
党员公开承诺书2015
2015/01/21 职场文书
golang import自定义包方式
2021/04/29 Golang
python元组打包和解包过程详解
2021/08/02 Python