经常会遇到一个页面中有相同定义相同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元素的情况分析的更多相关文章

  1. 获得同级iframe页面的指定ID元素的几种实现方法

    1.JS实现: var object= window.parent.frames("要获得的iframe的name").contentDocument.getElementById ...

  2. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  3. 关于ID命名 一个页面唯一

    1.一般ID在一个区域内必须是唯一的.这样是一个规范而且在IE中使用JS通过ID获取这个对象永远只能获取第一个. 2.js无法找到重复的ID,用js获取时,只能得到第一个ID元素,但,如果不同的区域范 ...

  4. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  5. 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的返回值自动进行各种序列化处理(序列化为 ...

  6. 一个页面多Table多分页的问题

    一个页面有多个table,多个pagination,一个pagerForm.这种情况下怎么解决多个pagination不同pagenum的问题呢? 如果是这样的滴话,使用局部刷新就可以了,两个tabl ...

  7. JavaScript网站设计实践(七)编写最后一个页面 改进表单

    一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...

  8. android 一个页面内 多个listview的实现

    如果很平常的两个listview组件竖直放在linearLayout布局中,结果是: 两个listview 很独立,中间似乎有个分割线,完全吧他们分离了,各自独立滚动,如果上面的listview把整个 ...

  9. Android 一个页面上下两个ListView的页面显示

    Android 一个页面上下两个ListView,当上面的ListView过长时,下面的List基本没有了滑动空间,查阅网上资料,解决办法基本是采用ScrollView做页面滑动,notifyData ...

随机推荐

  1. JS错题整改

    获取元素范围大小顺序依次为: $(#one).siblings("div")>$("#one~div")>$("#one +div&quo ...

  2. Vue父子组件间的通信

    父组件通过 props 向下传递数据给子组件,子组件通过 events 向上给父组件发送消息. 父组件: <div> <div style="background:#344 ...

  3. OpenCV——Perlin Noise

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  4. 使用diskpart命令修复U盘分区

    前段时间在论坛上讨论封装PE到u盘里热闹的,就想自己也封装一个,随便下载了一个WIN7的PE封装后发现还不错,本来就是做测试用的,测试完了就想把u盘在恢复成以前的样子,可是发现恢复并不是这么容易 如下 ...

  5. [转载]Dalvik指令集

    这篇文章是转载的,为了便于查找一些指令,贴在这里. 转自:http://blog.csdn.net/canfengxiliu/article/details/20144119 ------------ ...

  6. ping测试网络

    https://jingyan.baidu.com/article/ac6a9a5e109d5f2b653eacbc.html 百度百科:https://baike.baidu.com/item/pi ...

  7. Manasa and Combinatorics

    题意: 给定n,求问由2n个字母B,n个字母A构成的字符串中 任意前缀B的个数大于A的个数且任意后缀B的个数大于A的个数的 字符串个数. 解法: 注意到答案不易于直接计算,所以我们考虑应用容斥原理. ...

  8. SpringMVC配置字符过滤器的两种方式

    有时候使用SpringMVC框架提交表单时会出现中文乱码,以下是我亲自试验过的配置字符过滤器的两种: 1.在web.xml中配置 <filter> <filter-name>c ...

  9. LuaToC#

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. Git小白到老鸟的进阶之路

    点"计算机视觉life"关注,置顶更快接收消息! 小白:师兄,师兄,上次你教我的操作,我傻乎乎的执行了一遍,可是那个Git究竟是什么那? 师兄:小白莫慌,Git就是一种版本控制,小 ...