3.更新节点
<div id='id1'> <script> var id1 = document.getElementById('id1'); id1.innerHTML('123') id1.style.color = 'red';//属性使用''包裹 id1.style.fontSize = '200px';//- 转驼峰命名 id1.style.padding = '2em'; </script> </div>
4.删除节点
删除节点的步骤： 先获取父节点，再通过父节点删除自己
注意： 删除多个节点的时候，children时再时刻变化的，删除节点的时候一定要注意！
<div id="father"> <h1>标题1</h1> <p id="p1">p1</p> <p2 class="p2">p2</p2> </div> <script> var self = document.get ElementById('p1'); var father = p1.parentElement; father.removeChild(self) //删除时一个动态的过程 father.removeChild(father.children[0]) </script>
5.插入节点
我们获得了某哦个DOM节点，假设DOM节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素，我们就不能这样做了，因为会覆盖。
追加节点
<p id="js">biancheng</p> <div id="list"> <p id="se">javascript</p> <p id="ee">java</p> <p id="py">python</p> </div> <script> var js = document.getElementById('js'); var list = document.getElementById('list'); list.appendChild(js); //追加到后面 </script>
6.创建一个新的标签，实现插入
var js = document.getElementById('js'); //已经存在的节点 var list = document.getElementById('list'); // 通过js 创建一个新的节点 var newp = document.createElement('p'); //创建一个P标签 newp.id = 'newp'; newp.innerText = 'hello,ding'; list.appendChild(newp)
// 可以创建一个Style标签 var mystyle= document.createElement('style'); mystyle.setAttribute('type','text/css'); // 设置标签内容 mystyle.innerHTML = 'body{background-color: #ffeb3b}'; document.getElementsByTagName('head')[0].appendChild(mystyle) ```javascript var ee = document.getElementById('ee'); var py = document.getElementById('py'); var list = document.getElementById('list'); //要包含的节点，insertBefore（new，target） list.insertBefore(py,ee);
九、操作表单（验证）
1.表单是什么：form DOM树
文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…
表单的目的：提交信息
2.获得要提交的信息
<form action="post"> <p> <span>用户名：</span><input type="text" id="username"> </p> <!--多选框的值，就是定义好的--> <p> <span>性别：</span> <input type="radio" name="sex" value="boy" id="boy"> 男 <input type="radio" name="sex" value="girl" id="girl"> 女 </p> </form> <script> var input_text = document.getElementById('username') var boy_radio = document.getElementById('boy') var girl_radio = document.getElementById('girl') //得到输入框的值 //修改输入框的值 input_text.value = '123' //对于单选框，多选框等等固定的值，boy_radio.value 只能取到当前的值 boy_radio.checked; //查看返回的结果，是否为true，如果为true 则这个被选中 girl_radio.checked = true; </script>
3.提交表单，md5加密密码，表单优化
<!-- 表单绑定提交事件 onsubmit= 绑定一个提交检测的函数 true,false 讲这个结果返回给表单，使用onsubmit接收！ --> <form action="#" method="post" onsubmit="return aa()"> <p> <span>用户名：</span><input type="text" id="username" name="username"> </p> <p> <span>密码：</span><input type="password" id="password" name="input-password"> </p> <input type="hidden" id="md5-password" name="password"> <!--绑定事件 oncliek 点击--> <button type="submit" onclick="aa()">提交</button> </form> <script> function aa() { var uname = document.getElementById('username'); var pwd = document.getElementById('input-password'); var md5pwd = document.getElementById('md5-password'); //console.log(uname.value); // MD5 算法 //pwd.value = md5(pwd.value); //console.log(pwd.value) md5pwd.value =md5(pwd.value) //可以检测判断表单内容，TRUE就是提交，false阻止提交 return true; } </script>
十、jQuery
1.什么是jQuery
jquery库：里面存在大量的javascript函数
2.获取jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body> </body> </html>
3.使用jquery
<a href="" id="test-jquery">点我</a> <script> //选择器就是css选择器 $('#test-jquery').click(function () { alert('hello,jquery') }) </script>
4.选择器
//原生态js，选择器少，麻烦不好记 //标签 document.getElementsByTagName(); //id document.getElementById(); //类 document.getElementsByClassName(); //jquery css 中的选择器他全部都能用 $('p').click(); //标签选择器 $('#id').click(); //id选择器 $('.class1').click(); //class选择器 公式： $(selector).action()
5.事件
- 鼠标事件
- 键盘事件
- 其他事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <style> #divMove{ width: 500px; height: 500px; border: 1px solid red; } </style> </head> <body> <!-- 要求：获取鼠标当前的一个坐标--> mouse: <span id="mouseMove"></span> <div id="divMove"> 在这里移动鼠标试试 </div> <script> //当网页元素加载完毕之后，响应事件 $(function () { $('#divMove').mousemove(function (e) { $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY) }) }) </script> </body> </html>
6.操作DOM
- 节点文本操作
$('#test-ul li[name=python]').text(); //获得值 $('#test-ul li[name=python]').text('设置值');//设置值 $('#test-ul').html(); //获得值 $('#test-ul').html('<strong>123</strong>'); //设置值
css的操作
$('#test-ul li[name=python]').css("color","red")
元素的显示和隐藏,本质display：none
$('#test-ul li[name=python]').show() $('#test-ul li[name=python]').hide()
娱乐测试
$(window).width() $(window).height() $('#test-ul li[name=python]').toggle();
后记
Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
