jQuery操作DOM实例-优快云博客

本文链接：https://blog.youkuaiyun.com/BoBrother/article/details/78207258

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.0.js"></script>
<title>无标题文档</title>
<script>
$(function(){
var i=1;
$("button:eq(0)").click(function(){
var a= $("<li>我家</li>");
//$("ul").append(a);
a.appendTo($("ul"));
});

$("button:eq(1)").click(function(){

$("ul li:eq(2)").remove()//表示删除第一个li。
});

$("li").click(function(){
$(this).remove();
});

$("button:eq(2)").click(function(){
var a = $("<li>美丽武安"+i+"</li>");
i++;
$("ul").after(a);
});
$("button:eq(3)").click(function(){
var a = $("<li>美丽河北"+i+"</li>")
i++;
$("ul").before(a);
})
$("button:eq(4)").click(function(){
var a = $("<li>美丽邯郸"+i+"</li>")
i++;
$("ul").prepend(a);
})
//$("button:eq(5)").click()
//$("button:eq(6)").click(function(){
//$("li:eq(0)").click(true).appendTo($("ul"));
//})
$("button:eq(6)").click(function(){

$("li:eq(0)").clone(true).appendTo($("ul"));

})
$("button:eq(7)").click(function(){

$("li:eq(0)").clone().appendTo($("ul"));

})
});
</script>
</head>
<body>
<button>创建</button>
<button>删除</button>
<button>创建兄弟节点最后</button>
<button>创建兄弟节点最前</button>
<button>创建节点最前</button>
<button>创建节点最后</button>
<button>深复制</button>
<button>浅复制</button>
<button>替换节点</button>
<ul>
<li>上海</li>
<li>北京</li>
<li>广州</li>
<li>我家</li>

</ul>
</body>
</html>

表单对象属性选择器