◆jQueryとは
jQueryはシンプルなコードでWebページに効果やアニメーション、
ユーザインターフェース要素などを追加でき、Ajaxによる通信も容易に実装できるほか、
様々な機能を実現する豊富な対応プラグインが公開されている。
1.jQueryのプログラム本体をダウンロードする
>>ダウンロードはこちらから
http://jquery.com/
ダウンロードするときは、右クリックで”名前をつけてリンク先を保存”
→保存先は動かしたいページのフォルダ内のjsフォルダ内に保存する。
※本体のバージョンに注意
プラグインによっては、動かないバージョンもあるので、プラグインのサンプルなどを確認して、同じバージョンを使用するようにします。
[ダウンロードするバージョン]
jQuery本体は色々バージョンがある。
※「1.11.1」は、2014/10/8現在のバージョン
Download the compressed, production jQuery 1.11.1
プログラムが改行されてないバージョン(min)
その分ファイルの容量が小さい
プログラムをいじらないのであれば、容量の小さいこちらを選択する。
Download the uncompressed, development jQuery 1.11.1
プログラムが改行されているバージョン
その分ファイルの容量が大きい
CDN(コンテンツデリバリネットワーク)
http://bost.bostudio.co.jp/2013/03/jquery-on-cdn.html
jQuery1.8まで採用されていた、などを使用したい場合は、「jquery-migrate」というJSファイルを本体の次に設定します。
2.ダウンロードしたファイルをjQueryを動かしたいページにsrcでリンクさせる。
3.命令文を書く
※jQueryでスタイルシートを指定する場合が多いので、
スタイルシートのリンクはspriptタグよりも前に書いた方が良い。
※jQueryの命令文よりも先にjQuery本体を先にリンクを貼ること
命令文の基本は、何をどうしたいををドットでつないで書いていく。
詳しくは>>
http://webdesignrecipes.com/webdesign-jquery-coding/
fadeOut(数字) 1000 = 1秒
fadeIn(数字) 1000 = 1秒
※数字のところにはslow/fastを入れても出来ます。
「slow/fast」は、文字列なので、ダブルクォーテーション””で囲う
$(“セレクター”).hover(
function(){マウスオーバー時},
function(){マウスアウト時},
);
jQuery参考(練習)サイト
7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 |
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました