jQuery 基本文法（初級編）

18161 ワード
jQuery jQuery テキストリンク

progateのjQuery 学習コース 初級編の復習メモです。

script.jsの読み込み

jQueryを使用するには、jQueryライブラリを読み込む必要があります。ライブラリはインターネット経由で読み込むのが一般的です。headタグの中で下図のようにURLを読み込む。
scriptはCSSファイルの読み込みのようにheadタグの中にも書けますが、body終了タグの直前に書くことで、WEBページの表示速度をより早めることが出来ます。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <!-- jQueryの読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

  <h1>Hello, World</h1>

  <!-- script.jsの読み込み -->
  <script src="script.js"></script>

</body>
</html>

hideメソッド

要素を隠す。

script.js
$(function() {

  $('h1').hide();

});

fadeOut

要素を隠す。

script.js
$(function() {
  // 以下で、fadeOutメソッドを用いて<img>要素を隠す
  $('img').fadeOut();

  //slideUpメソッドも後ろの()内に引数として、アニメーションの速度を指定できます。
  $('img').fadeOut(1500);

  // 以下で、slideUpメソッドを用いて<p>要素を隠す
  $('p').slideUp();

});

htmlのid、classを隠す。

script.js
$(function() {
  // slideUpメソッドを用いて、「#title」の要素を隠す
  $('#title').slideUp();

  // fadeOutメソッドを用いて、「.lesson-item」の要素を隠す
  $('.lesson-item').fadeOut();

});

fadeInメソッド

cssのdisplay: none;で隠した要素をshowメソッド、fadeInメソッドで表示する。

script.js
$(function() {
  // showメソッドを用いて、「#title」要素を表示してください
  $('#title').show();

  // fadeInメソッドを用いて、「#image」要素を表示してください
  $('#image').fadeIn();

});

clickイベント

イベントの構文は、$('セレクタ').イベント名(function(){ });のように書きます。

script.js
$(function() {
  // 「#hide-text」要素に対するclickイベントを作成してください
  $('#hide-text').click(function() {
    $('#text').slideUp();
  });
});

CSSメソッド

cssメソッドで要素の文字の色を変更したいときは、$('セレクタ').css('color', 'red');のように記述します。widthやfont-sizeなど他のプロパティもすべてcssメソッドで変更することができます。

script.js
$(function() {
  // 「#change-css」要素に対するclickイベントを作成してください
  $('#change-css').click(function() {
    $('#text').css('color', 'red');
    $('#text').css('font-size', '50px');
  });
});

HTMLを変更する(1)

textメソッド

jQueryではCSSだけでなく、textメソッドを用いることでHTMLそのものを変更することも出来ます。textメソッドは、$('セレクタ').text('書き換える文字列');のように記述します。

script.js
$(function() {
  // 「#change-text」要素に対するclickイベントを作成してください
  $('#change-text').click(function() {
    $('#text').text('ようこそ、Progateへ');
  });
  // 「#change-html」要素に対するclickイベントを作成してください
  $('#change-html').click(function() {
    $('#text').html('<a href="https://prog-8.com/">ようこそ、Progateへ</a>');
  });
});

thisの構文

複数のli要素にclickイベントが設定されていた場合、クリックされた時に、実際にクリックされたli要素にだけ処理を行いたい場合があります。このようなときはthisを用いて、実際にイベントが起こった要素を取得しましょう。

script.js
$(function() {
  // 「.list-item」要素に対するclickイベントを作成してください
  $('.list-item').click(function() {
    $(this).css('color', 'red');
  });

});

変数とメソッドチェーン

jQueryで変数宣言にはvarを用います。

script.js
$(function() {
  $('.btn').click(function() {
    // $('#title')を変数$titleに代入してください
    var $title=$('#title');


    // 「#title」に対する3つのメソッドを、変数を使って書き換えてください
    $title.css('color', 'red');
    $title.html('こんばんは、にんじゃわんこさん');
    $title.fadeOut(1000);

    // 「#text」に対する3つのメソッドを、メソッドチェーンを使って書き換えてください
    $('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう！</h3>').fadeOut(1000);
  });
});

findメソッド、childrenメソッド

script.js
$(function() {
  $('#find-method').click(function() {
    // findメソッドで、「#wrapper」内にあるすべての「a」要素を取得し、
    // cssメソッドで文字の色をredに指定してください
    $('#wrapper').find('a').css('color', 'red');


  });

  $('#children-method').click(function() {
    // childrenメソッドで、「#wrapper」の一階層下にある「a」要素を取得し、
    // fadeOutメソッドで隠してください
    $('#wrapper').children('a').fadeOut();


  });
});

hoverイベント

$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);のように書きます。clickイベントと違い、引数を2つ書くことに注意しましょう。引数の間はコンマで区切ります。

script.js
$(function() {
  // 「#language-wrapper」にhoverしたときのhoverイベントを作成してください
  $('#language-wrapper').hover(
    function() {
      $('.language-text').fadeIn();
    },

    function() {
      $('.language-text').fadeOut();
    }

   );

});