HTML DOM常见操作
-创建节点
-查找节点
-插入节点
-移动节点
-删除节点
-复制节点
-替换节点
-包裹节点
多了克隆、移动、包裹
一.创建节点
var $div5 = $("<div id='div5'>我是div5</div>");
二.插入节点
1.插入同级元素(兄弟元素)
after() 在每个匹配的元素之后插入内容 HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").after("<b>你好</b>");
结果:
<p>我想说:</p><b>你好</b>
insertAfter 与after()相反 HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好</b>").insertAfter("p");
结果:
<p>我想说:</p><b>你好</b>
before() 在每个匹配的元素之前插入内容 HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").before("<b>你好</b>");
结果:
<b>你好</b><p>我想说:</p>
insertBefore() 与before()相反 HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好</b>").insertBefore(“p");
结果:
<b>你好</b><p>我想说:</p
2.插入子级元素
append() 向每个匹配的元素内部追加内容 HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").append("<b>你好</b>");
结果:
<p>我想说:<b>你好</b></p>
appendTo() 与append相反 HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好 </b>").appendTo("p");
结果:
<p>我想说:<b>你好</b></p>
prepend() 向每个匹配的元素内部前置内容 HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").prepend("<b>你好</b>");
结果:
<p><b>你好</b>我想说:</p>
prependTo() 与prepend相反 HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好 </b>").prependTo("p");
结果:
<p><b>你好</b>我想说:</p>
三.移除节点
1.remove()删除
jquery对象.remove();//返回被移除的节点的jQuery对象
$("#div1").remove();
2.empty() 清空
$("ul li:eq(3)").empty();//清空元素中的内容
把remove()方法改成empty()演示
三.节点的替换(修改)
1.replaceWith()方法
例: 把div4替换成一个文本框
$("#div4").replaceWith("<input type='text' name='pname' value='产品名称'><br/>");
body中的代码
<p>我是一个段落</p>
<input type="button" name="" id="" value="替换节点" οnclick="test();"/>
2.replaceAll()方法 (和replaceWith()相反)
$("<input type='text' name='pname' value='产品名称'><br/>").replaceAll($("#div4"));
课堂演示:文件上传 添加删除文件域
点击more按钮添加一个文件域、remove按钮
点击remove按钮移除对应的文件与和remove按钮
<body>
<input type="button" value="more..." id="btn1" /><br/>
<input type="file" />
<div id="div1"></div>
</body>
1.原生js实现
生成dom对象 、设置属性、绑定事件
<script>
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
var div1 = document.getElementById("div1");
//创建一个文件域
var file = document.createElement("input");
var button = document.createElement("input");
var br = document.createElement("br");
file.type = "file";
button.type = "button";
button.value = "remove";
button.onclick = function(){
div1.removeChild(file);
div1.removeChild(button);
div1.removeChild(br);
}
div1.appendChild(file);
div1.appendChild(button);
div1.appendChild(br);
}
}
</script>
2.jQuery实现
生成jquery对象、设置属性、绑定事件
<script>
$(function(){
$("#btn1").click(function(){
var file = $("<input type='file'/>");
var button = $("<input type='button' value='remove'/>");
var br = $("<br/>");
button.click(function(){
file.remove();
button.remove();
br.remove();
});
$("#div1").append(file);
$("#div1").append(button);
$("#div1").append(br);
});
});
</script>
学生练习: 实现购物车
四.节点移动
$("ul li:eq(2)").insertAfter("ul li:eq(0)");
移动前 移动后
演示代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示表格的作用一:使用表格来显示表格数据</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px;
}
a {
border: 1px solid #e4393c;
display: block;
width: 150px;
background: #e4393c;
height: 26px;
line-height: 26px;
color: #fff;
font-size: 15px;
font-family: '微软雅黑';
text-align:center;
text-decoration:none;
white-space:pre;
}
ul {
list-style-type:none;
padding:0px;/*新浏览器 firefox safari都是使用内边距控制缩进的 新ie也是*/
margin:0px;/*老ie是使用外边距缩进的 所以光设置padding:0px老id不会去掉索引 为了兼容老ie*/
}
li a:hover {
background-color:#F7F7F7;
color:#e4393c;
border-right:#F7F7F7;
}
</style>
<script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("ul li:eq(2)").insertAfter("ul li:eq(0)");
});
</script>
</head>
<body>
<ul>
<li><a href="">手 机</a></li>
<li><a href="">笔记本</a></li>
<li><a href="">图书音像</a></li>
<li><a href="">服装鞋帽</a></li>
</ul>
</body>
</html>
五.克隆节点
jQuery对象.clone();//返回克隆出来的对象,相当于 对象.clone(false);
jQuery对象.clone(true);//克隆出来的对象含有事件
练习:单击任何一个li,复制出这个li,附着在ul后面
演示代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>演示克隆节点</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0px;
}
li {
width: 152px;
}
a {
border: 1px solid #e4393c;
display: block;
width: 150px;
background: #e4393c;
height: 26px;
line-height: 26px;
color: #fff;
font-size: 15px;
font-family: '微软雅黑';
text-align:center;
text-decoration:none;
white-space:pre;
}
ul {
list-style-type:none;
padding:0px;/*新浏览器 firefox safari都是使用内边距控制缩进的 新ie也是*/
margin:0px;/*老ie是使用外边距缩进的 所以光设置padding:0px老id不会去掉索引 为了兼容老ie*/
}
li a:hover {
background-color:#F7F7F7;
color:#e4393c;
border-right:#F7F7F7;
}
</style>
<script type="text/javascript">
$(function(){
//需求:单击任何一个li,复制出这个li,附着在ul后面
//给所有li绑定单击事件
$("ul>li").click(function(){
var $obj = $(this).clone(true);
$("ul").append($obj);
});
});
</script>
</head>
<body>
<ul>
<li><a href="#">手 机</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">图书音像</a></li>
<li><a href="#">服装鞋帽</a></li>
</ul>
</body>
</html>
六.节点的包裹
1.wrap()方法
<strong>你最喜欢的水果是?</strong><br/>
<strong>你最喜欢的水果是?</strong>
$("strong").wrap("<b></b>")
包裹后的结果
<b>
<strong>你最喜欢的水果是?</strong>
</b>
<br>
<b>
<strong>你最喜欢的水果是?</strong>
</b>
2.wrapAll()方法
$("strong").wrapAll("<b></b>")
<b>
<strong>你最喜欢的水果是?</strong>
<strong>你最喜欢的水果是?</strong>
</b>
<br>
2.wrapInner()方法 包裹里面的文本
例:
$("strong").wrapInner("<b></b>")
包裹后的结果
<strong>
<b>你最喜欢的水果是?</b>
</strong>
<br>
<strong>
<b>你最喜欢的水果是?</b>
</strong>
七.遍历子元素和兄弟元素
代码见 jQuery API手册 筛选 查找
1.遍历子元素
children() 获得所有孩子节点,不包括孙子节点
var v1 = $("body").children();//查找body的孩子结点,不包括孙子节点,返回集合元素
演示代码:
<script type="text/javascript">
$(function(){
//遍历body的子元素
//先得到body
var $body = $("body");
var childArr = $body.children();
console.info(childArr.length);//3
});
</script>
<body>
<div>
<p>我是div中的p标签</p>
</div>
<p>我是p标签</p>
<h1>我是h1</h1>
</body>
jQuery对象.find() 在jQuery对象下找 某个元素
var $div1 = $("#div1");
console.info($div1.find("p"));//在id为div1的元素下找p节点
2.遍历兄弟元素
访问下面的一个元素 对象.next();
访问上面的一个元素 对象.prev();
访问所有的兄弟元素 对象.siblings();
3.遍历父元素
原生JS方式: dom对象.parentNode
jQuery方式
对象$("p").parent();//得到p元素的父亲节点
$("p").parents();//得到p元素的所有父亲节点
代码参见:jQuery手册中的 筛选--查找--parent和parents
Parent演示代码:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<scriptsrc="../../../js/jquery-3.1.0.js"type="text/javascript"charset="utf-8"></script>
<scripttype="text/javascript">
$(function() {
var $parents=$("p").parent();
console.dir($parents);
});
</script>
</head>
<body>
<div>
<p>Hello</p>
<p>Hello</p>
</div>
</body>
</html>