jquery使い方

TOPページに戻る > jquery入門

スポンサード リンク

jqueryの使い方

googleのサーバーからjqueryを使えるサービスを利用する方法とjqueryの本家からファイルをダウンロードして使う方法があります

googleのサーバーからjqueryを使う方法

googleにはGoogle AJAX Libraries APIとゆう、ライブラリを自由に利用できるサービスがあります
このサービスの利点は以下のとおりです

googleのサーバーからjqueryを使う方法

head要素内にこれを書き込むだけです
1.8.1とゆうのはjqueryのバージョンです。これを1.7.1にすると1.7.1のバージョンを使うことができます。最後のマイナー番号を省略するとそのバージョンで最新のjqueryを利用できます。1.8とした場合、最新の1.8.1が使えるようになっています。マイナーバージョンアップはバグの修正やパフォーマンスの向上するときがあります。しかし、バージョンがかわるとダウンロードする時間もかかるのでバージョンはしっかり指定したほうがいいかもしれません 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"
 type="text/javascript"></script>

ダウンロードしてjqueryを使う方法

jquery本家からjqueryをダウンロードしてサーバーにアップロードしてから使う方法です
転送量は増えますが、googleのサービスが終了しても問題なく使える利点もあります

jquery本家

PRODUCTION (32KB, Minified and Gzipped)が圧縮版のjqueryです
DEVELOPMENT (247KB, Uncompressed Code)が非圧縮版のjqueryです
使う時は圧縮版を使います。ファイルのサイズが軽量で表示が速くなります

使い方

head要素内にこれを書き込むだけです
1.8.3がjqueryのバージョンです。 
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>

実際に使うとき

script要素内にjqueryの処理を書きます 
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	処理する命令を書く
});
</script>
$とゆうオブジェクトを作成するために使用されるエイリアスにjqueryのプログラムがつまっています。この中で命令された処理を実行しています
通常は変えませんが問題がある場合には、この$は変えることができます
jQuery.noConflict();を使えば$をjQueryに変更できます
jquery以外のライブラリを使っているときに動かなくなった場合に対応するためです
これで使う時はjQuery(function() {～});に変わります 
<script type="text/javascript">
    jQuery.noConflict();
</script>

jqueryを使うときの基本の形

セレクターはcss2.1のセレクターが全て使えます。cssのものと同じ書き方です
セレクターのところに記述するものはhtml要素で指定する他にclassセレクタはドットでidセレクタは#で指定します。cssと同じ指定方法です
ie6、ie7で対応していないセレクタもjqueryでは使うことができます。クロスブラウザ対応です
$("セレクター")の部分で変更する箇所を特定しその部分の表示を変更できるようになります 
<script type="text/javascript">
$(function() {
	$("セレクター").処理する内容;
});
</script>

jqueryとjavascriptの違い

javascriptはコードが読み込まれた時点で実行しますが、jqueryはHTMLファイルを全て読み込んでから実行します。HTML要素を読み込む前に実行しても操作できないので、一旦、htmlとcssを読み込んでからjqueryは処理を実行しています



(C)2012 ホームページ作成無料