<!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>
时间： 2024-10-20 19:07:36