初识Javascript
1.一种客户端脚本语言
客户端：运行在客户端浏览器中；每一个浏览器中都有Js解析引擎
脚本语言：不需要编译，直接可以被浏览器解析执行
2.功能
增强用户和html页面交互过程；
控制html元素
页面动态效果
增强用户体验
3.JavaScript发展史
出现背景：
起初，表单填写信息是否符合规范，这种校验是将表单发送到服务器端，由服务器端进行校验的，由于网络不发达，因此当表单有些信息填写不符合规范，就会一来一回效率很低。
客户端脚本语言，不需要和服务器交互，自己控制html页面中的元素，在客户端进行校验
发展经历：
1.1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单校验。 命名为 C--
2.1995年，Netscape公司，开发了一门客户端脚本语言：LiveScript;后面请来Sun公司专家，修改LiveScript，命名为JavaScript
3.1996年，微软抄袭Js开发出Jscript语言
4.1997年，欧洲计算机制造商协会 ECMA 制定了客户端脚本语言标准：
ECMAScript
JavaScript是一种专门为网页交互而设计的脚本语言，由下列三个不同的部分组成：
1、ECMAScript：由ECMA-262定义，提供核心语言功能
2、DOM：文档对象模型，提供访问和操作网页内容的方法和接口
3、BOM：浏览器对象模型，提供与与浏览器交互的方法和接口
JavaScript = ECMAScript + DOM +BOM
ECMAScript
1.基本语法
1.与html结合方式
1.内部js
js页面内部的<script> </script>中定义 js代码
2.外部js
在.js文件中定义js代码，通过<script>的src属性引入
1.html文档内写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsdemo01</title>
</head>
<body>
<script text="text/javascript">
alert("FBI warnning");
</script>
</body>
</html>
2.引入外部js文件
定义一个.js文件：jsdemo02.js；内容如下：
alert("FBI warnning");
html中引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsdemo01</title>
</head>
<body>
<script text="text/javascript" src="jsdemo02.js">
</script>
</body>
</html>
2.html解析方式和js代码编写位置
<script> </script> 可以放在html页面任意位置，包括标签外部；
但是由于html是从上往下顺序进行解析的，<script> </script>的位置会影响js代码效果；一些对象必须在执行js前就完成初始化，否则获取不到该对象
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1.获取元素
var light = document.getElementById("light");
alert(light);
</script>
</head>
<body>
<img id = "light" src = "./img/off.gif">
</body>
</html>
弹出来为null，因为解析js的时候，还没有获得id为light的标签
修改：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id = "light" src = "./img/off.gif">
<script>
//1.获取元素
var light = document.getElementById("light");
alert(light);
</script>
</body>
</html>
3.注释
// 单行
/* */ 多行
4.数据类型
1.原始数据类型
1.number 数字。 包含:整数、小数、NaN（不是数字的数字类型）
2.string 字符串。 单引号和双引号定义的都是字符串
3.boolean true false
4.null 一个对象为空的占位符
5.undefined 只声明，未初始化的变量
null类型经过typeOf()判断为Object类型，这是js的bug
2.引用数据类型
1.对象(Object)
2.数组(Array)
3.函数(Function)
5.变量
1.一块内存空间
2.大小写敏感
3.Java语言是强类型语言，而JavaScript是弱类型语言。
* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
4.语法：
* var 变量名 = 初始化值;
* typeof运算符：获取变量的类型。
* 注：null运算后得到的是object
初始化: var 变量名 = 值；
6.运算符
1.一元运算符
++，–，+（正号），-（负号）
2.算数运算符
+ - * %
补充说明：
一元运算符和算数运算符要求运算数是number类型，如果这两个运算符的运算数不是number类型，会按照一定规则进行转换为number类型：
1.string 转number ：按照字面值进行转换；如果字面值不是数字，转为NaN
2.boolean转number：true 转 1 false 转 0
3.赋值运算符
= += -= …
4.比较运算符
===:全等于，比较之前判断类型是否一致，不一致直接返回false
类型相同，直接比较；
string类型：按照字典顺序升序，按位逐一比较
类型不同，先转换再比较
5.逻辑运算符
&& || ！
逻辑运算符的运算数为布尔值；
如果数据类型不是布尔类型会进行转换：
1.number类型：0或者Nan为false 其他为 true
2.string："" 为false 其他为true
3.null 和 undefined : 为false
4.对象类型：都为true
6.三元运算符
var c = a > b ? 1 : 0;
7.流程控制语句
1.if...else...
2.switch(变量)：case 值：
在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
在JS中,switch语句可以接受任意的原始数据类型；
语法和java一致
switch (d) {
case 6:x="今天是星期六";
break;
case 0:x="今天是星期日";
break;
default: x="期待周末";
}
3.where循环 和java一样
4.for循环 和java一样
2.基本对象
1.对象(Object)
2.数组(Array)
3.函数(Function)
1.数组Array
//1.动态初始化
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//2.静态初始化
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];
2.对象Object
静态绑定属性和方法
var john ={firstname:"John",
lastname:"Doe",
id:5566,
eat:function(){
alert("john在吃饭")
}
};
john.eat()
动态绑定属性和方法
var person = new Object();
person.firstname="John";
person.eat = function(){
alert("吃");
}
person.eat();
//访问对象的属性
name=person.lastname;
name=person["lastname"];
//访问对象的方法
person.eat()
3.函数function
1.无参无返回值
function functionname()
{
// 执行代码
}
2.有参无返回值
带参数的函数定义的时候，参数不要写类型：
function myFunction(var1,var2)
{
代码
}
3.带返回值的函数：
function myFunction()
{
var x=5;
return x;
}
var functionname = function(){
...
}
- Js不允许重载，函数名相同的话，会覆盖上一次的函数定义。
- 函数的隐形参数：
隐形参数就像java中的可变参数。
在function方法体内，将参数封装成一个数组arguments;
DOM
Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
节点
根据 DOM，HTML 文档中的每个成分都是一个节点。
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
- 注释属于注释节点
节点之间的层级关系
HTML 文档中的所有节点组成了一个文档树（或节点树），树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment:注释对象
* Node：节点对象，其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
核心DOM模型
1.Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
document对象有两类方法：
3. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
4. 创建其他DOM对象：
createAttribute(name) 创建拥有指定名称的属性节点，返回新的Attr对象
createComment() 创建注释节点
createElement(name):创建元素节点
createTextNode() 创建文本节点
5. 属性
1）获取Element演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "div1">div1</div>
<div id = "div2">div2</div>
<div id = "div3" class="d1">div3</div>
<div id = "div4" name="byname">div4</div>
<div id = "div5" class="d1">div5</div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementsByName("bynanme");
var div35 = document.getElementsByClassName("d1");
alert(div1);
alert(div2);
alert(div35);
</script>
</body>
</html>
2.Element：标签对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
代码演示：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Element对象</title>
</head>
<body>
<a>点我去百度</a>
<input type="button" value="点我设置属性" id="baidu">
<script>
var elementById = document.getElementById("baidu");
elementById.onclick = function(){
//获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.baidu.com");
}
</script>
</body>
</html>
3.Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点
* firstChild 返回第一个子节点
* lastChild 返回最后一个子节点
* nodeName 节点名称
* nodeValue 节点值
* nodeType 包含有关于节点的信息
nodeName
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
元素 1
属性 2
文本 3
注释 8
文档 9
由于node是父节点，因此其方法所有的dom对象都可以使用。
Node拥有的方法演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid red;
}
#div1{
width:200px;
height:200px;
}
#div2{
width:100px;
height:100px;
}
#div3{
width:100px;
height:100px;
border:green;
}
</style>
</head>
<body>
<div id="div1">div1
<div id = "div2">div2</div>
</div>
<a href="" id="del">点此超链接看起来并没有删除子节点</a><br>
<!--href="javascript:void(0)" 表示关闭跳转功能，关闭返回值 -->
<a href="javascript:void(0)" id="del1">点此超链接能够删除子节点</a>
<input type="button" id="but" value="点此按钮删除子节点">
<hr>
<a href="javascript:void(0)" id=add">添加子节点</a>
<script>
//todo1 点击链接 删除div2
// 点击链接不会成功
//a标签href="" 表示跳转到当前页面，其实是删除了的，由于页面刷新了，所以看起来没删除
//如果不设置href属性，那么该连接不能被点击，只是个文本罢了！
//实现：跳转到指定的url
var element_a = document.getElementById("del");
element_a.onclick=function(){
var div1 = document.getElementById("div1");
var div2= document.getElementById("div2");
div1.removeChild(div2);
}
//todo2 点这个能够删除
var element_b = document.getElementById("del1");
element_b.onclick=function(){
var div1 = document.getElementById("div1");
var div2= document.getElementById("div2");
div1.removeChild(div2);
}
var but = document.getElementById("but");
but.onclick=function(){
var div1 = document.getElementById("div1");
var div2= document.getElementById("div2");
div1.removeChild(div2);
}
//todo 添加子节点
var add = document.getElementById("add");
add.onclick=function(){
var div1 = document.getElementById("div1");
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
</script>
</body>
</html>
属性演示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//动态注册页面加载完成onload事件
window.onload = function() {
// <div> 元素节点
var divObj = document.getElementById("div01");
alert(divObj.nodeName); // 节点名 DIV
alert(divObj.nodeType); // 节点类型 1
alert(divObj.nodeValue); // 节点值 null
// id=”div01” 是属性节点
var idNode = divObj.getAttributeNode("id");
alert(idNode.nodeName); // 节点名 id
alert(idNode.nodeType); // 节点类型 2
alert(idNode.nodeValue); // 节点值 属性值 div01
// hello world 是文本节点
var textNode = divObj.firstChild;
alert(textNode.nodeName); // 节点名 #text
alert(textNode.nodeType); // 节点类型 3
alert(textNode.nodeValue); // 节点值 文本内容
}
</script>
</head>
<body>
<div id="div01">hello world</div>
</body>
</html>
4.动态表格案例
1.添加
1.给添加按钮绑定单击事件
2.获取文本框内容
3.创建td，设置td内容为文本框内容
4.创建tr,将td添加到tr中
5.获取table，将tr添加到table中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<script>
document.getElementById("btn_add").onclick = function(){
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//todo 创建三个td节点
var td_id = document.createElement("td");
var td_name = document.createElement("td");
var td_gender = document.createElement("td");
//创建一个a标签
var td_a = document.createElement("td");
//todo 往td节点放文本节点
var text_id = document.createTextNode(id);//文本element必须要用这个
var text_name = document.createTextNode(name);
var text_gender = document.createTextNode(gender);
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0)");
var text_del = document.createTextNode("删除");
ele_a.appendChild(text_del);
td_id.appendChild(text_id);
td_name.appendChild(text_name);
td_gender.appendChild(text_gender)
td_a.appendChild(ele_a);
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
</script>
</table>
</body>
</html>
2.删除
1.删除，确定点击的是哪一个超链接
<a href="javascript:void(0);" onclick="delTr(this)">删除</a>
2.怎么删除？
removeChild() 通过父节点删除子节点
tr标签的父标签是table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<!--给这个链接添加 onclick属性，函数参数为this -->
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<script>
document.getElementById("btn_add").onclick = function(){
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//todo 创建三个td节点
var td_id = document.createElement("td");
var td_name = document.createElement("td");
var td_gender = document.createElement("td");
//创建一个a标签
var td_a = document.createElement("td");
//todo 往td节点放文本节点
var text_id = document.createTextNode(id);//文本element必须要用这个
var text_name = document.createTextNode(name);
var text_gender = document.createTextNode(gender);
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this)");
var text_del = document.createTextNode("删除");
ele_a.appendChild(text_del);
td_id.appendChild(text_id);
td_name.appendChild(text_name);
td_gender.appendChild(text_gender)
td_a.appendChild(ele_a);
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
function delTr(obj){
//alert(obj);
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</table>
</body>
</html>
HTML DOM
1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式
1. 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
innerHTML修改 动态表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<!--给这个链接添加 onclick属性，函数参数为this -->
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
</tr>
<script>
document.getElementById("btn_add").onclick = function(){
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
var table = document.getElementsByTagName("table")[0];
table.innerHTML += " <tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this)\">删除</a></td>\n" +
" </tr>"
}
function delTr(obj){
//alert(obj);
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</table>
</body>
</html>
控制样式
方式1：通过元素的style属性来设置
<body>
<div id="div1">div1</div>
<script>
var duv1 = document.getElementById("div1");
div1.onclidk=function(){
//修改样式方式1
div1.style.border="1px solid red";
div1.style.width="200px";
div1.style.fontSize="20px";//font-size => fontSize
}
</script>
</body>
方式2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
border:1px solid red;
width:200px;
fontSize:20px;
}
.d2{
border:1px solid blue;
width:200px;
fontSize:20px;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<script>
//todo 1.第一种方式
var duv1 = document.getElementById("div1");
div1.onclick=function(){
//修改样式方式1
div1.style.border="1px solid red";
div1.style.width="200px";
div1.style.fontSize="20px";//font-size => fontSize
}
//todo 2.第二种方式
var div2 = document.getElementById("div2");
div2.onclick=function(){
div2.className="d1";
}
</script>
</body>
</html>
提前定义好选择器样式，通过元素的id或者className，来绑定对应的选择器
Dom事件
功能： 某些组件被执行了某些操作后，触发某些代码的执行。
造句： xxx被xxx,我就xxx
* 我方水晶被摧毁后，我就责备对友。
* 敌方水晶被摧毁后，我就夸奖自己。
事件注册：
告诉浏览器，当事件响应后要执行哪些操作代码，叫做事件注册或者事件绑定。
静态注册：通过html标签的事件属性直接赋予事件响应后的代码
动态注册：两步走
step1: 通过js代码得到标签的dom对象
Step2: 通过dom对象.事件名=function(){}
1.onload事件
浏览器解析完页面之后自动会触发的事件
静态注册写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var fun = function (){
alert("静态注册");
}
</script>
</head>
<body onload="fun()">
</body>
</html>
动态注册写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function(){
alert("动态注册")
}
</script>
</head>
<body>
</body>
</html>
在页面加载完毕，会自动执行window.onload指定的函数
2.Onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun(){
alert("静态按钮");
}
window.onload = function(){
//1.获取标签id
var element = document.getElementById("button1");
//2.绑定事件
element.onclick= function(){
alert("动态按钮")
};
}
</script>
</head>
<body>
<button onclick="fun()">静态按钮</button>
<button id="button1">动态按钮</button>
</body>
</html>
3.失去焦点：onblur
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
alert("现在未执行动态加载是页面加载前你看不懂表单吧！！");
//onblur静态触发的script函数
function onblurFun(){
alert("用户名失去焦点！");
}
//动态获取加载完页面并赋与触发事件
window.onload = function() {
alert("此时页面加载完 账号标签已经被静态的注册了失去焦点事件");
//第一步，先获取标签对象
var passObj = document.getElementById("password");
// alert(passObj);
//第二步，通过标签对象.事件名 = function(){}
alert("页面已加载完 已获取到密码标签并正在执行绑定onblur事件");
passObj.onblur = function() {
alert("密码框动态注册的onblur事件生效 ");
}
}
</script>
</head>
<body>
账号:<input type="text" onblur="onblurFun()"/><br/>
密码:<input id="password" type="password" /><br/>
邮箱:<input id="email" type="text" /><br/>
</body>
</html>
4.onchange 内容改变
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onchangeFun(){
alert("静态注册的onchage事件 ");
}
alert("现在页面未加载但是男神下拉框 已经被静态绑定了onchange 改变事件");
// 页面加载完成之后
window.onload = function() {
// 1.通过id属性值获取第二个select标签对象
var selectObj = document.getElementById("select01");
// 2.通过标签对象.事件名 = function(){}
alert("现在页面加载完成 对女神下拉框动态注册onchange事件中");
selectObj.onchange = function() {
alert("这是动态创建的onchange事件 ");
}
}
</script>
</head>
<body>
请选择你心中的男神：
<select onchange="onchangeFun();">
<option selected="selected">刘德华</option>
<option>张学友</option>
<option>张国荣</option>
</select>
<br/>
请选择你心中的女神：
<select id="select01">
<option>李四</option>
<option selected="selected">张三</option>
<option>王五</option>
</select>
</body>
</html>
5.onSubmit 表单提交
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onsubmitFun() {
alert("验证所有的表单操作……");
// 情况1 如果有一个表单不合法，我们就可以直接return false;阻止表单提交到服务器
alert("有表单不合法，阻止提交");
return false;
// 情况2 如果所有的表单都合法
alert("所有的表单都合法，通过验证，让表单提交到服务器");
return true;
}
</script>
</head>
<body>
<!--
onsubmit事件 ，是表单提交事件。经常用来在表单提交的时候验证所有表单项是否合法。
我们在静态注册的时候，必须手动态写上reutrn false可以阻止表单的提交
return false可以阻止html标签元素的默认行为
-->
<form action="http://www.baidu.com" method="get"
onsubmit="return onsubmitFun();">
用户名:<input type="text" /><br /><br />
<input type="submit" value="我是一个sumbit按钮"/>
</form>
</body>
</html>
表格全选案例
需求：
1.全选按钮
2.全不选按钮
3.反选按钮
4.跟随第一个checkbox按钮
5.鼠标移动上去 呈粉色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.over{
background-color: pink;
}
.out{
background-color: white;
}
</style>
<script>
window.onload=function(){
//todo 1.全选按钮
document.getElementById("selectAll").onclick=function(){
var cbs = document.getElementsByName("cb");
for (let i = 0; i < cbs.length; i++) {
cbs[i].checked = true;
}
}
//todo 2.全不选
document.getElementById("unSelectAll").onclick=function(){
var cbs = document.getElementsByName("cb");
for (let i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
}
//todo 3.取反
document.getElementById("selectRev").onclick=function(){
var cbs = document.getElementsByName("cb");
for (let i = 0; i < cbs.length; i++) {
cbs[i].checked = !cbs[i].checked;
}
}
//todo 4.和第一个保持同步
document.getElementById("firstcb").onclick=function(){
var cbs = document.getElementsByName("cb");
for (let i = 0; i < cbs.length; i++) {
// this就是当前element
cbs[i].checked = this.checked;//和第一个checkbox的状态保持一致
}
}
//todo 5.给所有tr绑定 鼠标移动到 和鼠标移除元素事件
var trs = document.getElementsByTagName();
for (let i = 0; i < trs.length; i++) {
trs[i].onmouseover = function(){
this.className= "over";
}
trs[i].onmouseout = function(){
trs[i].className= "out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstcb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" >删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>
表单验证案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("../img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
</style>
<script>
/*
分析：
1.给表单绑定onsubmit事件，监听器中判断每一个方法校验的结果
如果都为true，监听器返回true
有一个为false，返回false
2.定义一些方法分别验证各个表单项
3.给各个表单项绑定onblur事件
*/
window.onload = function(){
document.getElementById("form").onsubmit = function(){
//判断调用
return checkPassword && checkUsername();
}
}
//todo 1.校验用户名
function checkUsername(){
var username = document.getElementById("username").value;
var reg_username = /^\w{6,12}$/;
var flag = reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML="<img src='../img/gou.png' width='35' height='25'>"
}else{
s_username.innerHTML="用户名格式有问题";
}
return flag;
}
function checkPassword(){
var password = document.getElementById("password").value;
var reg_password = /^\w{6,12}$/;
var flag = reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML="<img src='../img/gou.png' width='35' height='25'>"
}else{
s_password.innerHTML="密码格式有问题";
}
return flag;
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" id="form" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
BOM
1. 概念：Browser Object Model 浏览器对象模型
* 将浏览器的各个组成部分封装成对象。
2. 组成：
* Window：窗口对象
* Navigator：浏览器对象
* Screen：显示器屏幕对象
* History：历史记录对象
* Location：地址栏对象
一个浏览器对象包含多个窗口对象
窗口对象为核心，窗口对象包含历史记录、地址栏、以及窗口中的html文档
1.Window：窗口对象
window对象的方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
window窗口对象
1.创建
2.方法
3.属性
4.特点：
不用创建，直接使用
甚至可以省略window 直接用其方法
*/
//todo 1，alert()
// window.alert("hello");
// alert("window对象不用创建，可以直接调用方法")
//todo 2.confirm()
// var flag = confirm("确定要退出码");
// if(flag == true){
// alert("确定退出了");
// }else{
// alert("不退出");
// }
//todo 3.prompt()
var username = prompt("请输入你的名字");
alert(username);
</script>
</head>
<body>
</body>
</html>
alert()按钮：
confirm按钮：
promopt:
2. 与打开关闭有关的方法：
-
open() 打开一个新的浏览器窗口；
返回新的Window对象 -
close() 关闭浏览器窗口。
哪个window对象调用 ，关闭哪个window
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id = "open" value="open百度">
<input type="button" id="close" value="关闭百度">
<script>
var elementById = document.getElementById("open");
var baidu;
elementById.onclick = function(){
baidu = open("https://www.baidu.com");
}
var close = document.getElementById("close");
close.onclick = function(){
baidu.close();
}
</script>
</body>
</html>
3. 与定时器有关的方式
setTimeout() 一次性定时器
功能：在指定的毫秒数后调用函数或计算表达式
参数：
1. js代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
参数：setTimeout()的返回值
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//一次性定时器
// 第一个参数是方法对象 而不是方法调用
var boom = setTimeout(fun,3000);
function fun(){
alert("boom");
}
clearTimeout(boom);
</script>
</head>
<body>
</body>
</html>
setInterval() 循环定时器
功能：按照指定的周期（以毫秒计）来调用函数或计算表达式
参数：
1. js代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器
clearInterval() 取消由 setInterval() 设置的 timeout
轮播图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
</head>
<body>
<img id = "img" src="img/banner_1.jpg" width="100%">
<script>
/*
每隔几秒钟切换一次图片
*/
//todo 1.修改图片src属性
var num = 1;
function fun(){
var img = document.getElementById("img");
img.src = "img/banner_"+num+".jpg";
if(num == 3){
num = 1;
}else{
num = ++num;
}
}
setInterval(fun,3000);
</script>
</body>
</html>
window对象的属性
1.获取其他BOM对象：
history
location
Navigator
Screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var h1 = window.history;
var h2 = history;
alert(h1 == h2);//true
</script>
</body>
</html>
2.获取DOM对象
document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 id = "h">h</h1>
<script>
var d1 = window.document.getElementById("h");
var d2 = document.getElementById("h");
alert(d1 == d2);//true
</script>
</body>
</html>
window对象的特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
2.Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新web页面
3. 属性
* href 设置或返回完整的 URL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="btn" value ="刷新">
<input type="button" id="baidu" value ="去百度">
<script>
//todo 1.reload() 刷新
var btn = document.getElementById("btn");
btn.onclick=function(){
location.reload();
}
//todo 2. href 属性 查看url
var href = location.href;
alert(href);
//todo 3.href属性 进行跳转
var baidu = document.getElementById("baidu");
baidu.onclick=function(){
location.href="https://www.baidu.com";
}
</script>
</body>
</html>
页面自动跳转案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#item{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p>
<span id = "item">5</span>秒后，开始跳转...
</p>
<script>
var sec = 5;
var time = document.getElementById("item");
function showTime(){
sec--;
if(sec <= 0) {
clearInterval(interval);
location.href="https://www.baidu.com";
}
time.innerHTML = sec + "";
}
var interval = setInterval(showTime,1000);
</script>
</body>
</html>
3.History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id="length" value ="查看历史记录数">
<input type="button" id="go" value ="前进或者后退">
<input type="button" id="back" value ="后退">
<input type="button" id="forward" value ="前进">
<script>
//todo 1.history 的length属性
var length = document.getElementById("length");
length.onclick=function() {
var length = history.length;
alert(length);
}
//todo 2.history的back()
var back = document.getElementById("back");
back.onclick=function() {
history.back();
}
//todo 2.history的forward()
var forward = document.getElementById("forward");
forward.onclick=function() {
history.forward();
}
// todo 4.go(int x) 前进或者后退x步
var go = document.getElementById("go");
go.onclick = function(){
history.go(1);
}
</script>
</body>
</html>
扫一扫
9853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
