一个页面有相同ID元素的情况分析
经常会遇到一个页面中有相同定义相同id的情况,从道理上来说,id应该是这个页面中某个元素的唯一标识,所以不应该出现有相同id的情况,否则会产生意想不到的结果。而且各个浏览器的表现也是不一样的。我只做了ie6,chrome和firefox的测试。
代码如下:
<div id="a"><input type="text" id="aa" value="aaaaaaaa"/></div>
<div id="b"><input type="text" id="aa" value="bbbbbbbbb"/></div>
<input type="button" onclick="show()" value="click here" />
<script type="text/javascript" src="http://qustliuyongjie.blog.163.com/blog/jquery.min.js"></script>
<script type="text/javascript">
function show(){
alert($('#aa').val());(情况一)
alert($('#a #aa').val());(情况二)
alert($('#b #aa').val());(情况二)
}
</script>
简单的总结一下:
1、在测试过的所有浏览器下,采用情况一下的方式,也就是直接用id取值的话,浏览器只会返回id相同的第一个元素的值。后面的值不会覆盖前面的值。
2、采用情况二的方式,也就是不同范围内的相同id取值,在ie6下返回的结果是第一个能找到,但是第二个返回的是undefined,也就是说找不到值。但是在chrome和firefox下是可以分别取到两个值的。这就是不同浏览器的区别。
综上所述,在一个页面里尽量的不要出现有相同id的元素。另外,当有相同id的元素时,如果要使用JS/JQuery的函数(innerHTML()、text()等)对id所在元素进行操作,js函数无法使用。
一个页面有相同ID元素的情况分析的更多相关文章
- 获得同级iframe页面的指定ID元素的几种实现方法
1.JS实现: var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById ...
- [jQuery编程挑战]003 克隆一个页面元素及其相关事件
挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...
- 关于ID命名 一个页面唯一
1.一般ID在一个区域内必须是唯一的.这样是一个规范而且在IE中使用JS通过ID获取这个对象永远只能获取第一个. 2.js无法找到重复的ID,用js获取时,只能得到第一个ID元素,但,如果不同的区域范 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目
ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...
- 一个页面多Table多分页的问题
一个页面有多个table,多个pagination,一个pagerForm.这种情况下怎么解决多个pagination不同pagenum的问题呢? 如果是这样的滴话,使用局部刷新就可以了,两个tabl ...
- JavaScript网站设计实践(七)编写最后一个页面 改进表单
一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...
- android 一个页面内 多个listview的实现
如果很平常的两个listview组件竖直放在linearLayout布局中,结果是: 两个listview 很独立,中间似乎有个分割线,完全吧他们分离了,各自独立滚动,如果上面的listview把整个 ...
- Android 一个页面上下两个ListView的页面显示
Android 一个页面上下两个ListView,当上面的ListView过长时,下面的List基本没有了滑动空间,查阅网上资料,解决办法基本是采用ScrollView做页面滑动,notifyData ...
随机推荐
- hdu 6053(To my boyfriend)
-----------题目链接------------- 题目描述: 给定一个矩阵,定义\(f(A)\) 为矩阵中不同元素的个数.现在要求\(f(A)\)的期望. 解法: 首先来暴力的,复杂度大约:\ ...
- C++模板之可变模板参数
可变模板参数---- C++11新特性 可变模板参数(variadic templates)是C++11新增的最强大的特性之一,它对参数进行了高度泛化,它能表示0到任意个数.任意类型的参数 由于可变模 ...
- IO多路复用模型之select()函数详解
IO复用 我们首先来看看服务器编程的模型,客户端发来的请求服务端会产生一个进程来对其进行服务,每当来一个客户请求就产生一个进程来服务,然而进程不可能无限制的产生,因此为了解决大量客户端访问的问题,引入 ...
- js遍历checkbox获取数据
function GetCurrenetPoint() { debugger var currentTypes = ""; var display = $("#input ...
- hdu-2141
Can you find it? Time Limit: 10000/3000 MS (Java/Others) Memory Limit: 32768/10000 K (Java/Others ...
- sql语句之连表操作
内连接 select * from employee inner join department on employee.dep_id = department.id 左连接 在内连接的基础上保留左表 ...
- Flutter实战视频-移动电商-59.购物车_计算商品价格和数量
59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一 ...
- sed的基础用法简介
sed 最近学习了一些sed的相关知识,初步接触sed以后给我的感受主要有两点.首先是sed强大的功能,学了以后发现之前写的脚本利用sed以后会简化很多啊,具体的有些利用sed编辑shell脚本的思路 ...
- (2)ASP.NET Core 依赖关系注入(服务)
1.前言 面向对象设计(OOD)里有一个重要的思想就是依赖倒置原则(DIP),并由该原则牵引出依赖注入(DI).控制反转(IOC)及其容器等老生常谈的概念,初学者很容易被这些概念搞晕(包括我在内),在 ...
- HDU5119【dp背包求方案数】
题意: 有n个数,问有多少方案满足取几个数的异或值>=m; 思路: 背包思想,每次就是取或不取,然后输出>=m的方案就好了. #include <bits/stdc++.h> ...