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的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
php max_execution_time执行时间问题
2011/07/17 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
详解webpack介绍&amp;安装&amp;常用命令
2017/06/29 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python解析多帧dicom数据详解
2020/01/13 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
基于python实现计算两组数据P值
2020/07/10 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
教师简历自我评价
2014/02/03 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
合同协议书格式
2014/04/18 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
python办公自动化之excel的操作
2021/05/23 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL