下面小編就為大家?guī)硪黄猨Query基礎(chǔ)知識點總結(jié)(DOM操作)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。

使用jQuery的方式來操作DOM更加的簡潔、方便，統(tǒng)一的調(diào)用方式方便學習并且可降低學習成本。

1、樣式屬性操作

1）設(shè)置樣式屬性操作

①設(shè)置單個樣式：

// 第一個參數(shù)表示：樣式屬性名稱

// 第二個參數(shù)表示：樣式屬性值

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

②設(shè)置多個樣式（也可以設(shè)置單個）

// 參數(shù)為 {}（對象）

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

2）獲取樣式屬性操作

// 參數(shù)表示要獲取的 樣式屬性名稱

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

2、類操作

1）添加類樣式

——addClass(className)為指定元素添加類className

$(selector).addClass(“l(fā)iItem”); //此處類型不帶點，所有類操作的方法類名都不帶點

2）移除類

——removeClass(className)為指定元素移除類className

$(selector).removeClass(“l(fā)iItem”);

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

 3）判斷有沒有類樣式

——hasClass(className)判斷指定元素是否包含類className

$(selector).hasClass(“l(fā)iItem”); //返回值為true或false

4）切換類樣式

——toggleClass(className)為指定元素切換類className，該元素有類則移除，沒有指定類則添加

$(selector).hasClass(“l(fā)iItem”);

【注意】

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

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

3、操作的樣式很多，那么要通過使用類的方式來操作

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

關(guān)鍵字：簡約、粗暴、干凈利落、直截了當

3、jQuery動畫

3.1隱藏顯示動畫

①show方法

// 用法一：

// 參數(shù)為數(shù)值類型，表示：執(zhí)行動畫時長

/* 單位為：毫秒（ms），參數(shù)2000表示動畫執(zhí)行時長為2000毫秒，即2秒鐘 */

$(selector).show(2000);

// 用法二：

// 參數(shù)為字符串類型，是jQuery預設(shè)的值，共有三個，分別是：slow、normal、fast

/* 跟用法一的對應關(guān)系為： */

/* slow：600ms、normal：400ms、fast：200ms */

$(selector).show(“slow”);

// 用法三：

// 參數(shù)一可以是數(shù)值類型或者字符串類型

// 參數(shù)二表示：動畫執(zhí)行完后立即執(zhí)行的回調(diào)函數(shù)

$(selector).show(2000, function() {});

// 用法四：

// 不帶參數(shù)，作用等同于 css(“display”, ”block”)

/* 注意：此時沒有動畫效果 */

$(selector).show();

【注意】：jQuery預設(shè)的三組動畫效果的語法幾乎一致：參數(shù)可以有兩個，第一個是動畫的執(zhí)行時長，第二個是動畫執(zhí)行完成后的回調(diào)函數(shù)。

第一個參數(shù)可以是：指定字符或者毫秒數(shù)

②hide方法

$(selector).hide(1000); 

$(selector).hide(“slow”);

$(selector).hide(1000, function(){});

$(selector).hide();

3.2 滑入滑出動畫

 ①滑入動畫效果

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

// 注意：省略參數(shù)或者傳入不合法的字符串，那么則使用默認值：400毫秒（同樣適用于fadeIn/slideDown/slideUp）

$(selector).slideDown();

 ②滑出

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

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

③滑入滑出切換動畫效果

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

// 參數(shù)等同與"隱藏和顯示"

4、淡入淡出動畫

 ①淡入動畫效果

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

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

 ②淡出

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

$(selector).fadeOut(1000);

③淡入淡出切換動畫效果

// 作用：通過改變不透明度，切換匹配元素的顯示或隱藏狀態(tài)

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

// 參數(shù)等同與"隱藏和顯示"

④改變不透明度到某個值

——與淡入淡出的區(qū)別：淡入淡出只能控制元素的不透明度從 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具體值；并且時間參數(shù)是必需的！

// 作用：調(diào)節(jié)匹配元素的不透明度

// 用法有別于其他動畫效果

// 第一個參數(shù)表示：時長

