1.事件
????????事件 (Event) 是 JavaScript 应?跳动的?脏，进?交互，使??动起来。当我们与浏览器中 Web??进?某些类型的交互时，事件就发?了。事件可能是?户在某些内容上的点击、?标经过某个特定元素 或按下键盘上的某些按键。事件还可能是 Web 浏览器中发?的事情，?如说某个 Web ??加载完成， 或者是?户滚动窗?或改变窗???。
作用：（1）验证?户输?的数据。 （2）增加??的动感效果。 （3）增强?户的体验度
（1）事件的分类
? ? ? ?鼠标事件：单击事件onclick 、双击事件ondblclick 、移入、移出、按下、抬起
? ? ? ? 键盘事件：键盘按下、抬起
? ? ? ? 焦点事件（需要在表单事件中使用）：聚焦事件、失焦事件
????????文档事件：window.onload 带内面内容全部加载完成之后才出发函数的执行
? ? ? ? 表单事件：?由 HTML 表单内的动作触发的事件（应?到?乎所有 HTML 元素，但最常?在 form 元素中
（2）常用事件
onload：当??或图像加载完后?即触发
onblur：元素失去焦点
onfocus：元素获得焦点
onclick：?标点击某个对象
onchange：?户改变域的内容
onmouseover：?标移动到某个元素上
onmouseout：?标从某个元素上离开
onkeyup：某个键盘的键被松开
onkeydown：某个键盘的键被按下
//实例代码-几种事件的应用
<!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>
lass="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("12345");
}
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.对象?
????????对象（object）是 JavaScript 的核心概念，也是最重要的数据类型。JavaScript 的所有数据都可以被 视为对象。JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象是带有属性和方法的 特殊数据类型。
????????所谓对象，就是一种无序的数据集合，由若干个“键值对”（key-value）构成。通过 JavaScript我们可以创建自己的对象。 JavaScript对象满足的这种”键值对”的格式我们称为JSON格式，以 后会见得非常多，即伟大的JSON对象。
????????JSON 是一种轻量级的数据交换格式。 采用完全独立于编程语言的文本格式来存储和表示数据。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
????????JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。 '{键值对}' key是是字符串 "" value : 数值型,字符串"",对象,数组,null,boolean
（1）对象的创建
????????JS 创建自定义对象，主要通过三种方式：字面量形式创建对象、通过new Object对象创建 、通过 Object对象的create方法创建对象。?
//实例代码-对象的创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
</head>
<body>
<script>
/*1.字面量创建方式*/
var obj = {
name : "laopei",
age : 18,
son : [
{name:"xiaopei",age:5},
{name:"xiaoxiaopei",age:2}
],
car : null,
teach : function(){
console.log("认真听课!!!");
}
};
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);
</script>
</body>
</html>（2）对象的序列化和反序列化
????????序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调用JSON方法，可以将对象序列化成字符串，也可以将字符串反序列化成对象 。
//实例代码-Json字符串与对象之间的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
</head>
<body>
<script>
// JSON解析器 : 通过JSON解析器解析json效率较高
/*json串-->js对象*/
var json = '{"a": "Hello", "b": "World"}';
console.log(JSON.parse(json));
/*js对象-->Json串*/
var obj = {name:"zhangsan",age:18,'gender':true};
console.log(JSON.stringify(obj));
</script>
</body>
</html>3.时间函数
? ? ? ? （1）setTimeout()
????????setTimeout() : 在指定的毫秒数后调?函数或计算表达式。返回?个唯?的标识；也可以通过返回的标 识clearTimeout(id)： 来清除指定函数的执?。可以用来做延时执行定时器。
//实例代码-时间函数setTimeout()延迟显示
<!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="哈哈";
},5000);
</script>
</body>
</html>? ? ?（2）setInteval()
????????setInterval():可按照指定的周期（以毫秒计）来调?函数或计算表达式，也可根据返回的标识?来结 束。该?法会不停地调?函数，直到 clearInterval() 被调?或窗?被关闭。可以被用来做重复执行定时器。
????????停止重复执行定时器:
???????????????????????????????? 定时器编号 = setInterval()
???????????????????????????????? clearInterval(定时器的编号)
//实例代码-setInterval()作为重复执行定时器
<!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");
/*重复执行定时器*/
//每隔1s钟div中显示数字,每次叠加
//timer作为重复执行定时器 setInterval的编号
var timer = setInterval(fn,1000);
var i = 0;
function fn(){
i++;
box.innerHTML = i;
if(i==10){
/*清除定时器*/
clearInterval(timer);
}
}
</script>
</body>
</html>4.DOM对象
????????DOM：Document Object Model ?档对象模型
????????DOM 赋予了我们操作文档中内容的能力，可以通过DOM操作页面中的节点,插入,删除,修改...
（1）节点
????????加载 HTML ??时，Web 浏览器?成?个树型结构，?来表示??内部结构。DOM 将这种树型结构理 解为由节点组成，组成?个节点树。对于??中的元素，可以解析成以下?种类型的节点：
?????????当HTML?档在被解析为?颗DOM树以后，??的每?个节点都可以看做是?个?个的对象，我们称为 DOM对象，对于这些对象，我们可以进?各式各样的操作，查找到某?个或者?类节点对象，可以创建 某种节点对象，可以在某个位置添加节点对象，甚?可以动态地删除节点对象。
（2）获取节点
????????在进?增、删、改的操作时，都需要指定到?个位置，或者找到?个?标，此时我们就可以通过 Document对象提供的?法，查找、定位某个节点。????????
获取方式如下：
//实例代码-获取节点的几种方法
<!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 /> <!--水平线-->
<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>(3)创建节点和插?节点
创建节点：
?插入节点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<img src="images/pexels-photo-5478104.jpeg" alt="">
<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("明天的你会感谢今天努力的自己!!!!");
//插入节点
//追加
box.appendChild(item);
item.appendChild(text);
console.log(box);
//插入到htmlbody内容的最后
//document.body.appendChild(box);
//insertBefore
//父节点.appendChild(子节点) 向父节点最终插入子节点
//父节点.insertBefore(新节点,参考节点) 把参数1节点插入到父节点中的参数2点前面
var image = document.getElementsByTagName("img")[0];
document.body.insertBefore(box,image);
</script>
</body>
</html>（4）间接查找节点
//实例代码-间接查找节点的几种方法
<!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>
<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>?（5）DOM操作节点（替换、删除、克隆）
????????替换 父节点.replaceChild(新节点,原节点)
???????????????? 使用新节点替换源节点
???????????????? 返回被替换的节点
???????? 注意: 当新节点是原页面中的已经存在的节点,实现移动的效果,被替换的元素节点删除
????????删除 父节点.removeChild(子节点)
???????????????? 返回被删除的节点
????????克隆节点 源节点.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>
<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>5.表单
????????表单是我们??向后台传输数据的?种?常常?的?式，在进?数据发送（请求发出）之前，我们应 该现在??进??系列数据合法性的验证，节省不必要的错误数据的传输，以及提??户的体验度。
（1）获取表单节点
????????1、document.表单名称
????????2、document.getElementById(表单 id); ?
????????3、document.forms[表单名称]
????????4、document.forms[索引]; //从 0 开始
//实例代码-获取表单节点的四种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作节点</title>
<style>
</style>
</head>
<body>
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
</body>
<script>
//四种?式
//1.document.getElementById
var form =document.getElementById("myform");\
//2.document.表单名称
form =document.myform;
//3.document.forms[表单名称]
form =document.forms["myform"];
//4.、document.forms[索引]
form =document.forms[0];
console.log(form);
</script>
</html>?(2)获取表单元素
?1)、通过 id 获取：document.getElementById(元素 id);
?2)、通过 form.名称形式获取: myform.元素名称; name属性值
?3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始? ?4)、通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
//实例代码-获取表单元素的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作表单</title>
</head>
<body>
<form action="" name="form_info" onsubmit="return func_submit3()">
<p>
姓名 : <input type="text" name="username" value="zhangsan"> <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);
}
}
}
</script>
</body>
</html>?（3）表单的提交
????????（1）使?普通button按钮+onclick事件+事件中编写代码:
????????????????????????获取表单.submit();
????????（2）使?submit按钮 + οnclick="return 函数()" +函数编写代码:
????????????????????????最后必须返回：return true|false;
????????（3）使?submit按钮/图?提交按钮 + 表单οnsubmit="return 函数();" +函数编写代码:
????????????????????????最后必须返回：return true|false;
（表单中）常用的事件: oninput 只要输入内容就触发
????????????????????onchange 在时区焦点的时候校验如果内容有改变就触发
????????????????????onsubmit 当当前表单被提交的时候触发 绑定给表单而不是提交按钮的
//实例代码-表单提交的三种方式
<!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="zhangsan"> <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>
<!--
表单的提交方式:
1.按钮 onclick + submit()
在按钮的点击事件中做数据的校验,满足条件调用表单submit()方法做提交
2.提交按钮 onclick + return boolean->不满足要求做拦截表单的提交
3.表单添加onsubmit事件,当表单被提交时候触发,配合return 函数名()的调用->拦截提交
-->
<script>
//获取表单节点
var form = document.form_info;
//获取表单元素节点
function func_01(){
console.log(form.username.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>