[学習1日目]jQuery(初級編)

#今日学んだこと
##jQueryの基礎
###1.jQueryのコードは、script.jsの「$(function(){」と、「})」の間に書く
こんな感じ。

  //ここに書く。
});```

###2.jQueryの書き方は「$('セレクタ名').メソッド名();」
h1セレクタの文字に隠す動きをつけるには、
```$('h1').hide();```
と書く。

###3.idとclassで指定したものはcssでの書き方で「$('ここに書く')」
htmlではidやclassは
```id="list"```
```class="list-item"```
のように「""」で囲って書く。

cssでは
idは「**＃**」をつける。
``` #list{
}```
classは「**.**」をつける。
``` .list-item{
 }```

###4.学んだ基礎的なメソッド
- fadeOut()
- fadeIn()
- slideUp()
- slideDown()
- show()
- hide()

##イベント
###1.イベントは「$('セレクタ').イベント名(function(){ })」のように書く
例えば、こんな風に書くと、、

```script.js
$('#hide-text').click(function(){
    $(#text).hide();
});

id="hide-text"の要素をクリックしたら、
id="text"の要素が隠れる
ということになる。

###2.jQueryでcssを変更するには「$('セレクタ名').css('プロパティ名','値')」で設定する
例えばこんな感じ。
$('p').css('color','red');

css()の中は一つのプロパティしか書けないのかな？
今学んだ中だと、複数の変更をしたい場合は、こんな風にそれぞれ書くみたい。

$('p').css('color','red'); //文字色を変える

$('p').css('font-size','50px');//フォントサイズを変える```

個人的に、間違えそうになるのは、css('color:red')とかにしてしまいそうだけど、
css内は、
- それぞれ''で囲うことと、
- プロパティと値は「,」で区切ること
を、覚えておきたい。

###3.htmlの変更は、文字だけ変更ならtext()、HTMLの変更ならhtml()
「こんにちは」を「こんばんは」に変えたいなら。。。
ｈｔｍｌが
```<p>こんにちは</p>```
となっていたら、
jsで、
```$('p').text('こんばんは！’)```
とする。「pセレクタの文字をtext(ここの文字)に変える」って意味
```$('p').html('<span>こんにちは</span>’)```
とすると、
```<p>こんにちは</p>```を```<p><span>こんばんは！</span></p>```
に変えられるということになる
###4.thisイベントを使うと、イベントが起こった要素に対してのみ処理が行える
```index.html 
  <ul>
    <li class="list-item">リスト1</li>
    <li class="list-item">リスト2</li>
    <li class="list-item">リスト3</li>
  </ul>

script.js

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

こうしておくと、
classがlist-itemのもので、要素をクリックすると、
そのクリックされたもののみcss('color','red')が反映される。

つまり、
リスト1
リスト2
リスト3
となっているとこで、「リスト2」をクリックすると、リスト2だけが文字色が赤くなる。
（classが同じでも切り分けてイベントが起きる）

###5.変数の書き方
var $div = $('div');
と書くと、毎回$('div')と書かなくて済むようになる。
※「＄」は、オブジェクトを変数にする場合に変数の前に書くとされているみたい。

###6.メソッドチェーンは$('セレクタ').メソッド().メソッド()...と、単純にメソッドを「.」でつなげばいい

$('#text').css('color', 'blue')
$('#text').html('<h3>jQueryをマスターしましょう！</h3>')
$('#text').fadeOut(1000);

こうなってたら「$('#text')」が全てにあるので、まとめてしまおう！となった時、
2個目、3個目の「$('#text')」を消して、それぞれの末尾につなげちゃえばいい

こんな感じ。

$('#text').css('color', 'blue').html('<h3>jQueryをマスターしましょう！</h3>').fadeOut(1000);

##要素の取得
###find()はそれ以下の階層全て、children()はその一階層だけ下について処理

index.html

  <div class="btn" id="find-method">findメソッド</div>
  
  <!-- "children-method"というidをつけてください -->
  <div class="btn" id="children-method">childrenメソッド</div>
  
  <div id="wrapper">
    <a href="#">リンク1</a>
    <div>
      <a href="#">リンク2</a>
    </div>
  </div>

HTMLがこうなっていた時、

script.js

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

JSファイルにこう書いてみる。

こうすると、find()を使ったほうは、
id="find-method"となっているボタンを押すと、
id="wrapper"以下の全ての<a>に対してcolorがredになる。

一方、children()を使ったほうは、
id="children-method"となっているボタンを押すと、
id="wrapper"以下の一個下の<a>だけに対して、
fadeOut()が実行される。
つまり、今回は「リンク1」という文字だけ。リンク2の文字はさらに一個したの階層なので、
このchildren()では届かない。

###hoverの書き方は$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);

script.js

$('div').hover(
 function(){
   //マウスをのせた時の処理
 },//←ここの「,」を忘れずに！！！
 function(){
  //マウスをはずした時の処理
 }
);

#progateメモ
現在Lv. 9
bbpnuts21