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 fullscreen全屏实现代码
Apr 09 Javascript
js tab效果的实现代码
Dec 26 Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
javascript使用location.search的示例
Nov 05 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
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
简单的页面缓冲技术
2006/10/09 PHP
php 判断数组是几维数组
2013/03/20 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
jQuery Dialog 弹出层对话框插件
2010/08/09 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
对python周期性定时器的示例详解
2019/02/19 Python
python快排算法详解
2019/03/04 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
学Python 3的理由和必要性
2019/11/19 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
店长岗位职责
2015/02/11 职场文书
工作时间调整通知
2015/04/24 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
React配置子路由的实现
2021/06/03 Javascript
Python数据处理的三个实用技巧分享
2022/04/01 Python