jquery基础-包裹 替换 删除 复制

时间：2023-03-09 04:37:53
jquery基础-包裹 替换 删除 复制

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>包裹 替换 删除 复制</title>
<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#box').wrap('<div></div>');//用div把匹配元素包起来
    $('#box').unwrap();//这个方法将快速取消.wrap方法的效果
    $('#box p').wrapAll('<div></div>')//将所有匹配的元素用指定元素包起来
    $('#box h1').wrapInner('<b></b>')//将匹配元素的内部元素用b标签包起来
    $('#box h1').replaceWith('<h2>这是h2标签</h2>')//将匹配元素及其内容用指定标签和内容替换
    $('<h1>haha</h1>').replaceAll('#box h2');//用指定元素替换所有指定元素
    $('ul').empty();//删除匹配的元素集合中的所有子节点
    $('ul').remove();//删除指定元素及内容
    //detach()与remove()有区别......
    $('#box p').clone().prependTo('#box');//复制指定元素一份
})
</script>
</head>
<body>
    <div id="box">
        <p>p标签</p>
        <h1>h1标签</h1>
        <h2>h2标签</h2>
    </div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

相关文章