// 第二個參數(shù)表示：不透明度值，取值范圍：0-1

$(selector).fadeTo(1000, .5); // 0全透，1全不透

// 第一個參數(shù)為0，此時作用相當于：.css(“opacity”, .5);

$(selector).fadeTo(0, .5);

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

這三個CSS屬性的共性是：屬性值只有一個，并且這個值是數(shù)值（去掉單位后）。

5、自定義動畫

注意：所有能夠執(zhí)行動畫的屬性必須只有一個數(shù)字類型的值。

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

// 作用：執(zhí)行一組CSS屬性的自定義動畫

// 第一個參數(shù)表示：要執(zhí)行動畫的CSS屬性（必選）

// 第二個參數(shù)表示：執(zhí)行動畫時長（可選）

// 第三個參數(shù)表示：動畫執(zhí)行完后立即執(zhí)行的回調(diào)函數(shù)（可選）

$(selector).animate({params},speed,callback);

6、停止動畫 stop()

6.1 作用：停止當前正在執(zhí)行的動畫

6.2 為什么要停止動畫？

如果一個以上的動畫方法在同一個元素上調(diào)用，那么對這個元素來說，后面的動畫將被放到效果隊列中。這樣就形成了動畫隊列。（聯(lián)想：排隊進站）

動畫隊列里面的動畫不會執(zhí)行，直到第一個動畫執(zhí)行完成。

// 第一個參數(shù)表示是否清空所有的后續(xù)動畫

// 第二個參數(shù)表示是否立即執(zhí)行完當前正在執(zhí)行的動畫

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

// 常用方式

$(selector).stop();

解釋：

當調(diào)用stop()方法后，隊列里面的下一個動畫將會立即開始。但是，如果參數(shù)clearQueue被設(shè)置為true，那么隊列面剩余的動畫就被刪除了，并且永遠也不會執(zhí)行。

如果參數(shù)jumpToEnd被設(shè)置為true，那么當前動畫會停止，但是參與動畫的每一個CSS屬性將被立即設(shè)置為它們的目標值。比如：slideUp()方法，那么元素會立即隱藏掉。如果存在回調(diào)函數(shù)，那么回調(diào)函數(shù)也會立即執(zhí)行。

 注意：如果元素動畫還沒有執(zhí)行完，此時調(diào)用sotp()方法，那么動畫將會停止。并且動畫沒有執(zhí)行完成，那么回調(diào)函數(shù)也不會被執(zhí)行。

7、jQuery節(jié)點操作

7.1 動態(tài)創(chuàng)建元素

// $()函數(shù)的另外一個作用：動態(tài)創(chuàng)建元素

var $spanNode = $(“<span>我是一個span元素</span>”);

7.2 添加元素（重點）

①在元素的最后一個子元素后面追加元素：append()（重點）

②作用：在被選元素內(nèi)部的最后一個子元素（或內(nèi)容）后面插入內(nèi)容（頁面中存在或者創(chuàng)建出來的元素都可以）

如果是頁面中存在的元素，那么調(diào)用append()后，會把這個元素從原先的位置移除，然后再插入到新的位置。

 如果是給多個目標追加一個元素，那么append()方法的內(nèi)部會復制多份這個元素，然后追加到多個目標里面去。（最好不要這么做）

③常用參數(shù)：htmlString 或者 jQuery對象

// 在$(selector)中追加$node

$(selector).append($node);

// 在$(selector)中追加div元素，參數(shù)為htmlString

$(selector).append('<div></div>');

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

// appendTo()

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

$(selector).appendTo(node);

// prepend()

//作用：在元素的第一個子元素前面追加內(nèi)容或節(jié)點

$(selector).prepend(node);

// after()

//作用：在被選元素之后，作為兄弟元素插入內(nèi)容或節(jié)點

$(selector).after(node);

// before()

//作用：在被選元素之前，作為兄弟元素插入內(nèi)容或節(jié)點

$(selector).before(node);

7.3 html創(chuàng)建元素（推薦，重點）

