《Javascript入门学习全集》 Javascript学习第二季（实战4）

Javascript学习第二季（实战4）

 

上章的例子虽然实现了功能,也做了相应的判断，也符合标准了。但还有一个问题就是：

  

 

Choose an image.

 

 在html中只是为了图片切换 而做的，而没其他的用途。所以我们不必把他直接写在html中，而是可以用js--DOM方法动态去创建html，从来达到再次简化html。

 

思路:

<!--[if !supportLists]-->1，   <!--[endif]-->把html中的

Choose an image.

 

删除。然后用dom方法 在js中创建。

 

function preparePlaceholder() {

 if (!document.createElement) return false;

 if (!document.createTextNode) return false;

 var placeholder = document.createElement("img");//创建元素节点

 placeholder.setAttribute("id","placeholder");//创建属性，设置属性

 placeholder.setAttribute("src","images/placeholder.gif");

 placeholder.setAttribute("alt","my image gallery");

 var description = document.createElement("p");

 description.setAttribute("id","description");

 var desctext = document.createTextNode("Choose an image");//创建文本节点

 description.appendChild(desctext);

 var gallery = document.getElementById("imagegallery");

 document.getElementsByTagName("body")[0].appendChild(placeholder);

// 这样添加 。默认是添加到文档的最后。 

 document.getElementsByTagName("body")[0].appendChild(description);

//如果想添加在其他地方， 可以 使用 insertBefore()

}

 

好了，我们来看看完整的代码..

Demo1:

3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

 

 

 

        

        

 

 

 

Snapshots

 

 

 

   

•  

       

         

        

     

     

•  

       

         

       

     

     

•  

       

         

       

     

     

•  

       

         

       

     

   

 

 

 

 

好了，一个完美的javascript图片馆出炉了。

(注：实战4 -  demo2 有点小变化，可以参考参考。)

兴奋吧。。。

做程序就是要的这种感觉。

 

图片馆做完了，我们也许需要总结下。加深印象。

不过这是明天的事情，今天我们去外面走走，透透气 ，运动运动。

毕竟身体是革命的本钱。。。^_^。

 

打篮球去了，今天写到这里，明天我们总结下，这几天写 这个图片馆 中一些要点。

 

如果还有不懂，可以google 搜索资料.

或者联系我 ,可以去我的blog 给我留言 :

http://www.cssrain.cn/LoadMod.asp?plugins=GuestBookForPJBlog