Javascript学习第二部（实战1）
转眼间，第一季已经学完了。如果你认真学习第一季了，那么第二季的实战应该对你来说，不会很难。。。
从今天起，我们开始DOM实战演练。
Demo1:
<script type="text/javascript" >
window.onload = function() {
var para = document.createElement("p");
var info = "nodeName: "+ para.nodeName;// 节点的名称
info+= " nodeType: "+para.nodeType; // 判断节点的类型，如果为1 ，则是元素节点。
alert(info);
}
</script>
<body></body>
Demo2:
<script type="text/javascript">
window.onload = function() {
var para = document.createElement("p");//创建一个元素节点p
var txt = document.createTextNode("Hello world");//创建一个文本节点
para.appendChild(txt);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}
</script>
<body>
<div id="testdiv">
</div>
</body>
Demo3:
<script type="text/javascript" >
window.onload = function() {
var node_p = document.createElement("p");
var txt_p = document.createTextNode("this is ");
node_p.appendChild(txt_p);
var node_strong = document.createElement("strong");
var txt_strong = document.createTextNode("my");
node_strong.appendChild(txt_strong);
node_p.appendChild(node_strong);
var txt_x = document.createTextNode(" name. ");
node_p.appendChild(txt_x);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(node_p);
}
</script>
<body>
<div id="testdiv">
</div>
</body>
Demo4:
<SCRIPT LANGUAGE="JavaScript">
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);
document.body.appendChild(a); //默认添加在文档的最后。
//如果我们想指定位置，那么得使用insertBefore()
}
</SCRIPT>
<body>
aaaaaaaaaaaaa
<div>ccccccc</div>
<div>bbbbbbbbb</div>
</body>
Demo5:
<SCRIPT LANGUAGE="JavaScript">
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);
var mubiao = document.getElementById("b");
mubiao.parentNode.insertBefore(a,mubiao);
//插入到div b 前面。
/*
parentElement.insertBefore( newElement , targetElement );
从上面语法可以看出，父元素，新元素，目标元素是 insertBefore使用的3要素。
其实我们可以不管 父元素，因为父元素我们可以用目标元素.parentNode 得到。
那么insertBefore就很好用了。只要给2个参数：新元素和目标元素。
那么有没有 insertAfter()方法呢？答案看下个例子。
*/
}
</SCRIPT>
<body>
aaaaaaaaaaaaa
<div>ccccccc</div>
<div id="b">bbbbbbbbb</div>
</body>
Demo6:
<SCRIPT LANGUAGE="JavaScript">
// DOM没有提供insertAfter()方法，所以我们只能自己写一个。
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode; //首先获取目标节点的父节点
if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素，则直接添加。因为默认是最后
parent.appendChild(newElement); // appendChild()默认是添加到最后
} else {
parent.insertBefore(newElement , targetElement.nextSibling);//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。
}
}
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("cssrain");
a.appendChild(b);
var mubiao = document.getElementById("b");
insertAfter( a, mubiao );
}
</SCRIPT>
<body>
aaaaaaaaaaaaa
<div>ccccccc</div>
<div id="b">bbbbbbbbb</div>
<div>dddddd</div>
</body>
如果能把上面的例子都看懂，搞懂。
相信你的DOM编程技术已经有很大的进步了。
如果你是一名jquery爱好者，相信你也想用jquery写出同样的功能。
下面是jquery的代码，比较简单：
Jquery demo1 : 插入到 div 的 id=b 的前面。
(实现了跟DEMO 5同样的功能。)
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("<span>cssrain</span>").insertBefore( 'div#b' );
})
</SCRIPT>
<body>
aaaaaaaaaaaaa
<div>ccccccc</div>
<div id="b">bbbbbbbbb</div>
</body>
Jquery demo2：
Jquery内部实现了，insertafter():
例子：(实现了跟DEMO 6同样的功能。)
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("<span>cssrain</span>").insertAfter( 'div#b' );
})
</SCRIPT>
<body>
aaaaaaaaaaaaa
<div>ccccccc</div>
<div id="b">bbbbbbbbb</div>
<div>kkkk</div>
</body>
jQuery里封装了很多dom操作的方法，比如上面说的 insertBefore(),insertAfter(),
还有prepend(),prependTo(),append(),appendTo(),add(),wrap(),before(),clone()等等。大大简化了DOM的操作。但我们不能太依靠它，毕竟js还是基石。。。
明天我们讲做一个 javascript 图片馆。也就是在很久以前文章里的一个例子。
呵呵，上次叫你们拿笔记住不懂的地方，现在那张纸还在吗？
明天再会。
该设计来源于互联网共享，请大家尊重作者版权！
点击下载Javascript学习第二部-实战1-例子