自分のためのjQuery学習コース1メモ #初心者エンジニア

jQueryのProgate学習コース1をメモ。

jQueryの書き方

基本はJavaScriptなので、jsファイルに記述する。

基本の書き方.js

// 基本の書き方
$('セレクタ').メソッド名(引数);

// 例：
$('h1').hide();

$('セレクタ') の部分をjQueryオブジェクト、.メソッド名(引数) をメソッドという。

主なメソッド1

.hide 要素を隠す
.show 要素を現す（CSSでdisplay: none;と指定したものなど）
.fadeOut フェードアウトして隠す
.fadeIn フェードイン
.slideUp 下のほうから消えていく
.slideDown 上のほうから現れる

セレクタの指定方法

HTML内に記述した要素をセレクタにする。CSSと基本的に一緒と思えばOK。

HTMLタグ
- タグ名をそのまま指定（例：$('h1')）
class
- クラス名にドットをつけて指定（例：$('.class')）
- ページ内で複数設定できる
id
- id名に#をつけて指定（例：$('#id')）
- ページ内で重複させないので、jQueryの処理早くなるので推奨

イベントを使う

発動するタイミングをコントロールする方法。

イベントの書き方.js

$('セレクタ').イベント名(function(){
  // 実行する処理
});

// クリックしたらそのセレクタ部分を隠す
$('#button1').click(function(){
  $(this).hide();
});

// クリックしたら別のセレクタ部分を隠す
$('#button2').click(function(){
  $('#text').hide();
});

主なメソッド2

.css('プロパティ','値') CSSを変更する
.text('文字列') セレクタ内を文字列で置き換える
.html('HTMLソース') セレクタ内をHTMLで置き換える

thisの使い方

ソース.html

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

ソース.js

$('li').click(function(){
  $(this).css('color','red');
});

thisはそのイベントが発生した要素を取得できる。上記のように書くと、クリックしたリストの行だけが赤くなる。

省略・高速化

変数やメソッドチェーンを利用することで、コードの省略ができる。また処理速度の高速化にもつながる。

変数

script.js

const $div = $('div');
// と宣言することで、
$div.hide();
// のようにjQueryオブジェクトを変数化することができる。

変数の宣言は、主にconstを使用する。constは再代入できないので、後から変更する必要がある場合はletを使う。varもあるが現在は多くの場合、推奨されていない。

参考：
JavaScript var/let/constによる変数宣言 - Qiita
var/let/constの使い分けのメモ - Qiita
など

メソッドチェーン

script.js

$('#method').css('color','red').text('テキスト');

のように . ドットでつなげることで、ひとつのjQueryオブジェクトに複数のメソッドが使える。

findメソッド

script.js

$('#method').find('a').css('color','red');

で、#method のすべての配下のうち a セレクタを持つ要素を取得できる。

childrenメソッド

script.js

$('#method').children('a').css('color','red');

で、#method のひとつ下の階層から a セレクタを持つ要素を取得できる。

hoverイベント

script.js

$('div').hover(
  function(){
  // マウスポインターをのせたときの処理
  },
  function(){
  // マウスポインターを外したときの処理
  }
);

引数となる関数は2つ。