jQuery 總結

==========================
為了簡化js的開發，一些js庫誕生了
流行的有：jQuery, Moo Tools, Prototype, Dojo,YUI,EXT_JS,DWR

==========================
jQuery  -- javascript query  
輕量級js庫，兼容css3,兼容各種瀏覽器
快速、簡潔
方便處理HTML documents、events、實現動畫效果，
方便的為網站提供ajax交互
文檔說明全，很多成熟插件可選擇
能夠使html保持代碼和html內容分離

==========================
什么是jquery對象
就是通過jquery包裝dom對象后產生的對象
jquery對象是jquery獨有的
可以使用方法$("#test").html();
意思是：獲取ID為test的元素內的html代碼
等同于用DOM實現：
document。getelementById("test").innerHTML;
通過id直接輸出
alert($("#name").val());
注意!! DOM和JQUERY不能互相使用
約定 jquery對象前面加上$
var $var = jquery對象
var variable = DOM對象

==========================
DOM對象轉成jquery對象
吧DOM對象用$()包裝起來
jquery對象=$(dom對象)

jquery對象轉換成dom對象
1)[index]
jquery對象是一個數組對象
var use = $use[0];
2).get(index)
jquery本身提供的方法
var use = $use.get(0);

==========================
jquery選擇器 jquery的根基
對事件處理，遍歷dom和ajax操作都依賴選擇器

    優點
簡介的寫法
$("#id") 等價document.getElementByid("id");
$("tagName")等價 document.getElementByTagName("tagName");

完善的時間處理機制

   基本選擇器
1.#id 
用法：$("#myDiv");  返回值 單個元素組成的集合
說明：這個就是直接選擇html中的id="myDiv"  匹配的第一個
2.Element  
用法:$("div")   返回值 集合元素
說明:element就是html已經定義的標簽元素.如div,input,等
3.class  
用法:$(".myClass") 返回值 集合元素
說明：這個標簽直接選擇html代碼中class="myClass"的元素或元素族
4. *
用法:$("*") 返回值 集合元素
說明:匹配所有元素,多用于結合上下文來搜索
5.selector1,selector2, selectorN
用法:$("div.span.p.myClass") 返回值 幾何元素
說明: 將每一個選擇器匹配到的元素合并后一起返回,可以指定任意多個選擇器
并將匹配到的元素合并到一個結果內,p.myClass表示匹配p class = "myClass"

     層次選擇器
通過DOM元素之間的層次關系，如后代，子，相鄰，兄弟
1.ancestor descendant
用法：$("form input"); 返回值 集合元素
說明 在給定的祖先元素下匹配所有后代元素
2.parent > child
用法:$("form>input") 返回值 集合元素
說明給定的父元素下匹配所有的子元素
     ！！注意 子元素和后代元素
3.prev + next
用法： $("label+input") 返回值 集合元素
說明: 匹配所有緊接在prev元素后的next元素
4.prev~siblings
用法： $("form ~ input") 返回值 集合元素
說明 匹配prev元素之后的所有 siblings同輩元素， 匹配的是和prev同輩的元素，后輩元素不被匹配
siblings()方法匹配所有同輩 包括之前的
    


過濾選擇器
通過特定的過濾規則篩選出所需的dom元素.以":"開頭
按不同的過濾規則.過濾選擇器分為
基本過濾,內容過濾,可見性過濾
屬性過濾,子元素過濾和表單對象屬性過濾選擇器

     基本過濾選擇器
1. :first
用法 $("tr:first"); 返回值 單個元素組成的集合
說明：匹配找到的第一個元素
2. :last
用法 $("tr:last"); 返回值 集合元素
說明：匹配找到的最后一個元素，與:first相對應
3. :not(selector)
用法 $("input:not(:checked)"); 返回值 集合元素
說明：去除所有與給定選擇器匹配的元素，類似于“非”
指沒有被選中的input（當input的type為checkbox）
4. :even
用法 $("tr:even") 返回值  集合元素
說明: 匹配所有索引值為偶數的元素.從0開始計數
5.dd
用法 $("tr:odd") 返回值  集合元素
說明: 匹配所有索引值為奇數的元素.與even相應，從0開始計數
6. :eq(index)
用法 $("tr:eq(0)") 返回值  集合元素
說明: 匹配一個給定索引值的元素。eq(0)就是獲取第一個tr元素，
注意括號內為索引值 不是元素排列數
7. :gt(index)
用法 $("tr:gt(0)") 返回值  集合元素
說明: 匹配所有大于給定索引值得元素。
8. :lt(index)
用法 $("tr:lt(2)") 返回值  集合元素
說明: 匹配所有小于給定索引值得元素。
9. :header(固定寫法)
用法 $(":header").css("background","red") 返回值 集合元素
說明： 匹配如h1,h2,h3之類的標題元素
10. :animated(固定寫法) 返回值  集合元素
說明:匹配所有正在執行動畫效果的元素
     內容過濾選擇器
1. :contains(text)
用法：$("div:contains('John')") 返回值 集合元素
說明 匹配包含給定文本的元素，查找被標簽圍起來的文本內容是否符合指定的內容
2. :empty
用法  $("td:empty") 返回值 集合元素
說明：匹配所有不包含子元素或者文本的空元素
3. :has(selector)
用法  $("div:has(p)").addClass("test") 返回值 集合元素
說明：匹配含有選擇器所匹配的元素的元素，給包含P元素的div加上class=‘test’
4. :parent
用法  $("td:parent") 返回值 集合元素
說明：匹配含有子元素或者文本的元素 與empty相反
     可見度過濾選擇器
