1. DOM操作的分类
1.1 DOM Core（核心）
JavaScript中的 getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等都是DOM Core的组成部分；
1.2 HTML_DOM
提供了一些更简明的记号来描述各种HTML元素的属性，但是只能用来处理Web文档；
1.3 CSS_DOM
针对CSS的操作，获取和设置style对象的各种属性；
2. JQuery中的DOM操作
首先构建一个网页：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>DOM</title>
</head>
<body>
<p title ="选择你最喜欢的水果。">你最喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</li>
<li title="菠萝">菠萝</li>
<li title="橘子">橘子</li>
</ul>
<script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
<script type = "text/javascript">
</script>
</body>
</html>
2.1查找节点
2.1.1查找元素节点
var $li = $("ul li:eq(1)"); //获取<ul>元素下的第二个<li>元素；
var li_txt = $li.text();
alert(li_txt);2.1.2查找属性节点
利用jQuery选择器查找到需要的元素之后，就可以用attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个或者两个。参数为1个时，则是要查询的属性的名字；
var $p = $("p");
var para = $p.attr("title");
alert(para);2.2创建节点
$(html)会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
2.2.1 创建元素节点
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
$("ul").append($li_1).append($li_2);2.2.2 创建文本节点
var $li_1 = $("<li>西瓜</li>");
var $li_2 = $("<li>葡萄</li>");
$("ul").append($li_1).append($li_2);2.2.3 创建属性节点
var $li_1 = $("<li title = '西瓜'>西瓜</li>");
var $li_2 = $("<li title = '葡萄'>葡萄</li>");
$("ul").append($li_1).append($li_2);无论$(html)中的代码多么复杂，都要使用同样的方法创建。
2.3插入节点
jQuery提供的几种插入节点的方法：
html代码:
<p>我想说：</p>
① <p>我想说：<b>你好</b></p>
② <p>我想说：<b>你好</b></p>
③ <p><b>你好</b>我想说：</p>
④ <p><b>你好</b>我想说：</p>
⑤ <b>你好</b><p>我想说：</p>
⑥ <b>你好</b><p>我想说：</p>
⑦ <p>我想说：</p><b>你好</b>
⑧ <p>我想说：</p><b>你好</b>
注：插入节点的方法既可以用作将新创建的DOM元素插入到文档中，也可以用于对原有的DOM元素进行移动；
2.4 删除节点
jQuery提供了两种删除节点的方法：
2.4.1 remove()方法
从DOM元素中删除所有匹配的元素；
$("ul li:eq(1)").remove();这种方法会删除匹配的元素以及其所有后代节点，返回一个指向被删除的元素的引用，即元素用remove()方法删除后，仍可以继续使用；
var $para = $("ul li:eq(1)").remove();
$para.appendTo("ul");可通过传递参数来选择性的删除元素：
$("ul li").remove("li[title!='菠萝']");严格来讲，empty()不是删除节点，而是清空节点，它能清空元素中所有的后代节点；
$("ul li:eq(1)").empty();$("ul li").click(function () {
$(this).clone().appendTo("ul");
})$("ul li").click(function () {
$(this).clone(true).appendTo("ul");
})2.6 替换节点
replaceWith()方法和replaceAll()方法： $("p").replaceWith("<p>你最不喜欢的水果是？</p>");注：如果替换之前已为元素绑定事件，则替换后需要重新绑定；
2.7 包裹节点
将某个节点用其他标记包裹起来；wrap()方法：
$("p").wrap("<b></b>"); //将<p>元素用<b>元素包裹起来；2.7.1 wrapAll()方法
将所有匹配的元素用一个元素来包裹，而wrap()方法是对所有匹配的元素进行单独包裹；
2.7.1 wrapInner()方法
将每一个匹配元素的子内容（包括文本节点）用其他结构化的标记包裹起来；
2.8 属性操作
2.8.1 获取和设置属性（attr()方法）
获取属性时可以是一个或两个元素；设置属性时需要两个参数（属性，属性值）；
如果需要一次设置多个属性值，（属性1：值1，属性2：值2）；
注：jQuery中既能获取属性值，又能设置属性值的方法：attr()、html()、text()、height()、width()、val()和css()等方法。
2.8.2 删除属性：removeAttr()方法;
2.9 样式操作
2.9.1 获取和设置样式：attr()方法；
2.9.2 追加样式：addClass()方法；
注：css中的规定：
（1）如果给一个元素添加了多个class值，那么就相当于合并了它们的样式；
（2）如果有不同的class设置了同一样式，那么后者会覆盖前者；
2.9.3 删除样式：removeClass()方法；
删除多个样式：removeClass("class1" "class2");
删除全部样式：removeClass();
2.9.4 切换样式：
toggle();控制行为上的重复切换；
toggleClass();控制样式上的重复切换；（类名存在则删除，不存在则添加）；
2.9.5 判断是否含有某样式：hasClass()；有则返回true，没有则返回false；
2.10 获取和设置HTML、文本和值
html()：只能用于XHTML，不能用于XML；
text()：可以用于XHTML和XML；
val()：用来设置和获取元素的值；无论元素是文本框、下拉列表还是单选框；如果元素为多选，则返回一个包含所有选择的值的数组；
用val()方法实现简单的登录界面的一个小功能：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>DOM</title>
</head>
<body>
<p title ="选择你最喜欢的水果。">你最喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</li>
<li title="菠萝">菠萝</li>
<li title="橘子">橘子</li>
</ul>
<input type="text" id="address" value="请输入邮箱地址"/><br/><br/>
<input type="text" id="password" value="请输入密码"/><br/><br/>
<input type="button" value="登录"/>
<script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
<script type = "text/javascript">
$("#address").focus(function () {
var $val_text = $(this).val();
if($val_text == "请输入邮箱地址") {
$(this).val("");
}
})
$("#address").blur(function () {
var $val_text = $(this).val();
if($val_text == ""){
$(this).val("请输入邮箱地址");
}
})
$("#password").focus(function () {
var $val_text = $(this).val();
if($val_text == "请输入密码") {
$(this).val("");
}
})
$("#password").blur(function () {
var $val_text = $(this).val();
if($val_text == ""){
$(this).val("请输入密码");
}
})
</script>
</body>
</html>例如：
$("#single").val("选择1号");
$("#multiple").val(["选择1号","选择2号"]);2.11 遍历节点
children()方法
用于取得匹配元素的子元素集合；（只考虑子元素，不考虑其他任何后代元素）；
next()方法
用于取得匹配元素后面紧邻的同辈元素
prev()方法
用于取得匹配元素前面紧邻的同辈元素
siblings()方法
用于取得匹配元素前后所有的同辈元素
closet()方法
用来取得最近的匹配元素，首先检查当前元素是否匹配，匹配则返回元素本身，不匹配则向上查找父元素，逐级向上查找，直到找到匹配的元素，如果没有则返回一个空的jQuery对象；
2.12 CSS中的DOM操作
可以用css()方法获取和设置样式；
offset()方法：
获取元素在当前视窗的相对偏移，返回的对象包含两个属性（top和left），它只对可见元素有效；
获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回的对象包含两个属性（top和left）
scrollTop()和scrollLeft()方法：
获取元素的滚动条距顶端和距左侧的距离；
3.案例研究——超链接和图片提示效果
1.超链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>DOM</title>
<style>
.a{
color: crimson;
}
</style>
</head>
<body>
<p title ="选择你最喜欢的水果。">你最喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</li>
<li title="菠萝">菠萝</li>
<li title="橘子">橘子</li>
</ul>
<input type="text" id="address" value="请输入邮箱地址"/><br/><br/>
<input type="text" id="password" value="请输入密码"/><br/><br/>
<input type="button" value="登录"/>
<p><a href="#" class="tooltip" title="这是我的第一个提示">提示1.</a> </p>
<p><a href="#" class="tooltip" title="这是我的第二个提示">提示2.</a> </p>
<p><a href="#" title="这是自带提示1">自带提示1.</a> </p>
<p><a href="#" title="这是自带提示2">自带提示2.</a></p>
<script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
<script type = "text/javascript">
var $li = $("ul li:eq(1)"); //获取<ul>元素下的第二个<li>元素；
var li_txt = $li.text();
alert(li_txt);
var $p = $("p");
var para = $p.attr("title");
alert(para);
var $li_1 = $("<li title= '西瓜'>西瓜</li>");
var $li_2 = $("<li title= '葡萄'>葡萄</li>");
$("ul").append($li_1).append($li_2);
$("ul li").click(function () {
$(this).clone(true).appendTo("ul");
})
$("#address").focus(function () {
var $val_text = $(this).val();
if($val_text == "请输入邮箱地址") {
$(this).val("");
}
})
$("#address").blur(function () {
var $val_text = $(this).val();
if($val_text == ""){
$(this).val("请输入邮箱地址");
}
})
$("#password").focus(function () {
var $val_text = $(this).val();
if($val_text == "请输入密码") {
$(this).val("");
}
})
$("#password").blur(function () {
var $val_text = $(this).val();
if($val_text == ""){
$(this).val("请输入密码");
}
})
var x=10;
var y=20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var tooltip ="<div id='tooltip'>"+this.myTitle+"</div>";
console.log(tooltip);
$("body").append(tooltip);
$("#tooltip").css(
{
"top":(e.pageY+y) + "px",
"left":(e.pageX+x) + "px"
}
).show("fast");
}).mouseout(function () {
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css(
{
"top":(e.pageY+y) + "px",
"left":(e.pageX+x) + "px"
})
})
</script>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-Strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>图片提示效果</title>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
</style>
</head>
<body>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tootip" title="苹果ipod"><img src="images/apple_1.jpg" alt="苹果ipod"/></a> </li>
<li><a href="images/apple_2_bigger.jpg" class="tootip" title="苹果ipod nano"><img src="images/apple_2.jpg" alt="苹果ipod nano"/> </a></li>
<li><a href="images/apple_3_bigger.jpg" class="tootip" title="苹果iphone"><img src="images/apple_3.jpg" alt="苹果iphone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tootip" title="苹果Mac"><img src="images/apple_4.jpg" alt="苹果Mac"/></a></li>
</ul>
<script src = "../Scripts/jquery-3.2.1.js" type = "text/javascript"></script>
<script type = "text/javascript">
$(function () {
var x=10;
var y=20;
$("a.tootip").mouseover(function (e) {
this.myTitle=this.title;
this.title="";
var imgTitle =this.myTitle? "<br/>" + this.myTitle:"";
var tooltip ="<div id='tootip'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>"; //创建<div>元素；
$("body").append(tooltip);
$("#tooltip").css(
{
"top":(e.pageY+y) + "px",
"left":(e.pageX+x) + "px"
}
).show("fast");
}).mouseout(function () {
this.title=this.myTitle;
$("#tootip").remove();
}).mousemove(function (e) {
$("#tootip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
