html-basic.html
==================
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is title</title>
<meta charset="utf-8">
<meta name="Keywords" content="HTML,CSS,JavaScript">
<meta name="Description" content="This is desciption">
<link type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$('h1').click(function()
{
alert('h1 fire!'); //คลิกแล้วขึ้น alert h1 fire
$(this).hide(); //คลิกแล้วหาย
});
});
</script>
</head>
<body>
<h1>This is a Heading</h1>
<hr>
<p> This is a <b>paragraph</b></p>
</body>
</html>
--------------------------------------------------------------
รูปที่ 12-13
-------------------------------------
html-basic.html
-------------------------------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>This is title</title>
<meta charset="utf-8">
<meta name="Keywords" content="HTML,CSS,JavaScript">
<meta name="Description" content="This is desciption">
<link type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<h1>This is a Heading</h1>
<hr>
<p> This is a <b>paragraph</b></p>
<button id="btn-spoiler">Spoiler</button>
<div id="secret-content">
<h1>Hello Meow!!</h1>
</div>
</body>
</html>
=============================
myscript.js
---------------------------------
$(function() {
$('#secret-content').hide();
$('#btn-spoiler').click(function()
{
$('#secret-content').toggle(2000);
});
});
//กด spoiler แล้ว Hello Meow!! ค่อย ๆ ขึ้น ตามระยะเวลาที่หน่วง toggle(2000)
------------------------
รูปที่ 14-15
