jQuery中的DOM操作(1)

例子：

<p title='选择你最喜欢的水果'><strong>你最喜欢的而水果是</strong></p>
<ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
</ul>

 1.查找节点元素

var $li=$('ul li:eq(1)')//获取第二个<li>节点

 2.查找属性节点

var p_txt=$('p').arrt('title')//查找p的titlt属性

 3.创建元素节点

var $li=$('<li>创建li元素</li>')
$('ul').append($li)

 4.创建属性节点

var $li=$('<li title='li'>创建li元素</li>')
$('ul').append($li)

 插入节点

 

append/appendto	向匹配元素内容添加元素/与append用法格式相反
prepend/prependto	向匹配元素内部前置内容/与prependto用法格式相反
after/insertafter	向匹配元素后添加内容/与insertafter用法格式相反
befor/insertbefor	向匹配元素前添加内容/与insertbefor用法格式相反

5.删除节点

    remove()

$('ul li:eq(1)').remove()//删除第二个li

    detach()与remove()方法不同的是：所绑定的事件，附加的数据都会绑定下来

 

    empty()方法是清空元素内容，会保留节点，不是删除

6.复制节点

$('ul li:eq(1)').clone()//复制第二个li

 7.替换节点

$('p').replaceWith('啦啦啦')//将<p>元素的内容替换成'啦啦啦'
$('啦啦啦').replaceAll('p')//将<p>元素的内容替换成'啦啦啦'

 8.包裹节点

$('strong').wrap('<b></b>')//用<b>将<strong>节点包裹起来
得到的结果：<b><strong>你最喜欢的而水果是</strong></b>.

   <wrapall>与<wrap>的不同是:将元素所有匹配元素单独包装。

 

   <wrapInner>是将匹配到的元素内容包装。

9.设置属性

$('p').attr('name' , 'test')//向<p>元素中添加元素属性，也可以以对象形式添加多个属性

 10。删除属性

$('p').removeAttr('name')//删除<p>元素中的name 属性