jQuery 初級編

2018年9月15日

jQueryとは、JavaScriptのライブラリーの1つで、よく使うJavaScriptの機能を簡単に使えるようにしたものです。

jQueryでできること
・HTML/CSSを操作
・アニメーションをつけられる

jQueryの書き方
1)jQueryオブジェクトを作成(どの箇所に)
2)メソッドの呼び出し(何をさせるか)

$(‘セレクター’).メソッド(引数);

セレクターには、HTMLタグやクラス名などが入ります。
$(‘セレクター’)部分をjQueryオブジェクトといいます。
メソッドは、jQueryオブジェクトを操作するための命令文でです。

主なメソッド
hide();
fadeOut();
slideUp();
show();
fadeIn();
slideDown();
css(‘プロバティ名’,’値’);
text(‘書き換えたい文字’);
html();
find(); 子要素全部
children(); 一階層だけ下の子要素

イベントとは、jQueryオブジェクトのメソッドのタイミングを設定するときに使います。
イベントの構文は、
$(‘セレクター’).イベント名(function(){
//イベントのタイミングで処理したい内容
});

主なイベント
clickイベント
hoverイベント

$(this)は、イベンドの中でそのイベントが起こった要素を取得します。
thisは、”や’で囲みません。

jQueryオブジェクトを何度も使うときは、変数にしておくと効率が良くなります。
var $変数名 = $(‘セレクター’);

メソッドチェーンとは、1つのjQueryオブジェクトに複数のメソッドを設定するときに使う構文で.(ドット)でつなぎます。
$(‘セレクター’).メソッド1().メソッド2();

hoverイベントは、指定した要素にマウスが乗ったとき、外れたときの処理を設定するイベントです。
hoverイベントでは2つの引数(マウスが乗ったとき、マウスが外れたとき)を設定する必要があります。
$(‘セレクター’).hover(
function(){
マウスが乗ったときの処理;
},
function(){
マウスが外れたときの処理;
}
);