torazuka/element-id-class.html

## element-id-class.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>element，id，classの指定</title>
        <script type="text/javascript" src="../scripts/jquery.js"></script>
        <script>
            $(document).ready(function() {
                $("button").click(function() {
                    alert('ボタンクリック。');
                });
                $("#hoge").click(function() {
                    alert('hogeクリック。');
                });
                $(".cat").click(function() {
                    alert('ぬこクリック。');
                });
                $("#mike").click(function() {
                    alert('みけぬこクリック。');
                });
            });
        </script>
    </head>
    <body>
        <h1>element，id，classの指定</h1>
        <h2>ボタンたち</h2>
        <h3>クラスに属さないボタン</h3>
        <button type="button" id="hoge">id:hogeボタン</button>
        <h3>catクラスのボタン</h3>
        <button type="button" class="cat" id="shiro">id:shiroボタン</button>
        <button type="button" class="cat" id="kuro">id:kuroボタン</button>
        <button type="button" class="cat" id="mike">id:mikeボタン</button>
        <h2>テスト</h2>
        <p>mikeボタンを押したときだけ、アラートが3つ出る。element:button、class:cat、id:mike </p>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>element，id，classの指定</title>
	<script type="text/javascript" src="../scripts/jquery.js"></script>
	<script>
	$(document).ready(function() {
	$("button").click(function() {
	alert('ボタンクリック。');
	});
	$("#hoge").click(function() {
	alert('hogeクリック。');
	});
	$(".cat").click(function() {
	alert('ぬこクリック。');
	});
	$("#mike").click(function() {
	alert('みけぬこクリック。');
	});
	});
	</script>
	</head>
	<body>
	<h1>element，id，classの指定</h1>
	<h2>ボタンたち</h2>
	<h3>クラスに属さないボタン</h3>
	<button type="button" id="hoge">id:hogeボタン</button>
	<h3>catクラスのボタン</h3>
	<button type="button" class="cat" id="shiro">id:shiroボタン</button>
	<button type="button" class="cat" id="kuro">id:kuroボタン</button>
	<button type="button" class="cat" id="mike">id:mikeボタン</button>
	<h2>テスト</h2>
	<p>mikeボタンを押したときだけ、アラートが3つ出る。element:button、class:cat、id:mike </p>
	</body>
	</html>