jQuery-DOM操作

一、複習jQuery基本使用和選擇器

重點內容：

  1、jQuery介紹：

    jQuery是別人封裝好的一個js庫，免費開源易用，提供了我們開發中常用到的操作DOM的API，解決了我們使用js操作DOM常遇到的一些問題（相容性、繁瑣等），並且統一的入口，簡化我們的操作，讓我們更專注於業務！

 2、 jQuery的特點：

    相容性好、強大的jQuery選擇器、統一的入口降低了學習門檻、write less，do more，隱式迭代、鏈式程式設計

  3、jQuery基本使用：（重點）

    引包、入口函式、功能實現程式碼（事件處理）

<script src=”jquery-1.11.1.js”></script>
// 入口函式
$(document).ready(function(){
    // 獲取到id屬性為btnShow的元素
    $(“#btnShow”).click(function(){
        // 獲取到所有的div，並讓這些div展示出來
        $(“div”).show();
    });
});

4、jQuery入口函式：（重點）

// 方式一
$(document).ready(function(){});
// 方式二
$(function(){ });
 

5、jQuery物件和DOM物件的相互轉換（難點 理解）

          jQuery物件-> DOM物件：$(selector)[0]

          DOM物件-> jQuery物件：$(domObject)

6、jQuery選擇器（重點）

