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
<img>要素を隠す。

```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();
    }
    
   );
  
});
```