DOM 的增刪改插

操作內容

html()：獲取 / 設置標簽內的數據，效果類比 innerHTML；會解析里面的 html 標簽

text()：獲取 / 設置標簽內的數據，效果類比 innerText；不會解析 html 標簽

val()：獲取 / 設置表單項的 value 值

• 不傳參是獲取；傳參是設置
• 獲取時，html() 獲取的是標簽里面的內容；text() 獲取的是標簽里面的文本

$('button.modify').click(() => {$('div').html('<p style="color:skyBlue">笑死</p>'); })$('button.showHTML').click(() => {console.log($('div').html()); // <p style="color:skyBlue">笑死</p> })$('button.showText').click(() => {console.log($('div').text()); // 笑死 })

val() 操作輸入框內容

$('button.modify').click(() => {$('input').val('content'); })$('button.show').click(() => {console.log($('input').val()); })

• 修改時，能修改所有 input 的 value
• 但獲取時，只能獲取第一個 input 標簽的 value

val() 可以通過數組參數，批量操作按鈕的選中狀態

• 操作單選按鈕：

<label>蘋果<input type="radio" name="fruit" value="apple"></label> <label>香蕉<input type="radio" name="fruit" value="banana"></label> <label>雪梨<input type="radio" name="fruit" value="pear"></label> $('input[name="fruit"][type="radio"]').val(['apple']); // 數組元素為 value 值

• 操作復選按鈕：

$('input[name="fruit"][type="checkbox"]').val(['apple', 'pear']);

• 操作下拉列表：（設置了 multiple 屬性）

<select multiple><option value="apple">蘋果</option><option value="pear">雪梨</option><option value="banana">香蕉</option> </select> $('select').val(['apple', 'pear']);

操作樣式

css()

• 格式：JQuery對象.css('屬性名'[, '屬性值']);
• 用于設置和獲取 CSS 樣式
• 如果沒有傳入屬性值 → 獲取樣式；傳入了屬性值 → 設置樣式
• 返回值：JQuery 對象

.box {width: 100px;height: 100px;background: lightcoral;margin: 10px; } <button>按鈕</button> <div></div>

• 當 JQuery 對象包含多個 DOM 對象時，會獲取第一個 DOM 對象的樣式；但能設置所有 DOM 對象的樣式

$('button').click(() => {console.log($('div').css('background'));// rgb(255, 182, 193) none repeat scroll 0% 0% / auto padding-box border-box$('div').css('background', 'lightblue'); })

多樣式設置

• 因為返回值是 JQuery 對象，所以可以鏈式調用

$('button').click(() => {$('div').css('background', 'lightblue').css('border', '3px solid Blue'); })

• 傳遞一個對象參數，一次設置多個樣式：

$('button').click(() => {$('div').css({background: 'lightblue',width: '200px'}); })

特殊寫法

• 與數值有關的屬性值，可以直接寫數值 / 數字字符串

$('button').click(() => {$('div').css('width', 200); // 200 → '200' → '200px' (三種寫法都可) })

• 屬性值與數值變化有關的寫法：

$('button').click(() => {$('div').css('width', '+=20'); // '+=20' → '+=20px' (兩種寫法都可) })

操作位置

offset()

格式：JQuery對象.offset([obj]);

獲取 / 設置元素在當前視口的相對偏移

接收 1 個對象參數：key → 位置；value → 數值

無參數表示獲取：

$('button').click(() => {console.log($('div').offset()); // {top: 17.99715805053711, left: 17.99715805053711} })

有參數表示設置：

$('button').click(() => {$('div').offset({top: 100,left: 100}); })

position()

• 格式：JQuery對象.position();
• 用于獲取元素相對父元素的偏移

div {width: 100px;height: 100px;background: lightcoral;margin: 10px;position: relative; }p {margin: 0;position: absolute;top: 10px;left: 10px;width: 20px;height: 20px;background: lightblue; } <div class="outer"><p class="inner"></p> </div> console.log($('.inner').position()); // {top: 10, left: 10}

操作寬高

<div> </div> div {width: 100px;height: 100px;margin: 10px;padding: 10px;border: 10px solid lightblue;background: lightcoral; }

height() & width()

• 格式：JQuery對象.height([value] / [fn]);
• 用于獲取 / 設置當前元素的 height & width 屬性值
• 參數可以為：數值 / 回調函數

無參數 → 獲取；數值參數 → 設置

console.log($('div').height()); // 100 $('div').height(200); console.log($('div').height()); // 200

回調函數接收 2 個參數：索引 index、元素的原高度 oldHeight / 原寬度 oldWidth

$('div').click(function () {$(this).height((index, oldHeight) => {return oldHeight + 20;}); });

innerHeight() & innerWidth()

• 獲取第 1 個元素的內部區域高度 （height + padding * 2）

console.log($('div').innerHeight()); // 120 console.log($('div').innerWidth()); // 120

outerHeight() & outerWidth()

• 獲取第 1 個匹配元素外部高度
• 接收 1 個布爾參數：ture → 包括外邊距；false → 不包括外邊距 (默認)
• false：height + padding * 2 + border * 2；true：再 + margin * 2

console.log($('div').outerHeight()); // 140 console.log($('div').outerWidth()); // 140 console.log($('div').outerHeight(true)); // 160 console.log($('div').outerWidth(true)); // 160

操作屬性

• attr() & prop() 用于設置和獲取標簽的屬性值
• 接收 2 個參數：key、value
• 傳入 value 為設置屬性；不傳入 value 為獲取屬性
• 設置屬性時，可以設置整個 JQuery 類數組的所有 DOM 元素；獲取時，只能獲取第 1 個 DOM 元素的屬性值

<button class="add">添加</button> <button class="remove">刪除</button> <input class="name" type="text"> <input class="hobbies" type="text"> <input class="character" type="text">

attr() 方法

• 對于沒有設置屬性值的屬性，返回 undefined

$('button').click(() => {console.log($('input').attr('id')); // undefined$('input').attr('id', 'ok');console.log($('input').attr('id')); // ok })

• 設置多個屬性：傳入對象參數 / 鏈式操作
• 對于 checked、readOnly、selected、disabled 等可以不需要屬性值的屬性
  如果沒有設置，則返回 undefined；可以通過 布爾值 / 字符串 設置屬性值

$('button').click(() => {console.log($('input').attr('readOnly'), $('input').attr('disabled')); // undefined undefined$('input').attr('readOnly', true).attr('disabled', 'disabled'); // 鏈式操作console.log($('input').attr('readOnly'), $('input').attr('disabled')); // checked disabled }) $('button').click(() => {console.log($('input').attr('readOnly'), $('input').attr('disabled')); // undefined undefined$('input').attr({readOnly: true,disabled: 'disabled'}); // 傳入對象參數console.log($('input').attr('readOnly'), $('input').attr('disabled')); // checked disabled })

• attr() 還可以操作自定義屬性

$('button').click(() => {console.log($('input').attr('data-name')); // undefined$('input').attr('data-name', 'superman');console.log($('input').attr('data-name')); // superman })

prop() 方法

• 一般與 attr() 等效
• 但是，對于 checked、readOnly、selected、disabled 等可以不需要屬性值的屬性
  如果沒有設置，則返回 false；否則返回 true。所以用于操作以上屬性比較多

$('button').click(() => {console.log($('input').prop('checked')); // false$('input').attr('checked', 'checked');console.log($('input').prop('checked')); // true })

removeAttr() 方法

• 用來刪除標簽的屬性
• 接收 1 個參數，需要刪除的屬性名

$('button.add').click(() => {$('input').prop('id', 'idName'); })$('button.remove').click(() => {$('input').removeAttr('id'); })

操作類名

addClass()：添加類名

removeClass()：刪除類名

toggleClass()：有則刪除，無則添加

• 返回值：JQuery 對象（所以，可以進行鏈式操作）

$('button').click(() => {$('div').toggleClass('name'); })

總結

以上是生活随笔為你收集整理的【JQuery】操作 DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。