事件: 分类: 鼠标事件 键盘事件 焦点事件 文档事件 表单事件
<!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>
<!--
事件:
当执行某件事情|某个动作触发一段js代码的执行,触发一个函数的执行,函数js已经定义好了
分类:
鼠标事件
单击事件 onclick
双击事件 ondblclick
移入
移出
键盘事件
键盘按下
抬起
焦点事件
聚焦事件
失焦事件
文档事件
window.onload 带内面内容全部加载完成之后才出发函数的执行
表单事件
焦点事件
change 表单元素内容改变触发的时间
-->
<div class="box1">div1</div>
<div class="box2" οnmοuseοver="func_over();">div2</div>
<div class="box3" >div3</div>
<div class="box4">div4</div>
<div class="box5">div5</div>
<input type="text" id="username" name="username" οnfοcus="func_focus()" οnblur="func_blur()"><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);
}
}
</script>
</body>
</html>
JavaScript对象 键值对数据的集合 键值对: key : value json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
</head>
<body>
<!--
js中的对象 {}
键值对数据的集合
键值对: key : value
两个键值对之间使用,分隔
key : 字符串,引号可以省略的,当key非标准的标识符的命名形态,需要通过""
value : 可以使js中的任意类型
json
是一种轻量级的数据交换格式。 采用完全独立于编程语言的文本格式来存储和表示数据。
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。
'{键值对}'
key是是字符串 ""
value : 数值型,字符串"",对象,数组,null,boolean
-->
<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);
// 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>
定时器 重复执行定时器 延迟执行定时器
<!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; } </style> </head> <body> <!-- 定时器 关注:br 延迟|间隔: 时间设置 ms 执行的代码: 函数 重复执行定时器 setInterval 延迟执行定时器 setTimeout 停止重复执行定时器: 定时器编号 = setInterval() clearInterval(定时器的编号) --> <div id="box"></div> <script> var box = document.getElementById("box"); //延迟执行定时器 /*5秒中之后div中显示文本哈哈*/ /* setTimeout(function (){ box.innerHTML="哈哈"; },5000);*/ /*重复执行定时器*/ //每隔1s钟div中显示数字,每次叠加 var timer = setInterval(fn,1000); var i = 0; function fn(){ i++; box.innerHTML = i; if(i==10){ /*清除定时器*/ clearInterval(timer); } } </script> </body> </html>
例子 心跳
<!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: 85px; color: salmon; } .heart4{ font-size: 128px; color: palegreen; } .heart5{ font-size: 156px; 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; } },100); } </script> </body> </html>
DOM ⽂档对象模型 节点: 获取节点:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <!-- DOM:Document Object Model ⽂档对象模型 DOM 赋予了我们操作文档中内容的能力 可以通过DOM操作页面中的节点,插入,删除,修改... 节点: 加载 HTML ⻚⾯时,Web 浏览器⽣成⼀个树型结构,⽤来表示⻚⾯内部结构。 在页面中的所有内容以节点为单位 DOM 操作节点 节点的分类: 文档为文档节点 元素为元素标签节点 属性为属性节点 文本为文本节点 获取节点: getElementById() 根据id获取dom对象,如果id重复,那么以第⼀个为准 getElementsByTagName() 根据标签名获取dom对象数组 主语: document | 父节点 getElementsByClassName() 根据样式名获取dom对象数组 主语: document | 父节点 getElementsByName() 根据name属性值获取dom对象数组,常⽤于多选获取值 --> <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)" οnclick="testById()">按照id获取</a> <a href="javascript:void(0)" οnclick="testByName()">按照name获取</a> <a href="javascript:void(0)" οnclick="testByTagName()">按照标签名获取</a> <a href="javascript:void(0);" οnclick="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>
创建节点 插入节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> </head> <body> <img src="images/pexels-photo-5478104.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>
创建图片 插入图片
间接查找
<!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>
<li>li4</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</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 = "red";
</script>
</body>
</html>
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>
发布留言
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>发布留言</title> <style> #ul{ width: 500px; height: 100px; border: 1px solid palegreen; /*内边距 : 内容与边框之间的距离*/ padding: 20px; } </style> </head> <body> <input type="text", name="input" id="input"> <button type="button" id="btn">发布</button> <ul id="lu"> </ul> <!-- 需求:实现留言发布 --> <script> var btn = document.getElementById("btn"); var input = document.getElementById("input"); var ul = document.getElementById("ul"); btn.onclick = function (){ var value = input.value; if(value!=""){ /*清空输入框*/ input.value = ""; var li = document.createElement("li"); //把value数据插入到新节点li中 li.innerHTML=value; //把li插入ul的第一个节点 ul.insertBefore(li,ul.firstElementChild); } } </script> </body> </html>
DOM操作节点 替换 删除 克隆
<!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>
DOM操作节点 from表单 通过jsDOM操作表单 常用的时间 表单的提交方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作节点</title> <style> </style> </head> <body> <form action="" name="form_info" οnsubmit="return func_submit3()"> <p> 姓名 : <input type="text" name="username" value="zhangsan"> <button type="button" οnclick="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" οnclick="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" οnclick="func_03()">按钮</button> </p> <p> 家乡: <select name="home"> <option value="hegang">鹤岗</option> <option value="xianggang">香港</option> <option value="lianyungang">连云港</option> </select> <button type="button" οnclick="func_04()">按钮</button> </p> <p> <input type="submit" οnclick="return func_submit2()"> <input type="button" value="按钮" οnclick="func_submit1()"> <input type="reset" value="重置"> <button>submit</button> </p> </form> <!-- 通过jsDOM操作表单 1.获取表单节点 1)根据id,class,name... 2)document.表单name属性值 2.获取表单中的表单元素 1)根据id,class,name... 2)表单节点.表单元素name属性值 3.获取表单元素的值 表单元素.value 常用的时间: oninput 只要输入内容就触发 onchange 在时区焦点的时候校验如果内容有改变就触发 onsubmit 当当前表单被提交的时候触发 绑定给表单而不是提交按钮的 表单的提交方式: 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); } form.username.οninput=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>