一.DOM操作分为三类：
- DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
- HTML-DOM：用于处理HTML文档，如document.forms
- CSS-DOM：用于操作CSS，如element.style.color="green
二.JQuery中的DOM操作
- jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便
- jQuery中的DOM操作可分为：
- 样式操作
- 内容及Value属性值操作
- 节点操作
- 节点属性操作
- 节点遍历
- CSS-DOM操作
- 配置jQuery模板，不然每次导入很麻烦：模板代码如下
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.js"></script> <script> $(function () { }) </script> </head> <body> </body> </html> 
三.示例
- 样式操作：添加样式，追加样式addClass，移除样式removeClass，切换样式toggleClass
- HTML代码操作，text文本操作
先要添加jQuery模板
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function () {
$('#d').mouseover(function () {
//样式操作，给div加边框
$(this).css('border','2px solid red')
//html代码操作。类似于js当中的innerHTML
$(this).html('hello 天气很热！')
//追加样式,不用加.
$(this).addClass('bg');
});
$('#d').mouseleave(function () {
//样式操作
$(this).css('border','2px solid green');
//移除样式
$(this).removeClass('bg');
var name = "zs";
//字符串拼接一个表格
var tb = '<table border = "1px" width="100px">'
for (var i = 0; i <5; i++) {
tb+='<tr><td>'+i+'</td><td>'+name+i+'</td></tr>'
}
tb+='</table>'
//先将加到div里面，再从元素中取所有内容
var html = $('#d').html(tb);
// alert(html);
})
});
</script>- value属性值操作，给指定元素添加多个样式
-
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.js"></script> <script> $(function () { $("button").click(function () { //先给button设置多个样式,记得是用大括号 $(this).css({'width':'100px','height':'30px'}); // $(this).css('height','30px'); //获取或设置元素的value属性值 var val = $(this).val(); alert('这个div元素的value属性值是' + val); $(this).val("修改后的value"); var val1 = $(this).val(); alert('修改后这个div元素的value属性值是' + val1); }) }) </script> </head> <body> <button value=" 初始value"></button> </body> </html>
四.节点操作
- jQuery中节点操作主要分为：
- 查找节点
- 创建节点
- 工厂函数$()用于获取或创建节点
- $(selector)：通过选择器获取节点
- $(element)：把DOM节点转化成jQuery节点
- $(html)：使用HTML字符串创建jQuery节点
- 工厂函数$()用于获取或创建节点
- 插入节点
- 插入子节点
- 示例当中的HTML
-
<body> <button id="bt">确定</button> <ul> <li>aa</li> <li id="bb">bb</li> <li>cc</li> <li>dd</li> </ul> </body> -
<script src="js/jquery-3.6.0.js"></script> <script> $(function () { var $ee = $('<li>ee</li>') $('#bt').click(function () { /*//元素内部，加入子节点，在后面追加 // $('ul').append($ee); $ee.appendTo($('ul'))*/ //元素内部加入子节点，加在其他元素前面 // $('ul').prepend($ee); $ee.prependTo($('ul')) }); }) </script>
-
外部元素插入同辈节点
-
-
<script src="js/jquery-3.6.0.js"></script> <script> $(function () { var $ee = $('<li>ee</li>') $('#bt').click(function () { //加入子节点 //加入同辈元素，其实就是兄弟元素,在同辈li当中插入 //后面追加 // $('#bb').after($ee); //$ee.insertAfter($('#bb')); //前面加 // $('#bb').before($ee); // $ee.insertBefore($('#bb')) }); }) </script>
-
- 删除节点
- jQuery提供了三种删除节点的方法
- remove()：删除整个节点,会将原本的事件都删除
-
//先给bb加一个事件，等下删除bb的时候，给bb赋个值，看看效果 $('#bb').click(function () { alert('你点了bb'); })//删除，remove var vb = $('#bb').remove(); //将vb加到ul的子节点当中 $('ul').append(vb); //结合效果可以看出，此时加入的VB就是bb，但是已经没有了bb之前绑定的事件效果
- detach()：删除整个节点，保留元素的绑定事件、附加的数据
-
//删除，detach，删除时，会将原本的事件会保留 var vb = $('#bb').detach(); //将vb加到ul的子节点当中 $('ul').append(vb); //结合效果可以看出，此时加入的VB就是bb，bb之前绑定的事件效果依然存在
-
- empty()：清空节点内容
- jQuery提供了三种删除节点的方法
- 替换节点：replaceWith()和replaceAll()用于替换某个节点
-
//替换节点：replaceWith()和replaceAll()用于替换某个节点 //二者的关系相当于append和appendTo //用$ee换掉bb // $('#bb').replaceWith($ee); $ee.replaceAll($('#bb'));
-
- 复制节点clone()
-
//复制节点，clone(),加入到同辈元素当中, // 两种方式，一种是克隆之后先赋值给一个变量，一种是直接加 // var ee = $('#bb').clone.appendTo($ee); var ee = $ee.clone(); $('#bb').before(ee) $('#bb').after($ee.clone())
-
- 获取与设置（设置，删除）节点属性
- attr()用来获取与设置元素属性
- removeAttr()用来删除元素的属性
-
$(function () { //使用attr来设置属性值 $('a').attr("href","http://www.huanqiu.com"); //取得属性值 alert($('a').attr("href")); //删除属性 // $('a').removeAttr("href"); })设置后
删除后
-
遍历子元素：children()方法可以用来获取元素的所有子元素（不会包含子元素的子元素）
-
<!--快捷方式：ul>li{aa$}*4--> <ul> <li>aa1</li> <li id="d">aa2</li> <li>aa3</li> <li>aa4</li> </ul>//遍历子元素 console.log($('ul').children().length); alert($('ul').children().length); // console.log($('ul').children("li")[2].test("hello"));//不能这样去设置li的文本内容 console.log($('ul').children("li").length);//控制台打印ul下名字叫li的子元素有多少个
-
- 遍历同辈元素：jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
- next()，prev()，siblings()
-
//遍历同辈元素 //设置下一个同辈元素的颜色为红色 $('#d').next().css('color','red'); //设置上一个同辈元素的颜色为蓝色 $('#d').prev().css('color','blue'); //设置其他所有同辈兄弟的颜色为绿色 $('#d').siblings().css('color','green');
- 遍历前辈元素
- jQuery中可以遍历前辈元素，方法如下：
- parent()：获取元素的父级元素
- parents()：元素元素的祖先元素
- jQuery中可以遍历前辈元素，方法如下：
五.综合案例：
- 原型：
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ list-style: none; } /*ul>li和ul li的区别 ul>li:子代选择器，不会包含ol下面的li ul li：后代选择器，会包含ol下面的li */ ul>li{ float: left; border: 1px solid blue; width: 150px; text-align: center; } ul li ol{ /*和上级span对齐*/ padding-left: 0px; } </style> <script src="js/jquery-3.6.0.js"></script> <script> $(function () { $('ul').children().css({}) }) </script> </head> <body> <ul> <li> <span>军事</span> <ol> <li>新武器</li> <li>航空母舰</li> <li>军事新闻</li> <li>最新战机</li> </ol> </li> <li> <span>体育</span> <ol> <li>跑步</li> <li>游泳</li> <li>篮球</li> <li>羽毛球</li> </ol> </li> <li> <span>游戏</span> <ol> <li>王者荣耀</li> <li>和平精英</li> <li>球球大作战</li> <li>原神</li> </ol> </li> </ul> </body> </html>
-
-
实现效果：
-
鼠标移入主题显示内容，移出隐藏
-
先将ol 设置为visibility:hidden 或者 display：none；
-
display页面会根据内容变化，visibility不会，页面布局固定显示
- 方法有很多种，show(),hide(); slideDown().slideUp(),slideToggle()
- 先实现显示与隐藏，再实现排他显示（只显示自己）
-
$(function () { //display页面会根据内容变化，visibility不会，页面布局固定显示 /* //移入显示 $('li span').mouseover(function () { //因为只有两兄弟，用next或者sibling都行 // $(this).next('ol').css('visibility','visible'); //slideDown() 可以使元素逐步延伸显示， $(this).next('ol').slideDown(); }) //移出隐藏 $('li span').mouseleave(function () { // $(this).siblings('ol').css('visibility','hidden'); //slideUp()则使元素逐步缩短直至隐藏 $(this).siblings('ol').slideUp(); })*/ //.slideToggle();在slideDown和slideUp之间来回切换 $('li span').click(function () { // $(this).siblings('ol').css('visibility','hidden'); $(this).siblings('ol').slideToggle(); //点击某一个板块的时候，其他板块隐藏，只显示点击的板块 //排他显示，即只显示自己 $(this).parent('li').siblings('li').children('ol').slideUp();//hide(); }) /* //移入显示 $('ul>li').mouseover(function () { $(this).children('ol').show() }) //移出隐藏 $('ul>li').mouseleave(function () { $(this).children('ol').hide(); })*/ })
-
-
- 综合案例练习2：课程表
- 实现效果，鼠标移入第几节课，一星期中的所有这个时间的可变色，鼠标移入单独某个课，课单独变色
- 如果改一下，要怎么实现，鼠标移入到某一节课，背景变色，当天的其他课对应的表格背景是另一种颜色，而不是一周所有该时间段的课变背景色
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border: 1px solid #90080E ; background-color: darkorange; position: fixed; left: 25%; top: 25%; } td{ border: 1px solid darkorange; text-align: center; /*color: darkkhaki;*/ } </style> <script src="js/jquery-3.6.0.js"></script> <script> $(function () { //鼠标移入，这一行变成darkkhaki，其他行不变色 /*$('tr').mouseover(function () { $(this).css('background','darkkhaki'); $(this).siblings().css('background','white') })*/ //鼠标移入触发事件 $('td').mouseover(function () { $(this).css('background','yellow'); $(this).siblings().css('background','pink') $(this).parent().siblings().children().css('background','white') }) $('table').mouseleave(function () { $(this).children().css('background','white'); }) }) </script> </head> <body> <!--练习要求：鼠标移入星期几时，变颜色，单独放到某节课上也变颜色 --> <table> <tr> <td></td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期日</td> </tr> <tr> <td>第一节</td> <td>数学</td> <td>数学</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>英语</td> <td>西方经济学</td> </tr> <tr> <td>第二节</td> <td>java</td> <td>java</td> <td>java</td> <td>c++</td> <td>c++</td> <td>c++</td> <td>计算机导论</td> </tr> <tr> <td>第三节</td> <td>数据结构</td> <td>数据结构</td> <td>数据结构</td> <td>算法</td> <td>算法</td> <td>算法</td> <td>编译原理</td> </tr> <tr> <td>第四节</td> <td>马克思主义原理</td> <td>马克思主义原理</td> <td>马克思主义原理</td> <td>Python</td> <td>Python</td> <td>Python</td> <td>Python</td> </tr> <tr> <td>第五节</td> <td>计组</td> <td>计组</td> <td>计组</td> <td>计组</td> <td>经济学</td> <td>经济学</td> <td>经济学</td> </tr> <tr> <td>第六节</td> <td>口才学</td> <td>口才学</td> <td>口才学</td> <td>星期4</td> <td>电路电子学</td> <td>电路电子学</td> <td>电路电子学</td> </tr> <tr> <td>第七节</td> <td>高等数学</td> <td>高等数学</td> <td>高等数学</td> <td>毛概</td> <td>毛概</td> <td>毛概</td> <td>毛概</td> </tr> <tr> <td>第八节</td> <td>思修</td> <td>思修</td> <td>思修</td> <td>思修</td> <td>移动应用开发</td> <td>移动应用开发</td> <td>移动应用开发</td> </tr> </table> </body> </html>
- 综合案例练习2：下拉菜单
- 实现效果：鼠标点击菜单，显示子菜单，再点隐藏，鼠标移入子菜单，只有该子菜单背景样式和字体样式发生改变
- 效果如下：
- 代码示例：方式有很多种
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ list-style: none; /*margin: 0px; padding: 0px;*/ } body{ background-color: skyblue; } #d{ width: 500px; height: 250px; border: 1px solid rosybrown; position: fixed; left: 20%; top: 10%; background-color: skyblue; box-shadow: 0 5px 20px powderblue; } ul>li{ width: 150px; /*border: 1px solid black;*/ text-align: center; } button{ width: 100px; border: 1px solid black; font-size: larger; background-color: darkorange; color: #f6e5e6; border-radius: 8px; } ol{ display: none; font-size: 15px; background-color: initial; } ol>li{ width: 70px; } </style> <script src="js/jquery-3.6.0.js"></script> <script> $(function () { $('button').click(function () { //伸缩显示与隐藏相互切换 $(this).siblings('ol').slideToggle(); }); $('ol>li').mouseover(function () { $(this).css({'background-color':'blue','color':'white'}) // 同一管理下面其他兄弟不变色 $(this).siblings().css({'background-color':'initial','color':'black'}) //点击某个管理的时候，其他管理下面的样式不会变 $(this).parent().parent().siblings().children('ol').children().css({'background-color':'initial','color':'black'}) }) }) </script> </head> <body> <div id="d"> <ul> <li> <button>用户管理</button> <!-- <span></span>--> <ol> <li>添加用户</li> <li>删除用户</li> <li>用户修改</li> <li>查询客户</li> </ol> </li> <li> <button>系统管理</button> <!-- <span></span>--> <ol> <li>修改密码</li> <li>修改爱好</li> <li>系统更新</li> <li>系统设置</li> </ol> </li> </ul> </div> </body> </html> - 综合案例练习3：广告弹窗
- 实现效果，点击X，关闭广告，也可以写恶意广告
- js原生和jQuery两种方式对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 500px;
height: 1000px;
/*fixed:根据窗体来定位*/
/*position: fixed;*/
position: absolute;
top: 10%;
left: 18%;
background-color: #f6e5e6;
text-align: center;
}
div{
border: 1px solid blue;
width: 100px;
height: 100px;
}
.left{
left: 0px;
float: left;
position: fixed;
background-color: skyblue;
}
.right{
right: 0px;
float: right;
position: fixed;
background-color: skyblue;
}
span{
float: right;
}
</style>
<script src="js/jquery-3.6.0.js"></script>
<script>
//原生态方式关闭广告弹窗,js原生怎么没效果？
//因为代码从上往下执行，而你又不是调用函数，所以是找不到span的，除非你将
//script放到</html>后面，就可以了
var ss = document.getElementsByTagName("span");
for (var i= 0; i < ss.length; i++) {
ss[i].onclick=function () {
this.parentNode.style.display='none';
//this.parentElement.style.display='none';
}
}
/* //jquery方式
$(function () {
$('span').click(function () {
$(this).parent().slideUp(500);//hide(500),slideUp(500),fadeOut(800)
//恶意广告，关闭左侧显示右侧，反之亦然
$(this).parent().siblings().slideDown(500);//hide(500),slideUp(500),fadeOut(800)
})
})*/
</script>
</head>
<body>
<div id="content">
<div class="left">
<span>X</span>
</div>
<div class="right" style="display: none">
<span>X</span>
</div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<p>段落9</p>
<p>段落10</p>
</div>
</body>
</html>
- 综合案例练习3：高亮（经常会用到）
- 实现效果：排他显示，点击按钮可以切换隐藏显示
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.6.0.js"></script> <script> $(function () { //高量,siblings同辈兄弟 $('p').click(function () { $(this).css('color','red').siblings('p').css('color','blue'); }) //toggle $('button').click(function () { //show,hide二者转换，加数字，变慢 $('#p5').toggle(500) }) }) </script> </head> <body> <p>今日新闻1</p> <p>今日新闻2</p> <p>今日新闻3</p> <p>今日新闻4</p> <p id="p5">今日新闻5</p> <p>今日新闻6</p> <hr> <button>按钮</button> </body> </html> - 综合案例练习3：tab切换-->环球评论
- 实现效果，点击相应tab，显示相应内容
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #all{ border: 1px solid papayawhip; width: 350px; background-color:white; } /*各tab对应的内容div默认隐藏*/ #content div{ /*border: 1px solid red;*/ width: 350px; height: 200px; display: none; text-align: left; /*background-color: skyblue;*/ font-size: 16px; } /*用于设置点击或选中的tab对应div的显示*/ #content div.dis{ display: block; } #top h3{ margin-top: 0px; margin-bottom: 0px; border-bottom: 1px solid #90080E ; width: 350px; } h3 span{ width: 58px; height: 38px; color: #90080E; } /*选中标题的高亮显示*/ .cr{ background: #f6e5e6; border-radius: 4px 4px 0 0; border: 1px solid #90080E ; width: 58px; height: 38px; color: #90080E; } ul{ margin-left: -15px; } li{ margin-top: 8px; } </style> <script src="js/jquery-3.6.0.js"></script> <script> $(function () { $('span').click(function () { //高亮显示 $(this).addClass('cr').siblings().removeClass('cr') var index = $(this).index(); //eq，比较，看你当前的索引是不是所比较的索引 $('#content div').eq(index).addClass('dis').siblings().removeClass('dis'); }) }) </script> </head> <body> <div id="all"> <div id ="top"> <h3> <span> 10日 </span> <span> 9日 </span> <span> 8日 </span> <span> 7日 </span> <span> 6日 </span> <span> 5日 </span> </h3> </div> <div id="content"> <div class="dis"> <h3 style="margin-top: 10px;font-size: 15px;padding-left: 10px">“：xxxxxxxx上有必要"再思考"</h3> <ul> <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li> </ul> </div> <div> <h3 style="margin-top: 0px">“xxxxxxxxxxxxxxxxxxxxxx有必要"再思考"</h3> <ul> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> </ul> </div> <div> <h3 style="margin-top: 0px">“xxxxxxxxxxxxxxxxxxxxxx有必要"再思考"</h3> <ul> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>范xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> </ul> </div> <div> <h3 style="margin-top: 0px">“xxxxxxxxxxxxxxxxxxxxxx有必要"再思考"</h3> <ul> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> </ul> </div> <div> <h3 style="margin-top: 0px">“xxxxxxxxxxxxxxxxxxxxxx上有必要"再思考"</h3> <ul> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> </ul> </div> <div> <h3 style="margin-top: 0px">“xxxxxxxxxxxxxxxxxxxxxx"再思考"</h3> <ul> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> <li>xxxxxxxxxxxxxxxxxxxxxx</li> </ul> </div> </div> </div> </body> </html>
2408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
