jQuery：おさらい - Webデザインのこと、いろいろ

【1問目】
ブログ0619_まとめ_idセレクタ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_idセレクタ</title>
<!--「要素」を選ぶ-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('#test').on('click',function(){
			$(this).text('クリックされました');
		});
});
</script>
</head>
<body>
<p id="test"><a href="#">idセレクタ：ココをクリックすると文字が変更されます</a></p>
</body>
</html>

【2問目】
ブログ0619_まとめ_classセレクタ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_classセレクタ</title>
<!--「要素」を選ぶ-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('.test').on('click',function(){
			$(this).text('クリックされました');
		});
});
</script>
</head>
<body>
<p class="test"><a href="#">classセレクタ：ココをクリックすると文字が変更されます</a></p>
</body>
</html>

【3問目】
ブログ0619_まとめ_要素セレクタ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_要素セレクタ</title>
<!--text-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('p').on('click',function(){
			$(this).text('クリックされました');
		});
});
</script>
</head>
<body>
<p class="test"><a href="#">classセレクタ：ココをクリックすると文字が変更されます</a></p>
<div><a href="#">（これは、divタグ）ココをクリックしても何も起こりません</a></div>
<ul>
<li><a href="#">（これは、liタグ）ココをクリックしても何も起こりません</a></li>
</ul>
</body>
</html>

【4問目】
ブログ0619_まとめ_子孫セレクタ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_子孫セレクタ</title>
<!--text-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('div p').on('click',function(){
			$(this).text('クリックされました');
		});
});
</script>
</head>
<body>
<div><p><a href="#">（divの中のpタグ）ココをクリックすると文字が変わります</a></p></div>
<p class="test"><a href="#">（これは、pタグ）ココをクリックしても何も起こりません</a></p>
</body>
</html>

【5問目】
ブログ0619_まとめ_クリックイベント

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_クリックイベント</title>
<!--「実行タイミング」を選ぶ-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('p').on('click',function(){
			$(this).text('クリックされました');
		});
});
</script>
</head>
<body>
<p><a href="#">ココをクリックすると文字が変更されます</a></p>
</body>
</html>

【6問目】
ブログ0619_まとめ_マウスオーバーイベント

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_マウスオーバーイベント</title>
<!--onmouseover-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('p').on('mouseover',function(){
			$(this).text('マウスオーバーしました');
		});
});
</script>
</head>

<body>
</body><body>
<p><a href="#">ココにマウスを乗せると文字が変更されます</a></p>
</body>
</html>

【7問目】
ブログ0619_まとめ_マウスアウトイベント

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_マウスアウトイベント</title>
<!--onmouseout-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('p').on('mouseout',function(){
			$(this).text('マウスアウトしました');
		});
});
</script>
</head>
<body>
<p><a href="#">ココからマウスを外すと文字が変更されます</a></p>
</body>
</html>

【8問目】
ブログ0619_まとめ_テキストボックスの色を変更する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_テキストボックスの色を変更する</title>
<!--実行する処理を書く-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('input').on('focus',function(){
			$('input').css('background-color','#ff0')
		}).on('blur',function(){
			$('input').css('background-color','#fff')
		});
});
</script>
<style>
p { cursor: pointer; }
input {
  width: 50%;
  height: 30px;
}
</style>
</head>
<body>
<p><input type="text" value="フォーカスすると黄色になって、外すと元に戻ります"></p>
</body>
</html>

【9問目】
ブログ0619_まとめ_マウスオーバーでdivの背景色を変更する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_マウスオーバーでdivの背景色を変更する</title>
<!--実行する処理を書く-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('#bg01').on('mouseover',function(){
			$(this).css('background-color','#777');
		});
		
		$('#bg02').on('mouseover',function(){
			$(this).css('background-color','#999');
		});
		
		$('#bg03').on('mouseover',function(){
			$(this).css('background-color','#ccc');
		});
		
		$('#bg04').on('mouseover',function(){
			$(this).css('background-color','#eee');
		});
});
</script>
<style>
div {
	cursor: pointer;
	display: inline-bloclk;
	padding: 18px;
	margin: 10px;
	border: 1px solid #ccc;
	}
</style>
</head>
<body>
<div id="bg01">01</div>
<div id="bg02">02</div>
<div id="bg03">03</div>
<div id="bg04">04</div>
</body>
</html>

【10問目】
ブログ0619_まとめ_マウスオーバーでdivをフェードアウトする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_マウスオーバーでdivをフェードアウトする</title>
<!--実行する処理を書く-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('#bg01').on('mouseover',function(){
			$(this).fadeOut('slow');		
		});
});
</script>
<style>
div {
	cursor: pointer;
	display: inline-block;
	padding: 18px;
	margin: 10px;
	border: 1px solid #ccc;
	}
</style>
</head>
<body>
<div id="bg01">マウスオーバーするとフェードアウトします</div>
</body>
</html>

【11問目】
ブログ0619_まとめ_クリックで新しいdivを作り出す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_クリックで新しいdivを作り出す</title>
<!--実行する処理を書く-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('p').on('click',function(){
			$('p').after('<div>test</div>');
		});
});
</script>
<style>
div {
	cursor: pointer;
	display: inline-block;
	padding: 18px;
	margin: 10px;
	border: 1px solid #ccc;
}
</style>
</head>
<body>
<p><a href="#">ココをクリックすると新しいdivが作られます</a></p>
</body>
</html>

【12問目】
ブログ0619_まとめ_クリックでdivの幅と高さを変更する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_クリックでdivの幅と高さを変更する</title>
<!--実行する処理を書く-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('div').on('click',function(){
			$(this).css('width','40px').css('height','40px');
		});
});
</script>
<style>
div {
	cursor: pointer;
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 18px;
	margin: 10px;
	border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="bg01">01</div>
<div id="bg02">02</div>
<div id="bg03">03</div>
<div id="bg04">04</div>
</body></html>

【13問目】
ブログ0619_まとめ_クリックでclassの付け替えをする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ブログ0619_まとめ_クリックでclassの付け替えをする</title>
<!--実行する処理を書く-->
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){  //ページが開いたら
		$('p').on('click',function(){
			if($(this).hasClass('on')){  //hasClass→「あったら」（検証）
				$(this).removeClass('on');
				$('a',this).text('ココをクリックすると「on」というクラスがつきます')
			} else {
				$(this).addClass('on');
				$('a',this).text('「on」というclassがつきました。もう一度クリックすると元に戻ります')
			}				
		});
});
</script>
<style>
.on {
	background: #ccc;
}
</style>
</head>
<body>
<p><a href="#">ココをクリックすると「on」というclassがつきます</a></p>
</body>
</html>