java入門第七篇-JQuery；

標籤：lse   位移量   定義   show   式表   完成後   轉換   簡寫   fadeout   

【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"})

java入門第七篇-JQuery；