JS、DOMとJQueryの関係例分析

3077 ワード

DOM(document object model)は、ブラウザ内の要素オブジェクトの総称であり、JavaScriptでウェブページに対して行うすべての操作はDOMによって行われます。DOMはブラウザーに属しています。JavaScript言語規範に規定されている核心内容ではなく、JavaScript言語の参考文書をダウンロードして調べたら、誰でも知っているdocument.write方法さえ見つけられません。ドキュメントオブジェクトモデル(Dcument Object Model,DOM)は、HTMLとXMLドキュメントのためのプログラミングインターフェースです。それは文書に構造的な表現方法を提供し、文書の内容と表現方法を変えることができる。私たちが最も関心を持っているのは、DOMはウェブページとシナリオ、その他のプログラミング言語をリンクしていることです。スクリプト開発者は、ドキュメントオブジェクトの属性、方法、イベントによって、ダイナミックなウェブページ要素をコントロール、操作、作成することができます。各ページの要素(HTMLタグ)は一つのオブジェクトに対応しています。オブジェクトとは、話し言葉でいうと「もの」です。objectという言葉は台湾では一般に「物件」に訳されています)。ページ上のラベルは幾重にもネストされていて、一番外側の階は「HTML」で、ドキュメントオブジェクトモデルもこのように幾重にもネストされていますが、普通は一本の木の形に理解されます。ツリーの根はwindowまたはdocumentオブジェクトで、最外層のラベルの周辺、つまりドキュメント全体に相当します。例えば、
 
<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はDOMを操作することができます。例えば、一つの「table」はDOMの対象です。javascriptはそれを追加したり、削除したりすることができます。多くの人がJavaとJavaScriptを見て、同じものだと思っています。私も初めはそうでした。実はそれらはまったく違っています。Javaは、フルネームJava Appleというべきです。ホームページに埋め込まれていて、自分だけのウィンドウを実行するための小さなプログラムです。Java Appleは事前にコンパイルされたもので、一つのAppleファイル(.class)はNotepadで開いて読むので、全く理解できません。Java Appleの機能は非常に強力で、httpやftpなどのプロトコルにアクセスできます。コンピュータにウイルスを作ることもできます。それに比べてJavaScriptの能力は比較的小さいです。JavaScriptは「スクリプト」(「Script」)で、直接コードをHTMLドキュメントに書いています。ブラウザがそれらを読み込む時にコンパイル、実行するので、HTMLソースファイルを見ることができます。JavaScriptソースコードを確認できます。JavaScriptは独立した実行ウィンドウがありません。ブラウザは現在のウィンドウがその実行ウィンドウです。それらの同じ点はJavaをプログラミング言語とする点だけだと思います。JavaScriptは、オブジェクトおよびイベントに基づいて駆動され、比較的安全性のあるクライアントスクリプト言語である。同時に、クライアントのWeb開発に広く使われているスクリプト言語でもあります。よくHTMLページに動的機能を追加します。例えば、ユーザの各種操作に応答します。例えば、
 
var myVariable="outside";
function myFunction(){
var myVariable="inside";
alert(myVariable);
}
myFunction();
alert(myVariable);
jqueryはいわゆるjavascriptのフレームワークです。実はjavacript関数のセットです。Jqueryはprototypeに続いてもう一つ優れたJavascrです。īptフレーム。軽量級のjsライブラリ(圧縮後は21 kのみ)で、CSS 3に対応しており、各種ブラウザ(IE 6.0+、FF 1.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を学ぶことは必要です。業界で通用する技術を理解させて、将来のためにもっと高級な倉庫を勉強して基礎を作って、しかも確実に多くの複雑な効果を簡単に作り出します。例を挙げます。
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>