jQuery既然是为了帮助你能从js的繁琐中解脱出来，自然在DOM操作上也有自己的一套。
1、修改Text和HTML
之前我们提到过，如果用JS的话，你要修改Text或者HTML需要用到其innerHTML和innerText属性，但是放在jQuery里面，你需要用到的是 html()方法和 text()方法，而且这两个方法很巧妙，如果你 不传参，就是获取值；传参，就是更改值：
- JavaScript
- Java & JavaScript
9
1
2
3
4
5
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是否包含highlightdiv.addClass('highlight'); // 添加highlight这个classdiv.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用来进行效果展示：
//你可以这样使用jQuery配置cssvar div = $('#test-highlight-css');div.addClass('highlight');
- Python
- JavaScript
- Swift
- Haskell
21
1
2
3
.highlight { 4
color: #dd1144;
5
background-color: #ffd351;
6
}
7
8
9
10
11
12
13
14
15
16
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节点的属性...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
...
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()是类似的，但是对于某些可以没有值的属性来说，处理方式两者有所不同，例如：
1
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 = 'Pascal';// 添加DOM对象:ul.append(ps);// 添加jQuery对象:ul.append($('#scheme'));// 添加函数对象:ul.append(function (index, html) { return ' x
1
// 创建DOM对象:
2
var ps = document.createElement('li'); 3
ps.innerHTML = 'Pascal'; 4
// 添加DOM对象:
5
ul.append(ps);
6
7
// 添加jQuery对象:
8
ul.append($('#scheme')); 9
10
// 添加函数对象:
11
ul.append(function (index, html) { 12
return '
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节点，还可以实现批量删除。