使用jQuery的方式來操作DOM更加的簡潔、方便，統一的調用方式方便學習并且可降低學習成本。
1、樣式屬性操作
1）設置樣式屬性操作
①設置單個樣式：
// 第一個參數表示：樣式屬性名稱// 第二個參數表示：樣式屬性值$(selector).css(“color”, “red”);
②設置多個樣式（也可以設置單個）
// 參數為 {}（對象）$(selector).css({“color”: “red”, “font-size”: “30px”});2）獲取樣式屬性操作
// 參數表示要獲取的 樣式屬性名稱$(selector).css(“font-size”);
2、類操作
1）添加類樣式
――addClass(className)為指定元素添加類className
$(selector).addClass(“liItem”); //此處類型不帶點，所有類操作的方法類名都不帶點
$(selector).removeClass(“liItem”);$(selector).removeClass(); //不指定參數，表示移除被選中元素的所有類
3）判斷有沒有類樣式
$(selector).hasClass(“liItem”); //返回值為true或false
4）切換類樣式
$(selector).hasClass(“liItem”);
【注意】
1、操作類樣式的時候，所有的類名都不帶點（.）
2、操作的樣式非常少，那么可以通過.css()這個方法來操作
3、操作的樣式很多，那么要通過使用類的方式來操作
4、如果考慮以后維護方便（把CSS從js中分離出來）的話，推薦使用類的方式來操作。類比CSS書寫位置（把CSS從html中分離出來）
關鍵字：簡約、粗暴、干凈利落、直截了當
3、jQuery動畫
3.1隱藏顯示動畫
①show方法
// 用法一：// 參數為數值類型，表示：執行動畫時長/* 單位為：毫秒（ms），參數2000表示動畫執行時長為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預設的三組動畫效果的語法幾乎一致：參數可以有兩個，第一個是動畫的執行時長，第二個是動畫執行完成后的回調函數。
第一個參數可以是：指定字符或者毫秒數
②hide方法
$(selector).hide(1000); $(selector).hide(“slow”);$(selector).hide(1000, function(){});$(selector).hide();3.2 滑入滑出動畫
①滑入動畫效果
$(selector).slideDown(speed,callback); // 注意：省略參數或者傳入不合法的字符串，那么則使用默認值：400毫秒（同樣適用于fadeIn/slideDown/slideUp）$(selector).slideDown();
②滑出
// 作用：讓元素以上拉動畫效果隱藏起來$(selector).slideUp(speed,callback);
③滑入滑出切換動畫效果
$(selector).slideToggle(speed,callback);// 參數等同與"隱藏和顯示"
4、淡入淡出動畫
①淡入動畫效果
// 作用：讓元素以淡淡的進入視線的方式展示出來$(selector).fadeIn(speed, callback);
②淡出
// 作用：讓元素以漸漸消失的方式隱藏起來$(selector).fadeOut(1000);
③淡入淡出切換動畫效果
// 作用：通過改變不透明度，切換匹配元素的顯示或隱藏狀態$(selector).fadeToggle('fast',function(){});// 參數等同與"隱藏和顯示"④改變不透明度到某個值
――與淡入淡出的區別：淡入淡出只能控制元素的不透明度從 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具體值；并且時間參數是必需的！
// 作用：調節匹配元素的不透明度// 用法有別于其他動畫效果// 第一個參數表示：時長// 第二個參數表示：不透明度值，取值范圍：0-1$(selector).fadeTo(1000, .5); // 0全透，1全不透 // 第一個參數為0，此時作用相當于：.css(“opacity”, .5);$(selector).fadeTo(0, .5);
jQuery提供的這幾個動畫效果控制的CSS屬性包括：高度、寬度、不透明度。{height:400px; width:300px; opacity:.4;}
這三個CSS屬性的共性是：屬性值只有一個，并且這個值是數值（去掉單位后）。
5、自定義動畫
注意：所有能夠執行動畫的屬性必須只有一個數字類型的值。
比如：要改變字體大小，要使用：fontSize（font-size），不要使用：font
// 作用：執行一組CSS屬性的自定義動畫// 第一個參數表示：要執行動畫的CSS屬性（必選）// 第二個參數表示：執行動畫時長（可選）// 第三個參數表示：動畫執行完后立即執行的回調函數（可選）$(selector).animate({params},speed,callback);6、停止動畫 stop()
6.1 作用：停止當前正在執行的動畫
6.2 為什么要停止動畫？
如果一個以上的動畫方法在同一個元素上調用，那么對這個元素來說，后面的動畫將被放到效果隊列中。這樣就形成了動畫隊列。（聯想：排隊進站）
動畫隊列里面的動畫不會執行，直到第一個動畫執行完成。
// 第一個參數表示是否清空所有的后續動畫// 第二個參數表示是否立即執行完當前正在執行的動畫$(selector).stop(clearQueue,jumpToEnd);// 常用方式$(selector).stop();
解釋：
當調用stop()方法后，隊列里面的下一個動畫將會立即開始。但是，如果參數clearQueue被設置為true，那么隊列面剩余的動畫就被刪除了，并且永遠也不會執行。
如果參數jumpToEnd被設置為true，那么當前動畫會停止，但是參與動畫的每一個CSS屬性將被立即設置為它們的目標值。比如：slideUp()方法，那么元素會立即隱藏掉。如果存在回調函數，那么回調函數也會立即執行。
注意：如果元素動畫還沒有執行完，此時調用sotp()方法，那么動畫將會停止。并且動畫沒有執行完成，那么回調函數也不會被執行。
7、jQuery節點操作
7.1 動態創建元素
// $()函數的另外一個作用：動態創建元素var $spanNode = $(“<span>我是一個span元素</span>”);
7.2 添加元素（重點）
①在元素的最后一個子元素后面追加元素：append()（重點）
②作用：在被選元素內部的最后一個子元素（或內容）后面插入內容（頁面中存在或者創建出來的元素都可以）
如果是頁面中存在的元素，那么調用append()后，會把這個元素從原先的位置移除，然后再插入到新的位置。
如果是給多個目標追加一個元素，那么append()方法的內部會復制多份這個元素，然后追加到多個目標里面去。（最好不要這么做）
③常用參數：htmlString 或者 jQuery對象
// 在$(selector)中追加$node$(selector).append($node);// 在$(selector)中追加div元素，參數為htmlString$(selector).append('<div></div>');（了解）不常用操作：（用法跟append()方法基本一致）
// appendTo()//作用：同append()，區別是：把$(selector)追加到node中去$(selector).appendTo(node); // prepend()//作用：在元素的第一個子元素前面追加內容或節點$(selector).prepend(node); // after()//作用：在被選元素之后，作為兄弟元素插入內容或節點$(selector).after(node); // before()//作用：在被選元素之前，作為兄弟元素插入內容或節點$(selector).before(node);
①作用：設置或返回所選元素的html內容（包括 HTML 標記）
②設置內容的時候，如果是html標記，會動態創建元素，此時作用跟js里面的 innerHTML屬性相同
// 動態創建元素$(selector).html(‘<span>大方啊</span>');// 獲取html內容$(selector).html();
7.4 清空元素
// 清空指定元素的所有子元素（光桿司令）// 沒有參數$(selector).empty();$(selector).html(“”);// “自殺” 把自己（包括所有內部元素）從文檔中刪除掉$(selector).remove();
7.5 復制元素
//作用：復制匹配的元素// 復制$(selector)所匹配到的元素// 返回值為復制的新元素$(selector).clone();
【總結】：推薦使用html(“<span></span>”)方法來創建元素或者html(“”)清空元素
8、操作form表單（重點）
①設置屬性：
// 第一個參數表示：要設置的屬性名稱// 第二個參數表示：改屬性名稱對應的值$(selector).attr(“title”, “小花啊”);
②獲取屬性：
// 參數為：要獲取的屬性的名稱，改操作會返回指定屬性對應的值$(selector).attr(“title”); // 此時，返回指定屬性的值
③移除屬性：
// 參數為：要移除的屬性的名稱$(selector).removeAttr(“title”);
【注意】：checked、selected、disabled要使用.prop()方法。
prop方法通常用來影響DOM元素的動態狀態，而不是改變的HTML屬性。例如：input和button的disabled特性，以及checkbox的checked特性。
8.2 值和內容
①val()方法：
// 作用：設置或返回表單元素的值，例如：input,select,textarea的值// 獲取匹配元素的值，只匹配第一個元素$(selector).val();// 設置所有匹配到的元素的值$(selector).val(“具體值”);
②text() 方法
// 作用：設置或獲取匹配元素的文本內容//獲取操作不帶參數（注意：這時候會把所有匹配到的元素內容拼接為一個字符串，不同于其他獲取操作?。?(selector).text();//設置操作帶參數，參數表示要設置的文本內容$(selector).text(“我是內容”);
9、尺寸位置操作
9.1 高度和寬度操作
①高度操作height() ：
// 作用：設置或獲取匹配元素的高度值//帶參數表示設置高度$(selector).height(200);//不帶參數獲取高度$(selector).height();
②寬度操作width() ：
// 作用：設置或獲取匹配元素的寬度值//帶參數表示設置寬度//不帶參數獲取寬度$(selector).width(200);
css()獲取高度和height獲取高度的區別？
A：方式一，返回值number類型，例如：30
方式二，返回值string類型，例如：“30px”
區別：方式一常用在參與數學計算的情況。
9.2 坐標值操作
①offset()
// 作用：獲取或設置元素相對于文檔左上角的位置// 無參數表示獲取，返回值為：{left:num, top:num}，值是相對于document的位置$(selector).offset();// 有參數表示設置，參數推薦使用數值類型$(selector).offset({left:100, top: 150});注意點：設置offset后，如果元素沒有定位(默認值：static)，則被修改為relative
②scrollTop()
、、作用：獲取或者設置元素垂直方向滾動的位置// 無參數表示獲取偏移$(selector).scrollTop(); // 有參數表示設置偏移，參數為數值類型$(selector).scrollTop(100);
③scrollLeft()
// 作用：獲取或者設置元素水平方向滾動的位置$(selector).scrollLeft(100);
對scrollTop的理解：
垂直滾動條位置 是可滾動區域 在 可視區域上方的 被隱藏區域的高度。
如果滾動條在最上方沒有滾動 或者 當前元素沒有出現滾動條，那么這個距離為0
以上這篇jQuery基礎知識點總結(DOM操作)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
