1.jQuery 滑动函数 - slideDown, slideUp, slideToggle（最后一个我喜欢，之前认为很神秘的东西，原来就是它）
<html><head>
<script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){$(".flip").click(function(){ $(".panel").slideToggle("slow"); });});</script> <style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body> <div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School，你可以找到你所需要的所有网站建设教程。</p></div> <p class="flip">请点击这里</p> </body></html>2.jQuery 自定义动画
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); });});</script> </head> <body>
<p><a href="#" id="start">Start Animation</a></p>
<div id="box"style="background:#98bf21;height:100px;width:100px;position:relative"></div></body></html>3.
4.
5.设置控件的css
一个特色的例子：
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("div").click(function(){ $("#result").html($(this).css("background-color")); });});</script></head>
<body><div style="width:100px;height:100px;background:#ff0000"></div><p id="result">Click in the box</p></body></html>6.jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#b01").click(function(){ $('#myDiv').load('/jquery/test1.txt'); });});</script></head><body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div><button id="b01" type="button">改变内容</button>
</body></html>
$.ajax(options) 是低层级 AJAX 函数的语法。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $("#myDiv").html(htmlobj.responseText); });});</script></head><body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div><button id="b01" type="button">改变内容</button>
</body></html>
