jQueryを学ぶ

#デイトラWeb制作コース中級編DAY4の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習29日目⏩<br><br>Web制作コース中級編DAY4💻<br><br>学習時間:3時間3分⏳<br><br>学習内容:jQueryについて✏<br><br>学び📚<br>・セレクタの指定方法<br>・メソッドを使用した要素の指定<br>・イベント処理<br>・アニメーション<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%88%9D%E5%BF%83%E8%80%85?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング初心者</a><a href="https://twitter.com/hashtag/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#プログラミング学習</a> <a href="https://t.co/sfwoA6Cl4r">pic.twitter.com/sfwoA6Cl4r</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1379990116790329346?ref_src=twsrc%5Etfw">April 8, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
#　【学び】

1 

【jQueryの解説】

＜jQueryとは＞

JavaScriptのライブラリで、JavaScriptをより簡単に記述できるようにしたもの。
主にWebサイトやWebアプリケーションで使用されている。

＜jQueryのメリット＞

①　短いコードで書ける
②　ブラウザごとの対応がいらない
③　便利なライブラリがたくさんある


2

【jQueryの書き方】

＜jQueryを書くときの型＞

①　ｊQueryのライブラリ本体を最初に読み込む
②　ｊQueryで書いたファイルを読み込む

↓

```maiin.js

<!-- jQueryのライブラリー -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<!-- jQueryで書いたファイル-->
<script src="js/practice.js"></script>

```

＜ｊQueryの書き方のルール＞

ポイント
①　＄マークで始まり
②　function()で囲む
③　`$("主語").動詞("補語")`の文法で書く
　
↓

```maiin.js
$(function() {  
  //この中にプログラムを書いていく
});
```
*イメージは

主語：　セレクタ（id,class,tagの名前など）

動詞：　メソッド（どうしたいのか）

補語：　メソッドによって追加で条件式を足す（補語を書かなくていい時もある）

＜ｊQueryでのセレクタの指定方法＞

①　タグ名で指定する：`$("タグ名")`
②　クラス名で指定する：`$(".クラス名")`
③　ID名で指定する：`$("#id名")`

＜ｊQueryでプログラムを書いてみた＞

```maiin.js
$(function(){
  const status = $('#user-status').val();　//val（） = フォームの入力値（value属性の値）を取得する
  const button = $('#register');

// HTMLデータから、statusとbuttonの値を取得できた

if(status === 'visiter'){
   button.text('登録');　//.text('変更したいテキスト') =	テキストを''内の文字列に変更する
   button.removeClass('btn-login'); //.removeClass(class属性値) = class属性を削除する
   button.addClass('btn-register'); //.addClass(class属性値) = class属性を追加する
}else if(status === 'user'){
 button.text('ログイン'); //.text('変更したいテキスト') =	テキストを''内の文字列に変更する
 button.removeClass('btn-register'); //.removeClass(class属性値) = class属性を削除する
 button.addClass('btn-login'); //.addClass(class属性値) = class属性を追加する
 $('.login-area').append('<a href="https://tokyofreelance.jp/" class="btn btn-withdraw">退会</a>')
 //.append('要素') = 要素の最後にHTMLを挿入する
}
});

```

3

【メソッドを使用した要素の指定】

＜fund()かchildren()の違い＞

子要素の中から探すときはこの２つのどちらかを使用する！

①　`.find('セレクタ')`
対象要素の子孫要素から、セレクタに該当するもの取得する

```maiin.js
var texts = $('#js-for-web').find('p');
console.log(texts[0]);

//変数を「texts」と名付けて、id名「js-for-web」から、pタグの０番目を表示させる
```
＊ `find`は子孫要素全体から探してくるので、どの階層を指定してもOK！

②　`.children('セレクタ')`
対象要素の直属の子要素から、セレクタに該当するものを取得する

```maiin.js
 var texts = $('#js-for-web').children('p');
console.log(texts[0]); 

//変数を「texts」と名付けて、id名「js-for-web」から、pタグの０番目を表示させる
```
＊　`children`は直属の子要素からしか探せないので、孫要素の指定はできない！

4

【イベント処理】

＜イベントの構文＞

`$('セレクタ').イベント名(function(){ });`

＜click＞
ボタンがクリックされたときの処理

```maiin.js
「#button」をクリックすると「#service-title」の文字が「デイトら」に変わる処理

↓
$("#button").click(function(){ 
 //.click() = 対象要素をクリックする
 $("#service-title").text("デイトラ") 
 //.text('変更したいテキスト') = テキストを''内の文字列に変更する
});

```

＜hover＞

hoverイベントはfunctionをコンマ区切りで2個続けて書く。
１　「ホバーされたときの処理」
２　「ホバーが外れたときの処理」

```maiin.js

 $('セレクタ名').hover( 
  	function() {
  	//ここにホバーされたときの処理を書く
    },
    function() {
    //ここにホバーが外れたときの処理を書く
    }
  );　

↓

例：
  $("#service-title").hover(
    function() {
     $(this).css('color','orange');
     //.css(プロパティ名,値) = 指定したCSSプロパティの値を設定する
    },
    function() {
     $(this).css("color","#082B48");
　　　//.css(プロパティ名,値) = 指定したCSSプロパティの値を設定する
    }
  );
```

5

【アニメーション】


jQueryにはページに動きをつける様々なアニメーションが用意されている。

参考サイト: [アニメーション一覧](https://api.jquery.com/category/effects/)


＜スライドのように開閉して表示＞

```maiin.js

 $('#service-title').hover(
  function(){
    $('#register').slideUp();
  },
  function(){
    $('#register').slideDown();
  }
); 

　/* [#service-title] に
　　ホバーしたとき、[register]が「slideUp」し、
　　ホバーを解除したとき、[register]が「slideDown」する */

```

＊　Q&Aで、Qにホバーした時に、Aが出てくる仕様などに使う

＜ふわっと浮き上がる表示＞


```maiin.js

 $('#service-title').hover(
  function(){
    $('#register').fadeIn();
  },
  function(){
    $('#register').fadeOut();
  }
);

/* [#service-title] に
　　ホバーしたとき、[register]が「fadeIn」し、
　　ホバーを解除したとき、[register]が「fadeOut」する */
  
```

＊　クリックしたとき、写真がふわっと表示する仕様などに使う（モーダル）