操作DOM1
为什么用jQuery
操作DOM节点啦！
不需要考虑浏览器兼容性问题，全部统一操作！
修改Text和HTML
jQuery对象的text()：返回节点的文本
html()：原始HTML文本
$('#test-ul li[name=book]').text(); //
$('#test-ul li[name=book]').html(); //
text()不传参数：获取文本
text()传参数：设置文本
html()类似
$('#test-ul li[name=book]').text('<span style="color: red">JavaScript</span>'); // 'Java & JavaScript'
$('#test-ul li[name=book]').html('JavaScript & ECMAScript');
jQuery对象有“批量操作”的特点
一个jQuery对象就是一个DOM对象数组，Query对象调用方法，会作用在数组中的每个DOM节点上
$('#test-ul li').text('JS'); // 两个节点都变成了JS
修改CSS
css()方法将作用于DOM节点的style属性，具有最高优先级。
css('name', 'value')
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');
注意，链式调用的原因：jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身）
jQuery对象的css()方法可以这么用：
var div = $('#test-div');
div.css('color'); // '#000033', 获取CSS属性
div.css('color', '#336699'); // 设置CSS属性
div.css('color', ''); // 清除CSS属性
jQuery操作class
var div = $('#test-div');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class
显示和隐藏DOM
var a = $('a[target=_blank]');
a.hide(); // 隐藏
a.show(); // 显示
注意，隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同的
获取DOM信息
jQuery对象的若干方法，我们直接可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码：
// 浏览器可视窗口大小:
$(window).width(); // 800
$(window).height(); // 600
// HTML文档大小:
$(document).width(); // 800
$(document).height(); // 3500
// 某个div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效
attr()：
不传参数：获取属性
传参数：设置参数
removeAttr()：删除参数
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、
但是HTML5规定：有一种属性在DOM节点中可以没有值（单选框的“checked”），只有出现与不出现两种
attr()和prop()对于属性checked处理有所不同：
var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true
prop()返回值更合理一些。不过，用is()方法判断更好：
radio.is(':checked'); // true
类似的属性还有selected，处理时最好用is(':selected')。
操作表单
对于表单元素，val()
不传参数：获取value值
传参数：设置value值
/*
<input id="test-input" name="email" value="">
<select id="test-select" name="city">
<option value="BJ" selected>Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<textarea id="test-textarea">Hello</textarea>
*/
var
input = $('#test-input'),
select = $('#test-select'),
textarea = $('#test-textarea');
input.val(); // 'test'
input.val('[email protected]'); // 文本框的内容已变为[email protected]