jQuery
JavaScriptのコードを使いやすく簡単にまとめた**コード集(ライブラリ)**のこと。
◆jQueryできること（例えば）
●クリックすると画像が大きく表示される
●文字にマウスを乗せると色が変わる
●スライドショーの作成
※他にもWebページに様々な動きを加えることができる
◆jQueryの使い方
①ネット上のjQueryファイルを読み込んで使用
CDN(Contents Delivery Network)という。
②jQueryファイルをダウンロードして使用
※今回は①を学習する
◆jQueryを使う手順
①HTML、CSS、JavaScriptファイルを作成
②HTMLファイルにjQueryを読み込ませる
jQuery公式ホームページからを
HTMLファイルのHEADタグにコピペする
③JavaScriptファイルにjQueryコードを記述する
JavaScriptファイルに下記の様ように記述する
jQuery (function(){
この中にjQueryを書いていく
});
基本的な記述方法
$(function(){
$("セレクタ").メソッド(引数);
});
例)h1タグのフォントの色を赤にする
$(function(){
$("h1").css("color","red");
});
メソッドの種類
| メソッド | 解説 |
|---|---|
| .css() | CSSプロパティを変化させる |
| .on() | イベント発生時に実行する関数を割り当てる |
| .fadeOut() | 要素を徐々に薄くして消す |
| .fadeIn() | 要素を徐々に表示する |
| .text | 指定した要素の文字列を取得したり、書き換える |
| .slideToggle() | 要素をアコーディオンさせる |
| .animate() | CSSプロパティを徐々に変化させる |
イベント
マウスをクリックしたときや、入力欄にカーソルを乗せたとき等、
「〇〇をしたときに✕✕の処理をする」というもの
基本的な記述方法
$(function(){
$("セレクタ1").イベント(function{; //〇〇をしたとき
$("セレクタ2").メソッド(引数); //✕✕の処理をする
});
});
イベントの種類
| イベント | 解説 |
|---|---|
| click | クリックしたときに〇〇の処理をする |
| mouseover | マウスを乗せたときに〇〇の処理をする |
| mouseout | マウスを外したときに〇〇の処理をする |
| hover | マウスを乗せたとき、マウスを外したとき、〇〇の処理をする |
| scroll | 画面をスクロールしたときに〇〇の処理をする |
| dblclick | ダブルクリックをしたときに〇〇の処理をする/td> |
hoverイベント
マウスを乗せたときと、マウスを外したときの両方の処理を記述できるもの
基本的な記述方法
$("セレクタ").hover{
function(){
//マウスを乗せたときの処理
},
function(){
//マウスを外したときの処理
});
});
例)p要素内のテキストにマウスを乗せると画像を表示、マウスを外すと画像を非表示する処理
$("p").hover{
function(){
$("img").fadeIn();
},
function(){
$("img").fadeOut();
});
});
this
thisとは、イベント発生時に、そのセレクタのみに処理を適用するもの
例)h2タグが複数ある場合で、クリックされたh2のフォントのみが赤色に変わる処理
$(function(){
$("h2").click(function{
$(this).css("color","red");
});
});
スライドショー
スライドショーは、同じ場所で画像が切り替わる機能
jQueryでスライドショーを作るには一般的に、プラグインと呼ばれる無料のツールを使用する。
①BxsliderのコードをHTMLに貼り付ける
②HTML上にHTMLコードを書く
③HTML上にJavaScriptのコードを書く
チェックボックス(#checkbox)にチェックが入ったときのみ、削除ボタン(#delete)を活性化する方法
jQuery(function(){
//.prop()でセレクタの属性やプロパティを取得できる
//deleteボタンを非活性化
$("#delete").prop("disabled", true);
//checkboxがチェックされた時
$("#checkbox").on("change", function() {
//checkが1個以上あったら
if ($("#checkbox").prop("checked")) {
//deleteボタンを活性化
$("#delete").prop("disabled", false);
} else {
//それ以外はボタンを非活性
$("#delete").prop("disabled", true);
}
});
});