【JQuery】操作 DOM

DOM 的增删改插

操作内容

1. html()：获取 / 设置标签内的数据，效果类比 innerHTML；会解析里面的 html 标签
2. text()：获取 / 设置标签内的数据，效果类比 innerText；不会解析 html 标签
3. 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()

1. 格式：JQuery对象.offset([obj]);
2. 获取 / 设置元素在当前视口的相对偏移
3. 接收 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');
})

操作类名

1. addClass()：添加类名
2. removeClass()：删除类名
3. toggleClass()：有则删除，无则添加

• 返回值：JQuery 对象（所以，可以进行链式操作）

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