jQuery
/
css.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.dv{
				width: 500px;
				height:500px;
				background-color: green;
				position: absolute;
			}

			.bk{
				background-color: red;
			}
			.bg{
				border:3px solid #000;
			}
			.bn{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<p>段落1</p>
		<p>段落2</p>
		<p>段落3</p>
		<div id="aa"><p>456</p></div>
		<p>段落4</p>
		<p>段落5</p>
		<p>段落6</p>
		<div class="dv" id="d1"></div>
		<input type="button" value="切换" id="btn"/>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("#btn").click(function(){
			$("#d1").toggleClass("bk");
			/*$("#d1").addClass("bn bg");
			$("#d1").removeClass("bg"); */
		});
		/*$("#aa+p").css("color","red");
		$("#aa-p").css("background","yellow");
		$("#aa").siblings().css("font-size","34px");*/
		/*$("#aa").next().css("color","red");
		$("#aa").prev().css("background","yellow");
		$("#aa").siblings().css("font-size","34px");*/
		$("#d1").hide();
		$("#btn").click(function(){
				//$("#d1").fadeOut();
				//$("#d1").slideDown();
				//$("#d1").fadeTo();
				$("#d1").slideToggle();
				$("#d1").animate({left:'500px'});
		})
		/*$("#d1").fadeIn();
		$("button").click(function(){
			$("#d1").hide(2200);
		});*/
	</script>
	<!--<input type="button" id="hide" value="隐藏"/> -->
	</body>
</html>