快捷導(dǎo)航

JS、DOM和JQuery之間的關(guān)系示例分析

更新時(shí)間：2024年07月01日 16:50:08 投稿：whsnow

這篇文章主要介紹了JS、DOM和JQuery之間的關(guān)系，對(duì)此概念不是特別清楚的朋友可以參考下

DOM(document object model) 其實(shí)是瀏覽器內(nèi)元素對(duì)象的一個(gè)總稱

我們用JavaScript對(duì)網(wǎng)頁進(jìn)行的所有操作都是通過DOM進(jìn)行的。DOM屬于瀏覽器，而不是JavaScript語言規(guī)范里的規(guī)定的核心內(nèi)容，所以如果你下載一個(gè)JavaScript語言的參考幫助文檔來查的話，就連婦孺皆知的document.write方法也找不到。

文檔對(duì)象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的編程接口。它給文檔提供了一種結(jié)構(gòu)化的表示方法，可以改變文檔的內(nèi)容和呈現(xiàn)方式。我們最為關(guān)心的是，DOM把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系了起來。腳本開發(fā)人員可以通過文檔對(duì)象的屬性、方法和事件來掌控、操縱和創(chuàng)建動(dòng)態(tài)的網(wǎng)頁元素。每一個(gè)網(wǎng)頁元素（一個(gè)HTML標(biāo)簽）都對(duì)應(yīng)著一個(gè)對(duì)象（object，所謂“對(duì)象”，用白話說就是“東西”）。網(wǎng)頁上的標(biāo)簽是一層層嵌套的，最外面的一層是<HTML>，文檔對(duì)象模型也這樣一層層嵌套著，但是通常被理解成一棵樹的形狀。樹根是window或document對(duì)象，相當(dāng)于最外層的標(biāo)簽的外圍，也就是整個(gè)文檔。

舉個(gè)小例子：

復(fù)制代碼代碼如下:

<script type="text/javascript">
var x = document.getElementById("test");
var xc = x.childNodes;
var xcl = xc.length;
for(var i=0;i<xcl;i++){
document.write("nodeName = " + xc[i].nodeName + "; nodeType = " + xc[i].nodeType + "<br />");}
</script>

javascript是可對(duì)DOM進(jìn)行操作的，比如:一個(gè)<table>是一個(gè)DOM對(duì)象,javascript可以對(duì)其添加,刪除,等操作.

很多人看到 Java 和 JavaScript 都有“Java”四個(gè)字，就以為它們是同一樣?xùn)|西，連我自己當(dāng)初也是這樣。其實(shí)它們是完完全全不同的兩種東西。Java，全稱應(yīng)該是 Java Applet，是嵌在網(wǎng)頁中，而又有自己獨(dú)立的運(yùn)行窗口的小程序。Java Applet 是預(yù)先編譯好的，一個(gè) Applet 文件（.class）用 Notepad 打開閱讀，根本不能理解。Java Applet 的功能很強(qiáng)大，可以訪問 http、ftp等協(xié)議，甚至可以在電腦上種病毒（已有先例了）。相比之下，JavaScript 的能力就比較小了。JavaScript 是一種“腳本”（“Script”），它直接把代碼寫到 HTML 文檔中，瀏覽器讀取它們的時(shí)候才進(jìn)行編譯、執(zhí)行，所以能查看 HTML 源文件就能查看JavaScript 源代碼。JavaScript 沒有獨(dú)立的運(yùn)行窗口，瀏覽器當(dāng)前窗口就是它的運(yùn)行窗口。它們的相同點(diǎn)，我想只有同是以 Java 作編程語言一點(diǎn)了。JavaScript是一種基于對(duì)象和事件驅(qū)動(dòng)并具有相對(duì)安全性的客戶端腳本語言。同時(shí)也是一種廣泛用于客戶端Web開發(fā)的腳本語言，常用來給HTML網(wǎng)頁添加動(dòng)態(tài)功能，比如響應(yīng)用戶的各種操作。

舉個(gè)小例子：

復(fù)制代碼代碼如下:

var myVariable="outside";
function myFunction(){
var myVariable="inside";
alert(myVariable);
}
myFunction();
alert(myVariable);

jquery是所謂的javascript的框架,其實(shí)就是javacript函數(shù)的集合,打包。

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

jQuery是目前使用最廣泛的javascript函數(shù)庫(kù)。據(jù)統(tǒng)計(jì)，全世界排名前100萬的網(wǎng)站，有46%使用jQuery，遠(yuǎn)遠(yuǎn)超過其他庫(kù)。微軟公司甚至把jQuery作為他們的官方庫(kù)。對(duì)于網(wǎng)頁開發(fā)者來說，學(xué)會(huì)jQuery是必要的。因?yàn)樗屇懔私鈽I(yè)界最通用的技術(shù)，為將來學(xué)習(xí)更高級(jí)的庫(kù)打下基礎(chǔ)，并且確實(shí)可以很輕松地做出許多復(fù)雜的效果。

舉個(gè)小例子：

復(fù)制代碼代碼如下:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>

您可能感興趣的文章: