SOURCE

//第一部分
$("#hidBtn").click(function(){
   $("ul li:first-child").hide();
  });
$("#showBtn").click(function(){
   $("ul li:first-child").show();
  });
//第二部分
$(document).ready(function(){
  $("tr:odd").css("background-color","yellow");
});
$(document).ready(function(){
  $("tr:even").css("background-color","green");
});
//第三部分

$(document).ready(function(){
  $("#d").click(function(){
    $("#p").slideDown(1000);
  });
  $("#stop").click(function(){
    $("#p").stop();
  });
});
//第四部分
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
$("#e").click(function(){
   $("div:last").hide();
  });

<h1>Heading</h1>
<p>pargraph</p>
<p>pargraph 2</p>
<ul>
  <li>a1</li>
  <li>a2</li>
</ul>
<ul>
  <li>b1</li>
  <li>b2</li>
</ul>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button>
<hr>
<table>
  <tr>
    <td>名称</td>
    <td>单价</td>
  </tr>
  <tr>
    <td>原味奶茶</td>
    <td>8</td>
  </tr>
  <tr>
    <td>布丁奶茶</td>
    <td>8</td>
  </tr>
  <tr>
    <td>蓝山咖啡</td>
    <td>10</td>
  </tr>
  <tr>
    <td>卡布奇诺</td>
    <td>12</td>
  </tr>
    <tr>
    <td>原味奶茶</td>
    <td>8</td>
  </tr>
  <tr>
    <td>布丁奶茶</td>
    <td>8</td>
  </tr>
  <tr>
    <td>蓝山咖啡</td>
    <td>10</td>
  </tr>
  <tr>
    <td>卡布奇诺</td>
    <td>12</td>
  </tr>
  </table>
<hr>
<button id="stop">stop</button>
<div id="d">点我呀</div>
<div id="p">我只会向下滑动。上不去</div>
<hr>
<button>点击淡入div元素</button><button id="e">隐藏最后一个元素</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>

p{color:red;}
table,td{border:1px solid red;
text-align:center;}
#d,#p{background-color:pink;
text-align:center;
padding:2px;
}
#p{padding:50px;
	display:none;}