SOURCE

$("h1").css("text-align","center")
$("p").show() 
$("h1").css("background-color","yellow");
$("p:last").hide() 
$("ul li:first-child").hide() 
  $("#showBtn").click(function(){
  $("ul li:first-child").toggle(1000)
});


  $("#ward").mouseenter(function(){
    alert('您的鼠标移到了 id="ward" 的元素上!');
  });
  $("#divBtn").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  }); 
$("#flip").click(function(){
$("#panel").slideToggle(500);
  });

<h1 id="ward"> Heading</h1>
<p>paragraph</p>
<p>paragraph2</p>
<ul>
  <li>a1</li>
   <li>a2</li>
</ul>
<ul>
  <li>a3</li>
   <li>a4</li>
</ul>
<button id="showBtn">显示/隐藏</button>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button id="divBtn">点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">于二狗就是于恒洋</div>

#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}