jQuery就业课系列之.jQueryDOM
【摘要】
概念：DOM 文档对象模型（必考），jQuery Dom应该是之前的DOM加了个jQuery的封装。
分类：DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()，js。 HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于...
概念：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()
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/105987007
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）