核心
浏览器的网页就是一个DOM的树形结构
更新：更新DOM节点
遍历dom节点:得到DOM节点
删除:删除一个DOM节点
添加:添加一个新的节点
要操作一个DOM节点,就必须要先获得这个DOM节点
获取DOM节点
//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByclassName('p2');
var father = document.getElementById('father');
?
var childrens= father.children; //获取父节点下的所有子节点
// father.firstchild
// father. lastchild
这是原生代码，之后尽量用jQuery()
更新节点
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
</head>
<body>
?
<div id="id1">
?
</div>
?
<script>
? ?var id1=document.getElementById('id1')
</script>
?
</body>
</html>
操作文本
id1. innerText='456' 修改文本的值
id1.innerHTML='sxc'
操作JS
id1.style.color = 'yellow'; id1.style.fontsize='20px'; id1.style.padding = '2em'
删除节点
删除节点步骤：先获取父节点，在通过父节点删除自己
<div id="father">
? ?<h1>标题一</h1>
? ?<p id="p1">p1</p>
? ?<p class="p2">p2</p>
</div>
<script>
? ?var self = document.getElementById('p1');
? ?var father = p1.parentElement;
? ?father.removechild(self)
</script>
插入节点
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Title</title>
</head>
<body>
?
<p id="js">JavaScript</p>
<div id="list">
? ?<p id="se">JavaSE</p>
? ?<p id="ee">JavaEE</p>
? ?<p id="me">JavaME</p>
</div>
?
<script>
? ?var js=document.getElementById('js');
? ?var list=document.getElementById('list');
? ?list.appendChild(js);//追加到后面
</script>
?
</body>
</html>
创建一个新的标签，实现插入
<script>
?
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
//通过JS 创建一个新的节点
var newP = document.createElement('p');// 创建一个p标签
newP.id = 'newP';
newP. innerText = 'Hello, Kuangshen';
// 创建一个标签节点
var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');
?
//可以创建一个Style标签
var myStyle= document.createElement('style');//创建了一个空style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML='body{background-color: chartreuse;}';//设置标签内容
?
document.getElementsByTagName('head')[0].appendchild(mystyle)
?
</script>
insert
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
获取要提交的信息
<form action="post">
? ?<p>
?
? ?<span>用户名 :< /span> <input type="text" id="username">
?
? ?</p>
?
? ?<!-- 多选框的值,就是定义好的value -- >
? ?<p>
?
? ?<span>性别 :< /span>
? ?<input type="radio" name="sex" value="man" id="boy">男
? ?<input type="radio" name="sex" value="women" 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
? ?// 修改输入框的值
? ?input_text. value = '123'
?
? ?// 对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值
? ?boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中~
? ?girl_radio.checked = true; //赋值
?
</script>
提交表单
<!--
?
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数,true, false
将这个结果返回给表单,使用 onsubmit 接收!
οnsubmit="return aaa()"
-->
?
<form action="https://www.baidu.com/" method="post" οnsubmit="return I
aaa ()">
?
? ?<p>
? ?<span>用户名 :< /span> <input type="text" id="username"
? ?name="username">
? ?</p>
? ?<p>
? ?<span>密码 :< /span> <input type="password" id="input-password">
? ?</p>
?
? ?<input type="hidden" id="md5-password" name="password">
?
? ?<!-- 绑定事件 onclick 被点击 -- >
? ?<button type="submit">提交</button>
</form>
?
<script>
function aaa() {
? ? ? ?alert(1);
? ?var uname = document.getElementById('username');
? ?var pwd = document.getElementById('input-password');
? ?var md5pwd = document.getElementById('md5-password');
?
? ?md5pwd.value = md5(pwd.value);
? ?// 可以校验判断表单内容,true就是通过提交,false,阻止提交
? ?return true;
? }
</script>
<! DOCTYPE html> <html lang="en"> <head> <meta charset=['UTF-8"> <title>Title</title> <!-- cdn引入 -- > <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> </head> <body> ? </body> </htm1>
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--< script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> -- >
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
?
<a href="" id="test-jquery">点我</a>
?
script>
?
//选择器就是css的选贼器
$('#test-jquery'). click(function () {
alert('hello, jQuery');
})
</script>
?
</body>
</html>
选择器
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName ();
//id
document.getElementById();
//类
document.getElementsByclassName ();
?
//jQuery css 中的选择器它全部都能用!
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click() //class选择器
文档工具站：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
事件
<!-- 要求:获取鼠标当前的一个坐标 -- >
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
<div>
?
script>
? ?//当网页元素加载完毕之后,响应事件
? ?$(function () {
? ? ? ?$('#divMove') .mousemove(function (e) {
? ? ? ?$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
? ? ? })
});
?
</script>
操作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")
元素的显示和隐藏
$('#test-ul li [name=python]').show()
$('#test-ul li [name=python]').hide()