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 属性
相关推荐
星星有所不知 2020-10-12
zuncle 2020-09-28
huaoa 2020-09-14
北京老苏 2020-08-17
luvhl 2020-08-17
Kakoola 2020-07-29
drdrsky 2020-07-29
书虫媛 2020-07-08
liaoxuewu 2020-07-08
SIMONDOMAIN 2020-07-08
爱读书的旅行者 2020-07-07
tianzyc 2020-07-04
Vue和React是数据驱动视图,如何有效控制DOM操作?能不能把计算,更多的转移为js计算?因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children
Lophole 2020-07-04
Lophole 2020-06-28
liaoxuewu 2020-06-26
ApeLife技术 2020-06-26
北京老苏 2020-06-25