JavaScript中所有不聲明而直接使用的變量均為全局量，定義和使用函數時要注意閉包問題，一般將函數定義放到一個閉包中，變量均聲明為局部變量。如
(funciton(){
var obj;//局部變量
v1 = 123;//全局變量
});
jQuery庫添加了三個全局變量：jQuery，$兩個相同，其實是jQuery.fn.init函數的對象
添加jQuery庫可以使用Google CDN內容分發網絡（速度更快，可以根據使用的地點選擇最近的服務器），可以加載其提供的jQuery.js，本地服務器不需要保存jQuery庫源碼。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jQuery","1.7.1")
</script>
jQuery用法
一、jQuery對象的方法：
var o = jQuery();
o.method();
二、jQuery自身方法：jQuery核心函數，Ajax，工具函數都是該用法
jQuery.method();
jQuery核心函數，
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery選擇器練習</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
//jQuery的文檔加載後執行JavaScript方法
//jQuery(function($){});全局使用jQuery，傳遞$參數，保證引用多個JavaScript庫（如，Prototype）時不出變量沖突
jQuery(function($) {
//===================DOM對象與JQuery包裝集===================
//通過document.getElementById()，document.getElementsByName()及document.getElementsByTagName()等取的就是DOM對象或DOM對象集，前者取的是對象，後者取得DOM對象集
var dom_obj = document.getElementById("text11");
var dom_obj = document.getElementsByName("text11")[0];
//var dom_obj = document.all["text11"];//在Quirks Mode下Firefox才有作用
//如果要使用JQuery提供的函數首先要構造JQuery包裝集，通過$()返回的即是JQuery包裝集（jQuery自定義的對象）
/*
* jQuery包裝集“$”與"jQuery"一樣都是調用如下函數返回
* "$===jQuery =" function (selector, context) {
* return new jQuery.fn.init(selector, context, rootjQuery);
* }
*/
var jquery_obj = $("#text11");
//返回是jQuery包裝集對象，不是DOM對象
//===================JQuery包裝集與DOM對象互相轉換===================
//DOM對象不能使用JQuery屬性方法，但DOM對象可以通過$()（這是jQuery一個核心函數）轉換成JQuery包裝集
var htmlStr = $(document.getElementById("text11")).val();
//JQuery包裝集可以使用部分DOM對象的屬性方法如.length，但也有個別屬性方法不能使用如.value，可以獲取對應DOM對象後進行操作
//要想根據jQuery包裝集對象得到DOM對象，有以下方法
var dom_obj = $("#text11")[0];
var dom_obj = $("#text11").get(0);
var dom_obj = $("#text11").get()[0];
var text11_dom = $("#text11")[0];
//在each循環時或觸發事件時的this也是DOM對象
$("#text11").click(function() {
this.value = "";
});
//===================$符號在JQuery中代表對JQuery對象的引用，JQuery的核心方法有四個===================
//jQuery(html[,ownerDocument]):根據HTML字符串動態創建Dom元素.
$("<div><p>Hello!</p></div>").appendTo("body");
//jQuery( elements ):將一個或多個Dom對象封裝為jQuery包裝集，就是上面的DOM對象與JQuery包裝集轉換
//jQuery( callback ):$(document).ready()的簡寫方式$(function(){ alert("Hello!");});
//JQuery(selector[,context]):在指定范圍內查找符合條件的JQuery包裝集，context為查找范圍，context可以是DOM對象集也可以是JQuery包裝集
//在所有tr標簽中查找id為text11元素的JQuery包裝集
var text11_query=$("#text11","tr");
//===================jQuery選擇器全解===================
//jQuery選擇器可以使用全部的CSS選擇器，以及XPath選擇器
//===================1. 基礎選擇器 Basics===================
//根據標簽名進行選擇
var input_query=$("input");
//根據id值選取
var text11_query=$("#text11");
//根據class值進行選取
var text11_query=$(".text11");
//同時選擇多個符合條件的JQuery包裝集，用","號分隔條件
var text_query=$("#text11,#text12");
//選擇所有DOM元素
var all_query=$("*");
//===================2.層次選擇器 Hierarchy===================
//獲取以tr標簽作為上下文的id值為text11的元素
var text11_query=$("tr #text11");
//獲取所有td標簽下的所有直接input子元素
var input_query=$("td > input");
//獲取所有id為text11元素的同級且緊靠的class為button11元素。text11與button11在地位上屬於同級關系
var button11_query=$("#text11 + .button11");
//獲取與id為text11元素同級，且處於後面的所有class為button11的元素
var button11_query=$("#text11~.button11");
//===================3.基本過濾器 Basic Filters===================
//相當於CSS選擇器中的偽類
//獲取第一個input元素
var input_query=$("input:first");
//獲取最後一個input元素
var input_query=$("input:last");
//獲取所有未被選中的input元素，僅對有checked屬性的元素有效
var input_query=$("input:not(:checked)");
//獲取所有input元素中偶數的元素，第一個input元素為1
var input_query=$("input:even");
//獲取所有input元素中奇數的元素，第一個input元素為1
var input_query=$("input:odd");
//查找所有input元素中索引為1的input元素，索引值從0算起
var input_query=$("input:eq(1)");
//查找所有input元素中索引大於0的input元素（不包含索引為0的元素）
var input_query=$("input:gt(0)");
//查找所有input元素中索引小於2的input元素（不包含索引為2的元素）
var input_query=$("input:lt(2)");
//獲取頁面所有標題元素，等價於$("h1, h2,h3,h4,h5,h6")
var h_query=$(":header");
//獲取所有正在執行動畫效果的元素
var animated_query=$(":animated");
//===================4. 內容過濾器 Content Filters===================
//查找所有html內容含有"你好世界！"的h1元素
var h1_query=$("h1:contains('你好世界！')");
//獲取所有不含子標簽或html內容為空的td元素
var td_query=$("td:empty");
//查找所有含有input子元素的td元素
var td_query=$("td:has(input)");
//查找所有含有子標簽或有html內容的td元素，與empty過濾器作用相反
var td_query=$("td:parent");
//===================5.可見性過濾器 Visibility Filters===================
//hidden查找所有不可見元素（如<script>標簽不可見），或者type為hidden的元素（對於使用visibility:hidden隱藏的元素不能獲取）
//查找使用type為hidden的input元素
var input_query=$("input:hidden");
//查找所有可見的input元素
var input_query=$("input:visible");
//===================6.屬性過濾器 Attribute Filters===================
//查找所有含有id屬性的input元素
var input_query=$("input[id]");
//查找name值為text11的input元素
var input_query=$("input[name='text11']");
//查找name值不等於text11的所有input元素
var input_query=$("input [name!='text11']");
//查找name值以text開頭的input元素
var input_query=$("input[name^='text']");
//查找name值以11結尾的所有input元素
var input_query=$("input[name$='11']");
//查找name值中含有ext的所有input元素
var input_query=$("input[name*='ext']");
//查找所有含有id屬性並且name值中含有ext的input元素
var input_query=$("input[id][name*='ext']");
//===================7.子元素過濾器 Child Filters===================
//查找父元素中子元素中排第2的input元素
//:eq(index)只匹配一個元素，而為:nth-child每一個父元素匹配子元素
//:nth-child從1開始的，而:eq()是從0算起。
var input_query=$("input:nth-child(2)");
//查找父元素中第一個子元素是input元素的所有input
var input_query=$("input:first-child");
//查找父元素中最後一個子元素是input元素的所有input
var input_query=$("input:last-child");
////查找父元素中子元素有且僅有一個是input元素的所有input
var input_query=$("input:only-child");
//===================8.表單選擇器 Forms===================
//查找所有input元素
var input_query=$(":input");
//查找所有文本框元素
var text_query=$(":text");
//查找所有密碼框元素
var password_query=$(":password");
//查找所有復選框
var checkbox_query=$(":checkbox");
//查找所有提交按鈕元素
var submit_query=$(":submit");
//查找所有圖像域元素
var image_query=$(":image");
//查找所有重置按鈕元素
var reset_query=$(":reset");
//查找所有按鈕元素
var button_query=$(":button");
//查找所有文件域元素
var file_query=$(":file");
//===================9.表單過濾器 Form Filters===================
//查找所有可用的input元素
var input_query=$(":input:enabled");
//查找所有不可用的input元素
var input_query=$("input:disabled");
//查找所有選中的單選復選框
var input_query=$("input:checked");
//查找所有選中的下拉框,該過濾器對於多選下拉框非常有用
//當多選時，可返回所有選中項的值
$("select").click(function(){
var option_query=$(":selected");
alert($(this).val());
})
});
</script>
</head>
<body>
<form name="form1" id="form1" class="form1" action="" method="post">
<table name="table1" id="table1" class="table1">
<tr name="tr1" id="tr1" class="tr1">
<td name="td11" id="td11" class="td11" nowrap>
<input type="text" name="text11" id="text11" class="text11" value="text11"/>
<input type="button" name="button11" id="button11" class="button11" value="button11"/>
<input type="button" name="button12" id="button12" class="button11" value="button12"/>
</td>
<td name="td12" id="td12" class="td12">
<input type="text" name="text12" id="text12" class="text12" value="text12"/>
<input type="hidden" name="hidden12" id="hidden12" class="hidden12" value="hidden12"/>
</td>
<td name="td13" id="td13" class="td13">
<input type="text" name="text13" id="text13" class="text13" value="text13"/>
</td>
</tr>
<tr name="tr2" id="tr2" class="tr2">
<td name="td21" id="td21" class="td21">
<input type="password" name="password21" id="password21" class="password21" value="password21"/>
<input type="radio" name="radio21" id="radio21" class="radio21" value="radio21" checked/>
<input type="checkbox" name="checkbox21" id="checkbox21" class="checkbox21" value="checkbox21" checked/>
</td>
<td name="td22" id="td22" class="td22" nowrap>
<input type="submit" name="submit22" id="submit22" class="submit22" value="submit22"/>
<input type="image" name="image22" id="image22" class="image22" value="image22"/>
<input type="reset" name="reset22" id="reset22" class="reset22" value="reset22"/>
</td>
<td name="td23" id="td23" class="td23">
<input type="file" name="file23" id="file23" class="file23" value="file23"/>
</td>
</tr>
<tr name="tr3" id="tr3" class="tr3">
<td name="td31" id="td31" class="td31">
<select multiple="multiple" name="select31" size="3">
<option value="select311">option1</option>
<option value="select312">option2</option>
<option value="select313">option3</option>
</select></td>
<td name="td32" id="td32" class="td32"></td>
<td name="td33" id="td33" class="td33"></td>
</tr>
</table>
</form><h1>你好世界！</h1>
</body>
</html>
jQuery 的詳細介紹：請點這裡
jQuery 的下載地址：請點這裡