ProgateでjQueryを学ぶ（初級編）


気になるスライドだけ貼り付けていきます(^^)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/3fd4be40-1c39-03f4-6183-89357020a359.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/89e9f766-6ea0-405f-042e-3c248ea28827.png)

メソッドをＲｕｂｙで勉強してきたので、直感的にイメージがしやすくなっていることと、引数であったり、JavaScriputのライブラリだから、最後に;をつけるとか納得だらけ:relaxed:

プログラミング学習は、分からなくても、どんどん次にいくことの大切さを実感♪

練習でのミス⇒fadeInの引数をslowにしようと思ったが、
正しくは、'slow'と入れなければいけなかった(´;ω;｀)

#イベントとは？
イベントを用いると、ある処理を行うタイミングを設定できます。WEBページ内で、ユーザーによってクリックなどの操作が行われた時、あらかじめイベント内に指定した処理を実行します。
イベントの構文は、`$('セレクタ').イベント名(function(){ });`のように書きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/b9340186-042c-7ccd-9dd4-9884dc7e2611.png)

##clickイベント
clickイベントを用いると、「セレクタがクリックされた時に処理をする」ことができます。 
例えば、ボタンをクリックしたときに関連する文章を表示する、といったイベントを設定できます。下図の例では、ボタンをクリックすると文章を隠すというイベントを作成しています。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/49b62ff4-bde1-d73f-9c52-5d3b7560f8bd.png)


##cssメソッド
CSSメソッドは、CSSを変更できるメソッドです。1つ目の引数にCSSのプロパティを、2つ目の引数にプロパティの値をいれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/978f06e1-61f9-0d90-6dc9-72e698143392.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/a38bfa53-85d1-c026-817d-1f372489053b.png)


cssメソッドでdisplayプロパティの値を変更することもできます。$('セレクタ').css('display', 'none');はhideメソッドと全く同じです。このようにhideメソッドやshowメソッドは、実はdisplayプロパティの値を変更しているだけだということを覚えておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/8b0280c1-f999-cd8d-33ba-20fdcf4415ce.png)

```javascript

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/6a9cc20c-6ed7-4e29-2c65-8be4da1e7cfe.png)

htmlメソッドは、要素の中身のHTMLを書き換えることが出来ます。textメソッドと違い、htmlメソッドの引数は、単なる文字列ではなくHTMLだということです。例えば下図の例をtextメソッドで行うと、<span>タグもそのまま文字列としてブラウザに表示されますが、htmlメソッドなら<span>タグがHTMLタグと認識され、ブラウザには「こんばんは」とだけ表示されます。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/ade53920-86b0-6ab7-ff53-86163ef44bda.png)

##thisの構文

`$(this)`はイベントの中で、そのイベントが起こった要素を取得することができます。`$()の中でthisをクォーテーションで囲まないことに注意してください。`

$(this)は非常に重要な概念なので覚えておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/7516fcf3-2190-c50a-4717-5dcd71ee6fa6.png)

thisはイメージしにくいので、具体例を見てみましょう。例えば下図のように、複数のli要素にclickイベントが設定されていた場合、クリックされた時に、実際にクリックされたli要素にだけ処理を行いたい場合があります。このようなときはthisを用いて、実際にイベントが起こった要素を取得しましょう。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/43c496d9-6d49-518b-01e0-295f201167b3.png)

![アニメーション1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/66c6fd8d-41a2-9e46-6e46-3885d6d6056d.gif)

##変数を使おう
同じjQueryオブジェクトを複数回使用する時は変数にしましょう。コードが見やすくなる上、jQueryの処理が高速化されます。 JavaScriptと同じく、jQueryで変数宣言にはvarを用います。変数には文字列や数値、jQueryオブジェクトなどを格納することができますが、jQueryオブジェクトを格納する時は、わかりやすいように変数の頭に$を付けるのが慣例となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/05c26332-d9cf-5389-022c-95b5177c3887.png)

同じjQueryオブジェクトを複数回使用する時は、メソッドチェーンを使うことでも処理速度を高速化できます。 メソッドチェーンとは1つのjQueryオブジェクトに連続してメソッドが利用できる構文です。$('セレクタ').メソッド().メソッド()...のように書くことで、それぞれのメソッドが適用されます。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/27d3230a-8788-2585-3694-d4b079402459.png)

findメソッドは、すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用います。下図の例では、<div id="wrapper">から</div>の中にあるすべてのa要素を取得することができます。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/934ab6d1-da2a-6126-ebdf-72bc0b5025cb.png)

childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用います。下の例では<div id="wrapper">の子要素はaタグとpタグが1つずつなので、aタグが1つ取得されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/684485fb-6ad4-3b05-3799-a74a25c07b9d.png)

#hoverイベント
hoverイベントとは、要素にマウスが乗った時、外れた時に指定した処理を行うイベントです。下図のように「jQueryとは？」にマウスが乗った時にだけ、説明文が表示されるようにしてみましょう。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458009/7540998f-fa86-db0e-e2fc-a3c8edaa9f78.png)

hover(第一引数＝マウスを乗せた時の処理、第二引数＝マウスをおろした時の処理）

という部分を意識しましょう♪