jquery中html、before、after、append、prepend应用

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jquery_slip.html</title><!--一个标签写错网页什么也不显示，查看网页源码格式明显不对-->
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("div.show").click(function(){
					$("div.content").slideToggle("slow");//不写默认为normal，后面函数一致
					// $("div.show").slideUp();
				});
			});
		</script>

		<script type="text/javascript">
		//注意选择标签不能忘记加""，否则动作不起作用
			$(document).ready(function(){
				//hide and show function test
				$("#hide_button").click(function(){
					$("#hide_show_content").hide("slow",function(){
						alert("The content is hided.");
					});					
				});
				$("#show_button").click(function(){
					$("#hide_show_content").show("slow",function(){
						alert("The content is showed.");
					});
				});

				//slideUp and slideDown function test
				$("button.slideUp").click(function(){
					$("p.slide_content").slideUp("slow");
				});
				$("button.slideDown").click(function(){
					$("p.slide_content").slideDown("slow");
				});

				//animate and reset test
				$("button#animate").click(function(){//可以直接用标签名调用id
					$("#box").animate({height:"30px"});
				});
				$("#reset").click(function(){
					$("#box").animate({height:"10px"});
				});

				//html application,其中可以加入内容页可以直接加入html标签内容
				$(".html").click(function(){
					$(".htmlContent").html("The html content.");
				});
				$(".htmlreset").click(function(){
					$(".htmlContent").html("html application into jquery.");
				});
				$(".htmlappend").click(function(){
					$(".htmlContent").append("append content.");
				});
				$(".htmlafter").click(function(){
					$(".htmlContent").after("after content.");
					//这里不能直接用函数
					// $("html.after").after(function(){
					// 	alert("You have add content after html content.");
					// });
				});
				$(this).click(function(){//也可以直接用this
					$(".htmlContent").before("before content",function(){
						alert("You have add content before html content.");
					});
				});
				$(".htmlprepend").click(function(){
					$(".htmlContent").prepend("html prepend content.");
				});
			});
		</script>
	</head>
	<body>
		<div class="content">
			<p>We are friends.</p>
			<p>We can do everything if you want. Do it by yourself.</p>
			<p>Don't tell it can not be done.</p>
		</div>
		<div class="show">
			<p>click here to show content.</p>
		</div>
		<br>
		<div id="hide_show">
			<p id="hide_show_content">There is the function hide and show test.</p>
			<button type="button" id="hide_button">hide</button>
			<button type="button" id="show_button">show</button>
		</div>
		<br>
		<div>
			<p class="slide_content">There is the function slipUp and slipDown test.</p>
			<button class="slideUp" type="button" >slideUp</button>
			<button class="slideDown" type="button">slideDown</button>
		</div>
		<br>
		<div id="box" style="background:#EF23E1;height=10px;width=10px;margin=6px;"></div>
		<button id="animate" type="button">animate</button>
		<button id="reset" type="button">reset</button>
		<br>
		<div>
			<p class="htmlContent">html application into jquery.</p>
			<button type="button" class="html">htmltest</button>
			<button type="button" class="htmlreset">htmlreset</button>
			<button type="button" class="htmlappend">htmlappend</button>
			<button type="button" class="htmlafter">htmlafter</button>
			<button type="button" class="htmlbefore">htmlbefore</button>
			<button type="button" class="htmlprepend">htmlprepend</button>
		</div>
	</body>
</html>