jQuery学习笔记（3）：操作DOM和修改DOM结构

jQuery的选择器的作用为操作对应的DOM节点。使用jQuery对象，操作DOM节点可以不需要考虑浏览器差异。

修改Text和HTML

jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本。

<ul id='test-ul'>
  <li class='js'>JavaScript</li>
  <li name='book'>Java&JavaScript</li>
</ul>

分别获取文本和HTML：

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

修改CSS

与修改HTML相似，jQuery同样可以批量修改CSS。

<ul id="test-css">
    <li class="lang dy"><span>JavaScript</span></li>
    <li class="lang"><span>Java</span></li>
    <li class="lang dy"><span>Python</span></li>
    <li class="lang"><span>Swift</span></li>
    <li class="lang dy"><span>Scheme</span></li>
</ul>

高亮动态语言，调用jQuery对象的css('name','value')方法：

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

显示和隐藏DOM

jQuery直接提供show()和hide()方法，可以不用关心是如何修改display()属性：

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

隐藏DOM节点并未改变DOM树的结构，只影响DOM节点的显示，与删除DOM节点不同。

获取DOM信息

可直接获取DOM的高宽等信息，无浏览器差异。如：

//浏览器可视窗大小：
$(window).width(); //800
$(window).height(); //600

attr()和removeAttr()方法用于操作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，以为'name'属性已经被删除了

prop()方法和attr()类似

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

attr()和prop()对于属性checked()处理有所不同：

var radio = $('#test-radio');
radio.attr('checked'); //'checked'
radio.prop('checked'); //true
//同样也有is()
radio.is(':checked');//true

操作表单

对于表单元素，jQuery对象统一提供val()方法获取和设置对应的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('abc@example.com'); // 文本框的内容已变为abc@example.com

select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

添加DOM

要添加新的DOM节点除了jQueryhtml()方法外还可以用append()方法，如：

<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>
//新增一个语言：
var ul = $('#test-div>ul'); // 拿到<ul>节点
ul.append('<li><span>Haskell</span></li>'); // 调用append()传入HTML片段

除了接受字符串，append()还可以传入原始的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>';
   });

传入函数时，要求返回一个字符串、DOM对象或者jQuery对象。因为jQuery的append()可能作用于一组DOM节点，只有传入函数才能针对每个DOM生成不同的子节点。
append()把DOM添加到最后，prepend()则把DOM添加到最前。
另外注意，如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点。
如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然后用after()方法：

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

删除节点

删除DOM节点拿到jQuery对象后直接调用remove()方法就可以了，也可以一次删除多个DOM节点：

var li = $('#test-div>ul>li');
li.remove();//所有<li>被删除