jQuery学習の初歩の初歩

#jQuery
　　　JavaScriptのコードを使いやすく簡単にまとめた**コード集(ライブラリ)**のこと。

　　　◆jQueryできること（例えば）
　　　　●クリックすると画像が大きく表示される
　　　　●文字にマウスを乗せると色が変わる
　　　　●スライドショーの作成
　　　　　※他にもWebページに様々な動きを加えることができる

　　　◆jQueryの使い方
　　　　①ネット上のjQueryファイルを読み込んで使用
　　　　　CDN(Contents Delivery Network)という。
　　　　②jQueryファイルをダウンロードして使用
　　　　　※今回は①を学習する
　　　　
　　　◆jQueryを使う手順
　　　　①HTML、CSS、JavaScriptファイルを作成
　　　　②HTMLファイルにjQueryを読み込ませる
　　　　　jQuery公式ホームページから<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>を
　　　　　HTMLファイルのHEADタグにコピペする
　　　　③JavaScriptファイルにjQueryコードを記述する
　　　　　JavaScriptファイルに下記の様ように記述する
　　　　　jQuery (function(){
         この中にjQueryを書いていく
        });

#基本的な記述方法
　　　　$(function(){
　　　　　　$("セレクタ").メソッド(引数);
　　　　　});
　　　
　　　　例)h1タグのフォントの色を赤にする
　　　　$(function(){
　　　　　　$("h1").css("color","red");
　　　　　});


#メソッドの種類
<table border="0" cellspacing="0" cellpadding="0">
   <tr>
     <th>メソッド</th><th>解説</th>
   </tr>
　　<tr>
　　　<td>.css()</td><td>CSSプロパティを変化させる</td>
　　</tr>
　　<tr>
　　　<td>.on()</td><td>イベント発生時に実行する関数を割り当てる</td>
　　</tr>
　　<tr>
　　　<td>.fadeOut()</td><td>要素を徐々に薄くして消す</td>
　　</tr>
　　<tr>
　　　<td>.fadeIn()</td><td>要素を徐々に表示する</td>
　　</tr>
　　<tr>
　　　<td>.text</td><td>指定した要素の文字列を取得したり、書き換える</td>
　　</tr>
　　<tr>
　　　<td>.slideToggle()</td><td>要素をアコーディオンさせる</td>
　　</tr>
　　<tr>
　　　<td>.animate()</td><td>CSSプロパティを徐々に変化させる</td>
　　</tr>
 </table>

#イベント
　　マウスをクリックしたときや、入力欄にカーソルを乗せたとき等、
　　「〇〇をしたときに✕✕の処理をする」というもの
　　基本的な記述方法
　　　$(function(){
　　　　　　$("セレクタ1").イベント(function{;　//〇〇をしたとき
　　　　　　　　　$("セレクタ2").メソッド(引数);　//✕✕の処理をする
　　　　　　});
　　　});
　　　
#イベントの種類
<table border="0" cellspacing="0" cellpadding="0">
   <tr>
     <th>イベント</th><th>解説</th>
   </tr>
　　<tr>
　　　<td>click</td><td>クリックしたときに〇〇の処理をする</td>
　　</tr>
　　<tr>
　　　<td>mouseover</td><td>マウスを乗せたときに〇〇の処理をする</td>
　　</tr>
　　<tr>
　　　<td>mouseout</td><td>マウスを外したときに〇〇の処理をする</td>
　　</tr>
　　<tr>
　　　<td>hover</td><td>マウスを乗せたとき、マウスを外したとき、〇〇の処理をする</td>
　　</tr>
　　<tr>
　　　<td>scroll</td><td>画面をスクロールしたときに〇〇の処理をする</td>
　　</tr>
　　<tr>
　　　<td>dblclick</td><td>ダブルクリックをしたときに〇〇の処理をする/td>
　　</tr>
 </table>

#hoverイベント
　　マウスを乗せたときと、マウスを外したときの両方の処理を記述できるもの
　　基本的な記述方法
　　　$("セレクタ").hover{
　　　　　　function(){
　　　　　　//マウスを乗せたときの処理
　　　　　　},
          function(){
　　　　　　//マウスを外したときの処理
　　　　　　});
　　　});

　　　例)p要素内のテキストにマウスを乗せると画像を表示、マウスを外すと画像を非表示する処理
　　　$("p").hover{
　　　　　　function(){
　　　　　　  $("img").fadeIn();
　　　　　　},
          function(){
　　　　　　  $("img").fadeOut();
　　　　　　});
　　　});


#this
   thisとは、イベント発生時に、そのセレクタのみに処理を適用するもの
　　例)h2タグが複数ある場合で、クリックされたh2のフォントのみが赤色に変わる処理
　　　$(function(){
        $("h2").click(function{
          $(this).css("color","red");
        });
     });


#スライドショー
　　スライドショーは、同じ場所で画像が切り替わる機能
　　jQueryでスライドショーを作るには一般的に、プラグインと呼ばれる無料のツールを使用する。
　　①BxsliderのコードをHTMLに貼り付ける
　　②HTML上にHTMLコードを書く
　　③HTML上にJavaScriptのコードを書く

#チェックボックス(#checkbox)にチェックが入ったときのみ、削除ボタン(#delete)を活性化する方法
```javascript
       jQuery(function(){

		//.prop()でセレクタの属性やプロパティを取得できる

		//deleteボタンを非活性化
	     $("#delete").prop("disabled", true);
	    //checkboxがチェックされた時
	     $("#checkbox").on("change", function() {
	    	 //checkが1個以上あったら
	    	 if ($("#checkbox").prop("checked")) {
	    		 //deleteボタンを活性化
	    		 $("#delete").prop("disabled", false);
	    	 } else {
	    		 //それ以外はボタンを非活性
	    		 $("#delete").prop("disabled", true);
	    	 }
	     });
	});
```