##参考サイト
https://prog-8.com
##jQueryの読み込み
<head>
<title>sample</title>
<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
##要素の非表示
###<H1>を隠す例
<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やクラスに操作
<!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") | 「""(ダブルクォーテーション)」を忘れていないか |
##クリックイベント
<!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メソッド
###クリックすると文字のスタイルが変わる例
<!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メソッド
###文字列の変更とリンクの設定
<!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>