SOURCE

$("ul li:first-child").hide();
$("#showBtn").dblclick(function() {
  $("ul li:first-child").show();
});
$("#hideBtn").click(function() {
  $("ul li:first-child").hide(1000);
});

$("[href]").hide();
$("#appearBtn").dblclick(function() {
  $("[href]").show(1000);
});
$("#disappearBtn").dblclick(function() {
  $("[href]").hide();
});

$("p").click(function() {
  $(this).hide();
});

$("#p1").mouseenter(function() {
  alert('您的鼠标移到了 id="p1" 的元素上!');
})

$("#againBtn").click(function() {
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
})

$("#flip").click(function() {
  $("#panel").slideDown("slow");
})

$("#testBtn").click(function() {
  $("div").animate({
    right: '150px'
  });
});

$("#liBtn").click(function() {
  $("#l1").css("color", "red")
    .slideUp(2000)
    .slideDown(2000);
})

$("#btn1").click(function() {
  alert("Text:" + $("#y1").text());
})

<h1>
  Heading
</h1>
<ul>
  <li>
    A1
  </li>
  <li>
    A2
  </li>
</ul>
<ul>
  <li>
    B1
  </li>
  <li>
    B2
  </li>
</ul>
<button id="showBtn">
  显示
</button>
<button id="hideBtn">
  隐藏
</button>
<br>
<br>
<a href="http://www.runoob.com/html/">
  html教程
</a>
<br>
<br>
<a href="http://www.runoob.com/css/">
  css教程
</a>
<br>
<br>
<button id="appearBtn">
  显示
</button>
<button id="disappearBtn">
  隐藏
</button>
<br>
<br>
<p>
  如果你点我，我就会消失。
</p>
<p>
  点我消失!
</p>
<p>
  点我也消失!
</p>
<p id="p1">
  鼠标指针进入此处，会看到弹窗。
</p>
<br>
<br>
<button id="againBtn">
  点击淡入 div 元素。
</button>
<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>
<br>
<div id="flip">
  点我滑下面板
</div>
<div id="panel">
  Hello world!
</div>
<br>
<button id="testBtn">
  开始动画
</button>
<p>
  默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative,
  fixed, 或 absolute!
</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
<br>
<br>
<br>
<br>
<br>
<p id="l1">
  菜鸟教程!!
</p>
<button id="liBtn">
  点我
</button>
<br>
<br>
<p id="y1">
  这是段落中的
  <b>
    粗体
  </b>
  文本。
</p>
<button id="btn1">
  显示文本
</button>
<button id="btn2">
  显示 HTML
</button>

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

#panel {
  padding: 50px;
  display: none;
}