jquery17 DOM操作 : 添加 刪除 獲取 包裝 DOM篩選
阿新 • • 發佈：2017-06-05
點擊事件 標題 ndt 篩選 after 子元素 ace script 對象
<!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篩選