二、DOM简单学习
* 功能：控制html文档的内容
* 获取页面标签(元素)对象：Element
* document.getElementById("id值"):通过元素的id获取元素对象
* 操作Element对象：
1. 修改属性值：
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置
2. 修改标签体内容：
* 属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容
举列子：
<body>
<img id="light" src="img/off.gif" >
<h1 id="title">我是被修改之前的title</h1>
<script>
//使用getElementById()获取Element对象（通过ID获取标签对象,把标签封装成对象）
var light = document.getElementById("light");
alert("我要换图片了。。。。");
light.src = "img/on.gif";
var title = document.getElementById("title");
//1-获取h1的标签对象，并使用innerHTML修改标签体内容
alert("我要修改title了。。。")
//2-修改内容
title.innerHTML = "我是修改之后的title" ;
</script>
</body>
</html>
三、事件简单学习
* 功能： 某些组件被执行了某些操作后，触发某些【代码的执行】。
* 造句： xxx被xxx,我就xxx
* 我方水晶被摧毁后，我就责备对友。
* 敌方水晶被摧毁后，我就夸奖自己。
* 如何绑定事件
1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1. 事件：onclick--- 单击事件
2. 通过js获取元素对象，使用对象指定事件属性，设置一个函数
- 直接在html标签上，指定事件的属性(操作方式)，属性值就是js代码
<img src="img/off.gif" onclick = "alert('我被点击了')">；
<script>
function fun() {
alert("我被点击了");
}
</script>
<img src="img/off.gif" onclick = "fun();">
- 通过js获取元素对象，使用对象指定事件属性，设置一个函数
<img id="imgOnclick" src="img/off.gif">
<script>
function fun() {
alert("我被点击了a");
}
var imgOnclick = document.getElementById("imgOnclick");
imgOnclick.onclick = fun;
五、开关案例
<body>
<img id="light" src="img/off.gif">
<script>
//1、获取标签对象
var light = document.getElementById("light");
//【标记】图片是开还是关，false即off
var flag =false;
//2、绑定事件
light.onclick = function () { //匿名方法
//判断灯是哪个状态再去开or关,
if (flag){
light.src="img/on.gif";//true开
flag = false; //还原开关状态，下一次点击做准备
}else {
light.src="img/off.gif";
flag = true ;
}
}
</script>
</body>
六、BOM简介
七、window对象之弹窗【上】
Window：窗口对象
1. 创建
2. 方法
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
3. 属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
八、window对象之定时器【下】
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。【一次】
* 参数：
1. js代码或者方法对象（注意：是指函数对象名，或者匿名函数对象）
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。【循环】
clearInterval() 取消由 setInterval() 设置的 timeout
定时器有2套：时间倒计时执行一次和循环执行，都有对应的取消计时的方法。
Demo：
//一次性定时器
//setTimeout("alert('boom~~')",2000);
//setTimeout（fun,2000);
setTimeout("fun();",2000);
var id = setTimeout(fun,2000);
clearTimeout(id);
function fun(){
alert('boom~~');
}
//循环定时器
var id = setInterval(fun,2000);
clearInterval(id);
九、轮播图案例
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
-----------------------------------------------------------------------------
<img id="img" src="banner_1.jpg" width="100%">
<script>
//获取img对象
var imgElement = document.getElementById("img");
var number = 1;
function fun() {
number++;
//判断是否大于3
if (number > 3){
number=1;
}
imgElement.src = "banner_"+number+".jpg";
}
//循环执行fun（）
setInterval(fun,2000);
</script>
</body>
关键点是：修改图片的路径
十、window对象的属性（了解就好）
3. 属性：
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
4. 特点
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略。 方法名();
十一、Location对象
4. Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。
十二、自动跳转首页
<p>
<span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
分析：
1.显示页面效果 <p>
2.倒计时读秒效果实现
2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
2.2 定义一个定时器，1秒执行一次该方法
3.在方法中判断时间如果<= 0 ，则跳转到首页
*/
// 2.倒计时读秒效果实现
var second = 5;
var time = document.getElementById("time");
//定义一个方法，获取span标签，修改span标签体内容，时间--
function showTime(){
second -- ;
//判断时间如果<= 0 ，则跳转到首页
if(second <= 0){
//跳转到首页
location.href = "https://www.baidu.com";
}
time.innerHTML = second +""; 【innerHTML是字符串，当然也可以不加“”】
}
//设置定时器，1秒执行一次该方法
setInterval(showTime,1000);
十三、history对象（了解）
History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
<body>
<input type="button" id="btn01" value="查看当前窗口的历史记录">
<input type="button" id="btn02" value="前进">
<a href="./五、轮播图.html">跳转网站</a>
<input type="button" id="btn03" value="后退">
<input type="button" value="go后退" id="btn04"> <!--btn04应该在跳转的网站设置-->
<script>
//length返回当前窗口历史列表中的 URL 数量
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
var length = history.length;
alert(length);
}
//forward前进前一个记录
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
history.forward();
}
//后退到上一个记录
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
history.back();
}
//go（参数）， * 正数：前进几个历史记录 * 负数：后退几个历史记录
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
history.go(-1);
}
</script>
</body>
十四、DOM概述
DOM树可以看成父节点与子节点，每个节点都是一个对象。
文档节点：<html
文本节点：title之间的字等等相似和文本框的字。
* 概念： Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
* W3C DOM 标准被分为 3 个不同的部分：
* 核心 DOM - 针对任何结构化文档的标准模型【对应着DOM树】
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment:注释对象
* Node：节点对象，其他5个的父对象
* XML DOM - 针对 XML 文档的标准模型
* HTML DOM - 针对 HTML 文档的标准模型
* 核心DOM模型：
* Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
3. 属性
* Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
* Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点。
* 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属性值。
十五、Document对象—获取Element方法
* 核心DOM模型：
* Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
//2.根据元素名称获取元素对象们。返回值是一个数组
var divs = document.getElementsByTagName("div");
alert(divs.length);
//3.根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
alert(div_cls.length);
//4.根据name属性值获取元素对象们。返回值是一个数组
var ele_username = document.getElementsByName("username");
alert(ele_username.length);
var table = document.createElement("table");
alert(table);
十六、DOM_创建对象
创建一个table标签，在内存里创建个标签，但是跟代码中的标签没有半毛钱关系
var table = document.createElement("table");
alert(table);
17、DOM_Element对象
* Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
<body>
<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
//获取btn对象
var btn_set =document.getElementById("btn_set");
btn_set.onclick = function(){
//1.获取a标签对象
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.baidu.com");//设置属性
}
//获取btn对象
var btn_remove =document.getElementById("btn_remove");
btn_remove.onclick = function(){
//1.获取a标签对象
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");//删除属性
}
</script>
</body>
18、DOM_Node对象
注意：
- Node对象是其他5个对象的父对象，而所有的DOM对象都可以视为字节点
- 每个节点都是一个对象，也就是说，文档节点、文本节点、元素节点、属性节点、注释节点都是对象。
- 超链接设置点击事件进行本页面操作，不管你设不设置href，你一点击它都重新当前window打开新的页面。因此，可能会造成点击事件没有效果。
<a href="javascript:void(0);" id="del">删除子节点</a>
给div增加子节点div1和div2，再删除子节点子节点div2
* Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。【通过父节点删除指定的子节点】
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点。
代码了解一下就好了
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<a href="javascript:void(0);" id="del">删除子节点</a>
<a href="javascript:void(0);" id="add">添加子节点</a>
<!--<input type="button" id="del" value="删除子节点">-->
<script>
//1.获取超链接
var element_a = document.getElementById("del");
//2.绑定单击事件
element_a.onclick = function(){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
//1.获取超链接
var element_add = document.getElementById("add");
//2.绑定单击事件
element_add.onclick = function(){
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.appendChild(div3);
}
/*
超链接功能：
1.可以被点击：样式
2.点击后跳转到href指定的url
需求：保留1功能，去掉2功能
实现：href="javascript:void(0);"
*/
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
alert(div1);
十九、动态表格案列之添加【上】
此处省略了table代码
<script>
分析：
1.添加：
1. 给添加按钮绑定单击事件
2. 获取文本框的内容
3. 创建td，设置td的文本为文本框的内容。
4. 创建tr
5. 将td添加到tr中
6. 获取table，将tr添加到table中
*/
//获取按钮标签对象
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 id_text = document.createTextNode(id);
var name_text = document.createTextNode(name);
var gender_text = document.createTextNode(gender);
//创建td,并把文本节点作为td的子节点(即,给td赋值标签体)
var id_td = document.createElement("td");
id_td.appendChild(id_text);
var name_td = document.createElement("td");
name_td.appendChild(name_text);
var gender_td = document.createElement("td");
gender_td.appendChild(gender_text);
//创建超链接,设置属性,创建文本节点(标签体),并把标签体赋值给超链接,超链接作为创建的td的子节点
var a = document.createElement("a");
a.setAttribute("href","javascript:void(0);");
a.setAttribute("onclick","delTr(this)");
var a_text = a.appendChild(document.createTextNode("删除"));
a.appendChild(a_text);
var a_td = document.createElement("td");
a_td.appendChild(a);
//创建tr,把td作为tr的子节点
var tr = document.createElement("tr");
tr.appendChild(id_td);
tr.appendChild(name_td);
tr.appendChild(gender_td);
tr.appendChild(a_td);
//获取table对象,把tr作为table的子节点
document.getElementById("table").appendChild(tr);
}
</script>
二十、动态表格案列之删除【下】
上下代码是连一起的，为了简介就分开了
<script>
2.删除：
1.确定点击的是哪一个超链接
<a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
2.怎么删除？
removeChild():通过父节点删除子节点
*/
//删除tr方法
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode; //table是a的爸爸的爸爸的爸爸
var tr = obj.parentNode.parentNode; //tr是a的爸爸的爸爸
table.removeChild(tr); //【通过父节点删除指定的子节点】
}
</script>
【不要忘记给添加的超连接设置属性（单击事件）：ele_a.setAttribute("onclick","delTr(this);");】
注意注意：
我们的目的是想点击超链接就把当前tr给删除掉。
那么，我们要搞清楚：
- 1.确定点击的是哪一个超链接
JS的this比较特殊，在此处代表**【超链接对象】**
- 2.怎么删除？
removeChild():通过父节点删除子节点
removeChild():通过父节点删除子节点
即，父节点.removeChild(子节点)，那么怎么获取对应的父节点和对应的子节点？【可参考上图】
首先，要搞清楚【子父元素节点的嵌套关系】。
二十一、HTML DOM
代码是对于：【十九、二十】的“添加”简化
HTML DOM
1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
【注意是元素“对象”，要获取标签对象】才可以操作属性（元素有什么属性就操作操作属性）
img.src=.....
HTML DOM小演示
<body>
<div id="div1">
div
</div>
<script >
//获取id为div1的html元素对象
var d = document.getElementById("div1");
var innerHTML = d.innerHTML;
alert(innerHTML);//div
【注意：输出的对象为div，但是这个对象的div和<div>的div是不同的，前者是对象，后者只是元素】
//div标签中替换一个文本输入框
div.innerHTML = "<input type='text'>"; //<div>标签体</div>
//div标签中追加一个文本输入框
div.innerHTML += "<input type='text'>"; //div+输入框
</script>
</body>
//使用innerHTML添加
document.getElementById("btn_add").onclick = function() {
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取table元素对象
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>";
}
二十二、HTML DOM–样式控制
* HTML DOM
1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式
1. 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = "1px solid red"; 【div1是对象】
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
-
- 使用元素的style属性来设置
<div id="div1">
div1
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function(){
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
}
【点击字体变大，div有边框】
-
- 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
<script>
var div2 = document.getElementById("div2");
div2.onclick = function(){
div2.className = "d1";
}
</script>
二十三、DOM 事件概述
ocument.getElementById("username").onmousedown = function(event){
alert(event.button);
}
【ocument.getElementById("username").onmousedown】是事件，
“= function(event){ }” ： 代表这个事件绑定了监听器。
【function(event){ }】：是JS引擎会自动调用的方法。而这种调用方法的方式不是你自己自定义调用的，是JS调用的。
“当JS引擎调用方法是会传入一个【事件对象】作为参数，你不接受；也可以接受并调用该对象的属性等。”
* 概念：某些组件被执行了某些操作后，触发某些代码的执行。
* 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
* 事件源：组件。如： 按钮 文本输入框...（html元素）
* 监听器：代码。（需要执行的代码）
* 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
* 常见的事件：
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件：
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。
二十四、常见事件的演示
2. 焦点事件
1. onblur：失去焦点。
* 一般用于表单验证
3. 加载事件：（加载完成后执行）
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
* 定义方法时，定义一个形参，接受event对象。
* event对象的button属性可以获取鼠标按钮键被点击了。
2. onmouseover 鼠标移到某元素之上。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
6. 选择和改变
1. onchange 域的内容被改变。
7. 表单事件：
1. onsubmit 确认按钮被点击。
* 可以阻止表单的提交
* 方法返回false则表单被阻止提交
- onblur：失去焦点
document.getElementById("username").onblur = function(){
alert("失去焦点了...");
}
- 加载事件：（加载完成后执行）
1. onload：一张页面或一幅图像完成加载
window.onload = function(){
//JS代码
}
这里的意思是：【当window页面加载完成之后，就开始执行。。。】
作用：把JS代码放进此函数中，就不用考虑JS代码和元素标签的执行顺序了。
- 鼠标事件：
1. onmousedown 鼠标按钮被按下。
* 定义方法时，定义一个形参，接受event对象。
* event对象的button属性可以获取鼠标按钮键被点击了。
//3.绑定鼠标点击事件
document.getElementById("username").onmousedown = function(event){
alert("鼠标点击了....");
}
//获取鼠标哪个键点击的返回值：左键0--滚轮--1--右键2
document.getElementById("username").onmousedown = function(event){
alert(event.button);
}
----------------------------------------------------------------------------------------
ocument.getElementById("username").onmousedown = function(event){
alert(event.button);
}
【ocument.getElementById("username").onmousedown】是事件，
“= function(event){ }” ： 代表这个事件绑定了监听器。
【function(event){ }】：是JS引擎会自动调用的方法。而这种调用方法的方式不是你自己自定义调用的，是JS调用的。
“当JS引擎调用方法是会传入一个【事件对象】作为参数，你不接收；也可以接受并调用该对象的属性等。”
通过这个对象可以调用它的属性button，用来返回鼠标点击的返回值
2. onmouseover 鼠标移到某元素之上。
【可以做一些动态效果】
//3.绑定鼠标移动到元素之上事件
document.getElementById("username").onmouseover = function(){
alert("鼠标来了....");
}
- 键盘事件：
1. onkeydown 某个键盘按键被按下。
跟鼠标意义。
7. 表单事件：
1. onsubmit 确认按钮被点击。
* 可以阻止表单的提交
* 方法返回false则表单被阻止提交。【返回true或不返回都是允许】
阻止表单提交的2种方式：
function checkForm(){
return true;
}
<form action="#" id="form" onclick="return checkForm();">
这样子相当于：<form action="#" id="form" onclick="return false">
document.getElementById("form").onsubmit = function(){
//校验用户名格式是否正确
var flag = false;
return flag;
}
<form action="#" id="form"">
这样子相当于：document.getElementById("form").onsubmit = return false;
错误的：
function checkForm(){
return true;
}
<form action="#" id="form" onclick="checkForm();"> <<<----------
这样子相当于：<form action="#" id="form" onclick="false">
二十五、表格全选
<!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%;
}
-------------------------------------------忽略上面表格样式-----------------------
.out{
background-color: white;
}
.over{
background-color: pink;
}
</style>
<script>
/*
分析：
1.全选：
* 获取所有的checkbox
* 遍历cb，设置每一个cb的状态为选中 checked
*/
//1.在页面加载完后绑定事件
window.onload = function(){
//2.给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function(){
//全选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为选中 checked
cbs[i].checked = true;
}
}
document.getElementById("unSelectAll").onclick = function(){
//全不选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为未选中 checked
cbs[i].checked = false;
}
}
document.getElementById("selectRev").onclick = function(){
//反选
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为相反
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstCb").onclick = function(){
//第一个cb点击
//1.获取所有的checkbox
var cbs = document.getElementsByName("cb");
//获取第一个cb
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态和第一个cb的状态一样
cbs[i].checked = this.checked;
}
}
//给所有tr绑定鼠标移到元素之上和移出元素事件
var trs = document.getElementsByTagName("tr");
//2.遍历
for (var i = 0; i < trs.length; i++) {
//移到元素之上
trs[i].onmouseover = function(){
this.className = "over";
}
//移出元素
trs[i].onmouseout = function(){
this.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>
注意：
this代表发生事件的事件源。比如，超链接被被点击了，超链接发生点击事件，即，this就是超连接。
二十六、表单校验
<!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 ;
}
.error{
color:red;
}
#td_sub{
padding-left: 150px;
}
</style>
<script>
-------------------------------------------------------------------------------------------------
/*
分析：
1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true
如果有一个为false，则监听器方法返回false
2.定义一些方法分别校验各个表单项。
3.给各个表单项绑定onblur事件。
*/
window.onload = function(){
//1.给表单绑定onsubmit事件
document.getElementById("form").onsubmit = function(){
//调用用户校验方法 chekUsername();
//调用密码校验方法 chekPassword();
return checkUsername() && checkPassword();
}
//给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
//校验用户名
function checkUsername(){
//1.获取用户名的值
var username = document.getElementById("username").value;
//2.定义正则表达式
var reg_username = /^\w{6,12}$/;
//3.判断值是否符合正则的规则
var flag = reg_username.test(username);
//4.提示信息
var s_username = document.getElementById("s_username");
if(flag){
//提示绿色对勾
s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
}else{
//提示红色用户名有误
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
//校验密码
function checkPassword(){
//1.获取用户名的值
var password = document.getElementById("password").value;
//2.定义正则表达式
var reg_password = /^\w{6,12}$/;
//3.判断值是否符合正则的规则
var flag = reg_password.test(password);
//4.提示信息
var s_password = document.getElementById("s_password");
if(flag){
//提示绿色对勾
s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
}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="get">
<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" checked> 男
<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" id="td_sub"><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>
注意：
给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
【注意：checkUsername是方法的对象名，不是方法】
