7、jQuery中DOM操作之文档处理使用示例

Sian · 发表于 2016-2-19 21:30:38

[HTML] 纯文本查看 复制代码

<!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>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 7、jQuery中DOM操作之文档处理使用示例