JQuery技术应用—JQuery中的dom操作
（1），DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件
（2），DOM 操作的分类:
· DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
· HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时, 有许多专属于 HTML-DOM 的属性
· CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性
（3），jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便
jQuery中的DOM操作可分为：
样式操作
内容及Value属性值操作
节点操作
节点属性操作
节点遍历
CSS-DOM操作
1，直接设置样式值
使用css()为指定的元素设置样式值
例如：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<script>
$(function(){
$("#pic").css({
"border":"5px solid red","opacity":"0.6"}) //设置边框和透明度
})
</script>
<img src="./img/lift_product_1.jpg" alt="" id="pic">
</body>
</html>
运行结果：
2，追加和移除样式
· 追加样式
· 移除样式
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style>
.add{
color: blue;
font-size: 20px;
}
.p2{
color: red;
font-size: 20px;
}
</style>
<script>
$(function(){
$("button").click(function(){
$("#p1").addClass("add") //给p1添加样式 即添加一个add类
$(".p2").removeClass("p2") //删除p2的样式 即删除类名为p2的样式
})
})
</script>
</head>
<body>
<p id="p1">落霞与孤鹜齐飞</p>
<p class="p2">秋水共长天一色</p>
<button>点我改变样式</button>
</body>
</html>
运行结果：
改变前：
改变后：
3，切换样式
toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style>
li{
list-style: none;
float: left;
padding: 0px 10px;
}
.show{
color: red;
background-color: blueviolet;
}
</style>
<script>
$(function(){
$("li").hover(function(){
$(this).toggleClass("show")
})
})
</script>
</head>
<body>
<ul>
<li>首页</li>
<li>手机</li>
<li>电脑</li>
<li>我的</li>
</ul>
</body>
</html>
运行结果：
切换样式：鼠标放到上面改变背景颜色和字体颜色，鼠标移走后恢复
4，HTML代码操作和文本操作
· HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML
· 文本操作
text()可以获取或设置元素的文本内容
html()和text() 的区别如下：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<script>
//html代码操作
$(function(){
var a = $("#left").html() //获取div里的内容(即HTML代码)
alert(a)
$("button").click(function(){
//设置div里的内容(html代码)
$("#left").html("<div><img src='./img/headimg.jpg'></div>")
})
})
//文本操作
$(function(){
var b = $("#left").text() //获取div里的文本内容
alert(b)
$("button").click(function(){
//设置div里的文本内容
$("#left").text("<div><img src='./img/headimg.jpg'></div>")
})
})
</script>
</head>
<body>
<div id="left">
<img src="./img/lift_product_1.jpg" alt="">
<p>这是一把小雨伞</p>
</div>
<button>点我换内容</button>
</body>
</html>
5，Value值操作
val()可以获取或设置元素的value属性值
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<script>
$(function(){
$("#content").focus(function(){
//得到焦点
var contents = $("#content").val() //获取value值
if(contents=="请输入搜索内容"){
$("#content").val("")
}
})
$("#content").blur(function(){
var contents = $("#content").val()
if(contents==""){
$("#content").val("请输入搜索内容")
}
})
})
</script>
</head>
<body>
<input type="text" value="请输入搜索内容" id="content"><input type="button" value="搜索">
</body>
</html>
6，插入同辈节点、替换、复制、删除节点
· 插入同辈节点
· 替换节点
replaceWith()和replaceAll()用于替换某个节点
· 复制节点
clone()用于复制某个节点
· 删除节点
jQuery提供了三种删除节点的方法
remove()：删除整个节点
detach()：删除整个节点，保留元素的绑定事件、附加的数据
empty()：清空节点内容 （文本内容）
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style>
li{
list-style: none;
}
</style>
<script>
$(function(){
var newNode=$("<li>汤姆和杰瑞</li>") // B
//将B插入a之后
$("#a").after(newNode)
//将a插入B之后
newNode.insertAfter("#a")
//将B插入a之前
$("#a").before(newNode)
//将a插入B之前
newNode.insertBefore("#a")
//用B替换a
$("#a").replaceWith(newNode)
//把c替换成B
newNode.replaceAll("#c")
//复制节点
$("#a").clone(true).appendTo("#d")
})
</script>
</head>
<body>
<ul>
<li id="d">葫芦娃</li>
<li>苏克和贝塔</li>
<li>黑猫警长</li>
<li id="a">铁臂阿童木</li>
<li>圣斗士星矢</li>
<li id="c">魔神坛斗士</li>
</ul>
</body>
</html>
7，获取与设置节点属性
attr()用来获取与设置元素属性
removeAttr()用来删除元素的属性
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<script>
$(function(){
var a = $("img").attr("alt") //获取属性alt的值
alert(a)
$("img").attr({
"width":"200px","height":"300px"}) //给img添加属性
$("img").removeAttr("height") //删除img的height属性
})
</script>
</head>
<body>
<img src="./img/lift_product_1.jpg" alt="这是一把雨伞">
</body>
</html>
运行结果：
