JS、DOM和JQuery之間的關係

原文出處:http://blog.csdn.net/xudepeng0813/article/details/7202228

DOM(document object model) 其實是瀏覽器內元素對象的一個總稱

               我們用JavaScript對網頁進行的所有操作都是通過DOM進行的。DOM屬於瀏覽器,而不是JavaScript語言規範裏的規定的核心內容,所以如果你下載一個JavaScript語言的參考幫助文檔來查的話,就連婦孺皆知的document.write方法也找不到。 

               文檔對象模型(Document Object Model,DOM)是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法,可以改變文檔的內容和呈現方式。我們最爲關心的是,DOM把網頁和腳本以及其他的編程語言聯繫了起來。腳本開發人員可以通過文檔對象的屬性、方法和事件來掌控、操縱和創建動態的網頁元素。每一個網頁元素(一個HTML標籤)都對應着一個對象(object,所謂“對象”,用白話說就是“東西”。object這個詞在臺灣通常翻譯成“物件”)。網頁上的標籤是一層層嵌套的,最外面的一層是<HTML>,文檔對象模型也這樣一層層嵌套着,但是通常被理解成一棵樹的形狀。樹根是window或document對象,相當於最外層的標籤的外圍,也就是整個文檔。

 

舉個小例子:

[javascript] view plaincopy
  1. <script type="text/javascript">  
  2.     var x = document.getElementById("test");  
  3.     var xc = x.childNodes;  
  4.     var xcl = xc.length;  
  5.     for(var i=0;i<xcl;i++){  
  6.     document.write("nodeName = " + xc[i].nodeName + "; nodeType = " + xc[i].nodeType + "<br />");}  
  7. </script>  



javascript是可對DOM進行操作的,比如:一個<table>是一個DOM對象,javascript可以對其添加,刪除,等操作.

               很多人看到 Java 和 JavaScript 都有“Java”四個字,就以爲它們是同一樣東西,連我自己當初也是這樣。其實它們是完完全全不同的兩種東西。Java,全稱應該是 Java Applet,是嵌在網頁中,而又有自己獨立的運行窗口的小程序。Java Applet 是預先編譯好的,一個 Applet 文件(.class)用 Notepad 打開閱讀,根本不能理解。Java Applet 的功能很強大,可以訪問 http、ftp等協議,甚至可以在電腦上種病毒(已有先例了)。相比之下,JavaScript 的能力就比較小了。JavaScript 是一種“腳本”(“Script”),它直接把代碼寫到 HTML 文檔中,瀏覽器讀取它們的時候才進行編譯、執行,所以能查看 HTML 源文件就能查看JavaScript 源代碼。JavaScript 沒有獨立的運行窗口,瀏覽器當前窗口就是它的運行窗口。它們的相同點,我想只有同是以 Java 作編程語言一點了。JavaScript是一種基於對象和事件驅動並具有相對安全性的客戶端腳本語言。同時也是一種廣泛用於客戶端Web開發的腳本語言,常用來給HTML網頁添加動態功能,比如響應用戶的各種操作。

 

舉個小例子:

[javascript] view plaincopy
  1.   var myVariable="outside";  
  2. function myFunction(){  
  3. var myVariable="inside";  
  4. alert(myVariable);  
  5. }  
  6. myFunction();  
  7. alert(myVariable);  


 

jquery是所謂的javascript的框架,其實就是javacript函數的集合,打包

               Jquery是繼prototype之後又一個優秀的Javascrīpt框架。它是輕量級的js庫(壓縮後只有21k) ,它兼容CSS3,還兼容各種瀏覽器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用戶能更方便地處理HTML documents、events、實現動畫效果,並且方便地爲網站提供AJAX交互。jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁保持代碼和html內容分離,也就是說,不用再在html裏面插入一堆js來調用命令了,只需定義id即可。

               jQuery是目前使用最廣泛的javascript函數庫。據統計,全世界排名前100萬的網站,有46%使用jQuery,遠遠超過其他庫。微軟公司甚至把jQuery作爲他們的官方庫。對於網頁開發者來說,學會jQuery是必要的。因爲它讓你瞭解業界最通用的技術,爲將來學習更高級的庫打下基礎,並且確實可以很輕鬆地做出許多複雜的效果。

 

舉個小例子:

[javascript] view plaincopy
  1. <script type="text/javascript" src="jquery.js"></script>  
  2. <script type="text/javascript">  
  3.   $(document).ready(function(){  
  4.     $("p").click(function(){  
  5.        $(this).hide();  
  6.     });  
  7.   });  
  8. </script>  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章