这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
今天在写一段 js 时,发现 IE 与 FF 在动态加载 html 元素时,有一些差别,一起过来看看下面的代码吧
- <!doctype html>
- <html>
- <head>
- <title>
- ff 与 ie 动态加载元素的区别
- </title>
- <script type="text/javascript" src="jquery-1.4.4.min.js">
- </script>
- <style type="text/CSS">
- li{margin:0;padding:0;list-style:none}
- </style>
- <script type="text/javascript">
- function add() {
- var liTemplate = $("#template"); liTemplate.find("input[name='awbpre']").val("999"); liTemplate.find("input[name='awbno']").val("12312311"); $("#box").append("<li>" + liTemplate.html() + "</li>");
- }
- </script>
- </head>
- <body>
- <ul id="box">
- <li id="template" style="display:none">
- awbpre:
- <input type="text" value="#awbno#" name="awbpre" />
- awbno:
- <input type="text" value="#awbno#" name="awbno" />
- </li>
- </ul>
- <input type="button" value="add" onclick="return add()" />
- </body>
- </html>
代码本意为:点击 Add 按钮时,动态向页面添加二个输入框,同时给二个新加的输入框赋值。IE 6,7,8,9(兼容模式) 下运行正常,见下面的截图:
但是在 FF,Chrome,IE9(非兼容模式) 下,就不对了:
把 add() 方法改成
- <script type="text/javascript">
- function add(){
- var liTemplate = $("#template");
- $("#box").append("<li>" + liTemplate.html() + "</li>")
- var new_li = $("#box li:last");
- new_li.find("input[name='awbpre']").val("999");
- new_li.find("input[name='awbno']").val("12312311");
- }
- </script>
就对了,
二者的区别在于:第一种是先做赋值处理,再添加到 dom 树中;第二种写法是先加到 dom 树中,再找出对应的处理赋值。我对于前端技术实属菜鸟,
个人理解:第一种写法类似 "按值传递",var liTemplate = $("#template"); 后,不管再对 liTemplate 里的元素做何处理,因为 liTemplate 尚未加入到 dom 树中,最终调用 liTemplate.html() 时,返回的 html 代码,还是最初处理前的 html 代码(有点按值传递,使用的是一个副本,不管怎么处理,不影响原值的意味);而第二种写法,先加入到 dom 树后,再从 dom 中查找到该元素时,这时相当于得到的对象的指针引用,对" 指针 "指向的对象做任何修改,都会直接影响对象本身(有点按" 引用传递 " 的意味)
来源: http://www.phperz.com/article/17/0416/277256.html