根據元素的可見和不可見狀態來選擇相應的元素
1. :hidden    jquery的show()顯示
用法  $("tr:hidden") 返回值 集合元素
說明：匹配所有的不可見元素  css中的display:none和input type="hidden"
2. :visible
用法  $("tr:visible") 返回值 集合元素
說明：匹配所有的可見元素
     屬性過濾選擇器  【注意 是方括號不是冒號":"】
通過元素的屬性來獲取相應的元素
1.[attribute]
用法:$("div[id]") 返回值 幾何元素
說明： 匹配包含給定屬性的元素，   選取了帶id屬性的div標簽
2.[attribute=value]
用法:$("input[name='newsletter']").attr("checked",true) 返回值 幾何元素
說明： 匹配包含給定屬性是某個特定值的元素，  
選取了所有name屬性是newsletter的input元素
3.[attribute!=value]
用法:$("input[nam!e='newsletter']").attr("checked",true) 返回值 幾何元素
說明： 匹配不含油給定屬性，或者屬性不等于某個特定值的元素，
等價于not(attr=value),
選取了所有name屬性是newsletter的input元素
4.[attribute^=value]
用法:$("input[name^='news']") 返回值 幾何元素
說明： 匹配包含給定屬性是以某些值開始的元素 
5.[attribute$=value]
用法:$("input[name$='letter']") 返回值 幾何元素
說明： 匹配包含給定屬性是以某些值結尾的元素
6.[attribute*=value]
用法:$("input[name*='man']") 返回值 幾何元素
說明： 匹配包含給定屬性是以包含某些值的元素
7.[attributeFilter1][attributeFilter2][attributeFilterN]
用法:$("input[id][name$='man']") 返回值 幾何元素
說明：符合屬性選擇器，需要同時滿足多個條件時使用
     子元素過濾選擇器
1 :nth-child(index/even/odd/equation)
用法: $("ul li:nth-child(2)") 返回值 集合元素
說明 匹配其父元素下的第幾個子奇偶元素    索引從1開始
2. :first-child
用法: $("ul li:first-child(2)") 返回值 集合元素
說明 為每個父元素匹配第一個子元素，
3. :last-child
用法: $("ul li:last-child(2)") 返回值 集合元素
說明 為每個父元素匹配最后一個子元素，
4.nly-child
用法: $("ul li:only-child(2)") 返回值 集合元素
說明 如果某個元素師父元素中唯一的子元素，那將會匹配
     表單對象屬性過濾選擇器
對選擇的表單元素進行過濾
1. :enabled
用法: $("input:enabled") 返回值 集合元素
說明 匹配所有可用元素。 查找所有input中不帶disable的input
2. :disabled
用法: $("input:disabled") 返回值 集合元素
說明 匹配所有不可用元素。 查找所有input中帶disable的input
3. :checked
用法: $("input:checked") 返回值 集合元素
說明 匹配所有選中的被選中的元素(復選框,單選框,不包select中的option)
4. :selected
用法: $("input:selected") 返回值 集合元素
說明 匹配所有選中的option元素
     表單選擇器
1. :input $(":input")
2. :text $(":text")
3. :password $(":password")
4. :radio $(":radio")
5: :checkbox $(":checkbox")
6. :submit $(":submit")
7. :image $(":image")
8. :reset $(":reset")
9. :button $(":button")
10.:file $(":file")
11.:hidden $("input:hidden")

==========================
遍歷集合
each(function(index,domEle))
參數
index: 每次索引，從0開始
domEle: 遍歷集合的當前對象，是一個dom對象

this對象的使用，當前遍歷的對象

jquery中的全局函數
$.each(object,function(index,domEle));用來遍歷數組及任何對象
參數
index: 對象成員或數組索引
domEle: 對應變量和內容

==========================
jquery中的dom操作
     dom操作的分類
dom core
html dom
使用js和dom為html編寫腳本是。用的很多屬性
css-dom
js中，主要用于獲取和設置上騰娛樂對象的各種書新娘歌

     內部插入節點
append(content)
向每個匹配元素的內部的結尾處追加內容
appendTo(content)
將每個匹配的元素追加到指定的元素中的內部結尾處
prepend(content)
向每個匹配元素的內部的開始處追加內容
prependTo(content)
將每個匹配的元素追加到指定的元素中的內部開始處

     外部插入節點
after(content)
在每個匹配的元素之后插入內容
before(content)
在每個匹配的元素之前插入內容
insertAfter(content)
把所有匹配的元素插入到另一個、指定的元素元素集合的后面
insertBefore(content)
把所有匹配的元素插入到另一個、指定的元素元素集合的前面

不但能將新創建的dom元素插入到文檔中，也能對原有的dom元素進行移動

     查找節點
查找屬性節點
jquery選擇器
查到后可調用jquery的attr()方法來獲取各種屬性值\

     創建節點
使用jquery的工廠函數$()    如 $(html)
將傳入的html標記字符串創建一個dom對象，并包裝成一個jquery對ian
注意
動態創建的新元素節點不會被自動添加到文檔
創建單個元素時，注意閉合標簽和使用標準的xhtml格式

     刪除節點
remove()
從dom中刪除所有匹配的元素,通過jquery表達式來篩選元素
empty()
清空節點- 清空元素中所有的后代節點(不包含屬性節點)

     替換節點
replaceWith()
將所有匹配的元素替換為制定的html或dom元素
replaceAll()
顛倒了的replaceWith()
注意:替換之前，元素上綁定的事件會隨著替換一起消失

     復制節點
clone()
復制的新節點不具有任何行為
clone(ture)
連同事件一起復制

     屬性操作
attr()
html()
text()
val()
height()
width()
css()
removeAttr()