JavaScript
文章目录
学习目标
1 事件Event
1 事件
什么是事件?
事件是JavaScript应用跳动的心脏,进行交互,使网页动起来
当我们与浏览器中 Web ⻚⾯进⾏某些类型的交互时,事件就发⽣了
通过使⽤ JavaScript ,你可以监听特定事件的发⽣,并规定让某些事件发⽣以对这些事件做出响应
作用
1、验证用户输入的数据
2、增强页面的动感效果
3、增强用户的体验度
几个名词
事件源:谁触发的事件
事件名:触发了什么事件
事件监听:谁管这个事件,谁监视
事件处理:发生了怎么办
例如:
- 闯红灯:
事件源 : ⻋ ;
事件名: 闯红灯 ;
监听:摄像头、交警 ;
处理 : 扣分罚款。
- 单击按钮:
事件源 : 按钮 ;
事件名: 单击 ;
监听:窗口 ;
处理 : 执行函数。
2 事件类型
JavaScript可以处理的事件类型为:⿏标事件、键盘事件、页面事件
1 鼠标事件
Mouse事件:由⿏标或类似⽤户动作触发的事件
常见的鼠标事件有:
事件属性 | 描述 |
---|---|
onclick | 鼠标单击某个对象事件 |
ondblclick | 鼠标双击某个对象事件 |
onmousedown | 鼠标按钮被按下 |
onmouseout | 鼠标从某元素移开 |
onmousemove | 鼠标被移动 |
onmouseover | 鼠标被移到某元素之上 |
onmouseup | 鼠标按键被松开 |
2 键盘事件
Keyboard事件:由键盘触发的事件
常见的键盘事件有:
事件属性 | 描述 |
---|---|
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键按下并松开 |
onkeyup | 某个键盘按键被松开 |
3 页面事件
HTML事件:页面内部触发的事件
常见的页面事件有:
事件属性 | 描述 |
---|---|
onfocus | 元素获得焦点 |
onblur | 元素失去焦点 |
onload | 一张页面或者一个图片完成加载 |
onabort | 图像的加载被中断 |
事件流和事件模型
我们的事件最后都有⼀个特定的事件源,暂且将事件源看做是HTML的某个元素,那么当⼀个HTML元素产⽣⼀个事件时,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会受到该事件,这个传播过程称为DOM事件流
事件流:是指⻚⾯接受事件的顺序
事件顺序有两种类型:事件捕获 和 事件冒泡
冒泡和捕获其实都是事件流的不同表现
事件冒泡
IE 的事件流叫做事件冒泡,即事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点(⽂档)
如下面的页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
</html>
如果单击了页面的元素,那么这个click事件会按照如下顺序传播:
1 div ----> 2 body ----> 3 html ----> 4 document
所有现代浏览器都⽀持事件冒泡,但在具体实现上还是有⼀些差别
事件捕获
Netscape提出的另⼀种事件流叫做事件捕获,事件捕获的思想是不太具体的节点应该更早接收到事件,⽽最具体的节点应该最后接收到事件
事件捕获的⽤意在于在事件到达预定⽬标之前捕获它
还以前⾯的例⼦为例。那么单击
1 document ----> 2 html ----> 3 body ----> 4 div
虽然事件捕获是Netscape唯⼀⽀持的事件流模式,但很多主流浏览器⽬前也都⽀持这种事件流模型
DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于⽬标阶段和事件冒泡阶段。
⾸先发⽣的是事件捕获阶段,为截获事件提供了机会。
然后是实际的⽬标接收到事件。
最后⼀个阶段是冒泡阶段,可以在这个阶段对事件做出响应
2 BOM
BOM:Browser Object Model
浏览器对象模型
BOM的核⼼对象是window,它表示浏览器的⼀个实例
window对象有双重⻆⾊,它既是通过JavaScript访问浏览器窗⼝的⼀个接⼝,⼜是ECMAScript规定的Global对象
1 Window对象
系统对话框
浏览器通过(实际是window对象的⽅法)alert()、confirm()、prompt()⽅法可以调⽤系统对话框向⽤户显示消息
1、消息框:alert
alert()方法⽤于显示带有⼀条指定消息和⼀个 OK 按钮的警告框
2、输入框:prompt
prompt() ⽅法⽤于显示可提示⽤户进⾏输⼊的对话框
参数(可选):
第⼀个参数:要在对话框中显示的纯⽂本
第⼆个参数:默认的输⼊⽂本3、确认框:confirm,返回 true/false.
confirm() ⽅法⽤于显示⼀个带有指定消息和 OK 及取消按钮的对话框。
打开、关闭窗口
window.open()⽅法既可以导航到⼀个特定的URL也可以⽤来打开⼀个新的窗⼝
window.open();//空白窗口 window.open('http://www.baidu.com','_self');//进入url
window.close():关闭窗⼝
window.close();
时间函数
setTimeout()
setTimeout()
: 在指定的毫秒数后调⽤函数或计算表达式
clearTimeout(id)
: 清除指定函数的执⾏
var id = setTimeout(function,times);
clearTimeout(id);
setInteval()
setInterval()
:可按照指定的周期(以毫秒计)来调⽤函数或计算表达式,也可根据返回的标识⽤来结束
clearInterval()
:关闭函数的执行
var id = setInterval(function,times);
clearInterval(id);
2 history对象
历史对象,包含用户在浏览器访问过的URL
history 对象是 window 对象的⼀部分,可通过 window.history 属性对其进⾏访问
属性
length:返回浏览器历史列表中的 URL 数量。
方法
back():加载 history 列表中的前⼀个 URL,后退
forward():加载历史列表中的下⼀个 URL,前进
go(number|URL): URL 参数使⽤的是要访问的 URL
number= -1 ----> 后退
number= 0 ----> 刷新
number= 1 ----> 前进
3 location对象
location 对象是window对象之⼀,提供了与当前窗⼝中加载的⽂档有关的信息,还提供了⼀些导航功
能,也可通过 window.location 属性来访问
属性
href:设置或返回完整的 URL
方法
reload():重新加载当前⽂档
replace():⽤新的⽂档替换当前⽂档
3 DOM
DOM:Document Object Model
文档对象模型
dom 提供了⽤程序动态控制 html 接⼝
DOM即⽂档对象模型描绘了⼀个层次化的节点树,运⾏开发⼈员添加、移除和修改⻚⾯的某⼀部分。dom 处于javascript 的核⼼地位上
每个载⼊浏览器的 HTML ⽂档都会成为 Document 对象
Document 对象使我们可以从脚本中对 HTML⻚⾯中的所有元素进⾏访问
Document 对象是 Window 对象的⼀部分,可通过 window.document 属性对其进⾏访问
节点
加载 HTML ⻚⾯时,Web 浏览器⽣成⼀个树型结构,⽤来表示⻚⾯内部结构
DOM 将这种树型结构理解为由节点组成,组成⼀个节点树。
对于⻚⾯中的元素,可以解析成以下⼏种类型的节点:
节点类型 | HTML内容 | 例如 |
---|---|---|
文档节点 | 文档本身 | 整个⽂档 document |
元素节点 | 所有的HTML元素 | <p>、<a>、<div>、<span>… |
属性节点 | HTML元素内的属性 | id、class、name、href… |
文本节点 | 元素内的文本 | 文本、hello… |
注释节点 | HTML注释 | <!-- --> |
操作元素的节点
当HTML⽂档在被解析为⼀颗DOM树以后,⾥⾯的每⼀个节点都可以看做是⼀个⼀个的对象,我们称为DOM对象
1 获取节点
在进⾏增、删、改的操作时,都需要指定到⼀个位置,或者找到⼀个⽬标,此时我们就可以通过Document对象提供的⽅法,查找、定位某个对象
操作 dom 必须等节点初始化完毕后,才能执⾏
处理⽅式两种:
1)把 script 调⽤标签移到html末尾即可
2)使⽤onload事件来处理JS,等待html 加载完毕再加载 onload 事件⾥的 JS
window.onload = function () { //预加载 html 后执⾏ };
4种获取方式如下:
方法 | 描述 |
---|---|
getElementByID() | 根据id获取DOM对象 |
getElementByTagName() | 根据标签名获取DOM对象数组 |
getElementByClassName() | 根据class类名获取DOM对象数组 |
getElementByName() | 根据name属性获取DOM对象数组 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素的属性</title>
<script type="text/javascript">
//根据id属性
function testById(){
console.log(document.getElementById("p1").innerText);
console.log(document.getElementById("p1").innerHTML);
//innerText:输出内部文本
//innerHTML:输出内部文本包括标签
}
//根据name属性
function testByName(){
var obj = document.getElementsByName("hobby");
for (var i = 0; i < obj.length; i++) {
console.log(obj[i].value);
}
}
//根据标签名
function testByTagName(){
var obj = document.getElementsByTagName("p");
for (var i = 0; i < obj.length; i++) {
console.log(obj[i].innerHTML);
console.log(obj[i].innerText);
}
}
//根据class属性
function testByClass(){
var obj = document.getElementsByClassName("para");
for (var i = 0; i < obj.length; i++) {
console.log(obj[i].innerHTML);
console.log(obj[i].innerText);
}
}
</script>
</head>
<body>
<body>
<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 />
<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>
</body>
</body>
</html>
注意:
href=“javascript:void(0)”:伪协议,表示不执⾏跳转,⽽执⾏指定的点击事件
2 创建节点
方法 | 描述 |
---|---|
createElement() | 创建⼀个新的节点,需要传⼊节点的标签名称,返回创建的元素对象 |
createTextNode() | 创建⼀个⽂本节点,可以传⼊⽂本内容 |
innerHTML | 创建直接添加到指定位置节点 |
3 插入节点
方法 | 描述 |
---|---|
write() | 将任意的字符串插⼊到⽂档中 |
appendChild() | 向元素中添加新的⼦节点,作为最后⼀个子节点 |
insertBefore() | 向指定的已有的节点之前插⼊新的节点newItem:要插⼊的节点exsitingItem:参考节点, 需要参考⽗节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建、更改节点</title>
<script type="text/javascript">
function addPara(){
var div = document.getElementById("container");
var p = document.createElement("p");
var txt = document.createTextNode("我是一个段落标签——p标签");
div.appendChild(p);
p.appendChild(txt);
}
function addImg(){
var div = document.getElementById("container");
var img = document.createElement("img");
img.src="img/01.jpg";
div.appendChild(img);
}
function addTxt(){
var div = document.getElementById("container");
var input = document.createElement("input");
input.style.value="lisi";
div.appendChild(input);
}
function addOptions(){
var m = document.getElementsByName("music")[0];
var option = document.createElement("option");
option.value="2";
var txt = document.createTextNode("不再见");
option.appendChild(txt);
m.appendChild(option);
}
</script>
</head>
<body>
<body>
<button onclick="addPara();">添加段落</button>
<button onclick="addImg();">添加图片</button>
<button onclick="addTxt();">添加文本框</button>
<button onclick="addOptions();">添加选项</button>
<select name="music">
<option value="-1">你心内的一首歌</option>
<option value="0">南山南</option>
<option value="1">喜欢你</option>
</select>
<hr />
<div id="container"></div>
</body>
</body>
</html>
4 查找节点
方法|属性 | 描述 |
---|---|
childNodes | 返回元素的⼀个⼦节点的数组 |
firstChild | 返回元素的第⼀个⼦节点 |
lastChild | 返回元素的最后⼀个⼦节点 |
nextSibling | 返回元素的下⼀个兄弟节点 |
parentNode | 返回元素的⽗节点 |
previousSibling | 返回元素的上⼀个兄弟节点 |
5 删除节点
方法 | 描述 |
---|---|
removeChild() | 从元素中移除子节点 |
4 表单
表单是我们⻚⾯向后台传输数据的⼀种⾮常常⻅的⽅式,在进⾏数据发送(请求发出)之前,我们应该现在⻚⾯进⾏⼀系列数据合法性的验证,节省不必要的错误数据的传输,以及提⾼⽤户的体验度
1 获取表单
4种常用方式
1、document.表单名称
2、document.getElementById(表单 id);
3、document.forms[表单名称]
4、document.forms[索引]; 从 0 开始
2 获取表单元素
4种方式,前两种常用
1)、通过 id 获取:document.getElementById(元素 id);
2)、通过 form.名称形式获取: myform.元素名称; name属性值
3)、通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
4)、通过 tagName 数组 :document.getElementsByTagName(‘input’)[索引] // 从0开始
获取单选按钮
前提:将⼀组单选按钮设置相同的name属性值
(1)获取单选按钮组:
(2)遍历每个单选按钮,并查看单选按钮元素的checked属性
若属性值为true表示被选中,否则未被选中
选中状态设定: checked=‘checked’ 或 checked=‘true’ 或 checked
未选中状态设定: 没有checked属性 或 checked='false
获取多选按钮
操作⽅式与单选同理,不同之处在于可以多选
获取下拉选项
1、获取select对象
var ufrom = document.getElementById("ufrom");
2、获取选中项的索引
var idx = ufrom.selectedIndex;
3、获取选中项options的value值
var val = ufrom.options[idx].value;
注意:当通过options获取选中项的value属性值时,
若没有value属性,则取option标签的内容
若存在value属性,则取value属性的值
4、获取选中项options的text
var txt = ufrom.options[idx].text;
选中状态设定:selected=‘selected’、selected=true、selected
未选中状态设定:不设selected属性
3 提交表单
(1)使⽤普通button按钮+onclick事件+事件中编写代码:
获取表单.submit();
(2)使⽤submit按钮 + οnclick=“return 函数()” +函数编写代码:
最后必须返回:return true|false;
(3)使⽤submit按钮/图⽚提交按钮 + 表单οnsubmit=“return 函数();” +函数编写代码:
最后必须返回:return true|false;
4 表单验证
用户注册实例
html页面:from_check.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册</title>
<script src="js/from_check.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="#" method="get" id="myForm">
<title>用户注册</title>
用户名:<input type="text" name="uname" id="uname" /><br />
密码:<input type="password" name="pwd" id="pwd" /><br />
确认密码:<input type="password" name="cpwd" id="cpwd" /><br />
性别:<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女" />女<br />
爱好:<input type="checkbox" name="hobby" value="学习" />学习
<input type="checkbox" name="hobby" value="运动" />运动
<input type="checkbox" name="hobby" value="电影" />电影
<input type="checkbox" name="hobby" value="游戏" />游戏<br />
来自:<select name="loc" id="loc">
<option value="0">--请选择--</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gd">广东</option>
<option value="sz">深圳</option>
</select><br />
<input type="submit" id="sub" onclick="return checkForm();" value="提交"/>
<input type="reset" id="rst" onclick="resetForm();" value="重置"/>
<div id="info" style="color: red;"></div>
</form>
</body>
</html>
js文件:from_check.js
// 校验表单
function checkForm() {
var flag = false;
var str = "";
//校验用户名————用户不能为空且长度为2到10个字符
var uname = document.getElementById("uname");
if (uname.value == null || uname.value.length == 0) {
str += "用户名不能为空哦!<br />";
flag = false;
} else if (uname.value.length < 2 || uname.value.length > 10) {
str += "用户名长度要在2到10之间哦!<br />";
flag = false;
} else {
flag = true;
}
//校验密码————密码只能为数字和字母且长度在4到12个字符
var pwd = document.getElementById("pwd");
if (pwd.value == null || pwd.value.length == 0) {
str += "密码不能为空哦!<br />";
flag = false;
} else if (pwd.value.length < 2 || pwd.value.length > 12) {
str += "密码长度要在4到12之间哦!<br />";
flag = false;
} else {
flag = true;
}
//校验确认密码————必须和密码一致
var cpwd = document.getElementById("cpwd");
if (cpwd.value == null || cpwd.value.length == 0) {
str += "确认密码不能为空哦!<br />";
flag = false;
} else if (cpwd.value != pwd.value) {
str += "两次输入的密码不一样哦!<br />";
flag = false;
} else {
flag = true;
}
//打印性别
var sex = document.getElementsByName("sex");
var sextxt = "";
for (var i = 0; i < sex.length; i++) {
//将选中的值放入sextxt中
if (sex[i].checked) {
sextxt = sex[i].value;
}
}
//校验爱好————至少选一个
var hobby = document.getElementsByName("hobby");
var num = 0;
var hbtxt = "";
//循环遍历选中的复选框个数
for (var i = 0; i < hobby.length; i++) {
if (hobby[i].checked) {
num++;
//将选中的复选框的值放入hbs中
hbtxt += hobby[i].value + "、";
}
}
//去除爱好后的 、
hbtxt = hbtxt.substr(0, hbtxt.length - 1);
//判断个数
if (num == 0) {
str += "你的人生真无趣呀!<br />";
flag = false;
} else {
flag = true;
}
//校验来自哪里————必选一个
var loc = document.getElementById("loc");
//获取选中项的索引
var idx = loc.selectedIndex;
//获取选中的options里的valeu值
var val = loc.options[idx].value;
//获取选中项的文本
var loctxt = loc.options[idx].text;
//判断value是否有值
if (val == 0) {
str += "你难道是来自火星的?<br />";
flag = false;
} else {
flag = true;
}
document.getElementById("info").innerHTML = str;
//打印弹出信息
if (flag) {
var str = "";
str += "您的姓名是:" + uname.value + "\n";
str += "您的密码是:" + pwd.value + "\n";
str += "您的性别是:" + sextxt + "\n";
str += "您的爱好是:" + hbtxt + "\n";
str += "您是来自于:" + loctxt + "\n";
alert(str);
// 设置表单提交的地址
myForm.action = "http://www.baidu.com";
// 提交表单
myForm.submit();
return false;
} else {
return false;
}
}
//重置info
function resetForm() {
var info = document.getElementById("info");
info.innerHTML = "";
}