jQuery 備忘録

##参考サイト
https://prog-8.com

##jQueryの読み込み
```html
<head>
<title>sample</title>
 <!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
```

##要素の非表示
###\<H1\>を隠す例
```html
  <script>
  $(function() {
  $('h1').hide();
  });
  </script>
```
###アニメーション
|コード|説明|備考|
|----|----|----|
|$('h1').show();|表示|CSSのdisplay: none;とセットで多用。|
|$('h1').fadeIn();|フェードイン||
|$('h1').fadeOut();|フェードアウト||
|$('h1').slideUp();|スライドアップ||
|$('h1').slideDown();|スライドダウン||
|$('h1').fadeOut(1500);|時間指定|1500ミリ秒(1.5秒)に指定|
|$('h1').slideDown("Slow");|ゆっくり||

##idやクラスに操作
```html
<!DOCTYPE html>
<html>
<head>
  <title>jQuery_idやクラスへの操作</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <!-- <h1>タグに"title"というidをつける -->
  <h1 id="title">jQueryの学習項目</h1>
  <!-- <div>タグに"lesson-item"というclassをつける -->
  <div class="lesson-item">要素を隠す</div>
  
  <script>
    $(function() {
    //「#title」を3秒かけて隠す
    $("#title").slideUp(3000);
    //「.lesson-item」を3秒かけて隠す
    $(".lesson-item").fadeOut(3000);
   });
  </script>

</body>
</html>
```
###うまくいかない時
|ポイント|解説|備考|
|----|----|----|
| \$("#title"),$(".lesson-item")|「""(ダブルクォーテーション)」を忘れていないか||

##クリックイベント
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery_クリックイベント</title>
  <style>
	.btn {
		display: inline-block;
		cursor: pointer;
		padding: 12px 80px;
		background-color: #5dca88;
		box-shadow: 0px 5px #279C56;
		border-radius: 3px;
		color: #fff;
		font-size: 12px;
	}

	.btn:active {
		position: relative;
		top: 5px;
		box-shadow: none;
	}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<!-- ボタン -->
	<div class="btn" id="btn-text">説明を隠す</div>
	<!-- 隠すテキスト -->
	<h1 id="text">Hello, World!</h1>
	<script>
		$(function() {
			//「btn-text」へクリックイベントを設定
			$('#btn-text').click(function() {
				$('#text').slideUp();
			});
		});
	</script>
</body>
</html>
```

##CSSメソッド
###クリックすると文字のスタイルが変わる例
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_CSSメソッド</title>
	<style>
		.btn {
		  display: inline-block;
		  cursor: pointer;
		  padding: 12px 80px;
		  background-color: #5dca88;
		  box-shadow: 0px 5px #279C56;
		  border-radius: 3px;
		  color: #fff;
		  font-size: 12px;
		}

		.btn:active {
		  position: relative;
		  top: 5px;
		  box-shadow: none;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- ボタン -->
<div class="btn" id="change-css">CSSを変更</div>

<h1 id="text">Hello, World!</h1>

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

</body>
</html>
```
##HTMLメソッド
###文字列の変更とリンクの設定
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_HTMLメソッド_文字列の変更とリンクの設定</title>
	<style>
		.btn{
		  display: inline-block;
		  cursor: pointer;
		  padding: 8px 30px;
		  background-color: #5dca88;
		  box-shadow: 0px 5px #279C56;
		  border-radius: 3px;
		  color: #fff;
		  font-size: 10px;
		}

		.btn:active{
		  position: relative;
		  top: 5px;
		  box-shadow: none;
		}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
	<!-- ボタン1 -->
	<div id="change-text" class="btn">文字列を変更</div>
	<!-- ボタン2 -->
	<div id="change-html" class="btn">HTMLを変更</div>
	<!-- 変更テキスト -->
	<h1 id="text">Hello, World!</h1>
	<script>
		$(function() {
			//clickイベントを作成 テキストを変更
			$('#change-text').click(function() {
				$('#text').text('テキストを変更しました。');
			});
			//clickイベントを作成
			$('#change-html').click(function() {
				$('#text').html('<a href="https://www.google.com">google検索</a>');
			});
		});
	</script>
</body>
</html>

```