jQuery独学シリーズ(1)
2770 ワード
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ライブラリは、簡単なタグを1行でWebページに追加できます.
jQueryライブラリ-プロパティ
jQueryはJavaScript関数ライブラリです.
jQueryライブラリには、次の機能があります. HTML要素 を選択 HTML要素操作 CSS操作 HTMLイベント関数 JavaScript特効とアニメーション HTML DOM遍歴と修正 AJAX Utilities
ページにjQueryライブラリを追加
jQueryライブラリはJavaScriptファイルにあり、すべてのjQuery関数が含まれています.
次のタグでjQueryをWebページに追加できます.
「cript」タブは、ページの「head」セクションにあるはずです.
基本jQueryインスタンス
次の例では、HTMLドキュメント内のすべての
みずからやってみる
jQueryのダウンロード
2つのバージョンのjQueryをダウンロードできます.1つはコンパクトで、もう1つは圧縮されていません(デバッグまたは読み取り用).
両方のバージョンはjQuery.comからダウンロードできます.
ライブラリの代替
GoogleとMicrosoftはjQueryのサポートに優れています.
自分のコンピュータにjQueryライブラリを保存したくない場合は、GoogleまたはMicrosoftからCDN jQueryコアファイルをロードできます.
GoogleのCDNを使う
MicrosoftのCDNを使用
jQueryライブラリは、簡単なタグを1行でWebページに追加できます.
jQueryライブラリ-プロパティ
jQueryはJavaScript関数ライブラリです.
jQueryライブラリには、次の機能があります.
ページにjQueryライブラリを追加
jQueryライブラリはJavaScriptファイルにあり、すべてのjQuery関数が含まれています.
次のタグでjQueryをWebページに追加できます.
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
「cript」タブは、ページの「head」セクションにあるはずです.
基本jQueryインスタンス
次の例では、HTMLドキュメント内のすべての
要素を非表示にするjQueryのhide()関数を示します.
≪インスタンス｜Instance｜emdw≫
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
みずからやってみる
jQueryのダウンロード
2つのバージョンのjQueryをダウンロードできます.1つはコンパクトで、もう1つは圧縮されていません(デバッグまたは読み取り用).
両方のバージョンはjQuery.comからダウンロードできます.
ライブラリの代替
GoogleとMicrosoftはjQueryのサポートに優れています.
自分のコンピュータにjQueryライブラリを保存したくない場合は、GoogleまたはMicrosoftからCDN jQueryコアファイルをロードできます.
GoogleのCDNを使う
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
MicrosoftのCDNを使用
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>