jQueryチートシート_100DaysOfCodeチャレンジ20日目(Day_20:#100DaysOfCode) #jQuery

初級編

基本操作

$...jQueryのオブジェクト
()...セレクタ(HTMLの要素や、id名/class名などのこと)
.method(args)...メソッドと引数

※jQueryはセミコロンを忘れないように！

jQueryはfunction内に記述する

$(function() {
  //この中にjQueryを記述する
});

jQueryの読み込み

読み込みは以下のようなCDNを使う。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

また、外部ファイルから読み込ませる際にはbodyタグの直前におくと、表示速度が高速になる。

<head>
.....
</head>
<body>
.....
<script src="./script.js"></script>
</body>

要素をフェードアウトさせる①(fadeOutメソッド)

$(function(){
  $('セレクタ名').fadeOut();
});

引数に与えた整数によってフェードアウトさせる時間を指定できる。
　例:3000なら3秒

また、文字列でもフェードアウトさせる効果を指定できる。

文字列	フェードアウトの早さ
”slow”	ゆっくり
”normal”	普通
”fast”	はやい

ふわっと消えるような効果をつけることができる

引数に指定しなかった場合に適用されるデフォルトの値はnormalになる。

要素をフェードアウトさせる②(slideUpメソッド)

$(function(){
  $('セレクタ').slideUp();
});

fadeOut同様、引数に与えた整数によってフェードアウトさせる時間を指定できる。

fadeOutと違うのは、下から上に向かってフェードアウトするような効果になること。

displey: none;した要素を表示させる①(showメソッド)

CSSでセレクタに対してdisplay:none；とすると、要素を隠すことができる。

例えば、ある特定のページだけそのセレクタを表示させたい場合は、jQueryではshowメソッドを使う。

$(function(){
  $('セレクタ').show();
});

displey: none;した要素を表示させる②(fadeIn/slideDownメソッド)

先に紹介したfadeOut/slideUpメソッドの逆の効果として、fadeIn/slideDownがある。

使い方などはfadeOut/slideDownと同じ。

cssをjQueryで変更する(cssメソッド)

jQueryではcssメソッドを使ってスタイルを変更することができる。単体で使用するよりも、イベントと組み合わせて使用されることが多い。

基本構文は次の通り。

$(function() {
  $('セレクタ名').css('プロパティ', '変更する値');
});

なお、cssメソッドは引数に複数のプロパティを指定できないことに注意。例えば、次のような指定はできない。
$(function() { $('h1').css('color', 'red' 'font-size', '20px'); });
※h1に対して文字色を赤でサイズを20pxに変更させようとしているが、上記の書き方では適用されない。

複数指定したい場合は、個別にcssメソッドを使う必要がある。下記の書き方ならOK。

$(function() {
  $('h1').css('color', 'red');
  $('h1').css('font-size', '20px');
});

findメソッド

親要素のセレクタに対して、引数に指定したセレクタに該当するすべてのセレクタを対象にする。

基本構文は次の通り。

$(function(){
  $('親要素のセレクタ').find('対象となるセレクタ').実行したいメソッド();
});

childrenメソッド

findメソッド同様に親要素のセレクタに対して、引数に指定したセレクタを対象にする。ただし、findメソッドと違うところは、対象となるセレクタが一番最初に見つかったものだけということ。

基本構文は次の通り。

$(function(){
  $('親要素のセレクタ').children('対象となるセレクタ').実行したいメソッド();
});

addClassメソッド

対象となるセレクタに対して、クラスを追加することができる。thisやfind、hoverイベントなどと組み合わせることが多い。
引数のクラス名には#や.は不要。

$(function() {
  $('セレクタ').hover(
    function() {
      $(this).find('適応対象となるセレクタ).addClass('クラス名');
    },
    function(){
      //マウスを乗せた時の処理
    }
  );
});

removeClassメソッド

対象となるセレクタから、クラスを取り除くことができる。addClassとセットで使われることが多い。
引数のクラス名には#や.は不要。

$(function() {
  $('セレクタ').hover(
    function() {
      //マウスを乗せた時の処理
    },
    function(){
      $(this).find('適用対象となるセレクタ').removeClass('クラス名');
    }
  );
});

イベントについて

イベントは、ユーザーがWebページ内の特定の行動をした時に対して処理が実行させるようにすること。

基本構文としては次の通り。

$(function(){
  $('セレクタ').イベント名(function() {
    //この中にjQueryを記述する
  });
});

例えば、ボタンを押した時に画像が表示されるなどもその一つ。

イベントには種類が色々とある。

clickイベント

セレクタがクリックされた時に実行させたい処理を書く。

$(function(){
  $('セレクタ').click(function() {
  //ここに実行させたい処理を書く
  });
});

hoverイベント

セレクタに対してマウスを乗せた時に実行させたい処理を書く。マウスを乗せた時と離したときの二つの処理を引数としてとることに注意。

$(function(){
  $('セレクタ').hover(
    function() {
      //ここにマウスを乗せた時に実行させたい処理を書く
    },
    function() {
　　　　　　　　　　//ここにマウスを離した時に実行させたい処理を書く
    }
  );
});

thisについて

thisは指定したセレクタに対して、実際にイベントが発生したセレクタを格納している変数のようなもの。

$(function() {
  // class名が「list-item」のものに対して、thisには実際にクリックされたlist-itemが格納されている。
  //そのthisに対してcssメソッドを実行する。
  $('.list-item').click(function(){
    $(this).css('color', 'red');
  });

});

変数について

他のプログラミング言語と同様に、jQueryでも変数を使用することができる。

変数の宣言には、variableの意味をもつvarを使う。

基本構文は次の通り。

$(function(){
  var $変数名 = $('セレクタ');
});

中級編

モーダル機能を作成

モーダルを作成するための4ステップ

ステップ1: cssで対象となるセレクタを非表示にする

セレクタ名 {
  display: none;
}

ステップ2: 対象となるセレクタに対してクリックイベントを適用させる

$(function() {
  $('対象となるセレクタ').click(function(){

  });
});

ステップ3: 対象となるセレクタに対して、表示させるメソッド(fadeInやslideUpなど)を使う

$(function() {
  $('対象となるセレクタ').click(function(){
    $('モーダルとなるセレクタ').表示させるメソッド();
  });
});

ステップ4: fontawsomeなどを使って閉じるアイコンを作成し、それに対して非表示にするメソッド(fadeOutやslideDownなど)を使う

<!-- HTML-->
 <div>
   <i class="fa fa-2x fa-times jQueryで使うセレクタ名"></i>
 </div>

//JQuery
$(function() {
  $('対象となるセレクタ').click(function(){
    $('モーダルとなるセレクタ').表示させるメソッド();
  });

  $('対象となるセレクタ').click(function(){
    $('閉じるアイコンのセレクタ').非表示にさせるメソッド();
  });
});

アコーディオン機能を作成

ステップ1: 開いた時に表示させる要素をCSSで非表示にしておく

//css
開いた時に適用させるセレクタ(クラス名)　{
  ...
  ...
  display: none;
}

ステップ2: 閉じている時に表示させる要素に対して同じクラス名を指定しておく

<!-- HTML　-->
<ul id="...">
 <li class="閉じている時のクラス名">
　　<li class="閉じている時のクラス名">
　　<li class="閉じている時のクラス名">
</ul>

ステップ3: ステップ1とステップ2に対して、それぞれclickイベントを作成する

$('.faq-list-item').click(function() {

  });

ステップ4: if文とhasClassメソッドを組み合わせて表示/非表示の操作を実装する

$('セレクタ').click(function() {
    var $変数名 = $(this).find('対象となるセレクタ');

    if ($変数名.hasClass('クラス名')){
        $変数名.removeClass('クラス名');      
    } else {
        $変数名.addClass('クラス名');
    }
  });

ステップ5: slideUp/Downメソッドとtextメソッドなどを組み合わせて表示/非表示の操作とアイコンの切り替えを実装する

$('セレクタ').click(function() {
    var $変数名 = $(this).find('対象となるセレクタ');

    if ($変数名.hasClass('クラス名')){
        $変数名.removeClass('クラス名');
        $変数名.slideUp();   
　　　　　　　　　　　　　　　　　//textメソッドでアイコンを切り替え
        $(this).find('要素名').text('+');
    } else {
        $変数名.addClass('クラス名');
        $変数名.slideDown();
　　　　　　　　　　　　　　　　//textメソッドでアイコンを切り替え
　　　　　　　　　　　　　　　　$(this).find('要素名').text('-');
    }
  });

上級編

メソッドを定義する

ファイルの中で同じコードが繰り返される場合は、メソッドとしてまとめることができる。

function メソッド名() {
  //メソッドの中身を書く
}