SOURCE

$(document).ready(function(){
  $("#Hide").click(function(){
    $("p:first").hide("slow",function(){//隐藏第一个p元素
      alert("段落现在被隐藏了");
    });
  });
});
$("ul li:first-child").hide();//隐藏所有ul元素的第一个li元素
$("#showBtn").dblclick(function(){//双击触发
  $("ul li:first-child").show();
  });
$("#hideBtn").click(function(){//单击触发
  $("ul li:first-child").hide();
  });
  //鼠标停留粉色
$("p").mouseenter(function(){
  $("p").css("background-color","pink");
});
//鼠标离开白色
$("p").mouseleave(function(){
  $("p").css("background-color","white");
});
//鼠标在该段落上按下
$("p").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
//鼠标在段落上松开
$("p").mouseup(function(){
    alert("鼠标在段落上松开。");
});

$(document).ready(function(){
    $("#leave").hover(
		function(){
			alert("你进入了 h3!");
		},
		function(){
			alert("拜拜! 现在你离开了 h3!");
		}
    )
});

$(document).ready(function(){
  $("input").focus(function(){//当元素获得焦点时，发生 focus 事件
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){//当元素失去焦点时，发生 blur 事件。
    $(this).css("background-color","#ffffff");
  });
});
$(document).ready(function(){//设置内容 - text()、html() 以及 val()
  $("#btn5").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn6").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn7").click(function(){
    $("#test3").val("RUNOOB");
  });
});
$(document).ready(function(){//通过jQuery text(),val()和 html()方法来获得内容
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
   $("#btn3").click(function(){
    alert("值为: " + $("#test").val());
  });
   $("#btn4").click(function(){//显示href的属性
    alert($("#runoob").attr("href"));
  });
});
$(document).ready(function(){//利用fadeToggle()控制淡入淡出
	$("#fadeToggle").click(function(){
		$("#div1").fadeToggle();
		$("#div2").fadeToggle("slow");
		$("#div3").fadeToggle(3000);
	});
});
$(document).ready(function(){//分别利用两个按钮实现淡入淡出(淡入)
  $("#fadeIn").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
 $("#fadeOut").click(function(){//淡出
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
    $("#fadeTo").click(function(){//点击让颜色变淡
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});


$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle(5000);//显示或隐藏面板
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});


$(document).ready(function(){//开始动画移动
  $("#begin").click(function(){
    var div=$("#div4"); 
      div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
    $("#Begin").click(function(){//开始动画移动变大
    $("#div4").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'+=150px'
    });
  });
   $("#big").click(function(){//开始动画变大变小变换
    var div=$("#div4");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});

<h1>heading</h1>
<button id="Hide">隐藏</button>
<p>我们段落内容，点击“隐藏”按钮我就会消失</p>
<p>paragraph 2</p>
<hr>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button>
<hr>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn5">设置文本</button>
<button id="btn6">设置 HTML</button>
<button id="btn7">设置值</button>
<hr>
<h3 id=”leave“>你来了</h3>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
<hr>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<br>
名称: <input type="text" id="test" value="">
<button id="btn3">显示值</button>
<br>
<a href="http://www.runoob.com" id="runoob">菜鸟教程</a>
<button id="btn4">显示href的属性</button>
<hr>
<h5>以下实例演示了 fade使用了不同参数的效果。</h5>
<button id="fadeToggle">点击淡入/淡出 div 元素。</button>
<br>
<button id="fadeIn">点击淡入 div 元素。</button>
<button id="fadeOut">点击淡出 div 元素。</button>
<button id="fadeTo">点击让颜色变淡</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>
<button id="stop">停止滑动</button>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!<br>nice to meet you</div>
<button id="begin">开始动画移动</button>
<button id="Begin">开始动画移动变大</button>
<button id="big">开始动画变大变小</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div id="div4" style="background:pink;height:150px;width:200px;position:absolute;" >
hello</div>

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