標籤：
JQuery
jQuery是繼Prototype之後有一個優秀的javascript庫，是一個開源項目。jQuery憑藉簡潔的文法和跨平台的相容性，極大的簡化了javaScript開發人員遍曆html文檔，操作Dom，處理事件，執行動畫和開發ajax的操作。其獨特而又優雅的代碼風格改變了Javascript程式員的設計思路和編寫程式的方式。
*******************
為了使用JQuery，我們需要從官方（jquery.com）下載一個JQuery庫檔案。我們下載最新的未壓縮版jquery-1.3.2.js
使用Jquery不需要安裝，只要把下載的庫檔案放到網站上的一個公用位置即可。當我們想在某個頁面上使用Jquery時，只需要在相關html文檔中簡單的引用該庫檔案的位置。如：
<script src="jquery-1.3.2.js" type="text/javascript"></script>
注意引用JQuery庫檔案的<script>標籤，必須放在頁面定義javascript的<script>標籤之前.否則，我們編寫的代碼將引用不到Jquery架構。
******************
<body onload="emphasize();">
上面的語句在頁面載入完成後，我們的代碼就會執行。Jquery允許我們使用$(document).ready(),通過使用這個方法，可以在DOM載入就緒能夠讀取並操縱時立即調用你所綁定的函數。
上面的語句可以寫成：
$(document).ready(emphasize);
不過定義的函數emphasize()只在載入時使用一次，所以在命名空間中佔用了一個標識符。javascript有一個匿名函數。我們可以這樣做；
$(document).ready(function(){
....
});
$(document).ready()在頁面上所有的dom元素載入完成(包括struts的標籤)後執行。
例如：
<HTML>
<HEAD>
<style type="text/css">
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//將在頁面載入時輸出test字串。
document.writeln("test");
});
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
1工廠函數$()
在JQuery中，無論我們使用哪種類型選擇符（css,xpath,還是自訂選擇符）,都要從一個貨幣符號和一對圓括弧開始。
$()函數會消除使用for()逐一查看一組元素的需求，因為放到圓括弧中的任何元素都將自動執行迴圈遍曆，並且會被儲存到一個JQuery對象中。可以在$()函數的圓括弧中使用的參數幾乎沒有限制。
常用的如下：
標籤名：$(‘p‘)會取得文檔中所有的段落。
ID:$(‘#some-id‘)會取得文檔中具有對應的some-id ID的一個元素。id也可以是一個變數的值jQuery("#"+selectArray[i]).length
類:$(‘.some-class‘)會取得文檔中帶有some-class類的所有元素。
標籤名選擇符和css類選擇符結合使用：
$(‘#some-id.some-class‘)表示取得id=som-id且帶有的some-class的元素。
例如：$(‘#button1.class1‘)
標籤名和ID結合使用
$(‘#some-id 標籤名‘)表示取得id=some-id中的於給定標籤名相同的標籤元素。id和標籤名之間用空格分隔。例如：
$("#alltrade select option:selected")
$("*")，表示匹配所有元素。
注意多個標籤名一起作為選擇符使用中間用空格隔開。
$(‘table tbody tr:odd‘);//表示匹配<table>下的<tbody>的<tr>是奇數的行。
$(‘table tbody tr:even‘).addClass(‘even‘);//表示匹配<table>下的<tbody>的<tr>是偶數的行。
2CSS選擇符
JQuery支援CSS規範1到規範3中的大多數選擇符，這種對CSS選擇符的支援，使得開發人員在增強自己的網站時，不必為哪種瀏覽器坑內不會理解進階的選擇符而擔心你，只要該瀏覽器啟用了Javascript。
.addClass()和.removeClass()方法
Jquery中的.addClass()方法的作用是將Css類應用到我們選擇的頁面部分。.addClass和.removeClass()方法唯一的參數就是要添加Css類名。
3XPath選擇符
XPath(XML Path Language)是在XML文檔中識別不同元素或元素值的一種語言。JQuery支援一組基本XPath選擇符，而且在JQuery中，無論對什麼類型的文檔都可以使用XPath和Css選擇符。
在設計屬性選擇符時，Jquery使用了XPath中慣例來識別屬性，即將屬性前放置在一對方括弧中。例如，要選擇所有帶title屬性的連結，可以使用下面的代碼：
$(‘a[title]‘)
可以用來指定包含在另一個元素中的元素。例如，我們可以通過下面的選擇符運算式，取得包含一個ol元素的所有div元素。
$(‘div:has(ol)‘)
為連結添加樣式
屬性選擇符允許以類似Regex的文法來標識^匹配字串開始位置和$匹配字串結束位置。而且，也可以使用星號(*)表示字串的任意位置。例如：下例中將<a>連結帶有href屬性並href的值以mailto:開頭的內容使用灰色顯示。
<HTML>
<HEAD>
<style type="text/css">
a.mailto{color:#cccccc;}//灰色
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//將<a>連結帶有href屬性並href的值以mailto:開頭的內容使用灰色顯示。
$("a[href^=‘mailto:‘]").addClass(‘mailto‘);
});
</script>
</HEAD>
<BODY>
<a href="mailto:[email protected]">email</a>
</BODY>
</HTML>
4自訂選擇符
除了CSS和XPath選擇符之外，Jquery還添加了專屬的完全不同的自訂選擇符。Jquery中的多數自訂選擇符都可以讓我們基於某個標準選出特定的元素。自訂選擇符以一個冒號(:)開頭，例如我們想要從匹配的帶有horizontal類的div集合中，選擇2個項，那麼應該使用下面的代碼：
$(‘div.horizontal:eq(1)‘}
注意因為javaScript數序採用從0開始編號的方式，所以eq(1)取得的是集合中第2個元素。
Jquery庫中的兩個十分有用的自訂選擇符是:odd和:even，下面我們使用:odd和:even為一個表格的偶數行添加淺藍色背景，奇數行添加淺黃色背景。:odd和:even選擇符使用的都是javascript本身從0開始的編號方式，因此表格的第一行編號為0(偶數)，而表格的第2行編號是1(奇數) 。
<HTML>
<HEAD>
<style type="text/css">
*.odd{background-color:#ffffcc;}//淺藍色背景。
*.even{background-color:#cceeff;}//淺黃色背景。
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘tr:odd‘).addClass(‘odd‘);//判斷如果標籤名為tr，且是偶數行則使用淺藍色背景
$(‘tr:even‘).addClass(‘even‘);//判斷如果標籤名為tr，且是奇數行則使用淺黃色背景
});
</script>
</HEAD>
<BODY>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
</tr>
<tr>
<td>All‘s Well</td>
<td>Comedy</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
</tr>
</table>
</BODY>
</HTML>
:contains(‘String‘)用來匹配包含給定常值內容的元素。例如：$("td:contains(‘Comedy‘)")用來匹配<td>中常值內容包含Comedy的元素。
:empty,匹配所有不包含子項目或文本的空元素。如：$("td:empty");將匹配這樣的td:
<td></td>(不包含子項目或文本的空元素)
:parent，與:empty相反，它是匹配含有子項目或者文本的元素。
:has(selector)，匹配含有選取器所匹配的元素的元素。例如：
$("div:has(p)")//用於匹配在<div>元素中含有<p>元素的div
:not(selector),去除所有與給定選取器匹配的元素。
:eq(index)，匹配一個給定索引值index的元素。如$("tr:eq(1)")
:gt(index), 匹配所有大於給定索引值的元素，如$("tr:gt(1)")
:lt(index),匹配所有小於給定索引值的元素，如$("tr:lt(1)")
:even,匹配索引值是偶數的元素，從0開始計數。
:odd,匹配索引值是奇數的元素，從0開始計數。
:first，匹配找到的第一個元素
:last，匹配找到的最後一個元素。
:header,匹配如 h1, h2, h3之類的標題元素
:visible，匹配所有可見元素
:hidden，匹配所有隱藏元素
5DOM遍曆方法
很多情況下，取得某個元素的父元素或祖先元素都是基本的操作，而這正是JQuery的DOM遍曆方法用武之地。有了這些方法，我們可以在DOM樹中自由漫步。
.next()方法，取得最接近的下一個同輩元素。下例中表示取得文本中含有hery的<td>元素的下一個同輩元素。
$("td:contains(‘henry‘)").next().addClass(‘tdd‘);
<tr><td>henry</td><td>Tragedy</td><td>tyrt</td><td>fff</td></tr>
.prev([expr])方法，取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。可以用一個可選的運算式進行篩選。只有緊鄰的同輩元素會被匹配到，而不是前面所有的同輩元素。expr是string類型。
.nextAll([expr])方法，尋找當前元素之後所有的同輩元素。
.prevAll([expr])方法，尋找當前元素之前所有的同輩元素
.siblings()，取得該元素的後的所有同輩元素。下例中表示取得文本中含有hery的<td>元素後的所有同輩元素。當然這些同輩元素和含有hery的<td>元素在同一個<tr>..</tr>中才有效，對於後面的<tr>中的<td>元素是無效的。
$("td:contains(‘henry‘)").siblings().addClass(‘tdd‘);
.parent()，取得該元素的父元素。
$("td:contains(‘henry‘)").parent().addClass(‘tdd‘);
取得包含henry的單元格的父元素，然後再在父元素的匹配所有索引值大於1的元素。
$("td:contains(‘henry‘)").parent().find(‘td:gt(1)‘).addClass(‘tdd‘);
.html()，取得第一個匹配元素的html內容。
.html("val"),設定每一個匹配元素的html內容。這個函數不能用於xml文檔。如：
$("div").html("<p>Hello Again</p>"); //為div元素中添加了一個段落。
.text()方法，它表示取得所有匹配元素的內容，返回的結果是所有匹配元素包含的常值內容組合起來的文本。這個方法對html和xml文檔都有效。但這個方法不能用於表單元素，擷取表單元素的值。
.text("val")方法，設定所有匹配元素的常值內容。如$("p").text("new text.");//改變段落的常值內容。
$("#province option:selected").text()-----獲得select元素中選中的<option>....</option>之間的內容。而不是<option>的value屬性值。
$("#province option:selected").val()---獲得select元素中選中的<option>的value屬性值。
.find(expr)與.filter(expr)的區別
.find(expr)，從子集中搜尋所有與指定運算式匹配的元素。expr這個運算式通$()中參數一樣。
例如：從所有的段落開始，進一步搜尋下面的span元素。
$("p").find("span")
如果這個span元素有id，則也可以$("p").find("#id")
.filter(expr)，在自身集合中篩選出與指定運算式匹配的元素。
$("p").filter(".selected"),將在所有段落中篩選使用了class="selected"的<p>元素。
例如：
<div class="css">
<p class="rain">測試1</p>
</div>
<div class="rain">
<p>測試2</p>
</div>
如果我們使用find()方法：
var $find = $("div").find(".rain");
alert( $find.html() ) ;
將會輸出：測試1
如果使用filter()方法：
var $filter = $("div").filter(".rain");
alert( $filter.html() );
將會輸出：<p>測試2</p>
已經看出它們的區別了。
find()會在div元素內 尋找 class為rain 的元素。
而filter()則是篩選div的class為rain的元素。
一個是對它的子集操作，一個是對自身集合中篩選。
jQuery判斷瀏覽器類型
jQuery.browser.safari，判斷瀏覽器是是否是safari
jQuery.browser.opera，判斷瀏覽器是否是opera
jQuery.browser.msie，判斷瀏覽器是否是IE
jQuery.browser.mozilla，判斷瀏覽器是否是mozilla
jQuery.inArray(value,array)
確定第一個參數在數組中的位置，從0開始計數(如果沒有找到則返回 -1 )。
第一個參數可以是任何類型。
第二個參數是Array類型。
****************************
jQuery對象與dom對象的轉換
只有jquery對象才能使用jquery定義的方法。注意dom對象和jquery對象是有區別的，調用方法時要注意操作的是dom對象還是jquery對象。
普通的dom對象一般可以通過$()轉換成jquery對象。
如：$(document.getElementById("msg"))或var v=document.getElementById("msg");var $v=$(v)
則為jquery對象，可以使用jquery的方法。
$()中可以包含dom對象也可以包含query對象，轉換結果都是jquery對象。
jquery對象轉換為dom對象
由於jquery對象本身是一個集合。所以如果jquery對象要轉換為dom對象則必須取出其中的某一項，一般可通過索引取出或jQuery本身提供，通過.get(index)方法，得到相應的DOM對象 。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]
這些都是dom對象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下幾種寫法都是正確的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
.eq(index)方法返回的是jquery對象。
.get()方法取得所有匹配的Dom元素集合。返回的是元素數組，數組中是DOM對象而不是JQuery對象。
.get(index)方法取得其中一個匹配的元素，index表示取得第幾個匹配的元素(從0開始)。返回的也是Dom對象。
***********************************
jquery1.3常用選取器的說明和應用
基本
1。$("#id") ---對象的id號；
2。$("div") --- 根據給定的元素名匹配所有元素;
3。$(".class") --- 根據給定的CSS類匹配元素;
4。$("*") --- 匹配所有元素;
5。$("div,span,div.class") -- 將每一個選取器匹配到的元素合并後一起返回。
層級
1。$("form input") --在給定的祖先元素下匹配所有的後代元素；
2。$("form > input") --- 在給定的父元素下匹配所有的子項目(和上面的不一樣)；
3。$("prov + next") ----- 匹配所有緊接在 prev 元素後的 next 元素;
4。$("prov ~ next") ---匹配 prev 元素之後的所有 next 元素
簡單
1。$("#id:first") -- 匹配找到的第一個元素
2。$("#id:last") -- 匹配找到的最後一個元素
3。$("input:not(:checked)") --去除所有與給定選取器匹配的元素
4。$("tr:even") --- 匹配所有索引值為偶數的元素，從 0 開始計數
5。$("tr:odd") -- 匹配所有索引值為奇數的元素，從 0 開始計數
6。$("tr:eq(1)") -- 匹配一個給定索引值的元素(第二行)
7。$("tr:gt(1)") -- 匹配所有大於給定索引值的元素(第二行以後所有行)
8。$("tr:lt(1)") ---- 匹配所有小於給定索引值的元素(和上面相反)
9。$(":header") - 匹配如 h1, h2, h3之類的標題元素
10。$("id:animated") ----匹配所有正在執行動畫效果的元素
內容
1。$("div:contains(‘John‘)") ----匹配包含給定文本的元素
2。$("td:empty") - 匹配所有不包含子項目或者文本的空元素
3。$("div:has(p)") --匹配含有選取器所匹配的元素的元素(含p的div)
4。$("td:parent") - 匹配含有子項目或者文本的元素
可見度
1。$("tr:hidden") -- 匹配所有隱藏元素，或者type為hidden的元素
2。$("tr:visible") -- 匹配所有的可見元素
屬性
1。$("div[id]")--匹配包含給定屬性的元素使用[](所有包含id的div)
2。$("input[name=‘value‘]")--匹配給定的屬性是某個特定值的input標籤元素
3。$("input[name!=‘value‘]")---匹配所有含有指定的屬性,但屬性不等於特定值的input標籤元素。
4。$("input[name^=‘value‘]")----匹配給定的屬性是以某些值開始的input標籤元素
5。$("input[name$=‘value‘]")----匹配給定的屬性是以某些值結尾的input標籤元素
6。$("input[name*=‘value‘]")---匹配給定的屬性是以包含某些值的input標籤元素
7。$("input[id][name$=‘value‘]")--[selector1][selector2][selector3]複合屬性選取器，需要同時滿足多個條件時使用
子項目
8。$("a[name=‘value‘]")--匹配給定的屬性是某個特定值的a標籤元素
1。$("ul li:nth-child(2)")-----匹配其父元素下的第N個子或奇偶元素
2。$("ul li:first-child")-------匹配第一個子項目
3。$("ul li:last-child")-----匹配最後一個子項目
4。$("ul li:only-child")---如果某個元素是父元素中唯一的子項目那將會被匹配
5。$("ul:nth-child(index/even/odd)----匹配其父元素下的第N個子項目或奇偶元素。例如：
:nth-child(even),:nth-child(odd),:nth-child(2)
6。parent>child----在給定的父元素下匹配所有的子項目。parent和child的取值都是任何有效Selector選取器。如：匹配 表單中所有的子級input元素：
$("form > input")
7。prev + next-----匹配在prev的父元素中且prev元素後的所有next元素。prev和next的取值也是任何有效Selector選取器。如：
$("label + input")表示匹配在label的父元素中且label元素後的所有input元素。
8。prev ~ siblings---匹配與prev同輩元素中的siblings元素。如：$("form ~ input")表示匹配與form元素同輩的input元素。
表單
1。$(":input")---匹配所有表單元素.
2。$(":text")--匹配所有的單行文字框
3。$(":password")--匹配所有密碼框
4。$(":radio")--匹配所有選項按鈕
5。$(":checkbox")--匹配所有複選框
6。$(":submit")--匹配所有提交按鈕
7。$(":image")---匹配所有映像域
8。$(":reset")--匹配所有重設按鈕
9。$(":button")--匹配所有按鈕
10。$(":file")--匹配所有檔案域
11。$("tr:hidden")--匹配所有隱藏元素，或者type為hidden的元素
例如：$(‘#buton1:button‘)表示匹配id="button1"且type=button的按鈕。
表單對象屬性
1。$("input:enabled")--匹配所有可用元素
2。$("input:disabled")--匹配所有不可用元素
3。$("input:checked")--匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option)
4。$("select option:selected")--匹配所有選中的option元素(冒號:前不要有空格)
$(":focus")--擷取當前的焦點元素。
**************
input:hidden是尋找不可見的input元素，包含，textbox，radio，checkbox，button等和type="hidden"的表單元素。input[type=hidden]僅僅尋找type="hidden"的表單元素。
is("input[type=hidden]"),判斷是否為input hidden元素。
*****************
區別IE還是Firefox
navigator.appName
navigator.appName用於區別不同的瀏覽器，對於IE輸出為Micrsoft Internet Explorer
對於Firefox輸出：Netscape
****************
頁面頭部動態添加css或js檔案：
$("head").append("<link rel=‘stylesheet‘ type=‘text/css‘ href=‘js/binSelect/binSelect.css‘></link>");
****************
jquery和DWR,此兩個架構一起用會出現衝突，解決的方法很簡單。給jquery加上命名空間，如：
var $j = jQuery.noConflict();以後jquery中在用到$的地方都用$j取代，這樣就不會和dwr中的$衝突了。
如果jQuery類庫和別的類庫衝突的話，可以使用jQuery.noConflict()函數來將變數$的控制權移交出給其它的javaScipt庫，那麼使用$將代表其它的javascript庫。
避免jQuery的$與其它外掛程式的$衝突：
(function($) {
....
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
....
})(jQuery);
(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery);
上面定義了一個jQuery函數,形參是$，函數定義完成之後,把jQuery這個實參傳遞進去.立即調用執行。這樣的好處是,我們在寫jQuery外掛程式時,也可以使用$這個別名,而不會與prototype引起衝突.
*************
jQuery(function(){
});
的功能和下面是一樣的
jQuery(document).ready(function(){
});
********************
jQuery的val("value1")方法可以讓select元素選中某個值為value1的option元素，這個在IE7和Firefox中都沒有問題，只有IE6中會報錯，解決的辦法是通過setTimeout提供一個延遲來執行這句就可以了。如：
setTimeout(function(){$("#select1").val(setAreaValue[2]);},1);
******************
如果有瀏覽器不執行jQuery的非同步請求而使用之前緩衝起來的資料，可以將這個非同步請求的路徑後面加上一個隨機數。這樣就不會使用緩衝起來的資料而執行jQuery非同步請求。
******************
jQuery.noConflict();
該方法釋放 jQuery 對 $ 變數的控制。
jQuery不會與其他庫的$對象發生衝突。在運行這個函數後，就只能使用jQuery變數訪問jQuery對象.
建立一個新的別名用以在接下來的庫中使用jQuery對象。
var j = jQuery.noConflict();
// 基於 jQuery 的代碼
j("div p").hide();
// 基於其他庫的 $() 代碼
$("content").style.display = ‘none‘;
***************************
一般情況先一個頁面響應載入的順序是，網域名稱解析-載入html-載入js和css-載入圖片等其他資訊。
那麼Dom Ready應該在“載入js和css”和“載入圖片等其他資訊”之間，就可以操作Dom了。
Dom Ready是在dom載入完成後就可以直接對dom進行操作，比如一張圖片只要<img>標籤完成，不用等這個圖片載入完成，就可以設定圖片的寬高的屬性或樣式等；
Dom Load是在整個document文檔(包括了載入圖片等其他資訊)載入完成後就可以直接對dom進行操作，比如一張圖片要等這個表徵圖載入完成之後才能設定圖片的寬高的屬性或樣式等；
document.ready()和傳統的方法<body onload="load()"> 相似，不同的是onload()的方法是在頁面載入完成後才發生，這包括DOM元素和其他頁面元素(例片)載入，因此，使用document.ready()方法的執行速度比onload()的方法要快。
所以$(document).ready(function(){...});是在window.onload之前執行。
************************
is(expr|obj|ele|fn)返回值:Boolean
根據選取器、DOM元素或 jQuery 對象來檢測匹配元素集合，如果其中至少有一個元素符合這個給定的運算式就返回true。
如果沒有元素符合，或者運算式無效，都返回‘false‘。
expr string字串值，包含供匹配當前元素集合的選取器運算式。
jQuery object現有的jQuery對象，以匹配當前的元素。
element Expression一個用於匹配元素的DOM元素。
function(index) Function一個函數用來作為測試元素的集合。它接受一個參數index，這是元素在jQuery集合的索引。在函數， this指的是當前的DOM元素。
如：
$("input[type=‘checkbox‘]").parent().is("form")
var temp= $("#test").is(":hidden");//是否隱藏
var temp1= $("#test").is(":visible");//是否可見
*****************
找到所有 p 元素，並且這些元素都必須是 div 元素的子項目。
$("div > p");
jQuery([selector,[context]])
jQuery 的核心功能都是通過這個函數實現的。預設情況下, 如果沒有指定context參數，$()將在當前的 HTML document中尋找 DOM 元素；如果指定了 context 參數，如一個 DOM 元素集或 jQuery 對象，那就會在這個 context 中尋找。在jQuery 1.3.2以後，其返回的元素順序等同於在context中出現的先後順序。如：
$("#exportXls",window.top.document)表示在window.top.document下面尋找id為exportXls的元素。
1使用jQuery
