jQuery學習02

標籤：

1. jQuery操作樣式
1.1 使用jQuery設定css樣式
1.1.1 設定單個樣式
jQueryobj.css(name,value);設定需要更改的屬性名稱和屬性值。
1.1.2 設定多個樣式
jQueryobj.css(obj);obj:{name:value,name:value,...}由多個屬性名稱和屬性值組成的索引值對組成的對象。
1.1.3 擷取樣式
jQueryobj.css(name);擷取的是jQuery對象中第一個元素的對應屬性的值。
1.2 使用jQuery設定class名
1.2.1 添加className
jQueryobj.addClass(className);在對象中追加指定的className，不影響原本存在的className。
1.2.2 移除className
jQueryobj.removeClass(className);在對象中找到並移除指定的className，如果未找到指定的className則無效果，如果未指定className則視為將該對象的所有className全部移除。
1.2.3 判斷className是否存在
jQueryobj.hasClass(className);在對象的className中找是否存在指定的className，如果有返回true，如果沒有則返回false。
1.2.4 切換className
jQueryobj.toggleClass(className);如果對象中存在指定的className，則將該className移除，如果對象中不存在指定的className，則給對象追加這個className。
2. jQuery動畫
2.1 顯示和隱藏動畫
jQueryobj.show(speed,callback);讓對象顯示，如果不傳入參數的話將直接顯示對象，沒有動畫效果。
jQueryobj.hide(speed,callback);讓對象隱藏，如果不傳入參數的話將直接隱藏對象，沒有動畫效果。
jQueryobj.toggle(speed,callback);切換對象顯示或隱藏狀態，如果對象原來為顯示狀態則將對象隱藏，如果對象原來為隱藏狀態則將對象顯示，不傳入傳輸也會有動畫效果。
speed：動畫執行的時間，callback：動畫完成時執行的回呼函數。
這組動畫改變的是對象的寬度、高度和透明度。
2.2 淡入淡齣動畫
jQueryobj.fadeIn(speed,callback);讓對象淡入，不傳入參數也會有動畫效果。
jQueryobj.fadeOut(speed,callback);讓對象淡出，不傳入參數也會有動畫效果。
jQueryobj.fadeToggle(speed,callback);切換對象淡入或淡出狀態，如果對象原來為完全透明則將
對象淡入，如果對象原來不為完全透明則將對象淡出。
jQueryobj.fadeTo(speed,to,callback);讓對象淡入或淡出到指定的透明度，speed為必填參數，如果不填將會認為傳入的to值為speed值。
to參數為需要淡入或淡出的目標透明度。
speed：動畫執行的時間，callback：動畫完成時執行的回呼函數。
這組動畫改變的是對象的透明度。
2.3 滑入和滑齣動畫
jQueryobj.slideDown(speed,callback);讓對象滑入，不傳入參數也會有動畫效果。
jQueryobj.slideUp(speed,callback);讓對象滑出，不傳入參數也會有動畫效果。
jQueryobj.slideToggle(speed,callback);切換對象滑入或滑出狀態，如果對象原來高度為0時則將對象滑入，如果對象原來高度不為0則將對象滑出。
speed：動畫執行的時間，callback：動畫完成時執行的回呼函數。
這組動畫改變的是對象的高度。
2.4 自訂動畫
jQueryobj.animate(prop, speed, easing, callback);自訂改變對象我們想要改變的屬性及目標值。
prop:{name:value,name:value,...}由多個屬性名稱和屬性值組成的索引值對組成的對象。
speed：動畫執行的時間，callback：動畫完成時執行的回呼函數。
easing：動畫執行時的顯示效果。
2.5 參數詳解
2.5.1 speed：可以傳入兩種值：
指定的字串：fast、slow、normal。
數字：需要動畫執行的時間，單位是ms。
2.5.2 callback：回呼函數
在動畫執行完再執行的函數，可以沒有。
2.5.3 easing：動畫顯示效果
swing：動畫的開始和結束時變化較慢，動畫中間部分變化較快，成變化速度成正弦形式。
linear：勻速的線性變化，變化速度不變。
2.6 動畫的隊列
給一個對象註冊多個動畫，而註冊的間隔時間很短時，所有被註冊的動畫需要依次等前面的動畫執行完才會進行，這種現象就是動畫隊列。
jQueryobj.stop(clearQueue,jumpToEnd);停止當前正在執行的動畫，它的兩個參數分別表示：
clearQueue:是否清除動畫隊列中所有等待執行的動畫。傳入參數為boolean值。
jumpToEnd:是否跳轉到當前動畫的最終效果。傳入參數為boolean值。
可以根據具體實現要求來設定stop的兩個參數值。
3. jQuery操作DOM節點
3.1 建立DOM節點
$(htmlStr):htmlStr為html元素格式的字串，$()的形式會將html字串轉換為jQuery對象。它的傳回值就是這個對象。
3.2 添加DOM節點
3.2.1 append()
jQueryobj.append(jQueryobj);將這個參數對象追加到指定的父元素對象中，這個參數jQueryobj的內容可以是html元素格式的字串，也可以是頁面中擷取的元素。
注意：如果參數為頁面中擷取的元素時，在追加的時候會將原頁面元素剪下後粘貼到指定地方。
jQueryobj.append(htmlStr);會把htmlStr轉換成jQuery對象後在進行添加。
jQuery會將這種字串自動識別為DOM元素節點。
append()這種方法會將參數對象追加到指定對象的所有子項目的最後。
3.2.2 prepend(htmlStr/jQueryObj)
使用方法和注意點都和append完全一致，prepend()是將指定元素添加到當前對象的所有子項目的前面。
3.2.3 before(htmlStr/jQueryObj)
使用方法和注意點都和append完全一致，before()是將指定元素添加到當前元素的前面。
3.2.4 after(htmlStr/jQueryObj)
使用方法和注意點都和append完全一致，after()是將指定元素添加到當前元素的後面。
3.3 替換DOM節點
jQueryobj.html(htmlStr);將當前對象中的內容替換為指定的內容，會將htmlStr字串自動識別為DOM元素節點。
3.4 清空DOM節點
3.4.1 jQueryobj.html("");將當前對象中的內容替換為空白內容，不推薦使用這種方式的清空，因為這種只會情況內容，而內容對應的事件等都還保留在記憶體中。
3.4.2 jQueryobj.empty();清空當前對象的所有子項目，包括子項目對應的事件等。
3.5 刪除DOM節點
jQueryobj.remove();刪除當前對象，包括當前對象的所有子項目和註冊的事件。
3.6 複製DOM節點
jQueryobj.clone(flag);複製當前對象，預設為深度複製，且只能深度複製。
參數flag為是否複製當前對象註冊的事件，傳入值為boolean類型。

jQuery學習02