jquery的介紹與使用

　　當前流行的JavaScript庫有:

　　jQuery MooToolsPrototype Dojo YUIEXT_JS DWR

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

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

　　它是輕量級的js庫(壓縮後只有k)這是其它的js庫所不及的它兼容CSS還兼容各種浏覽器(IE + FF + Safari + Opera +)

　　jQuery是一個快速的簡潔的javaScript庫使用戶能更方便地處理HTMLdocumentsevents實現動畫效果並且方便地為網站提供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實現代碼

　　documentgetElementById("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節點“ ”空格代表指定標簽裡面的所有標簽classid

　　$("標簽或者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(method);//讓標簽或者id或者class節點元素動起來表示動畫時長的毫秒數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(indexdomEle){

　　alert(index+"==="+domElevalue);

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

　　$each(需要遍歷的對象或數組function(indexdomEle){})//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 :nthchild(index)")//查找標簽或者id或者class節點下的指定子元素;注意在之前加空格index是從開始

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

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

　　$("標簽或者id或者class :onlychild")//查找標簽或者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的元素這個選擇器就不僅限於表單了除了匹配input中的hidden外那些style為hidden的也會被匹配

　　注意: 要選取input中為hidden值的方法就是上面例子的用法但是直接使用 “:hidden”的話就是匹配頁面中所有的不可見元素包括寬度或高度為的

　　==========================

　　=====創建節點元素

　　$("

　　")//標簽怎麼寫就怎麼寫注意自閉合標簽的寫法:
 

　　=====插入節點

　　$("#a")append($("#b"))//將後面的b節點添加到a節點上

　　$("#a")appendTo($("#b"))//將前面的a節點添加到b節點上

　　$("#a")after($("#b"))//將後面的b節點添加到a節點的後面

　　$("#a")before($("#b"))//將後面的b節點添加到a節點的前面

　　$("#a")insertAfter($("#b"))//將前面的a節點插入到b節點的後面

　　$("#a")insertBefore($("#b"))//將前面的a節點插入到b節點的前面

　　=====刪除節點元素

　　remove()//刪除節點元素自身刪除

　　empty()//刪除所有的字節點不刪除屬性節點

　　=====克隆節點元素

　　clone(boolean)//克隆一個節點默認只克隆節點不克隆事件如果傳入一個true就代表事件也同時克隆

　　=====替換節點元素

　　$("#a")repalaceWith($("#b"))//將a節點替換成b節點

　　$("#a")repalaceAll($("#b"))//將b節點替換成a節點

　　=====常用的基本方法

　　val()//獲取節點元素的值

　　val("xxx")//改變節點元素的值

　　text()//獲取節點對象的文本內容

　　text("abcd")//設置文本節點

　　attr("name")//獲取name屬性值

　　attr("name""zhangsan")//設置name屬性值

　　removeAtt("name")//刪除屬性

　　==========================

　　css(屬性值屬性名)//設置樣式

　　=====dom/jquery轉換

　　$(dom對象)將dom對象裝換成jquery對象

　　var name = $變量名[index] //將jquery轉換成dom對象

　　jquery提供了一個get(index)方法將jquery轉換成dom對象

　　$(document)ready(function(){});//所有頁面中的內容加載完畢才執行//簡寫格斯:$()ready(function(){});

　　$(window)load(function(){})//一般不用

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19828.html