HTML DOM常见操作
- 查找节点
- 插入节点
- 删除节点
- 复制节点
- 替换节点
- 包裹节点
1、使用DOM向页面添加元素:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript" >
var addItems = function()
{
document.getElementById("div1").innerHTML="";
var value = parseInt(document.getElementById('itemsNumber').value);
for(var i = 0; i < value ; i++)
{
var input = document.createElement("input");
input.setAttribute("type","text");
var br = document.createElement("br");
document.getElementById("div1").appendChild(input);
document.getElementById("div1").appendChild(br);
}
}
</script>
</head>
<body>
<input type="text" id="itemsNumber">
<input type="button" id="btn" value="click" οnclick="addItems();">
<div id="div1"></div>
</body>
</html>
2、jQuery插入节点的方法:
append(),向每个匹配的元素内部追加内容
appendTo(),将所有匹配的元素追加到指定的元素中
prepend(),向每个匹配的元素之后
prependTo(),
after(),
insertAfter(),
before()
insertBefore(),
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript" >
$(function()
{
$("ul").append("<li title='abc'>hello</li>");
$("ul").append("<li title='xyz'>hello</li>");
$("ul").append("<li title='abc'>hello</li>")
.append("<li title='xyz'>hello</li>");
$("<li title='abc'>hello11111</li>").appendTo($("ul"));
});
</script>
</head>
<body>
<p title="hello world">你认为培训好吗?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
</body>
</html>
3、多文件上传,使用DOM方式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript" >
function addMore()
{
var div = document.getElementById("div1");
var br = document.createElement("br");
var input = document.createElement("input");
var button = document.createElement("input");
input.setAttribute("type","file");
button.setAttribute("type","button");
button.setAttribute("value","remove");
button.onclick = function()
{
div.removeChild(br);
div.removeChild(input);
div.removeChild(button);
}
div.appendChild(br);
div.appendChild(input);
div.appendChild(button);
}
</script>
</head>
<body>
<input type="file">
<input type="button" value="more..." οnclick="addMore();">
<div id="div1"></div>
</body>
</html>
多文件上传,使用jQuery方式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript" >
$(function()
{
$("input[type=button]").click(function()
{
var br = $("<br>");
var input = $("<input type='file'>");
var button = $("<input type='button' value='remove'>");
$("#div1").append(br).append(input).append(button);
button.click(function()
{
br.remove();
input.remove();
button.remove();
});
});
});
</script>
</head>
<body>
<input type="file">
<input type="button" value="more..." >
<div id="div1"></div>
</body>
</html>
<script type="text/javascript" >
$(function()
{
/*
$("ul").append("<li title='abc'>hello</li>");
$("ul").append("<li title='xyz'>hello</li>");
$("ul").append("<li title='abc'>hello</li>")
.append("<li title='xyz'>hello</li>");
$("<li title='abc'>hello11111</li>").appendTo($("ul"));
*/
// $("ul li:eq(2)").insertAfter("ul li:eq(4)"); //节点移动
var removeLi = $("ul li:eq(3)").remove(); //删除节点,remove()返回被删除节点对象
removeLi.appendTo($("ul"));
$("ul li").remove("li[title!=2]");
$("ul li:eq(3)").empty(); //清空元素中的内容
});
</script>
4、节点复制,替换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript" >
$(function()
{
$("ul li").click(function()
{
$(this).clone(true).appendTo("ul"); //clone()方法克隆自身,如果带true参数,则克隆的对象也可以再克隆
});
// $("p").replaceWith("<a href='http://www.baidu.com'>baidu</a>");//元素替换,后面的替换前面的
$("<a href='http://www.baidu.com'>baidu</a>").replaceAll("p"); //前面的替换后面的
});
</script>
</head>
<body>
<p title="hello world">你认为培训好吗?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
</body>
</html>
5、元素的包裹
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript" >
$(function()
{
// $("p").wrap("<a href='www.baidu.com'></a>");
$("p").wrap("<a href='www.baidu.com'><b></b></a>");//包裹整个元素
$("p").wrapInner("<a href='www.baidu.com'><b></b></a>");//包裹里面的内容
});
</script>
</head>
<body>
<p title="hello world">你认为培训好吗?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
</body>
</html>
6、属性操作
attr()方法 : 获取与设置属性
removeAttr()方法 : 移除元素属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript" >
$(function()
{
$("input:eq(0)").click(function()
{
//$("p").attr("title","abcd"); //设置属性方法1
$("p").attr({"title":"abcd","hello":"world"}); //设置属性方法2
});
$("input:eq(1)").click(function()
{
alert($('p').attr("title")); //获取属性
});
$("input:eq(2)").click(function()
{
$("p").removeAttr("title"); //删除属性
});
});
</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3"><br>
<p title="hello world">你认为培训好吗?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
</body>
</html>
7、样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.high {
font-weight:bold;
color:red
}
.another{
font-weight:italic;
color:green
}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript" >
$(function()
{
$("input:eq(0)").click(function()
{
alert($("p").attr("class"));
});
$("input:eq(1)").click(function()
{
$('p').attr("class","high");
});
$("input:eq(2)").click(function()
{
$('p').addClass("another");
});
$("input:eq(3)").click(function()
{
$('p').removeClass("high");
});
$("input:eq(4)").click(function()
{
$('p').removeClass();
});
$("input:eq(5)").click(function()
{
$('p').toggleClass("another"); //有就删除,没有就添加,相当于开关
});
$("input:eq(6)").click(function()
{
alert($('p').hasClass('another'));
alert($('p').is('.another'));
});
});
</script>
</head>
<body>
<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3">
<input type="button" value="button4">
<input type="button" value="button5">
<input type="button" value="button6">
<input type="button" value="button7">
<br>
<p title="hello world">你认为培训好吗?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
</body>
</html>
addClass()方法与attr()方法的区别
8、获取子元素:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript">
$(function()
{
var v1 = $("body").children();//body下的子元素个数,不包括子元素的子元素
var v2 = $("p").children();
var v3 = $("ul").children();
alert(v1.length + ":" + v2.length + ":" + v3.length);
});
</script>
</head>
<body>
<p title="hello world">你认为培训好吗?</p>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript">
$(function()
{
var v1 = $("p").next(); //获得p的下一个同级元素
// alert(v1.html());
var v2 = $("p").prev();//获得p的上一个同级元素
alert(v2.html());
var v3 = $("p").siblings();//获得p的所有兄弟元素
alert(v3.length);
});
</script>
</head>
<body>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
<ul>
<li title="1">wwww好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
<p title="hello world">你认为培训好吗?</p>
<ul>
<li title="1">qqqq好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
<ul>
<li title="1">好</li>
<li title="2">很好</li>
<li title="3">非常好</li>
<li title="4">特别好</li>
<li title="5">太好了</li>
<li title="6">好的无法描述</li>
</ul>
</body>
</html>
9、事件:Event
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.9.1.js"> </script>
<script type="text/javascript">
var method1 = function()
{
alert("div clicked");
}
var method2 = function()
{
alert("span clicked");
}
var method3 = function()
{
alert("body clicked");
}
</script>
</head>
<body οnclick="method3();">
<div id="content" οnclick="method1();" border="1">
外层div元素
<span οnclick="method2();" background="#ff0000">内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
uuuu
等等等等
</body>
</html>
这个程序,点击span,div和body的alert也出现,这是事件的冒泡处理方法
在jQuery中,可以使用event.stopPropagation();来阻止事件的冒泡的处理,
jQuery的bind()方法,
加载时机:window.onload,dom结构加载完毕,并且如果有外部链接,外部链接也要下载完毕
jQuery的ready():dom结构加载完毕
toggle()、event.preventDefault()与return false、stopPropagation()
移除事件:unbind()
one()——只执行一次
模拟操作:trigger()——可以用来做自动运行(如自动登录),等同于.click()
自定义事件:bind("myClick",function(){});
动画:
fadeOut()、fadeIn(),渐变效果
slideUp()、slideDown(),向上向下收缩展开
animate(),自定义动画