首页 > 代码库 > jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选
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="http://www.mamicode.com/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筛选
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。