【JQuery語法】
1.使用Jquery必須先導入jquery.x.x.x.js文件
2.JQuery中的選擇器:
$("選擇器名稱").方法()。($是JQuery的縮寫，也就是說選擇器可以是JQuery("選擇器名稱").方法()。)
present+ next:選定 present節點的下一個相鄰節點。
present~ next:選定present節點的后面全部兄弟節點。
3. jQuery中的文檔就緒函數:
$(document).ready(function(){
});
簡寫形式: $(function(){
});
可多次添加。
[JQuery文檔就緒函數與window.onload的區別]
1. window.onload必須等待網頁資源(包括圖片等)全部加載完成后，才能執行;
文檔就虛函數只需要等到網頁DOM結構加載完成后，即可執行。
2. window.onload在一個頁面中，只能寫一次。
文檔就虛函數在一個頁面中，可以有N個。
4.JS對象和JQuery對象:
1.使用$("")取到的節點為JQuery對象,只能調用JQuery方法，不能調用原生JS方法；
$("#div").click(function(){}) √
$("#div").onclick=function(){}; × 使用JQuery調用原生JS
同理，使用getElement系列取到的為JS對象，也不能調用JQuery函數。
【JQuery對象與JS對象的相互轉換】
1.JQuery轉JS: 使用.get(index) 或 [index] 選中的就是JS對象。
$("#div").get(index).onclick=function(){};
$("#div")[0].onclick=function(){};
2.JS轉JQuery: 使用$()包裹變量。
var div = document.getElementByTagName("div");
$(div).click(function(){});
5. 解決多庫沖突的方法
JQuery.noConflict();
!function($){
$("div").click(function(){
})
}(JQuery)
【文檔處理方法】
1.[內部插入]
1. $("div").apend(content|fn) : 將所有選定的內容追加到節點內部文本后,
如果內部有該內容則改變位置。不錄入新內容。
2. $("<p/>").appendTo("選擇器名") :將新建的節點添加到選擇器內部最后。
3. $("div").prepend(content) :將所有選定的標簽追加到節點內部文本前。
如果內部有該內容則改變位置，不錄入新內容。
4. $("p").prependTo( $("div") ); :在節點的內部前置p標簽。
2.[外部插入]
1.$("p").after("<b>Hello</b>"); :在匹配的選擇器后面插入一個內容。
2.$("p").insertAfter("#foo"); :把前一個匹配的插入到后一個匹配的后面。
3.$("p").before("<b>Hello</b>"); :在匹配的選擇器前面插入一個內容。
4.$("p").insertBefore("#foo"); :把前一個匹配的插入到后一個匹配的前面。
3.[包裹]
1.$("div").wrap("<section></section>") 為每一個選定的節點都套一個父節點。
2.$("div").wrapAll("<section></section>") 把所有被選中的節點包在同一個父節點中去。
3.$("#div1 p").unwrap(). 刪除選中節點的父節點。
4.$("#div1").wrapInner("<div></div>") 將選中節點的所有子元素 包裹在一個新的節點中。
新的元素依然是當前元素的子節點。
4.[替換]
1.$("#div1 p").replaceWith("<p>1</p>") 將后面新建節點替換前面選中節點。
2.$("<p>1</P>").replaceAll("div p") 上面倒過來，前替換后。
5.[刪除]
1.$("#div1").empty() 清空當前節點的所有子元素。
2.$("div p").remove() 刪除所有選中的節點及它們的子節點。
3.$("div p").detach() 刪除所有選中的節點及它們的子節點。
[remove()和detach()的區別]
使用remove()刪除的節點，恢復以后，不再保留節點所綁定的事件。
使用detach()刪除的節點，恢復以后，可以保留節點所綁定的事件。
6.[克隆]
1.clone()
$("#div1").clone() 傳入二個參數，第一個: false表示只克隆當前節點和子節點、不克隆事件，
true克隆事件。
第二個 : false 不傳子節點
true 傳子節點。
【屬性和CSS方法】
[屬性]
1. .attr("class","cls") 設置節點的屬性
.attr({
"class":"cls1",
"name":"name1",
"style":"font-size:20px"
}); 同時設置多個屬性(傳入一個對象以鍵值對的形式同時設置多個屬性)
.attr("class") 取到節點的屬性
2. .removeAttr("class") 刪除節點的屬性
3. .prop("checked") 可以取節點屬性，但是在讀取 disabled checked等"屬性名"="屬性值"的屬性時，
不會取屬性值，只會判斷有沒有該功能返回false和true。
[attr和prop區別]
在讀取 disabled checked等"屬性名"="屬性值"的屬性時，prop不會取屬性值，只會判斷有沒有該功能返回false和true。
attr會取屬性值，沒有返回undefined。
attr只能取到寫在標簽上的屬性，不能判斷狀態。
4. .removeProp("checked"). 刪除節點屬性。
[css類]
1. .addClass("class名") 在原有class的基礎上，新增class名。
2. .removeClass("cls cls1") 刪除class名，其余未刪除的依然保留。
3. .toggleClass("div1") 切換class，如果有指定的class就刪除該class，沒有就新增該class。
[HTML代碼/text/值]
1.html("html代碼") 不傳參取到HTML代碼，傳參設置HTML代碼。
2.text("text文本") 不傳參取到Text文本，傳參設置Text文本。
3.val("文本框中的值") 不傳參取到文本框中的值(就是標簽中value屬性的屬性值)，傳參設置。
【CSS方法】
[css]
1. .css("屬性名") 取到css樣式的屬性名的屬性值。
.css("屬性名","屬性值") 給節點添加css樣式，屬於行級樣式表權限。
.css({
"屬性名":"屬性值",
"屬性名":"屬性值",
"屬性名":function(index,value){
return 屬性值。
例如:
return 16 + "px";
}
}); 同時添加多個樣式。
2.
1. .offset() 返回節點相對於瀏覽器左上角的偏移量。margin不算節點的一部分。
返回一個對象{top:20,left:20}
2. .position() 返回節點相對於父節點的偏移量，父節點必須是定位元素，如果不是定位元素，
則依然相對於瀏覽器左上角進行測量。
測量偏移時，margin屬於節點的一部分。
3. scrollTop() 設置或取到指定節點的滾動條的位置。
3. .height() 取到或者設置節點的寬高。
.width()
.innerHeight() 取到節點的內部區域 寬高+padding
.innerwidth()
.outerHeight() 取到節點的外部區域
.outerwidth() (不傳參數表示寬高+padding+border，傳入true表示寬高+padding+border+margin)
【JQuery對象訪問】
1 .each() 遍歷數組，傳入一個參數function(index,item),
回調函數的返回值return true，相當於continue；
return false，相當於break。
2 .size() 返回數組的長度。
.length屬性
3. get() 將JQuery對象 轉為JS對象，
傳入index表示取出第一個，並轉為JS對象;
不傳參數，表示將JQuery對象數組中的所有元素，都轉為JS對象
【工具】
[數組和對象操作]
1. $.each(對象或數組,function(index,item){
}) 對傳入的數組或對象進行遍歷，可以是JQuery對象數組，也可以是JS對象數組。
2. $.map() 功能和each一樣，不過遍歷過程 回調函數中可以返回一個值，對原值進行修改。 最終結果用新的變量接收。
3. $.inArray(obj,數組,fromindex) 從fromindex(可省略)開始查找arr數組中的obj下標。如果沒找到返回-1。
4. $.toArray() 將選中的JQuery DOM集合恢復成數組，數組中的每一個是JS對象。
5. $.merge(數組1，數組2) 合並兩個數組。
6. $.parseJSON() 把JSON字符串轉換成JSON對象。
[測試操作]
1. $.contains(JS父對象,JS子對象) 檢測父對象是否包含子對象，返回true或false。
[篩選]
1. .hasclass() 判斷節點是否有這個類名。
【事件方法】
[事件綁定的方式]
1.快捷方式綁定
$("button:eq(0)").dblclick(function(){})
缺點:無法取消事件綁定。
2.on方式綁定
① $("button:eq(0)").on("click dbclick mouseover",function(){
alert("hah");
})
② $("button:eq(0)").off("click");
③ $("button:eq(0)").on({
"click":function(){
alert("click");
},
"mouseover":function(){
alert("over");
}
})
④ $("button:eq(0)").on("click",{"name":"zhangsan","age":18},function(e){
console.log(e.data.name);
$("div").on("click","button",{"name":"zhangsan","age":18},function(e){
console.log(e.data.name);
})
優點:可以取消事件綁定。 可以同時綁定多個事件為同一函數。
也可以傳入一個對象，傳入事件和函數的鍵值對。傳入多個事件的多個函數。
還可以傳入對象和參數，參數中形參為e e可以訪問對象。
傳入一個選擇器，委派給選擇的節點執行。
[事件委派]
概念:將原本綁定在DOM節點上的事件，改為綁定在其父節點甚至根節點上，然后委派給當前節點執行。
事件委派的作用: 1.將事件直接綁定在根節點上，可以減少事件綁定次數，更加節省資源。
2.新增的符合事件委派選擇器的標簽，也可以執行事件委派的事件。
[事件處理]
1.on(事件名,事件委派選擇器,傳入的數據,函數); 綁定事件
2.off(事件名,綁定函數名) 不傳參，清除綁定的所有事件；
如果只傳入一個事件名，清除所有函數。
3.one(事件名,傳入的數據,函數) 使用one綁定的事件只能執行一次。 可以傳入三個函數，
4.trigger(事件名,[1,2,3]) 觸發節點的事件。而不用執行點擊等操作。
第二個參數是個數組，里面的每個值都是傳給事件回調函數的參數
注意!!! 事件回調函數的參數第一個必須是事件對象，因此我們傳遞的參數從第二個開始取值。
傳遞的參數，可以使用arguments進行讀取，下標0依然是事件因子。
5.triggerHandler() 用法與trigger相同
[trigger和triggerHandler的區別]
1. trigger能觸發所有事件。
triggerHandler不能觸發HTML事件，例如表單的submit事件等。
2. trigger可以全局觸發，不限次數
triggerHandler只能觸發所有匹配元素中的第一個觸發事件。
3. trigger的返回值是調用.trigger()函數的DOM對象，符合JQuery的鏈式語法。
triggerHandler的返回值是事件回調函數的返回值，如果沒有返回值 返回undifined。
[事件切換]
1.hover(mouseover函數,mouseout函數) 接受兩個函數，分別表示mouseover和out，
接受一個為mouseover
2.toggle("fast",function(){}) 不傳參數切換顯示/隱藏當前元素。
傳入一個參數，漸變效果。"fast"/"slow"/"ease"等
傳入函數，執行完成之后的回調函數
傳入一個布爾類型的參數，如果是true，顯示，false隱藏
【動畫方法】
1. show()方法 不傳參，直接顯示 不進行動畫
傳入時間毫秒，或者速度字符串"slow","normal","fast"等將在指定時間完成動畫；
也可以傳入一個回調函數，表示動畫完成后執行的回調函數
其實就是同時修改 width/height/opacity
2.hide()方法 讓顯示的元素隱藏，效果與show相反;
[滑動]
1 .slideDown():讓顯示的元素隱藏，修改height屬性 參數同show()
2 .slideUp() :讓隱藏的元素顯示，修改height屬性
3 .slideToggle :以修改height的方式切換顯示和隱藏
[淡入淡出]
1. .fadeIn() 讓隱藏的顯示，修改opacity屬性 參數同show()
2. .fadeOut() 讓顯示的隱藏，修改opacity屬性
3. .fadeToggle() 切換顯示隱藏狀態，修改opacity屬性
4. .fadeTO() 作用與fadeToggle相同，多了第二個參數，表示動畫完成后的最終透明度
[自定義動畫]
1. .animate({
fontSize:"68px"
},2000,"liner",function(){}) 第一個參數傳入一個對象，里頭的是動畫結束狀態的屬性鍵值對
第二個是完成時間 可不寫 可以毫秒 可以"slow" "normal" "fast"
第三個是動畫樣式 "liner" "swing"
第四個是回調函數 可不寫
2. .stop() 停止當前節點的所有動畫，后續動畫不再執行，回調函數不再調用。
3. .finish() 結束當前節點的所有動畫，動畫直接進入最后狀態，調用回調函數。
4. .delay() 傳入一個毫秒值，延時完再執行接下來的動畫。
$("#div1").animate({
fontSize:"68px",
}).delay(5000).animate({
width:"50px",
height:"50px"
})