7、jQuery中DOM操作之文档处理使用示例
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"/>
<title>DOM的基本操作</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(e) {
$('button').click(function(){
// 在某元素内增加某内容
// $('div').append('<p>PHP 培训</p>');
// 将某内容添加到某元素
// $('<p>iOS 开发</p>').appendTo('div');
// 在某元素前添加某内容(prependTo类似prepend)
// $('div').prepend('<p>Android 培训');
// 在某元素后添加某内容
// $('div').after('<p>WinPhone</p>');
// 在某元素前添加某内容(insertAfter类似before)
// $('div').before('<p>BeforDiv</p>');
// 在选定的标签外加上某内容(标签成对出现)
// $('p').wrap('<div style="background:green"></div>');
// 取消wrap效果
// $('p').unwrap();
// 查找某标签，内容替换成xxx(replaceAll类似)
// $('p').replaceWith('<p>abc</p>');
// 清空子节点
// $('div').empty();
// 清空所选择过滤出来的元素（对象中元素依旧存在），类似方法detach()保存事件，而remove则不保存
// var test = $('.test').remove();
// $('div').after(test);
// clone标签及内容，参数效果为是否克隆事件
$('.test').clone(true).appendTo('div');
});
$('.test').click(function(){
alert("#####");
});
});
</script>
</head>
<body>
<button>按钮</button>
<h2>网站模板分析</h2>
<div style="color:red;">
<p class="test">PHP 资讯</p>
<p>PHP 论坛</p>
<p>Zend 产品</p>
</div>
</body>
</html>
页:
[1]