首先要匯入JQuery的包檔案，可以在這裡
下載。
然後在JSP中引入包：
<mce:script src="lib/jquery-1.5.2.js" mce_src="lib/jquery-1.5.2.js" type="text/javascript"></mce:script>
接下來再引入自己的js：
<mce:script src="my.js" mce_src="my.js" type="text/javascript"></mce:script>
我的my.js檔案內容如下：
$(document).ready(function() {<br /> $("<div><p>Hello</p></div>").appendTo("body");</p><p> $("#stop").css("background","yellow");</p><p> $("li").toggle(<br /> function () {<br /> $(this).css({"list-style-type":"disc", "color":"blue"});<br /> },<br /> function () {<br /> $(this).css({"list-style-type":"disc", "color":"red"});<br /> },<br /> function () {<br /> $(this).css({"list-style-type":"disc", "color":"gray"});<br /> }<br /> );<br />});
測試頁面MyJQueryTest.html的內容如下：
<html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>My jQuery Test</title><br /><mce:script src="lib/jquery-1.5.2.js" mce_src="lib/jquery-1.5.2.js" type="text/javascript"></mce:script><br /><mce:script src="my.js" mce_src="my.js" type="text/javascript"></mce:script><br /></head><br /><body><br /><button>Change colors</button><br /><br/><br /><span>span</span><br /><div>div1</div><br /><div>div2</div><br /><div>div3</div><br /><div>div4</div><br /><div id="stop">Stop here</div><br /><div>div6</div><br /><div>div7</div><br /><div>div8</div><br /><br/><br /><ul><br /> <li>li1</li><br /> <li>li2</li><br /> <li>li3</li><br /> <li>li4</li><br /> <li>li5</li><br /></ul><br /></body><br /></html>
運行效果如下：
前：
後：
最後值得注意的是，JQuery的包檔案的引入必須在js引入的前面，不然JQuery沒有效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
