相信很多java程式員用過jQuery，知道jQuery使用起來很便利，但， 熟悉使用 jQuery是個什麼概念呢？
今天，總結一下 jQuery的相關知識，目的，很簡單，看看熟練運用 jQuery這個要求具體怎麼才能達標。
學習 jQuery，W3school是個好去處。
一、 jQuery是什麼
jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。
jQuery 很容易學習。
二、jQuery能做什麼
jQuery 是一個 JavaScript 函數庫。
jQuery 庫包含以下特性：
HTML 元素選取
HTML 元素操作
CSS 操作
HTML 事件函數
JavaScript 特效和動畫
HTML DOM 遍曆和修改
AJAX
Utilities
三、如何使用jQuery
通過一行簡單的標記被添加到網頁中
例如：
3.1 jQuery 選取器
$("p").css("background-color","red");//把所有 p 元素的背景顏色更改為紅色
3.2 jQuery 事件
<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide();//隱藏所有 <p> 元素 });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button>Click me</button></body></html>
3.3 jQuery 效果
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });});</script></head><body><p id="p1">如果點擊“隱藏”按鈕，我就會消失。</p><button id="hide" type="button">隱藏</button><button id="show" type="button">顯示</button></body></html>
3.4 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">自訂動畫</a></p><div id="box"style="background:#98bf21;height:100px;width:100px;position:relative"></div> </body></html>
3.5 jQuery Callback 函數
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(1000,function(){ alert("The paragraph is now hidden"); }); });});</script></head><body><button type="button">Hide</button><p>This is a paragraph with little content.</p></body></html>
3.6 jQuery HTML 操作
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").html("W3School"); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">更改標籤內容（innerHtml）</button></body></html>
3.7 jQuery AJAX 函數
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>
四、如何學習jQuery
看了上面的例子之後，應該清楚了吧，jQuery就是讓開發人員寫的更少，而做的更多。
如何學習，很簡單，首先是想到要實現什麼效果，然後查詢jQuery 參考手冊 ，然後就去實現。
有空的時候，可以自己實現實現更多的效果。
慢慢的，就熟悉了，也就能熟練運用jQuery。
五、後記
任何一種語言、架構、開發模式、開發組件，對於一個程式員來說，都可以視之為圖書館裡陳列的書籍。選擇喜歡的，然後閱讀，然後整理，然後運用，最後，就是自己的知識了，懂的越多，能夠創造的也就越多了。
dml@2012.12.4
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
