jQuery 學習筆記（一）——jQuery簡介、jQuery語法
內容選自w3cschool教程
一句話描述JQuery：jQuery 是一個 JavaScript 庫。jQuery 極大地簡化了 JavaScript 程式設計。
一. jQuery簡介
jQuery 庫可以通過一行簡單的標記被新增到網頁中。
1. jQuery庫的特性
jQuery是一個JavaScript函式庫。
jQuery庫包含以下特性：
HTML 元素選取 HTML 元素操作 CSS 操作 HTML 事件函式 JavaScript 特效和動畫 HTML DOM 遍歷和修改AJAX Utilities2. 向頁面新增jQuery
jQuery 庫位於一個 JavaScript 檔案中，其中包含了所有的 jQuery 函式。
可以通過下面的標記把 jQuery 新增到網頁中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
請注意，<script> 標籤應該位於頁面的 <head> 部分。
3. 基礎的jQuery例項
下面的例子演示了 jQuery 的 hide() 函式，隱藏了 HTML 文件中所有的 <p> 元素。
例項：
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
4. 下載 jQuery
共有兩個版本的 jQuery 可供下載：一份是精簡過的，另一份是未壓縮的（供除錯或閱讀）。
5. 庫的替代
Google 和 Microsoft 對 jQuery 的支援都很好。
如果您不願意在自己的計算機上存放 jQuery 庫，那麼可以從 Google 或 Microsoft 載入 CDN jQuery 核心檔案。
使用 Google 的 CDN：
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
使用 Microsoft的 CDN：
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
二. jQuery語法
通過 jQuery，您可以選取（查詢，query） HTML 元素，並對它們執行“操作”（actions）。
1. jQuery 語法例項：
（1）$(this).hide() - 隱藏當前元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>（2）$("#test").hide() - 隱藏所有 id="test" 的元素
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
（3）$("p").hide() - 隱藏所有 <p> 元素。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html> （4）$(".test").hide() - 隱藏所有 class="test" 的段落
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
jQuery 語法是為 HTML 元素的選取編制的，可以對元素執行某些操作。
基礎語法是：$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）“查詢”和“查詢” HTML 元素
- jQuery 的 action() 執行對元素的操作
提示：jQuery 使用的語法是 XPath 與
CSS 選擇器語法的組合。
2. 文件就緒函式
例項中的所有 jQuery 函式位於一個 document ready 函式中：
$(document).ready(function(){
--- jQuery functions go here ----
});
這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼。
如果在文件沒有完全載入之前就執行函式，操作可能失敗。下面是兩個具體的例子：
- 試圖隱藏一個不存在的元素
- 獲得未完全載入的影象的大小