笔记34-JavaScript高级笔记
@[TPC]
DOM简单学习: 为了满足案例要求
-
功能: 控制html文档的内容
-
获取页面标签(元素)对象 Elemenmt
- document.getElementById(“id值”); : 通过元素的id获取元素对象
-
操作Element对象
- 修改属性值:
- 明确获取对象是哪一个?
- 查看API文档,找其中哪些属性可以设置
- 修改标签体内容
- 属性: innerHTML
- 获取元素对象
- 使用innerHTML属性修改标签体内容
- 修改属性值:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象title>
head>
<body>
<img id="light" src="img/off.gif">
<h1 id="title">悔创阿里杰克马h1>
<script>
//通过id获取元素对象
var light = document.getElementById("light");
alert("我要换图片了");
light.src="img/on.gif";
//获取h1标签镀锡
var title = document.getElementById("title");
alert("我要换内容了");
//修改内容
title.innerHTML="不知妻美刘强东";
script>
body>
html>
事件简单学习
- 功能: 某些组件被执行了某些操作后，触发某些代码的执行。
- 造句： xxx被xxx,我就xxx
- 我方水晶被摧毁后，我就责备对友。
- 敌方水晶被摧毁后，我就夸奖自己。
- 造句： xxx被xxx,我就xxx
- 如何绑定事件
-
直接在html标签上，指定事件的属性(操作)，属性值就是js代码
- 事件：onclick— 单击事件
-
通过js获取元素对象，指定事件属性，设置一个函数
-
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定title>
head>
<body>
<img id="light" src="img/off.gif" onclick="fun();">
<img id="light1" src="img/off.gif">
<script>
function fun() {
alert("我被点了");
alert("又被点了")
}
function fun1() {
alert("咋老点我")
}
//获取light1对象
var light1 = document.getElementById("light1");
//绑定事件
light1.onclick = fun1;
script>
body>
html>
案例1 电灯开关
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
* 规则：
* 如果灯是开的 on,切换图片为 off
* 如果灯是关的 off,切换图片为 on
* 使用标记flag来完成
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电灯开关title>
head>
<body>
<img id="light" src="img/off.gif" >
<script>
//获取图片
var light = document.getElementById("light");
//灯的状态 关闭
var flag = false;
//绑定单机对象
light.onclick= function () {
if (flag){
light.src="img/off.gif";
flag =false;
} else{
//如果是关的,则打开
light.src="img/on.gif";
flag= true;
}
}
script>
body>
html>
BOM
-
概念：Browser Object Model 浏览器对象模型
- 将浏览器的各个组成部分封装成对象。
-
组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
Window: 窗口对象
- 创建
- 方法
- 与弹出框有关的方法:
- alert() 显示带有一段消息和一个确认按钮的警告框
- confirm() 显示带有一段消息以及确定按钮和取消按钮的对话框.
- 如果用户点击确定按钮,则方法返回true
- 如果用户点击取消按钮,则方法返回false
- prompt() 显示可提示用户输入的对话框
- 返回值: 获取用户输入的值
- 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象 - 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。- 参数：
1. js代码或者方法对象
2. 毫秒值 - 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
- 参数：
- 与弹出框有关的方法:
- 属性:
- 获取其他BOM对象
history
location
Navigator
Screen - 获取DOM对象
document
- 获取其他BOM对象
- 特点
- Window对象不需要创建可以直接使用 window使用。 window.方法名();
- window引用可以省略。 方法名();
- Window对象不需要创建可以直接使用 window使用。 window.方法名();
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象title>
head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭窗口">
<script>
//弹出方法
alert("hello window");
window.alert("hello a");
//确认框
var flag = confirm("您确定要退出吗?");
if (flag){
//退出操作
alert("欢迎再次光临!");
} else{
//提示
alert("手别抖");
}
//输入框
var result = prompt("请输入用户名");
alert(result);
//打开新窗口
var openBtn = document.getElementById("openBtn" );
var newWindow;
openBtn.onclick= function () {
//打开新窗口
newWindow = open("https://www.baidu.com");
}
//关闭新窗口
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function () {
//关闭新窗口
newWindow .close();
}
//定时器
//一次性的
var id = setTimeout(fun ,2000);
function fun() {
alert("boom");
}
//清除一次性定时器
clearTimeout(id)
//循环定时器
var id1=setInterval(fun ,2000);
//清除循环定时器
clearInterval(id1);
//获取history
var h1 = window.history;
var h2 = history;
alert(h1);
alert(h2);
var openBtn = window.document.getElementById("openBtn");
alert(openBtn);
/*document.getElementById("");与window.document.getElementById()相同*/
script>
body>
html>
案例:轮播图
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图title>
head>
<body>
<img id="img" src="img/banner_1.jpg">
<script>
//修改图片属性
var number =1;
function fun() {
number++;
//判断number是否大于3
if (number>3){
number =1;
}
//获取img对象
var img = document.getElementById("img");
img.src= "img/banner_"+number+".jpg";
}
//定义定时器//循环定时器
setInterval(fun,3000);
script>
body>
html>
Location: 地址栏对象
- 创建(获取)
- window.location
- location
- 方法:
- reload() 重新加载当前文档,刷新
- 属性
- href 设置或返回完整的URL.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Location对象title>
head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="gobaidu" value="去百度">
<script>
//获取按钮
//reload方法, 定义一个按钮,点击按钮刷新当前页面
var btn = document.getElementById("btn");
//绑定单击事件
btn.onclick = function () {
//刷新页面
location.reload();
}
//获取href
var href = location.href;
// 点击按钮,去访问www.baidu.com官网
var gobaidu = document.getElementById("gobaidu");
//绑定单击事件
gobaidu.onclick = function () {
//去访问
location.href = "https://www.baidu.com";
}
script>
body>
html>
案例 : 自动跳转首页
分析:
1. 显示页面效果
2.倒计时读秒效果实现
2.1 定义一个方法，获取span标签，修改span标签体内容，时间–
2.2 定义一个定时器，1秒执行一次该方法
3.在方法中判断时间如果<= 0 ，则跳转到首页
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动跳转到首页title>
<style>
span{
color: red;
}
p{
text-align: center;
}
style>
head>
<body>
<p>
<span id="time">5span>秒之后,跳转首页....
p>
<script>
var second = 5;
var time = document.getElementById("time");
//显示倒计时效果
function fun() {
second--;
if (second<=0){
//跳转
location.href = "https://www.baidu.com";
}
time.innerHTML = second +"";
}
//设置定时器
setInterval(fun ,1000);
script>
body>
html>
History:历史记录对象
-
创建(获取)：
1. window.history
2. history -
方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
- 参数：
- 正数：前进几个历史记录
- 负数：后退几个历史记录
- 参数：
-
属性：
- length 返回当前窗口历史列表中的 URL 数量。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history对象title>
head>
<body>
<input type="button" id="btn" value="获取历史记录个数">
<a href="9_history2.html">9页面a>
<input type="button" id="forward" value="前进">
<input type="button" id="back" value="后退">
<script>
var btn= document.getElementById("btn");
btn.onclick = function () {
//获取当前窗口的历史记录
var length = history.length;
alert(length);
}
var forward = document.getElementById("forward");
forward.onclick=function () {
//前进
history.forward();
// history.go(1);
}
var back = document.getElementById("back");
back.onclick = function () {
history.back();
}
script>
body>
html>
DOM
- 概念： Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
- W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment:注释对象
- Node：节点对象，其他5个的父对象
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
- 核心 DOM - 针对任何结构化文档的标准模型
核心DOM模型:
- Document：文档对象
- 创建(获取)：在html dom模型中可以使用window对象来获取
- window.document
- document
- 方法：
- 获取Element对象：
- getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
- getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
- getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
- 创建其他DOM对象：
createAttribute(name) 创建拥有指定名称的属性节点并返回新的Attr对象
createComment() 创建注释节点
createElement() 创建元素节点
createTextNode() 文本节点
- 获取Element对象：
- 属 性
- 创建(获取)：在html dom模型中可以使用window对象来获取
- Element : 元素对象
- 获取/创建：通过document来获取和创建
- 方法：
- removeAttribute()：删除属性
- setAttribute()：设置属性
- 方法：
- 获取/创建：通过document来获取和创建
- Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点。
<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>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
tr>
<tr>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除a>td>
tr>
<tr>
<td>3td>
<td>岳不群td>
<td>?td>
<td><a href="javascript:void(0);" onclick="delTr(this);" >删除a>td>
tr>
table>
<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;
//创建td . 赋值给td的标签
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的id
var td_name = document.createElement("td")
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender 的 td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的id
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//4.创建tr
var tr = document.createElement("tr");
//5.添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//删除方法
function delTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
script>
body>
html>
HTML DOM
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”; - 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
- 使用元素的style属性来设置
事件监听机制
- 概念：某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如： 按钮 文本输入框…
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
常见的事件
1. 点击事件：
- onclick：单击事件
- ondblclick：双击事件
2. 焦点事件
- onblur：失去焦点
- onfocus:元素获得焦点。
3. 加载事件：
- onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
- onmousedown 鼠标按钮被按下。
- 定义方法时,定义一个形参,接受event对象
- event对象的button属性可以获取鼠标按钮被点击了
- onmouseup 鼠标按键被松开。
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
5. 键盘事件：
- onkeydown 某个键盘按键被按下。
- onkeyup 某个键盘按键被松开。
- onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
- onchange 域的内容被改变。
- onselect 文本被选中。
7. 表单事件：
- onsubmit 确认按钮被点击。
- onreset 重置按钮被点击。
案例 : 表格全选
<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: lightpink;
}
style>
<script>
//在页面加载完后绑定事件
window.onload = function () {
//全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function () {
//全选
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i<cbs.length;i++){
//设置每一个cb的状态为选中
cbs[i].checked = true;
}
}
//全不选
document.getElementById("unSelectAll").onclick = function () {
//全不选
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i<cbs.length;i++){
//设置每一个cb的状态为未选中
cbs[i].checked = false;
}
}
//反选
document.getElementById("selectRev").onclick = function () {
//反选
var cbs = document.getElementsByName("cb");
//遍历
for (var i = 0; i<cbs.length;i++){
//设置每一个cb的状态为选中
cbs[i].checked = !cbs[i].checked;
}
}
document.getElementById("firstCb").onclick= function () {
//第一个cb点击
var cbs = document.getElementsByName("cb" );
for (var i = 0 ; i<cbs.length;i++){
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>1td>
<td>令狐冲td>
<td>男td>
<td><a href="javascript:void(0);">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cb" >td>
<td>2td>
<td>任我行td>
<td>男td>
<td><a href="javascript:void(0);">删除a>td>
tr>
<tr>
<td><input type="checkbox" name="cb" >td>
<td>3td>
<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>
案例 : 表单提交
<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>
//加载完毕在运行
window.onload = function () {
//给表单绑定onsubmit
document.getElementById("form").onsubmit = function () {
//调用用户名检验方法 checkUsername();
//调用密码校验方法 chekPassword();
return checkUsername() && checkPassword();
}
//给用户名和密码框分别绑定离焦事件
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
//校验用户名
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 = "
";
} else{
s_username.innerHTML = "用户名格式错误";
}
}
//校验密码
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 = "";
}else{
//提示红色用户名有误
s_password.innerHTML = "密码格式有误";
}
return flag;
}
script>
head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册p>
<p>USER REGISTERp>
div>
<div class="rg_center">
<div class="rg_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">Emaillabel>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>