①作用：設(shè)置或返回所選元素的html內(nèi)容（包括 HTML 標記）

②設(shè)置內(nèi)容的時候，如果是html標記，會動態(tài)創(chuàng)建元素，此時作用跟js里面的 innerHTML屬性相同

// 動態(tài)創(chuàng)建元素

$(selector).html(‘<span>大方啊</span>');

// 獲取html內(nèi)容

$(selector).html();

 7.4 清空元素

// 清空指定元素的所有子元素（光桿司令）

// 沒有參數(shù)

$(selector).empty();

$(selector).html(“”);

// “自殺” 把自己（包括所有內(nèi)部元素）從文檔中刪除掉

$(selector).remove();

 7.5 復制元素

//作用：復制匹配的元素

// 復制$(selector)所匹配到的元素

// 返回值為復制的新元素

$(selector).clone();

【總結(jié)】：推薦使用html(“<span></span>”)方法來創(chuàng)建元素或者html(“”)清空元素

8、操作form表單（重點）

    8.1屬性操作

①設(shè)置屬性：

// 第一個參數(shù)表示：要設(shè)置的屬性名稱

// 第二個參數(shù)表示：改屬性名稱對應的值

$(selector).attr(“title”, “小花啊”);

②獲取屬性：

// 參數(shù)為：要獲取的屬性的名稱，改操作會返回指定屬性對應的值

$(selector).attr(“title”); // 此時，返回指定屬性的值

③移除屬性：

// 參數(shù)為：要移除的屬性的名稱

$(selector).removeAttr(“title”);

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

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

8.2 值和內(nèi)容

①val()方法：

// 作用：設(shè)置或返回表單元素的值，例如：input,select,textarea的值

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

$(selector).val();

// 設(shè)置所有匹配到的元素的值

$(selector).val(“具體值”);

②text() 方法

// 作用：設(shè)置或獲取匹配元素的文本內(nèi)容

//獲取操作不帶參數(shù)（注意：這時候會把所有匹配到的元素內(nèi)容拼接為一個字符串，不同于其他獲取操作！）

$(selector).text();

//設(shè)置操作帶參數(shù)，參數(shù)表示要設(shè)置的文本內(nèi)容

$(selector).text(“我是內(nèi)容”);

9、尺寸位置操作

9.1 高度和寬度操作

①高度操作height() ：

// 作用：設(shè)置或獲取匹配元素的高度值

//帶參數(shù)表示設(shè)置高度

$(selector).height(200);

//不帶參數(shù)獲取高度

$(selector).height();

②寬度操作width() ：

// 作用：設(shè)置或獲取匹配元素的寬度值

//帶參數(shù)表示設(shè)置寬度

//不帶參數(shù)獲取寬度

$(selector).width(200);

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

A：方式一，返回值number類型，例如：30

方式二，返回值string類型，例如：“30px”

區(qū)別：方式一常用在參與數(shù)學計算的情況。

9.2 坐標值操作

①offset()

// 作用：獲取或設(shè)置元素相對于文檔左上角的位置

// 無參數(shù)表示獲取，返回值為：{left:num, top:num}，值是相對于document的位置

$(selector).offset();

// 有參數(shù)表示設(shè)置，參數(shù)推薦使用數(shù)值類型

$(selector).offset({left:100, top: 150});

注意點：設(shè)置offset后，如果元素沒有定位(默認值：static)，則被修改為relative

②scrollTop()

、、作用：獲取或者設(shè)置元素垂直方向滾動的位置

// 無參數(shù)表示獲取偏移

$(selector).scrollTop();

// 有參數(shù)表示設(shè)置偏移，參數(shù)為數(shù)值類型

$(selector).scrollTop(100);

 ③scrollLeft()

// 作用：獲取或者設(shè)置元素水平方向滾動的位置

$(selector).scrollLeft(100);

 對scrollTop的理解：

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

如果滾動條在最上方?jīng)]有滾動 或者 當前元素沒有出現(xiàn)滾動條，那么這個距離為0

以上這篇jQuery基礎(chǔ)知識點總結(jié)(DOM操作)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考