10月8日(水)講義内容- 実技(JavaScript)3-

Pocket

◆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/

basic

fadeOut(数字) 1000 = 1秒
fadeIn(数字) 1000 = 1秒
※数字のところにはslow/fastを入れても出来ます。
「slow/fast」は、文字列なので、ダブルクォーテーション””で囲う

$(“セレクター”).hover(
function(){マウスオーバー時},
function(){マウスアウト時},
);

 

 


jQuery参考(練習)サイト

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 |
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください