jQuery就业课系列之.jQueryDOM
程序员文章站
2022-03-04 14:10:51
...
概念：DOM 文档对象模型（必考），jQuery Dom应该是之前的DOM加了个jQuery的封装。
分类：DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()，js。 HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green"
jQuery对JavaScript中的DOM操作进行了封装。
jQuery中的DOM操作
4.1 样式操作
之前的样式设置： 选择器对象.css('属性','值') 比如：
$("p").css("color",'red')
增加样式：
$("p").addClass('bgStyle')
toggle:模拟连续点击;
toggleClass:如果存在就删除一个类,如果不存在，则添加这个样式。
4.2 追加节点
| 语法 | 功能 |
|---|---|
| append(content) | $(A).append(B)表示将子元素B追加到A中 |
| prepend(content) | $(A). prepend (B)表示将子元素B前置插入到A中 |
| before(content) | $(A). before (B)表示将B插入至A之前 |
| after(content) | $(A).after (B)表示将B插入到A之后 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>追加节点</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按钮上单击的时候，进行操作;
$("#app").click(function(){
//操作的选择器对象是ul无序列表;
//后置：$(".gameList").append("<li>王者范.</li>")
//加到了ul的子元素li列表的后面；
//$(".gameList").prepend("<li>雨鑫战神</li>")
//before after
//before:在当前节点之前，增加一个元素，不属于当前节点。
//$(".gameList").before("<ul><li>海文泽拉斯</li></ul>")
$(".gameList").after("<ul><li>海文泽拉斯</li></ul>")
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船长</li>
<li>艾泽拉斯</li>
<li>起拉希姆</li>
</ul>
</div>
<button id="app">追加</button><!--用一个按钮来做测试，更简单-->
</body>
</html>
4.3 节点操作函数
选取的是比较重要的节点操作函数。
| 语法 | 功能 |
|---|---|
| remove() | 删除节点 |
| empty() | 清空节点内容 |
| replaceWith() | 替换节点 |
| clone() | 复制节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作节点</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按钮上单击的时候，进行操作;
$("#app").click(function(){
//1.删除节点的操作;删除某个节点：现在要删除艾泽拉斯;
//$(".gameList li:eq(1)").remove();
//2.清空节点内容：是删除吗？？？相当于设置了html('')
// $(".gameList li:eq(1)").empty();
//3.replaceWith：需要注意一下;如果不成可以加$("<li>四星小船长</li>")
// $(".gameList li:eq(1)").replaceWith("<li>四星小船长</li>")
//4.克隆：clone(),我们使用的时候就不加参数了.
//首先$(".gameList li:eq(1)").clone()：克隆;
//第二步：追加到$(".gameList")最后；
$(".gameList").prepend($(".gameList li:eq(1)").clone());
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船长</li><!--li序号:0-->
<li><a href='#'>艾泽拉斯</a></li><!--li序号:1-->
<li>起拉希姆</li><!--li序号:2-->
</ul>
</div>
<button id="app">克隆</button><!--用一个按钮来做测试，更简单-->
</body>
</html>
4.4属性节点
首先要了解什么是属性节点。
<img src='图片路径' title='超级炫图片'/
src，title就是img的属性，在DOM里面就是属性节点。
| 语法 | 功能 |
|---|---|
| attr() | 获取属性节点 |
| attr({name1:value1，..n,nameN:valueN}) | 设置属性节点的多个属性的值 |
| removeAttr(属性名) | 删除指定的属性节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作节点</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按钮上单击的时候，进行操作;
$("#app").click(function(){
//来获取一下src,这个图片的路径信息;好处：可以得到路径信息，
//将来可以修改.
alert($("img").attr('src'));
//设置图片的路径信息;attr('属性','值')
//$("img").attr('src','img/2aa.jpg');
//升级：男变女了，加样式:
$("img").attr('src','img/2aa.jpg').addClass('mm');
//删除样式：这个需要在查看器来看一下。
$("img").removeAttr('title');
})
})
</script>
</head>
<body>
<div class="cont">
<img src="img/men.jpg" title="纯爷们"/>
<ul class="gameList">
<li>三星老船长</li><!--li序号:0-->
<li><a href='#'>艾泽拉斯</a></li><!--li序号:1-->
<li>起拉希姆</li><!--li序号:2-->
</ul>
</div>
<button id="app">属性节点的操作</button><!--用一个按钮来做测试，更简单-->
</body>
</html>
4.5 遍历函数
实际它属性节点的查找：
复习：first() last() sibings()都是查找；
| 语法 | 功能 |
|---|---|
| each() | 遍历节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>追加节点</title>
<style>
@import url("css/games.css")
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
//在按钮上单击的时候，进行操作;
/* $("#app").click(function(){
//当我们在这个按钮上进行单击的时候，逐个获取li的信息内容
//然后打印输出;
//each的前面是需要逐个遍历的选择器对象；当前是li,所以：$("li")
$("li").each(function(){
let str=$(this).text();//text（）注意;
//alert(str);
//变了：追加到span
$("span").append(str);
})
}) */
//each前面的选择器一定是有好几个的元素对象；
$("#app").click(function(){
//下面要遍历+-* /四个按钮，得到其内容;
$(".calc").each(function(){
alert($(this).text());//就可以根据得到+-*/来完善之前的计算器了;
// let op=$(this).text();
// switch(op){
// case '+':加操作;break;
}
})
})
})
</script>
</head>
<body>
<div class="cont">
<ul class="gameList">
<li>三星老船长</li>
<li>艾泽拉斯</li>
<li>起拉希姆</li>
</ul>
</div>
<span></span>
<button id="app">遍历按钮</button><!--用一个按钮来做测试，更简单-->
<button class="calc">+</button class="calc"><button>-</button>
<button class="calc">*</button><button class="calc">/</button>
</body>
</html>
总结：
1.toggleClass():有样式，则删除，没有则增加样式；
2.追加节点有4个，2个子元素街边；2个兄弟元素级别；
3.节点操作就是删除、清空、复制、替换（删改）
4.属性节点：attr() attr('name','name)
5.节点的遍历，注意使用：$("选择器").each()
推荐阅读
-
Oracle就业课第六课之游标和触发器
-
张晨光老师高薪就业系列 面试之五 集锦
-
jQuery就业课程之表单选择器系列
-
web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记，web进阶jquerydom
-
Jquery 1.9.1源码分析系列之筛选操作
-
jQuery 1.9.1源码分析系列（十）事件系统之绑定事件_jquery
-
web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记，web进阶jquerydom
-
jQuery 1.9.1源码分析系列（十四）之常用jQuery工具_jquery
-
jquery Sizzle系列之filters
-
jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween_jquery