jquery17 DOM操作 : 添加删除获取包装 DOM筛选

Posted 2020-09-21 672530440

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery17 DOM操作 : 添加删除获取包装 DOM筛选相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>

$(function(){
    $(‘div‘).remove();//删除节点
    $(‘div‘).remove(‘.box‘);//删除节点
    $(‘div‘).detach();
    
    $(‘div‘).click(function(){
        alert(123);
    });
    var $div = $(‘div‘).detach();
    $(‘body‘).append( $div );//删除再添加，添加回来后，可以点击
    var $div = $(‘div‘).remove();
    $(‘body‘).append( $div );//删除再添加，不能点击了
------------------------------------------------------------------------------    
    $(‘div‘).empty();//div里面清空，div不清空
    
    console.log($(‘div‘).html());//文本节点和所有节点
    console.log($(‘div‘).text());//文本节点
    $(‘div‘).html(‘<h1>标题</h1>‘);//会被解析成标签
    $(‘div‘).text(‘<h1>标题</h1>‘);//不会被解析成标签
------------------------------------------------------------------------------    
    $(‘div‘).click(function(){
        alert(123);
    });
    
    $(‘span‘).click(function(){
        alert(456);
    });
    var cloneDiv1 = $(‘div‘).clone();//副本
    var cloneDiv2 = $(‘div‘).clone(true);//有点击事件
    var cloneDiv3 = $(‘div‘).clone(true,true);//子元素有点击事件
    var cloneDiv = $(‘div‘).clone(true,false);//子元素没有点击事件
    
    $(‘body‘).append( cloneDiv );
    
});

</script>
</head>

<body>
<div>div
    <span>span
        <p>p</p>
    </span>
</div>

</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>
$(function(){
    $(‘input‘).prop(‘checked‘,true);
    $(‘input‘).clone().appendTo( ‘body‘ );//jQuery克隆过去也是选中的，但是原生的是没有选中的，
    
    $(‘div‘).clone().appendTo(‘body‘);
    
    $(‘span‘).get(0).innerHTML = ‘<script>alert(1)<\/script>‘;//get(0)转成原生的span，script不会执行
    $(‘span‘).html(‘<script>alert(1)<\/script>‘);//html()类似于原生的innerHTML，script会执行
    
    $(‘span‘).get(0).innerHTML = ‘<tr></tr>‘;
    $(‘span‘).html(‘<tr></tr>‘);
    
    $(‘span‘).html(‘<div/>‘);
    
    $(‘span‘).append( oDiv );
    $(‘span‘).append( $(‘div‘) );//div添加到span里面的最后
    $(‘span‘).append( ‘<div></div>‘ );
    $(‘div‘).prepend( $(‘span‘) );//sopan添加到div里面的最前面
    //<div><span></span>div</div>
    
    
    $(‘div‘).before( $(‘span‘) );//span添加到了div前面
    $(‘div‘).after( $(‘span‘) );//span添加到了div后面
    
    

    
    
    var tr = document.createElement(‘tr‘);
    //IE会自动添加tbody
    table.appendChild(tr);
    
    $(‘span‘).append(function(){
        return ‘hello‘;
    });
    
    $(‘span‘).append(‘<h1>hello</h1>‘);
    
    $(‘span‘).append( $(‘div‘) );
    
    $(‘span‘).append(‘<h1>hello</h1><p>p</p>‘);
    
    //jQuery.buildFragment() --> ‘<h1>hello</h1><p>p</p>‘  -->  oFrag对象 : <h1>hello</h1><p>p</p>
    
    $(‘span‘).append(‘<script>alert(123)<\/script>‘);
    
    $(‘span‘).append(‘<script src="a.js"><\/script>‘);
    
    $(‘span‘).append( oDiv );
    $(‘span‘).append( $(‘div‘) );
    
    $(‘span‘).append( ‘hello‘ );
    
    $(‘span‘).append( ‘<h1>hello</h1><h1>hello</h1><h1>hello</h1>‘ );
    
    $(‘span‘).replaceWith( $(‘div‘) );
    
});

</script>
</head>

<body>
<input type="checkbox">
<div><script>alert(1)</script></div>

<span><div>div</div></span>
<span><div>div</div></span>
<span><div>div</div></span>
<script type="true">
alert(123);
</script>
<span>span1<span>span2</span></span>
<div>div</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script>

$(function(){
    
    $(‘div‘).append( $(‘span‘) ).css(‘border‘,‘1px red solid‘);//div变红
    
    $(‘span‘).appendTo( $(‘div‘) ).css(‘border‘,‘1px red solid‘);//span变红
    
    $(‘span‘).appendTo( ‘div‘ ).css(‘border‘,‘1px red solid‘);
    
-----------------------------------------------------------------------    

    $(‘span‘).wrap(‘<div>‘);//每个span包一个div
    $(‘span‘).wrapAll(‘<div>‘);//所有span只包一个div，如果span里面有其他标签会把这个标签移出来
    $(‘span‘).wrapInner(‘<div>‘);//每个span里面包一个div
    $(‘span‘).unwrap();//删除父级
    
    
    $(‘span‘).wrapAll(function(){
        return ‘<div>‘;
    });
    
    $(‘span‘).wrapAll(‘<div><p></p></div>‘);
});

</script>
</head>

<body>
<span>span</span>
<div>div</div>

<span>span</span>
<span>span</span>
<span>span</span>
</body>
</html>

以上是关于jquery17 DOM操作 : 添加删除获取包装 DOM筛选的主要内容，如果未能解决你的问题，请参考以下文章

jQuery08源码 (5140 , 6057) DOM操作 : 添加删除获取包装 DOM筛选

前端用jquery如何去获取一个dom未渲染的标签添加点击事件

jQuery 学习03——HTML：捕获设置添加元素删除元素CSS类CSS()方法尺寸

创建和删除DOM元素

jquery里面的DOM操作（查找，创建，添加，删除节点）

jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选

jquery17 DOM操作 : 添加删除获取包装 DOM筛选