DOM 的增刪改插

操作內(nèi)容

html()：獲取 / 設(shè)置標(biāo)簽內(nèi)的數(shù)據(jù)，效果類比 innerHTML；會(huì)解析里面的 html 標(biāo)簽

text()：獲取 / 設(shè)置標(biāo)簽內(nèi)的數(shù)據(jù)，效果類比 innerText；不會(huì)解析 html 標(biāo)簽

val()：獲取 / 設(shè)置表單項(xiàng)的 value 值

• 不傳參是獲取；傳參是設(shè)置
• 獲取時(shí)，html() 獲取的是標(biāo)簽里面的內(nèi)容；text() 獲取的是標(biāo)簽里面的文本

$('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() 操作輸入框內(nèi)容

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

• 修改時(shí)，能修改所有 input 的 value
• 但獲取時(shí)，只能獲取第一個(gè) input 標(biāo)簽的 value

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

• 操作單選按鈕：

<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']); // 數(shù)組元素為 value 值

• 操作復(fù)選按鈕：

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

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

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

操作樣式

css()

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

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

• 當(dāng) JQuery 對(duì)象包含多個(gè) DOM 對(duì)象時(shí)，會(huì)獲取第一個(gè) DOM 對(duì)象的樣式；但能設(shè)置所有 DOM 對(duì)象的樣式

$('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'); })

多樣式設(shè)置

• 因?yàn)榉祷刂凳?JQuery 對(duì)象，所以可以鏈?zhǔn)秸{(diào)用

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

• 傳遞一個(gè)對(duì)象參數(shù)，一次設(shè)置多個(gè)樣式：

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

特殊寫法

• 與數(shù)值有關(guān)的屬性值，可以直接寫數(shù)值 / 數(shù)字字符串

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

• 屬性值與數(shù)值變化有關(guān)的寫法：

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

操作位置

offset()

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

獲取 / 設(shè)置元素在當(dāng)前視口的相對(duì)偏移

接收 1 個(gè)對(duì)象參數(shù)：key → 位置；value → 數(shù)值

無參數(shù)表示獲取：

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

有參數(shù)表示設(shè)置：

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

position()

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

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對(duì)象.height([value] / [fn]);
• 用于獲取 / 設(shè)置當(dāng)前元素的 height & width 屬性值
• 參數(shù)可以為：數(shù)值 / 回調(diào)函數(shù)

無參數(shù) → 獲取；數(shù)值參數(shù) → 設(shè)置

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

回調(diào)函數(shù)接收 2 個(gè)參數(shù)：索引 index、元素的原高度 oldHeight / 原寬度 oldWidth

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

innerHeight() & innerWidth()

• 獲取第 1 個(gè)元素的內(nèi)部區(qū)域高度 （height + padding * 2）

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

outerHeight() & outerWidth()

• 獲取第 1 個(gè)匹配元素外部高度
• 接收 1 個(gè)布爾參數(shù)：ture → 包括外邊距；false → 不包括外邊距 (默認(rèn))
• 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() 用于設(shè)置和獲取標(biāo)簽的屬性值
• 接收 2 個(gè)參數(shù)：key、value
• 傳入 value 為設(shè)置屬性；不傳入 value 為獲取屬性
• 設(shè)置屬性時(shí)，可以設(shè)置整個(gè) JQuery 類數(shù)組的所有 DOM 元素；獲取時(shí)，只能獲取第 1 個(gè) 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() 方法

• 對(duì)于沒有設(shè)置屬性值的屬性，返回 undefined

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

• 設(shè)置多個(gè)屬性：傳入對(duì)象參數(shù) / 鏈?zhǔn)讲僮?/li>
• 對(duì)于 checked、readOnly、selected、disabled 等可以不需要屬性值的屬性
  如果沒有設(shè)置，則返回 undefined；可以通過 布爾值 / 字符串 設(shè)置屬性值

$('button').click(() => {console.log($('input').attr('readOnly'), $('input').attr('disabled')); // undefined undefined$('input').attr('readOnly', true).attr('disabled', 'disabled'); // 鏈?zhǔn)讲僮?/span>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'}); // 傳入對(duì)象參數(shù)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() 等效
• 但是，對(duì)于 checked、readOnly、selected、disabled 等可以不需要屬性值的屬性
  如果沒有設(shè)置，則返回 false；否則返回 true。所以用于操作以上屬性比較多

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

removeAttr() 方法

• 用來刪除標(biāo)簽的屬性
• 接收 1 個(gè)參數(shù)，需要?jiǎng)h除的屬性名

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

操作類名

addClass()：添加類名

removeClass()：刪除類名

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

• 返回值：JQuery 對(duì)象（所以，可以進(jìn)行鏈?zhǔn)讲僮?#xff09;

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。