您的位置：首页 > Web前端 > JQuery

jQuery之DOM操作详细

2017-10-31 20:33 309 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquerydom</title>
<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>

<script type="text/javascript">
$(function(){
$('#div2').parents().css('background','#ddd')
$('#div2').closest('#div1').css('background','#ff9')
$('#div2').siblings().css('background','pink')
$('#div2').next().css('background','red')
$('p').prevAll().css('background','green')

$('#div3').clone().appendTo($('span'))
$('#span').wrap('<p>');//每个ID名为span的元素的外面会被包装一对<p></p>
$('#span').wrapAll('<p>');//所有ID名为span的元素的外面会被包装一对<p></p>

})
</script>

</head>
<body>
<div id="div1">aaa
<div id="div2">bbb</div>
<span>span</span>
<p>p</p>
</div>
<div id="div3"> <span id="span">span</span></div>
</body>
</html>
<!--
parents():获取当前元素所有的祖先节点，参数就是筛选功能
closest():获取最近的指定的祖先节点(包括当前元素自身)，必须要写筛选的参数，只能找到一个元素
siblings():找到所有的兄弟节点，参数也是筛选功能
next():获取最近的兄弟节点
nextAll():获取下面所有的兄弟节点
prevAll():获取上面所有的兄弟节点
prevUntil(),parentsUntil(),nextUntil();
clone():节点的复制，可以接收一个参数ture，作用是可以复制之前的操作行为
wrap():包装

wrapAll():整体包装
wrapInner():内部包装
unwrap():删除包装（删除父级，不包括body元素）
add():添加元素且是组合在一起
slice():分割元素。第一个参数是开始下标，第二个参数是结束下标。
-->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery dom

相关文章推荐

新的分享

章节导航