重點選擇器
符號(名稱)	說明	用法
#	Id選擇器	$(“#btnShow”).css(“color”, “red”); 選擇id為btnShow的一個元素（返回值為jQuery 物件，下同）
.	類選擇器	$(“.liItem”).css(“color”, “red”); 選擇含有類liItem的所有元素
element	標籤選擇器	$(“li”).css(“color”, “red”); 選擇標籤名為li的所有元素
層級選擇器
空格	後代選擇器	$(“#j_wrap li”).css(“color”, “red”); 選擇id為j_wrap的元素的所有後代元素li
>	子代選擇器	$(“#j_wrap > ul > li”).css(“color”, “red”); 選擇id為j_wrap的元素的所有子元素ul的所有子元素li
基本過濾選擇器
:eq(index)	選擇匹配到的元素中索引號為index的一個元素，index從0開始	$(“li:eq(2)”).css(“color”, ”red”); 選擇li元素中索引號為2的一個元素
:odd	選擇匹配到的元素中索引號為奇數的所有元素，index從0開始	$(“li:odd”).css(“color”, “red”); 選擇li元素中索引號為奇數的所有元素
:even	選擇匹配到的元素中索引號為偶數的所有元素，index從0開始	$(“li:odd”).css(“color”, “red”); 選擇li元素中索引號為偶數的所有元素
篩選（方法）
find(selector)	查詢指定元素的所有後代元素（子子孫孫）	$(“#j_wrap”).find(“li”).css(“color”, “red”); 選擇id為j_wrap的所有後代元素li
children()	查詢指定元素的直接子元素（親兒子元素）	$(“#j_wrap”).children(“ul”).css(“color”, “red”); 選擇id為j_wrap的所有子代元素ul
siblings()	查詢所有兄弟元素（不包括自己）	$(“#j_liItem”).siblings().css(“color”, “red”); 選擇id為j_liItem的所有兄弟元素
parent()	查詢父元素（親的）	$(“#j_liItem”).parent(“ul”).css(“color”, “red”); 選擇id為j_liItem的父元素
eq(index)	查詢指定元素的第index個元素，index是索引號，從0開始	$(“li”).eq(2).css(“color”, “red”); 選擇所有li元素中的第二個

二、使用jQuery操作DOM

    1、為什麼要使用jQuery操作DOM

對比JS操作DOM和jQuery操作DOM

使用jQuery的方式來操作DOM更加的簡介，方便，統一的呼叫方式方便我們學習，降低來我們的學習成本。

  2、重點內容

    2.1、樣式操作

樣式屬性操作  .css()

作用：設定或獲取元素的樣式屬性值

1、設定樣式屬性操作：

    a設定單個樣式：

// 第一個引數表示：樣式屬性名稱

// 第二個引數表示：樣式屬性值

$(selector).css(“color”, “red”);

    b設定多個樣式：（也可以設定單個）

// 引數為 {}（物件）

$(selector).css({“color”: “red”, “font-size”: “30px”});

2、獲取樣式屬性操作：

// 引數表示要獲取的 樣式屬性名稱

$(selector).css(“font-size”);

此時，會返回”font-size”樣式屬性對應的值。

    2.2、類操作

新增類樣式：(addClass) 為指定元素新增類className

    $(selector).addClass(“liItem”);

注意：此處類名不帶點，所有類操作的方法類名都不帶點

移除類樣式：removeClass(className) 為指定元素移除類 className

    $(selector).removeClass(“liItem”);

    $(selector).removeClass(); 不指定引數，表示移除被選中元素的所有類

判斷有沒有類樣式：hasClass(calssName) 判斷指定元素是否包含類 className

    $(selector).hasClass(“liItem”);

    此時，會返回true或false

切換類樣式：toggleClass(className) 為指定元素切換類 className，該元素有類則移除，沒有指定類則新增。

    $(selector).toggleClass(“liItem”);

注意點：

           操作類樣式的時候，所有的類名，都不帶點（.）

       經驗：

            1 操作的樣式非常少，那麼可以通過.css()這個 方法來操作

            2 操作的樣式很多，那麼要通過使用類的方式來操作

            3 如果考慮以後維護方便（把CSS從js中分離出來）的話，推薦使用類的方式來操作。類比CSS書寫位置（把css從html中分離出來）

三、jQuery動畫是什麼？

jQuery提供的一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；同時還提供給我們了自定義動畫的功能。

    3.1、隱藏顯示動畫

1、show方法

作用：讓匹配的元素展示出來

// 用法一：
// 引數為數值型別，表示：執行動畫時長
/* 單位為：毫秒（ms），引數2000即2秒鐘顯示完畢 */
$(selector).show(2000);

// 用法二：
// 引數為字串型別，是jQuery預設的值，共有三個，分別是：slow、normal、fast
/* 跟用法一的對應關係為： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(“slow”);

// 用法三：
// 引數一可以是數值型別或者字串型別
// 引數二表示：動畫執行完後立即執行的回撥函式
$(selector).show(2000, function() {});

// 用法四：
// 不帶引數，作用等同於 css(“display”, ”block”)
/* 注意：此時沒有動畫效果 */
$(selector).show();

注意：

    jQuery預設的三組動畫效果的語法幾乎一致：引數可以有兩個，第一個是動畫的執行時長，第二個是動畫執行完成後的回撥函式。

    第一個引數是：可以是指定字元或者毫秒數

2、hide方法

    作用：讓匹配元素隱藏掉

    用法參考show方法

$(selector).hide(1000); // 1000表示什麼？
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();

3、滑入滑出動畫

    1、滑入動畫效果（聯想：生活中的捲簾門）

      作用：讓元素以下拉動畫效果展示出來

$(selector).slideDown(speed,callback);

注意：省略引數或者傳入不合法的字串，那麼則使用預設值：400毫秒（同樣適用於fadeIn/slideDown/slideUp）

$(selector).slideDown();

2、滑出動畫效果

  作用：讓元素以上拉動畫效果隱藏起來

$(selector).slideUp(speed,callback);

3、滑入滑出切換動畫效果

$(selector).slideToggle(speed,callback);

4、淡入淡出動畫

  1、淡入動畫效果

    作用：讓元素以淡淡的進入視線的方式展示出來

$(selector).fadeIn(speed, callback);

  2、淡出動畫效果

   作用：讓元素以漸漸消失的方式隱藏起來

$(selector).fadeOut(1000);

  3、淡入淡出切換動畫效果

     作用：通過改變透明度，切換匹配元素的顯示或隱藏狀態

$(selector).fadeToggle('fast',function(){});

  4、改變透明度到某個值

    與淡入淡出的區別：淡入淡出只能控制元素的不透明度從 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具體值。並且時間引數是必需的！

    作用：調節匹配元素的不透明度

// 用法有別於其他動畫效果
// 第一個引數表示：時長
// 第二個引數表示：不透明度值，取值範圍：0-1
$(selector).fadeTo(1000, .5); //  0全透，1全不透
// 第一個引數為0，此時作用相當於：.css(“opacity”, .5);
$(selector).fadeTo(0, .5);

jQuery提供的動畫使用方法總結：

有規律的體現：

    jQuery提供的這幾個動畫效果控制的CSS屬性包括：高度、寬度、不透明度。{height:400px; width:300px; opacity:.4;}

    這三個CSS屬性的共性是：屬性值只有一個，並且這個值是數值（去掉單位後）。

    四、自定義動畫

注意：所有能夠執行動畫的屬性必須只有一個數字型別的值。

比如：要改變字型大小，要使用：fontSize（font-size），不要使用：font

動畫支援的屬性：

作用：執行一組CSS屬性的自定義動畫

// 第一個引數表示：要執行動畫的CSS屬性（必選）
// 第二個引數表示：執行動畫時長（可選）
// 第三個引數表示：動畫執行完後立即執行的回撥函式（可選）
$(selector).animate({params},speed,callback);

    五、停止動畫

stop()

作用：停止當前正在執行的動畫

為什麼要停止動畫？

如果一個以上的動畫方法在同一個元素上呼叫，那麼對這個元素來說，後面的動畫將被放到效果佇列中。這樣就形成了動畫佇列。（聯想：排隊進站）

動畫佇列裡面的動畫不會執行，直到第一個動畫執行完成。

// 第一個引數表示後續動畫是否要執行

（true:後續動畫不執行  ;false:後續動畫會執行）

// 第二個引數表示當前動畫是否執行完

（true:立即執行完成當前動畫  ;false:立即停止當前動畫）

$(selector).stop(clearQueue,jumpToEnd);

都不給，預設false；

解釋：

當呼叫stop()方法後，佇列裡面的下一個動畫將會立即開始。但是，如果引數clearQueue被設定為true，那麼佇列面剩餘的動畫就被刪除了，並且永遠也不會執行。

如果引數jumpToEnd被設定為true，那麼當前動畫會停止，但是參與動畫的每一個CSS屬性將被立即設定為它們的目標值。比如：slideUp()方法，那麼元素會立即隱藏掉。如果存在回撥函式，那麼回撥函式也會立即執行。

注意：如果元素動畫還沒有執行完，此時呼叫sotp()方法，那麼動畫將會停止。並且動畫沒有執行完成，那麼回撥函式也不會被執行。

常用方式：

$(selector).stop();

六、jQuery節點操作

1、動態建立元素

// $()函式的另外一個作用：動態建立元素
var $spanNode = $(“<span>我是一個span元素</span>”);
var node = $(“#box”).html（“<li>我是li</li>”）；

 2、 新增元素

在元素的最後一個子元素後面追加元素：

append()（重點）

作用：在被選元素內部的最後一個子元素（或內容）後面插入內容（存在或者創建出來的元素都可以）

如果是頁面中存在的元素，那麼呼叫append()後，會把這個元素放到相應的目標元素裡面去；但是，原來的這個元素，就不存在了。

       如果是給多個目標追加元素，那麼方法的內部會複製多份這個元素，然後追加到多個目標裡面去。

常用引數：htmlString 或者 jQuery物件

// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素，引數為htmlString
$(selector).append('<div></div>');

不常用操作：（用法跟append()方法基本一致）

1、appendTo()

    作用：同append()，區別是：把$(selector)追加到node中去

    $(selector).appendTo(node);

2、prepend()

    作用：在元素的第一個子元素前面追加內容或節點

     $(selector).prepend(node);

3、after()

    作用：在被選元素之後，作為兄弟元素插入內容或節點

    $(selector).after(node);

4、before()

    作用：在被選元素之前，作為兄弟元素插入內容或節點

    $(selector).before(node);

1、html建立元素（推薦使用，重點）

作用：設定或返回所選元素的html內容（包括 HTML 標記）

設定內容的時候，如果是html標記，會動態建立元素，此時作用跟js裡面的 innerHTML屬性相同

// 動態建立元素
$(selector).html(‘<span>傳智播客</span>’);
// 獲取html內容
$(selector).html();

2、清空元素

// 清空指定元素的所有子元素（光桿司令）
// 沒有引數
$(selector).empty();
$(selector).html(“”);
// “自殺” 把自己（包括所有內部元素）從文件中刪除掉
$(selector).remove();

3、複製元素

作用：複製匹配的元素

// 複製$(selector)所匹配到的元素
// 返回值為複製的新元素
$(selector).clone();

總結：

    推薦使用html(“<span></span>”)方法來建立元素或者html(“”)清空元素

七、操作form表單

    1、屬性操作

1.1、設定屬性：

// 第一個引數表示：要設定的屬性名稱
// 第二個引數表示：改屬性名稱對應的值
$(selector).attr(“title”, “傳智播客”);

2.1、獲取屬性：

// 引數為：要獲取的屬性的名稱，改操作會返回指定屬性對應的值
$(selector).attr(“title”);

此時，返回指定屬性的值

2.2、移除屬性：

// 引數為：要移除的屬性的名稱
$(selector).removeAttr(“title”);

注意：checked、selected、disabled要使用.prop()方法。

prop方法通常用來影響DOM元素的動態狀態，而不是改變的HTML屬性。例如：input和button的disabled特性，以及checkbox的checked特性。

八、值和內容

    1、val()方法：

作用：設定或返回表單元素的值，例如：input,select,textarea的值

// 獲取匹配元素的值，只匹配第一個元素

$(selector).val();
// 設定所有匹配到的元素的值
$(selector).val(“具體值”);

    2、text() 方法:

作用：設定或獲取匹配元素的文字內容

//獲取操作不帶引數（注意：這時候會把所有匹配到的元素內容拼接為一個字串，不同於其他獲取操作！）
$(selector).text();
//設定操作帶引數，引數表示要設定的文字內容
$(selector).text(“我是內容”);

九、尺寸位置操作

1、高度和寬度操作

高度操作height() ：

作用：設定或獲取匹配元素的高度值

//帶引數表示設定高度
$(selector).height(200);
//不帶引數獲取高度
$(selector).height();

寬度操作width() ：

作用：設定或獲取匹配元素的寬度值

//帶引數表示設定寬度
//不帶引數獲取寬度
$(selector).width(200);

css()獲取高度和height獲取高度的區別？

2、座標值操作

offset()

作用：獲取或設定元素相對於文件的位置

// 無引數表示獲取，返回值為：{left:num, top:num}，值是相對於document的位置
$(selector).offset();
// 有引數表示設定，引數推薦使用數值型別
$(selector).offset({left:100, top: 150});

注意點：設定offset後，如果元素沒有定位(預設值：static)，則被修改為relative

position()

作用：獲取相對於其最近的具有定位的父元素的位置。

// 獲取，返回值為物件：{left:num, top:num}
$(selector).position();

注意：只能獲取，不能設定。

scrollTop()

作用：獲取或者設定元素垂直方向滾動的位置

// 無引數表示獲取偏移
// 有引數表示設定偏移，引數為數值型別
$(selector).scrollTop(100);

scrollLeft()

作用：獲取或者設定元素水平方向滾動的位置

$(selector).scrollLeft(100);

對scrollTop的理解：

垂直滾動條位置 是可滾動區域 在 可視區域上方的 被隱藏區域的高度。

如果滾動條在最上方沒有滾動 或者 當前元素沒有出現滾動條，那麼這個距離為0