我们于2021/08/06 的学习目标是:JavaScript,核心任务为:
1、学习技术:
1)、事件
2)、对象
3)、定时器
4)、重复执行定时器
5)、DOM
6)、创建插入节点
7)、创建图片节点
8)、间接查找节点
9)、DOM操作节点案例
10)、发布留言案例
11)、DOM操作节点
12)、DOM操作表单
2、文档总结
1)、事件
事件:当执行某件事情,或者某个动作时触发一段JS代码的执行
函数JS已经定义代码
分类:
鼠标事件:单击 双击 移入 移出 按下 抬起
键盘事件:键盘按下 抬起
焦点事件:聚焦事件 失焦事件
文档事件:window.onload-->待页面加载完才触发函数的执行
表单事件:焦点事件 change-->表单内容改变触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
div{
width: 100px;
height: 100px;
}
.box1,.box3,.box5{
background: cyan;
}
.box2,.box4{
background: pink;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2" onmouseover="func_over();">div2</div>
<div class="box3" >div3</div>
<div class="box4" onmousedown="func_down()">div4</div>
<div class="box5">div5</div>
<input type="text" id="username" name="username" onfocus="func_focus()" onblur="func_blur()" onkeydown="func_keydown()"><span id="info"></span>
<script>
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
var box4 = document.getElementsByClassName("box4")[0];
var box5 = document.getElementsByClassName("box5")[0];
var info = document.getElementById("info");
var username = document.getElementById("username");
//为元素节点绑定事件
box1.ondblclick = function(){
console.log("鼠标双击事件");
}
function func_over(){
console.log("鼠标移入事件");
}
function func_focus(){
info.innerHTML = "请输入用户名,不能为null";
}
function func_blur(){
if(username.value==""){
info.innerHTML = "用户名不合法不能为null";
console.log(123);
}
}
function func_down(){
console.log("按下");
}
function func_keydown(){
console.log("键盘按下");
}
</script>
</body>
</html>
2)、对象
对象:键值对数据的集合
键与值用:连接,键值对之间用,分隔
key : 字符串,引号可以省略的,当key非标准的标识符的命名形态,需要通过""
value : 可以使js中的任意类型
JSON:是一种轻量级的数据交换格式
采用完全独立于编程语言的文本格式来存储和表示数据
易于人阅读与编写,同时也易于机器解析和生成,并有效提升网络传输效率。
JSON是JS对象的字符串表示法,它使用文本表示一个JS
key是是字符串 ""
value : 数值型,字符串"",对象,数组,null,boolean
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
</head>
<body>
<script>
/*1.字面量创建方式*/
var obj = {
name : "xiaoer",
age : 18,
son : [
{name:"xiaoerdexiaoer",age:5},
{name:"xiaoerdexiaoxiaoer",age:2}
],
car : null,
teach : function(){
console.log("TEST");
}
};
console.log(obj);
//获取对象的属性值
console.log(obj.name);
//2.new Object() 创建一个空对象
var obj2 = new Object();
/*为对象添加属性*/
obj2.name='haha';
obj2.age=18;
console.log(obj2);
//3.Object.create(null) 创建一个空对象
var obj3 = Object.create(null);
console.log(obj3);
// JSON解析器 : 通过JSON解析器解析json效率较高
/*json串-->js对象*/
var json = '{"a": "Hello", "b": "World"}';
console.log(JSON.parse(json));
/*jjs对象-->son串*/
var obj4 = {name:"zhangsan",age:18,'gender':true};
console.log(JSON.stringify(obj4));
</script>
</body>
</html>
3)、定时器
定时器:关注br
延迟|间隔:设置的时间ms
执行的代码:函数
分类:
重复执行定时器 setInterval
延迟执行定时器 setTimeout
停止重复执行定时器:
定时器编号 = setInterval()
clearInterval(定时器的编号)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
<style>
#box{
width: 100px;
height: 100px;
border-radius: 100%;
background: palevioletred;
color: white;
font-size: 24px;
text-align: center;
line-height: 100px;f
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
//延迟执行定时器
/*5秒中之后div中显示文本*/
/* setTimeout(function (){
box.innerHTML="TEXT";
},5000);*/
/*重复执行定时器*/
//每隔1s钟div中显示数字,每次叠加
var timer = setInterval(fn,1000);
var i = 0;
function fn(){
i++;
box.innerHTML = i;
if(i==345){
/*计到345清除定时器*/
clearInterval(timer);
}
}
</script>
</body>
</html>
4)、重复执行定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>心动</title>
<style>
#box{
text-align: center;
/*距离上面元素之间的外边距为200px*/
margin-top: 200px;
}
.heart1{
font-size: 32px;
color: plum;
}
.heart2{
font-size: 64px;
color: skyblue;
}
.heart3{
font-size: 128px;
color: salmon;
}
.heart4{
font-size: 256px;
color: palegreen;
}
.heart5{
font-size: 512px;
color: lemonchiffon;
}
</style>
</head>
<body>
<!--
心动案例
-->
<div id="box" class="heart">❤</div>
<script>
//重复执行定时器
window.onload = function (){
var box = document.getElementById("box");
var i = 1;
setInterval(function (){
box.className="heart"+i++;
if(i==5){
i=1;
}
},1);
}
</script>
</body>
</html>
5)、DOM
DOM:文档对象模型
DOM赋予了我们操作文档中内容的能力
可以通过DOM操作页面中的节点,插入,删除,修改……
节点:加载HTML页面时,浏览器生成一个树形结构,用来表示页面内部结构。
在页面中的所有内容以节点为单位
DOM操作节点
节点的分类:
文档为文档节点
元素为元素标签节点
属性为属性节点
文本为文本节点
获取节点:
getElementByID()
根据ID获取DOM对象,如果ID重复,那么以第一个为准
getElementByTagName()
根据标签名获取DOM对象数组
主语:document | 父节点
getElementsByClassName()
根据样式名获取DOM数组对象
主语:document | 父节点
getElementByName()
根据name属性值获取DOM对象数组,常用于多选获取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<div id="box">
<p id="item"> 我是box中的p标签</p>
</div>
<p id="p1" class="para">这是⼀个段落<span>⽂本</span></p>
<p id="p2" class="para">这⼜是⼀个段落</p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="⾜球" />⾜球
<hr /> <!--水平线-->
<br> <!--换行-->
<a href="javascript:void(0)" onclick="testById()">按照id获取</a>
<a href="javascript:void(0)" onclick="testByName()">按照name获取</a>
<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取</a>
<a href="javascript:void(0);" onclick="testByClass();">按照class获取</a>
<script>
/*父节点*/
var box = document.getElementById("box");
//getElementsByTagName
var ps = document.getElementsByTagName("p");
console.log(box.getElementsByTagName("P"));
//getElementsByClassName
console.log(document.getElementsByClassName("para"));
console.log(box.getElementsByClassName("para"));
//getElementsByName
console.log(document.getElementsByName("hobby"));
</script>
</body>
</html>
6)、创建插入节点
创建节点:
<script>
document.createElement("标签名")
</script>
创建指定名的元素节点
<script>
document.createTextNode("文本")
</script>
创建文本节点
插入节点:
<script>
父节点.appendChild(子节点)
</script>
向父节点最终插入子节点
<script>
父节点.insertBefore(新节点,参考节点)
</script>
把参数1节点插入到父节点中的参数2前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<img src="images/the_example.jpeg" alt="">
<!--
创建节点
document.createEelement("标签名") 创建指定名的元素节点
document.createTextNode("文本") 创建文本节点
插入节点
父节点.appendChild(子节点) 向父节点最终插入子节点
父节点.insertBefore(新节点,参考节点) 把参数1节点插入到父节点中的参数2点前面
-->
<script>
//创建节点
var box = document.createElement("div");
box.style.width = "200px";
box.style.height = "200px";
box.style.background = "pink";
console.log(box);
var item = document.createElement("p");
item.style.width = "100px";
item.style.height = "100px";
item.style.background = "cyan";
//为节点元素标签对中添加内容
//1)创建一个文本节点
var text = document.createTextNode("明天的你会感谢今天努力的自己!!!!");
//2)innerHTML
//插入节点
//追加
box.appendChild(item);
item.appendChild(text);
console.log(box);
//插入到htmlbody内容的最后
//document.body.appendChild(box);
//insertBefore
//参考节点
var image = document.getElementsByTagName("img")[0];
document.body.insertBefore(box,image);
</script>
</body>
</html>
7)、创建图片节点
1.创建图片节点
2.插入到页面中
注意:
使用insertBefore()第二个参数为null|undefined时,实现追加效果相当于appendChild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<!--
1.创建图片节点
2.插入到页面中
注意: 使用insertBefore()第二个参数为null|undefined,实现追加效果相当于appendChild
-->
<script>
//1.创建图片节点
var img = document.createElement("img");
console.log(img);
//为img设置src属性,指定图片位置
//1)
//img.src = "images/345.jpeg";
img.setAttribute("src","images/345.jpeg");
//2.插入到页面中
//document.body.appendChild(img);
//document.body.insertBefore(img,null);
document.body.insertBefore(img,undefined);
</script>
</body>
</html>
8)、间接查找节点
childNodes
返回元素的一个子节点的数组
firstChild
返回元素的第一个子节点
lastChild
返回元素的最后一个子节点
nextSibling
返回元素的下一个兄弟节点
parentNode
返回元素的父节点
previousSibling
返回元素的上一个兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>间接查找</title>
</head>
<body>
<div id="box">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
</div>
<!--
间接查找节点
childNodes 返回元素的⼀个⼦节点的数组
firstChild 返回元素的第⼀个⼦节点
lastChild 返回元素的最后⼀个⼦节点
nextSibling 返回元素的下⼀个兄弟节点
parentNode 返回元素的⽗节点
previousSibling 返回元素的上⼀个兄弟节点
-->
<script>
var box = document.getElementById("box");
console.log(box.childNodes);
console.log(box.firstChild); /*第一个节点*/
console.log(box.firstElementChild); /*第一个元素子节点*/
console.log(box.firstElementChild.nextSibling); /*返回元素的下⼀个兄弟节点*/
console.log(box.firstElementChild.nextElementSibling); /*返回元素的下⼀个元素兄弟节点*/
console.log(box.firstElementChild.parentNode); /* 返回元素的⽗节点*/
box.firstElementChild.parentNode.style.background = "green";
</script>
</body>
</html>
9)、DOM操作节点案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作节点案例</title>
</head>
<body>
<ul>
<li><span>隐藏1</span></li>
<li><span>隐藏2</span></li>
<li><span>隐藏3</span></li>
<li><span>隐藏4</span></li>
<li><span>隐藏5</span></li>
</ul>
<!--
需求:通过点击子节点,把父节点隐藏
点击span,隐藏所在的li标签
分析:
1.为 每一个span绑定点击事件
2.获取被点击的span的父节点li
3.隐藏节点 display:none
-->
<script>
//获取所有span
var spans = document.getElementsByTagName("span");
//遍历数组,拿到每一个span,绑定点击事件
for(var i = 0;i<spans.length;i++){
spans[i].onclick = function(){
this.parentNode.style.display="none";
}
}
</script>
</body>
</html>
10)、发布留言案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发布留言</title>
<style>
#ul{
width: 500px;
height: 100px;
border: 1px solid red;
/*内边距 : 内容与边框之间的距离*/
padding: 20px;
/*超出部分隐藏*/
overflow: hidden;
}
</style>
</head>
<body>
<input type="text" name="words" id="words">
<button type="button" id="btn">发布</button>
<!--留言展示区域-->
<ul id="ul">
</ul>
<!--
需求:实现留言发布
-->
<script>
var btn = document.getElementById("btn");
var words = document.getElementById("words");
var ul = document.getElementById("ul");
btn.onclick=function(){
var value = words.value;
if(value!=""){
/*清空输入框*/
words.value = "";
/*创建新的li节点*/
var li = document.createElement("li");
//把value数据插入到新节点li中
li.innerHTML = value;
//把li插入到ul的第一个节点
ul.insertBefore(li,ul.firstElementChild);
}
}
</script>
</body>
</html>
11)、DOM操作节点
替换:
父节点.replaceChild(新节点,原节点)
使用新节点替换原节点
返回被替换的节点
注意:
当新节点是原页面中已经存在的节点,实现移动的效果,被替换的元素节点删除
删除:
父节点.removeNode(子节点)
返回被删除的节点
克隆节点:
原节点.cloneNode(boolean)
true:克隆当前元素,包含所有子元素-->深拷贝
false:只克隆当前元素,不克隆子元素-->浅拷贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作节点</title>
<style>
</style>
</head>
<body>
<ul id="box">
<li>白色</li>
<li>红色</li>
<li id="li3">黑色
<div id="haha">子节点</div>
</li>
<li>黄色</li>
<li>绿色</li>
</ul>
<!--
DOM操作节点:
替换 父节点.replaceChild(新节点,原节点)
使用新节点替换源节点
返回被替换的节点
注意: 当新节点是原页面中的已经存在的节点,实现移动的效果,被替换的元素节点删除
删除 父节点.removeChild(子节点)
返回被删除的节点
克隆节点 源节点.cloneNode(boolean)
true : 克隆当前元素包含所有的子元素->深拷贝
false : 只克隆当前元素不可隆子元素->浅拷贝
-->
<script>
var box = document.getElementById("box");
//替换
//创建新节点,替换久节点
var newLi = document.createElement("li");
newLi.innerHTML = "紫色";
//console.log(box.replaceChild(newLi,box.firstElementChild));
box.replaceChild(box.lastElementChild,box.firstElementChild);
//删除
console.log(box.removeChild(box.lastElementChild));
//克隆
console.log(box.lastElementChild.cloneNode(true));
</script>
</body>
</html>
12)、DOM操作表单
通过DOM操作表单
1.获取表单节点
①根据id,class,name...获取表单节点
②document.表单name属性值
2.获取表单中的表单元素
①根据id,class,name... 获取表单中的表单元素
②表单节点.表单元素name属性值
3.获取表单元素的值
表单元素.value
常用的时间:
oninput
只要输入内容就触发
onchange
在时区焦点的时候校验如果有内容改变就触发
onsubmit
在当前表单被提交时触发,绑定表单而不是提交按钮
表单的提交方式:
1.按钮 onclick + submit()
在按钮的点击事件中做数据的校验,满足条件调用表单submit()方法做提交
2.提交按钮onclick + return Boolean -->不满足要求做拦截表单的提交
3.表单添加onsubmit事件,当表单被提交时触发,配合return
函数名()的调用-->拦截提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作节点</title>
<style>
</style>
</head>
<body>
<form action="" name="form_info" onsubmit="return func_submit3()">
<p>
用户名 : <input type="text" name="username" value="qq_59903099@CSDN"> <button type="button" onclick="func_01()">按钮</button>
</p>
<p>
密码 : <input type="password" name="userpwd">
</p>
<p>
性别 :
<input type="radio" name="gender" value="man"> 男
<input type="radio" name="gender" value="woman"> 女
<button type="button" onclick="func_02()">按钮</button>
</p>
<p>
爱好 :
<input type="checkbox" name="hobby" value="code"> 敲代码
<input type="checkbox" name="hobby" value="read"> 读书
<input type="checkbox" name="hobby" value="basketball"> 篮球
<button type="button" onclick="func_03()">按钮</button>
</p>
<p>
家乡:
<select name="home">
<option value="hegang">鹤岗</option>
<option value="xianggang">香港</option>
<option value="lianyungang">连云港</option>
</select>
<button type="button" onclick="func_04()">按钮</button>
</p>
<p>
<input type="submit" onclick="return func_submit2()">
<input type="button" value="按钮" onclick="func_submit1()">
<input type="reset" value="重置">
<button>submit</button>
</p>
</form>
<script>
//获取表单节点
var form = document.form_info;
//获取表单元素节点
function func_01(){
console.log(form.username.value);
}
form.username.oninput=function(){
console.log("输入名字啦!!!!");
}
/*单选框*/
function func_02(){
console.log(form.gender); /*获取一组单选框中被选中的那个单选框的值*/
}
//多选框
function func_03(){
var hobbys = form.hobby; /*多选框可能同时选中多个,不能通过value直接获取被选中的值*/
for(var i = 0;i<hobbys.length;i++){
//获取被选中的多选框的值
if(hobbys[i].checked){
console.log(hobbys[i].value);
}
}
}
//下拉框
function func_04(){
var home = form.home;
var options = home.options;
for(var i = 0;i<options.length;i++){
//获取被选中的多选框的值
if(options[i].selected){
console.log(options[i].value);
}
}
}
/*表单提方式1 : */
function func_submit1(){
//对表单中的数据做校验
if(form.username.value!=''){
/*满足条件提交表单*/
form.submit();
}
}
/*表单提交方式2*/
function func_submit2(){
//对表单中的数据做校验
if(form.username.value!=''){
/*满足条件提交表单*/
return true;
}
return false;
}
/*表单提交方式2*/
function func_submit3(){
//对表单中的数据做校验
if(form.username.value!=''){
/*满足条件提交表单*/
return true;
}
return false;
}
</script>
</body>
</html>