jQuery 是一个 JavaScript 库。jQuery 库可以通过一行简单的标记被添加到网页中。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script>
下面开始展示jQuery 效果：隐藏、显示、切换，滑动，淡入淡出，以及动画。
由一个html文件,一个js文件,一个css文件实现。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习</title>
<script src="js/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script src="js/test.js"></script>
</head>
<body >
<h1 align="center">jQuery 效果练习</h1>
姓名:
<input id="name" type="text" /><br /><br />
<img src="images/aa.png" />
<button id="b1">显示/隐藏蛋糕</button>
<button id="b2">淡入/淡出蛋糕</button>
<button id="b3">自定义修改</button>
<button id="b4">多个动作链接起来</button><br /><br /><br />
<div id="div1">向上/向下滑动</div>
<div id="div2">生活需要美好的想象！</div>
</body>
</html>
$(document).ready(function() { $("input").focus(function() {// $(this).css("background-color", "#cccccc");//当某个表单输入域获得焦点时调用 }); $("input").blur(function() {// $(this).css("background-color", "#ffffff");//当某个表单输入域失去焦点时调用 }); $("#b").click(function() { alert($("#name").val() + "小主，你好！"); // 取得Form中Input的内容 }); $("#b1").click(function() {// 交替显示和隐藏内容 $("img").toggle("slow", function() { alert("操作已完成！");//先操作后提示 }); }); $("#b2").click(function() { $("img").fadeToggle();// 交替显示的淡入淡出效果 }); $("#b3").click(function() {//自定义修改 $("img").animate({ height : '50px', width : '50px' }); $("img").animate({ height : '100px', width : '100px' });$("img").animate({ height : '150px', width : '150px' }); }); $("#b4").click(function(){ $("img").slideUp(2000).slideDown(2000);//多个动作即方法链接起来 }); $("#div1").click(function() {// 交替显示向上向下滑动动画效果 $("#div2").slideToggle(); }); });
#div1, #div2 { padding: 5px; text-align: center; background-color: #00FFFF; border: solid 1px #00FF00; height : 20px; width : 100px; } #div2{ display: none; height: 70px; width : 600px; background-image: url(../images/d.png); } button { background-color: #00FFFF; }
其实还有很多方法可以制作动画效果，例如：hide()和show()可以用来显示和隐藏内容。
toggle()方法，可以实现交替显示和隐藏内容
fadeIn()和fadeOut()实现显示的淡入淡出效果
fadeToggle() 交替进行fadeIn()和fadeOut()
fadeTo() 实现淡化到指定的透明度
slideDown()实现向下滑动动画效果
slideUp()实现向上滑动动画效果
slideToggle()实现交替显示向上向下滑动动画效果