ProgateでjQueryを学ぶ【コース１は基本、CSS()、イベントなど】

ProgateでJQueryを学ぶコース１
JQueryってなに
JQueryの構文
フェードやスライド
htmlのクラスとidをセレクタにする
要素の表示、非表示
JQueryのイベント
cssメソッド
htmlとテキストの変更
thisキーワード
変数やメソッドチェーン
セレクタ（要素）の子要素を指定する
ホバーイベント
Progate JQueryまとめ

ProgateでJQueryを学ぶコース１

Progateはプログラミングが学べる学習サービスで今回の記事ではJQueryのコース１で学んだことをまとめていこうかと思います。Progateは最初のうちは無料で学べるのですが、コース２の途中から有料になってしまうので、先に進みたいひとは980円払う必要があります。

それではJQueryをすすめていきます。

JQueryってなに

JQueryはウェブのデザインに特化したJavaScriptのライブラリです。コードを書いてウェブにアニメーションをつけたりすることができます。JQueryを学ぶ前にJavaScriptの知識が必要になるですが、もしまだJavaScriptを学んでない方は先にそちらをやるのがよいかもしれないですね。あとhtml、cssの知識は必須になるかと思いますのでそちらもあわせてまなんでいくのがよいかと思います。

それではここから学習内容になります。

JQueryの構文

JQueryの構文は以下のような構文のなかに処理を書くきまりがあります。

$(function() {
  // 以下で、hideメソッドを用いて<h1>要素を隠してください
  $("h1").hide();
});

$(“h1”)というのはhtmlのタグを指定しています。このようにh1タグを指定した場合はh1タグを【　セレクタ　】にしたといいます。セレクタはh1タグ以外にもたくさんありますね。たとえばhtmlのclassであったりidであったり。その他のタグであったり様々です。また人によってはhtmlのタグのことを【　要素　】と呼んだりします。hide();はJQueryのメソッドになります。

見た目がどうかわかったかについては実際に自分で試してみることをおすすめします。この記事ではhtmlコードはのせていません。JQueryの部分のみをのせていきます

フェードやスライド

フェードとは徐々に消えていったり徐々にでてきたりするやつですね。スライドはシャッターが開いたり閉まったりするのに似ていますね。これらのアクションには、以下のようにアニメーションの速さを指定します。

【　fadeOut(“速さを指定”)　】

このはやさは【　slow, normal, first, 時間（数値で指定）　】が指定できます。fadeInにかんしては徐々にあらわれるアニメーションで最初に要素が【　display: none;　】になっていることが条件になります。

$(function() {
  $("img").fadeOut("slow");  
  //$("img").fadeIn("slow");//非表示display:none;の要素にのみ適用
  $("img").slideUp("slow");
  //$("img").slideDown("slow");
});

htmlのクラスとidをセレクタにする

クラスやidとはhtmlタグに指定できる属性になります。ここはhtmlやcssで学んでいることが前提になってくるのでhtmlを学んでない方は先にそちらをやるのがいいかもしれせん。

たとえばclassだったら【class=””】idだったら【id=””】のように指定します。

サンプルhtml↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JQueryの練習</title>
</head>
<body>
<p id="sample">こんにちは</p>
<ul class="list">
<li>JQuery</li>
<li>練習</li>
</ul>
</body>
</html>

一方cssでクラスを指定するときは【 .クラス名】ピリオドとクラス名で指定します
idは　【　#id名　】idは#で指定するようになっています。

#sample{color: red;}
.list{background: red;}

JQueryではcssと同じように.ピリオドや#シャープを使ってクラスやidを指定します。

$(function() {
  $("#title").slideUp();
  $(".lesson-item").fadeOut();
});

要素の表示、非表示

要素の表示を行うにはcssのプロパティdisplayの値がnoneになっている必要があります。プロパティとはなにかというとちょっとわかりにくいので図にしようかと思います。

この画像のとおりですね。

【display:none】になっているときだけJQueryの表示系メソッドを使うことができます。

$(function() {
  $("#title").show()
  $("#image").fadeIn();
});

JQueryのイベント

JQueryのイベントとはなにかというと、指定したセレクタ（要素）をクリックしたときとかマウスオーバーしたときとか、そういものをイベントといいます。

イベントの書き方は説明するとややこしいのでコードをみてもらうほうがはやいです

$(function(){
  $("#hide-text").click(function(){
    $("#text").slideUp();
  })
});

cssメソッド

cssメソッドは【　css(“プロパティ”, “値”)　】のように指定するとcssのスタイルを変更できるものです。JQueryのイベントとあわせて使用することがおおいかと思います。

$(function() {
  $("#change-css").click(function(){
    $("#text").css("color", "red");
    $('#text').css("font-size", "50px");
  })
});

htmlとテキストの変更

text()メソッドhtml()メソッドを用いることによってhtml要素のテキストまたはhtmlの要素そのものを変更することができます。要素を変更するhtml()メソッドはシングルクォーテーションを使うことがポイントですね。

$(function() {
  $("#change-text").click(function(){
    $("#text").text("ようこそ、Progateへ");
  })
  
  $("#change-html").click(function(){
    $("#text").html('<a href="https://prog-8.com/">ようこそ、Progateへ</a>')
  })
});

thisキーワード

JQueryのthisキーワードを最初のイベントに指定したセレクター（要素）をそのまま使うことができるやつですね。thisを指定するときはダブルクォーテーションがいらないこともポイントですね。

$(function() {
  $(".list-item").click(function(){
    $(this).css("color", "red");
  })
});

変数やメソッドチェーン

JQueryの変数はvarと$記号を使います。この変数はどこでも宣言していいわけではなくfunctionの中とかイベントの中で宣言するようにします。変数のイメージ図です↓

メソッドチェーンについては【　.css().html()　】のようメソッドをつなげて書くことができるやつですね。はじめのうちは混乱してしまいそうです。

$(function() {
  $('.btn').click(function() {
    // 「#title」のjQueryオブジェクトを変数$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);
  });
});

セレクタ（要素）の子要素を指定する

子要素とはなにかというhtmlタグのツリー構造の下の階層にある要素のことを指すのですが、ちょっと文章では説明しにくいので自分でやってみることをおすすめします。find()は下の階層にある要素すべて children()は下の階層の一個下のやつを指定しますが、文章では細かい部分が伝わりくいのでやはり自分でやってみることをおすすめします。

$(function() {
  $('#find-method').click(function() {
    $("#wrapper").find("a").css("color", "red");
  });
  
  $('#children-method').click(function() {
    $("#wrapper").children("a").fadeOut();
  });
});

ホバーイベント

hoverはマウスがのったときはなれたときのイベントです

【　hover(マウスがのったとき, マウスがはなれたとき);　】のように関数を2つ設定します。

$(function() {
  $("#language-wrapper").hover(
    function(){
      $(".language-text").fadeIn();
    },
    function(){ $(".language-text").fadeOut();
    }
    );
})