06jQuery-04-DOM操作

jQuery既然是为了帮助你能从js的繁琐中解脱出来，自然在DOM操作上也有自己的一套。

1、修改Text和HTML

之前我们提到过，如果用JS的话，你要修改Text或者HTML需要用到其innerHTML和innerText属性，但是放在jQuery里面，你需要用到的是html()方法和text()方法，而且这两个方法很巧妙，如果你不传参，就是获取值；传参，就是更改值：

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>

//jQuery操作
$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'

9

 

1

<!-- HTML结构 --> 

2

<ul id="test-ul">

3

    <li class="js">JavaScript</li>

4

    <li name="book">Java &amp; JavaScript</li>

5

</ul>

6

7

//jQuery操作

8

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'

9

$('#test-ul li[name=book]').html(); // 'Java & JavaScript'

一个jQuery对象是可以包含0个或者多个DOM对象的，所以实际上它的方法会作用到每个DOM的节点上。

2、修改CSS

jQuery中可以使用css()方法对其CSS进行批量修改，比如高亮显示：

$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

1

 

1

$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

同样地，如果css方法的第二个参数不传值，那么默认会返回现有属性：

var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性

2

 

1

var div = $('#test-div');

2

div.css('color'); // '#000033', 获取CSS属性

3、新增class

var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

4

 

1

var div = $('#test-div');

2

div.hasClass('highlight'); // false， class是否包含highlight

3

div.addClass('highlight'); // 添加highlight这个class

4

div.removeClass('highlight'); // 删除highlight这个class

新增class属性可以很好地配合CSS用来进行效果展示：

<!-- HTML结构 -->
<style>
.highlight {
    color: #dd1144;
    background-color: #ffd351;
}
</style>

<div id="test-highlight-css">
    <ul>
        <li class="py"><span>Python</span></li>
        <li class="js"><span>JavaScript</span></li>
        <li class="sw"><span>Swift</span></li>
        <li class="hk"><span>Haskell</span></li>
    </ul>
</div>

//你可以这样使用jQuery配置css
var div = $('#test-highlight-css');
div.addClass('highlight');

21

 

1

<!-- HTML结构 -->

2

<style>

3

.highlight {

4

    color: #dd1144;

5

    background-color: #ffd351;

6

}

7

</style>

8

9

<div id="test-highlight-css">

10

    <ul>

11

        <li class="py"><span>Python</span></li>

12

        <li class="js"><span>JavaScript</span></li>

13

        <li class="sw"><span>Swift</span></li>

14

        <li class="hk"><span>Haskell</span></li>

15

    </ul>

16

</div>

17

18

19

//你可以这样使用jQuery配置css

20

var div = $('#test-highlight-css');

21

div.addClass('highlight');

4、隐藏和显示DOM

var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示

3

 

1

var a = $('a[target=_blank]');

2

a.hide(); // 隐藏

3

a.show(); // 显示

5、获取DOM信息

//获取DOM的高宽等信息
// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500

//操作DOM节点的属性
<div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

//获取和设置对应value值
input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com

19

 

1

//获取DOM的高宽等信息

2

// HTML文档大小:

3

$(document).width(); // 800

4

$(document).height(); // 3500

5

6

7

//操作DOM节点的属性

8

<div id="test-div" name="Test" start="1">...</div>

9

var div = $('#test-div');

10

div.attr('data'); // undefined, 属性不存在

11

div.attr('name'); // 'Test'

12

div.attr('name', 'Hello'); // div的name属性变为'Hello'

13

div.removeAttr('name'); // 删除name属性

14

div.attr('name'); // undefined

15

16

17

//获取和设置对应value值

18

input.val(); // 'test'

19

input.val('abc@example.com'); // 文本框的内容已变为abc@example.com

还要提一下的是，jQuery中还有一个方法叫做prop()，和attr()是类似的，但是对于某些可以没有值的属性来说，处理方式两者有所不同，例如：

<input id="test-radio" type="radio" name="test" checked value="1">

1

 

1

<input id="test-radio" type="radio" name="test" checked value="1">

以上代码中的checked，通常我们写作 checked="checked"，但是在HTML5中是可以直接写 checked 这种方式的，两者对于其的处理方式是：

var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

3

 

1

var radio = $('#test-radio');

2

radio.attr('checked'); // 'checked'

3

radio.prop('checked'); // true

prop()的返回值更合理一些，不过，用 is() 方法判断更好：

var radio = $('#test-radio');
radio.is(':checked'); // true

2

 

1

var radio = $('#test-radio');

2

radio.is(':checked'); // true

类似的属性还有selected，处理时最好用is(':selected')。

6、添加DOM

之前我们提到过，要添加DOM的话可以使用html()这种方式，原始简单粗暴。

实际上有个更好的方法 append()，它不仅像html()一样可以直接添加片段，还可以传入原始的DOM对象、jQuery对象和函数对象：

// 创建DOM对象:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// 添加DOM对象:
ul.append(ps);

// 添加jQuery对象:
ul.append($('#scheme'));

// 添加函数对象:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

x

 

1

// 创建DOM对象:

2

var ps = document.createElement('li');

3

ps.innerHTML = '<span>Pascal</span>';

4

// 添加DOM对象:

5

ul.append(ps);

6

7

// 添加jQuery对象:

8

ul.append($('#scheme'));

9

10

// 添加函数对象:

11

ul.append(function (index, html) {

12

    return '<li><span>Language - ' + index + '</span></li>';

13

});

append() 把DOM添加到最后，相应的 prepend() 把DOM添加到最前。

特别注意：如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，换句话说，对于已经存在于HTML中的DOM节点，可以使用append()方法达到移动的目的。

和append方法很类似的有个方法叫做 after()，其作用是在被选元素后插入指定的内容，仔细看看区别在于：

• append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容
• after() 是在被选元素的结束标签后面（即该被选元素的外部）插入指定的内容

也就是说，append() 实际上是类似于在某个节点中添加其子节点，而after()是某个节点之后添加兄弟节点，也就是说，after()是用于同级节点的，对应的，还有before()方法。

7、删除DOM

拿到对应的DOM节点的jQuery对象以后，直接调用 remove() 方法就可以删除了，如果该jQuery对象包含多个DOM节点，还可以实现批量删除。