JQuery中的DOM操作

本片文章列举一些JQuery中操作DOM的常用方法，通过阅读本篇文章，你会对JQuery中的DOM操作的api有个大概的轮廓，当然你也可以收藏后用来快速查阅，以提高开发速度！
为了更加形象地解释方法的作用，上一个DOM先

<div id="container">
    <p title="选择你最喜欢的水果"><b>你最喜欢的水果是？</b></p>
    <ul>
        <li title="苹果">苹果</li>
        <li title="橘子">橘子</li>
        <li title="菠萝">菠萝</li>
    </ul>
</div>

查找节点

查找节点是通过JQuery选择器来完成的

//获取ul列表中的第0个li节点
var li_1=$(‘ul li:eq(0)‘);
//获取li节点的文本节点
var text=li_1.text();

创建节点

创建节点是通过工厂函数$()来完成的

//创建一个li节点，并赋值给li_pear变量
var li_pear = $(‘<li title="梨">梨</li>‘);
//将创建的li节点添加到ul列表中
$(‘ul‘).append(li_pear);

插入节点

插入节点的方法比较多，每一个方法都有两种形式，这两种形式颠倒了容器和元素，如container.append(item)以及item.appendTo(container)

//创建一个li节点，并赋值给li_pear变量
var li_pear = $(‘<li title="梨">梨</li>‘);
//下面列出常用的插入节点的方法
//------------------------------------------
//将li节点添加到ul列表尾部
$(‘ul‘).append(li_pear);
//颠倒一下容器和元素，可以这样写
li_pear.appendTo(‘ul‘);//或者li_pear.appendTo($(‘ul‘));

//将li节点添加到ul列表首部
$(‘ul‘).prepend(li_pear);
//颠倒一下容器和元素，可以这样写
li_pear.prependTo(‘ul‘);//或者li_pear.prependTo($(‘ul‘));

//将li节点插入到橘子的后面
$(‘ul li[title=橘子]‘).after(li_pear);
//颠倒一下容器和元素，可以这样写
li_pear.insertAfter(‘ul li[title=橘子]‘);

//将li节点插入到橘子的前面
$(‘ul li[title=橘子]‘).before(li_pear);
//颠倒一下容器和元素，可以这样写
li_pear.insertBefore(‘ul li[title=橘子]‘);

删除节点

删除节点有两个方法，remove()是删除选中的节点，empty()是清空选中节点的子元素。

//删除ul列表中的第0个li节点
$(‘ul li:eq(0)‘).remove();
//清空ul列表
$(‘ul‘).empty();

复制节点

//复制节点(不包含元素所绑定的事件)
var li=$(‘ul li:eq(0)‘).clone();
//复制节点，包含元素所绑定的事件
var li=$(‘ul li:eq(0)‘).clone(true);

替换节点

//替换节点
$(‘p‘).replaceWith(‘<strong>你最喜欢的水果是？</strong>‘);
//颠倒一下替换元素和被替换元素，可以这样写
$(‘<strong>你最喜欢的水果是？</strong>‘).replaceAll(‘p‘);

包裹节点

//下面的代码返回 <div><span>hello</span></div>
$(‘<span>hello</span>‘).wrap(‘<div></div>‘);

属性操作

var li=$(‘ul li:eq(0)‘);
//获取属性值
var title=li.attr(‘title‘);
//设置属性值
li.attr(‘title‘,‘some text‘);
//删除属性
li.removeAttr(‘title‘);

获取和设置html，文本和值

//获取html，类似JavaScript中的innerHtml()方法
var htmlString=$(‘p‘).html();
//设置html
$(‘p‘).html(‘<strong>你最喜欢的水果是？</strong>‘);
//获取文本节点
var text=$(‘p‘).text();
//设置文本节点
$(‘p‘).text(‘你最喜欢的水果是？‘);
//获取表单元素的值
$(‘#txt_userName‘).val();
//设置表单元素的值
$(‘#txt_userName‘).val(‘some text‘);