jquery的介紹與使用

　　當前流行的JavaScript庫有:

　　jQuery, MooTools,Prototype, Dojo, YUI,EXT_JS DWR

　　jQuery由美國人JohnResig創建，至今已吸引了來自世界各地的眾多javascript高手加入其team。

　　jQuery是繼prototype之後又一個優秀的Javascript框架。其宗旨是——WRITELESS,DO MORE,寫更少的代碼,做更多的事情。

　　它是輕量級的js庫(壓縮後只有21k)，這是其它的js庫所不及的，它兼容CSS3，還兼容各種浏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

　　jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，並且方便地為網站提供AJAX交互。

　　jQuery還有一個比較大的優勢是，它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。

　　jQuery能夠使用戶的html頁保持代碼和html內容分離，也就是說，不用再在html裡面插入一堆js來調用命令了，只需定義id即可。

　　jQuery對象就是通過jQuery包裝DOM對象後產生的對象。

　　引入jquery： 將js文件導入項目中，在引入頁面

　　jQuery對象是jQuery獨有的.如果一個對象是jQuery對象,那麼它就可以使用jQuery裡的方法: $(“#test”).html();

　　比如：

　　$("#test").html() 意思是指：獲取ID為test的元素內的html代碼。其中html()是jQuery裡的方法

　　這段代碼等同於用DOM實現代碼：

　　document.getElementById("test ").innerHTML;

　　雖然jQuery對象是包裝DOM對象後產生的，但是jQuery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery裡的方法.亂使用會報錯

　　約定：如果獲取的是 jQuery對象,那麼要在變量前面加上 $.

　　•var$variable =jQuery對象

　　•varvariable = DOM對象

　　選擇器是jQuery的根基,在jQuery中,對事件處理, 遍歷DOM和Ajax 操作都依賴於選擇器

　　jQuery選擇器的優點:

　　•簡潔的寫法

　　•完善的事件處理機制

　　==========================基本選擇器

　　$("#id")//通過id查找節點元素

　　$("標簽名")//通過標簽名查找節點元素

　　$(".class的值")//通過class屬性的值查找節點元素

　　$("*")//查找所有的節點標簽

　　==========================層次選擇器

　　$("標簽或者id或者class 標簽或者id或者class")//查找標簽或者id或者class節點中的所有標簽或者id或者class節點---“ ”空格代表指定標簽裡面的所有標簽,class,id

　　$("標簽或者id或者class>標簽或者id或者class")//查找標簽或者id或者class節點中的子節點標簽或者id或者class--“>”代表父子關系

　　$("標簽或者id或者class+標簽或者id或者class")//查找標簽或者id或者class的下一個標簽或者id或者class節點--“+”下一個節點

　　$("標簽或者id或者class~標簽或者id或者class")//查找標簽或者id或者class的以後的所有的標簽或者id或者class節點--“~”以後的所有節點

　　$("id或者class").siblings("div")//查找id或者class並且是指定節點的節點元素

　　==========================基礎過濾選擇器

　　--------$(節點元素：條件)

　　$("標簽或者id或者class:first")//查找標簽或者id或者class第一個出現的節點元素

　　$("標簽或者id或者class:last")//查找標簽或者id或者class最後一個出現的節點元素

　　$("div:not(標簽或者id或者class)")//查找某節點上不為標簽或者id或者class節點元素，注意沒有id或者class屬性也包括在內

　　$("標簽或者id或者class:even")//查找標簽或者id或者class出現順序為偶數的節點元素

　　$("標簽或者id或者class:odd")//查找標簽或者id或者class出現順序為奇數的節點元素

　　$("標簽或者id或者class":gt(index))//查找標簽或者id或者class索引值大於指定index的節點元素;gt是 greater than的縮寫

　　$("標簽或者id或者class:eq(index)")//查找標簽或者id或者class索引值等於指定index的節點元素;eq是equals的簡寫

　　$("標簽或者id或者class:lt(index)")//查找標簽或者id或者class索引值小於指定index的節點元素;lt是less than的簡寫

　　$(":header")//查找所有的標題節點元素;是固定寫法

　　$("標簽或者id或者class").slideToggle(800,method);//讓標簽或者id或者class節點元素動起來，800表示動畫時長的毫秒數，method回調的方法

　　==========================內容過濾選擇器

　　$("標簽或者id或者class:contains('di')")//查找標簽或者id或者class內容裡面包含指定內容的節點元素

　　$("標簽或者id或者class:empty")//查找標簽或者id或者class沒有任何子元素的節點元素

　　$("標簽或者id或者class:has(標簽或者id或者class)")//查找標簽或者id或者class包含標簽或者id或者class元素的節點元素

　　$("標簽或者id或者class:parent")//查找標簽或者id或者class包含子元素的節點元素

　　$("標簽或者id或者class:not(:contains('di'))")//查找標簽或者id或者class不包含指定文本內容的節點元素

　　==========================可見度過濾選擇器

　　$("標簽或者id或者class:visible")//查找標簽或者id或者class為可見元素的節點元素

　　$("標簽或者id或者class:hidden").show()//查找標簽或者id或者class為隱藏元素的節點元素

　　each(function(index,domEle){

　　alert(index+"==="+domEle.value);

　　});//jquery的遍歷方法：index是角標，domEle是將節點元素對象轉換成dom對象返回

　　$.each(需要遍歷的對象或數組,function(index,domEle){})//jquery的靜態方法

　　==========================屬性過濾選擇器

　　$("標簽或者id或者class[title]")//查找標簽或者id或者class節點元素屬性為title的節點元素

　　$("標簽或者id或者class[title=test]")//查找標簽或者id或者class節點元素屬性為title並且等於指定值的節點元素

　　$("標簽或者id或者class[title!=test]")//查找標簽或者id或者class節點元素屬性為title並且不等於指定值的節點元素;注意沒有title屬性的也包括在內

　　$("標簽或者id或者class[title^=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值以指定開始值的節點元素

　　$("標簽或者id或者class[title$=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值以指定結束值的節點元素

　　$("標簽或者id或者class[title*=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值包含指定值的節點元素

　　$("標簽或者id或者class[title*=te][屬性]...")//查找標簽或者id或者class節點元素同時過濾多個屬性，的節點元素

　　==========================子元素過濾選擇器

　　$("標簽或者id或者class :nth-child(index)")//查找標簽或者id或者class節點下的指定子元素;注意在：之前加空格，index是從1開始

　　$("標簽或者id或者class :first-child")//查找標簽或者id或者class節點下的第一個子元素

　　$("標簽或者id或者class :last-child")//查找標簽或者id或者class節點下的第一個子元素

　　$("標簽或者id或者class :only-child")//查找標簽或者id或者class節點如果只有一個子元素，就返回

　　==========================表單選擇器

　　input[type=checkbox]:checked").length//獲取多選按鈕的選中的個數

　　$("select>option:selected")//獲取下拉選框選中的內容，一般用each遍歷

　　==========================匹配選擇器

　　$(":input")//返回值 集合元素 說明:匹配所有 input, textarea, select 和 button 元素

　　$(”:text”)//返回值 集合元素 說明: 匹配所有的單行文本框.

　　$(”:password”)//返回值 集合元素 說明: 匹配所有密碼框.

　　$(”:radio”)//返回值 集合元素 說明: 匹配所有單選按鈕.

　　$(”:checkbox”)//返回值 集合元素 說明: 匹配所有復選框

　　$(”:submit”)//返回值 集合元素 說明: 匹配所有提交按鈕.

　　$(”:image”)//返回值 集合元素 說明: 匹配所有圖像域.

　　$(”:reset”)//返回值 集合元素 說明: 匹配所有重置按鈕.

　　$(”:button”)//返回值 集合元素 說明: 匹配所有按鈕.這個包括直接寫的元素button.

　　$(”:file”)//返回值 集合元素 說明: 匹配所有文件域.

　　$(”input:hidden”)//返回值 集合元素 說明: 匹配所有不可見元素，或者type為hidden的元素.這個選擇器就不僅限