jQuery学習の入門
2087 ワード
1.jQueryの概要
jQueryはPrototypeに続くもう一つの優れたJavaScriptライブラリです.
jQueryは、簡潔な構文とプラットフォーム間の互換性により、JavaScript開発者がHTMLドキュメントを遍歴したり、DOMを操作したり、イベントを処理したり、アニメーションを実行したり、Ajaxを開発したりする操作を大幅に簡素化しています.
2.jQuery環境の構成
タグにjQueryライブラリを導入します.すなわち、タグに次のようなコードを追加します.
3.簡単なjQueryを書く
例:
注意:jQueryライブラリでは、$はjQueryの略記形式です.たとえば、$(「#foo」)とjQuery(「#foo」)は等価です.
4.jQueryオブジェクトとDOMオブジェクト
(1).jQueryオブジェクト
jQueryオブジェクトは、DOMオブジェクトをjQueryでラッピングしたオブジェクトです.
(2).DOMオブジェクト(Document Object Model,ドキュメントオブジェクトモデル)
(3).jQueryオブジェクトからDOMオブジェクトへ
メソッド1:jQueryオブジェクトは配列オブジェクトであり[index]メソッドで対応するDOMオブジェクトを得ることができる
方法2:get(index)法により対応するDOMオブジェクトを得る
(4).DOMオブジェクトからjQueryオブジェクトへ
jQueryはPrototypeに続くもう一つの優れたJavaScriptライブラリです.
jQueryは、簡潔な構文とプラットフォーム間の互換性により、JavaScript開発者がHTMLドキュメントを遍歴したり、DOMを操作したり、イベントを処理したり、アニメーションを実行したり、Ajaxを開発したりする操作を大幅に簡素化しています.
2.jQuery環境の構成
タグにjQueryライブラリを導入します.すなわち、タグに次のようなコードを追加します.
<script type="text/javascript" src="../resource/jquery-1.10.1.js"></script>3.簡単なjQueryを書く
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../resource/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello world.");
});
</script>
<title>First jQuery Test</title>
</head>
<body>
First jQuery Test.
</body>
</html>注意:jQueryライブラリでは、$はjQueryの略記形式です.たとえば、$(「#foo」)とjQuery(「#foo」)は等価です.
4.jQueryオブジェクトとDOMオブジェクト
(1).jQueryオブジェクト
jQueryオブジェクトは、DOMオブジェクトをjQueryでラッピングしたオブジェクトです.
(2).DOMオブジェクト(Document Object Model,ドキュメントオブジェクトモデル)
var domObj = document.getElementById("id");// DOM (3).jQueryオブジェクトからDOMオブジェクトへ
メソッド1:jQueryオブジェクトは配列オブジェクトであり[index]メソッドで対応するDOMオブジェクトを得ることができる
var $cr = $("#cr"); //jQuery
var cr = $cr[0]; //DOM 方法2:get(index)法により対応するDOMオブジェクトを得る
var $cr = $("#cr"); //jQuery
var cr = $cr.get(0); //DOM (4).DOMオブジェクトからjQueryオブジェクトへ
var cr = document.getElementById("cr"); //DOM
var $cr = $(cr); //jQuery