第一章 BOM编程
1.1 BOM编程的概述
1.1.1 BOM编程的概念
BOM:Browser Object Model 浏览器对象模型
1.1.2 BOM 编程的作用
1.1 .3 BOM常用对象
| BOM常用对象 | 作用 |
|---|---|
| window | 浏览器窗体对象 |
| location | 浏览器地址栏对象 |
| history | 历史记录对象 |
1.2 window对象
BOM的核心 对象，它表示一个浏览器的实例。
注意： 只要是window的方法和属性，window对象名都可以省略。
1.2.1 与对话框有关的方法
| window中与对话框有有关的方法 | 作用 |
|---|---|
| alert（“提示信息”） | 弹出一个确认按钮的信息框 |
| string prompt（“提示信息”，“默认值”） | 弹出一个输入信息框，返回字符串类型 |
| Boolean confirm（“提示信息”） | 弹出一个信息框，有度额定和取消按钮，如果点确定，返回true，点取消返回false |
<script>
/*
对话框
1）警告框 window.alter('消息内容');
2)确认框 window.confim('消息内容');确定（true） 取笑（false）
3）输入框 window.prompt('消息内容','默认值');确定（输入的内容） 取消（null）
window是窗口的默认对象，可以省略不写，直接调用里面的属性和方法
*/
//window.alert('你好小娜！');
//console.log(window.confirm('好不好？'));
//window.confirm('好不好？'); console.log(内容)：将内容输出到浏览器的控制台
console.log(window.prompt('3x5=', '请输入内容'));
</script>
1.2.2 与计时有关的方法
| window中与计时有关的方法 | 作用 |
|---|---|
| setTimeout（函数名，间隔毫秒数） | 在指定的时间后调用1次函数，只执行1次，单位是毫秒。 返回值：返回一个整数类型的计时器 函数调用有两种写法： 1) setTimeout(“函数名(参数)”, 1000); 2) setTimeout(函数名,1000, 参数); 注意方式二：没有引号，没有括号 |
| setInterval（函数名，间隔毫秒数） | 每过指定的时间调用1次函数，不停的调用函数，单位是毫秒。 返回值：返回一个整数类型的计时器。 |
| clearInterval（计时器） | 清除setInterval（）方法创建的计时器 |
| clearTimeout（计时器） | 清除setTimeout（）方法创建的计时器 |
<script>
/*
定时器：
1）复用性定时器
格式：
var number = window.steInterval('函数名()',间隔时间);根据指定的间隔时间出发函数，
无限循环，返回定时器编号
var number = window.setInterval(函数名，间隔时间);根据指定的间隔时间触发函数，
无限循环，返回定时器编号
window.clearInterval(number);关闭定时器
2）一次性定时器
格式：
var number=window.steTimeout('函数名()',间隔时间);根据指定的间隔时间触发函数，
仅执行一次，返回定时器编号。
var number=window.steTimeout(函数名,间隔时间);根据指定的间隔时间触发函数，
仅执行一次，返回定时器编号。
window.clearTimeout(number);关闭定时器
*/
function fun1() {
alert('轮播图');
}
//复用性定时器
//let interval= setInterval('fun1()',1000);
let interval= setInterval(fun1,1000);
//关闭定时器interval
document.getElementById('myBtn1').onclick=function () {
clearInterval(interval)
}
function fun2() {
alert('广浩')
}
//let interval = setTimeout(fun2(),3000);
//关闭
document.getElementById('myBtn2').onclick = function () {
clearTimeout(interval)
}
</script>
1.2.3修改元素内容的方法和属性
| 名称 | 属性 |
|---|---|
| 方法：doucument.getElementById（“id”） | 通过id得到一个元素，如果有同名的元素，则得到第一个 |
| 属性：innerHTML | 获得：元素内部的HTML 设置：修改元素内部的HTML |
| 属性：innerText | 获得：元素内部的文本 设置：修改元素内部的纯文本，其中的html标签不起作用 |
1.2.4 案例：会动的时钟
案例分析：
- 在页面创建一个h1标签，用于显示时钟，设置颜色和大小
- 点击开始按钮调用一个方法start（），在方法内部每过一秒钟调用另一个方法begin（）
- begin（）方法内部得到现在的时间，并将得到的时间显示在h1标签内部
- 暂停的按钮调用另一个方法：push（），在方法内部清除上面setInterval（）的计时器
- 为了防止多次点开始按钮出现bug，在开始调用计时器之前清除上一个计时器。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_会动的时钟</title>
<style type="text/css">
#clock{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1 id="clock">我是时间</h1>
<input type="button" value="开始" onclick="start()">
<input type="button" value="暂停" onclick="pause()">
</body>
<script>
//1)获取h1标签对象
let clock = document.getElementById('clock');
//2)定义函数修改对象的标签体内容为当前的系统时间
function changeClock() {
clock.innerText = new Date().toLocaleString();
}
//声明全局变量
var number;
//3)点击开始触发定时器间隔1秒触发函数
function start() {
clearInterval(number);
number = setInterval('changeClock()',1000);
}
//4）点击暂停，关闭定时器
function pause() {
clearInterval(number)
}
</script>
</html>
1.3 location对象
1.3.1 location是什么？
- 代表浏览器的地址栏对象
1.3.2 location常用的属性
| href属性 | 作用 |
|---|---|
| 获取href属性 | 获得当前地址栏访问的地址 |
| 设置href属性 | 用于页面的跳转，跳转到一个新的页面 |
1.3.3 location常用的方法
| location的方法 | 描述 |
|---|---|
| reload（） | 重新加载当前的页面的， 想防御浏览器上刷新按钮 |
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05_location对象</title>
</head>
<body>
</body>
<script>
/*
location 对象
1）地址栏信息 location.href
2）刷新页面 location.reload();
*/
//当前的地址栏url路径
console.log(location.href);
//页面跳转
location.href='http://www.douyu.com';
</script>
</html>
1.4 history对象
1.4.1 作用
访问浏览器之前已经访问过的页面
1.4.2 方法
| 方法 | 作用 |
|---|---|
| forward（） | 类似于浏览器上前进按钮 |
| back（） | 类似于浏览器上后退按钮 |
| go() | go(1)前进 go(0) 刷新 go(-1) 后退 |
第二章 DOM编程
2.1 DOM编程概述
2.1.1 DOM编程的基本概念
Document Object Model 文档对象模型，用于操作网页中元素。
2.2 查找节点
2.2.1 查找节点的方法
| 获取元素的方法 | 作用 |
|---|---|
| document.getElementById(“id”) | 通过id属性到唯一的元素 如果页面上有多个同名的id，则得到第1个元素 |
| document.getElementsByName(“name”) | 通过name属性得到一组标签，返回一个数组 |
2.2.2 查找节点的代码
<body>
<input type="button" value="(通过标签名)给a链接添加地址" id="b1"/>
<input type="button" value="（通过name）给div设值" id="b2">
<input type="button" value="（通过class类名）给div设值" id="b3">
<hr/>
<a href="">我爱总复习</a><br>
<a href="">我爱总复习</a><br>
<a href="">我爱总复习</a><br>
<hr>
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr>
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
</body>
<script>
//给a标签增加href属性
document.getElementById('b1').onclick = function () {
//获取所有A标签
let aArray= document.getElementsByTagName('a');
//遍历
for(let i=0;i < aArray.length;i++){
aArray[i].href='http://www.baidu.com';
}
}
//给name = "one" 增加文本内容
document.getElementById('b2').onclick = function () {
//获取所有one name
let aArray1=document.getElementsByName('one');
//遍历
for(let i=0;i <aArray1.length;i++){
aArray1[i].innerText='习复总爱我'
}
}
//给class = "two" 增加文本内容
document.getElementById('b3').onclick = function () {
let aArray2=document.getElementsByClassName('two');
//遍历
for (let i=0;i<aArray2.length;i++){
aArray2[i].innerHTML='XXXXX资源网，你值得拥有。'
}
}
</script>
2.2.3案例：实现全选/全不选，商品结算的功能
案例效果：
分析：
- 知识点：复选框如果要选中，设置checked = true ，取消设置checked = false
- 全选：通过name属性得到上面所有的复选框对象，遍历集合，将每一个元素的checked设置为true
- 全不选：将所有元素的checked属性设置为false
- 反选：原来选中的设置false，原来没选中的设置为true。
案例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_全选反选</title>
</head>
<body>
<h3>商品价格列表</h3>
<input type="checkbox" name="item" value="1500"/> 山地自行车1500<br/>
<input type="checkbox" name="item" value="200"/> 时尚女装200<br/>
<input type="checkbox" name="item" value="3000"/> 笔记本电脑3000元<br/>
<input type="checkbox" name="item" value="800"/> 情侣手表800<br/>
<input type="checkbox" name="item" value="2000"/> 桑塔纳2000<br/>
<hr/>
<input type="checkbox" id="all" onclick="selectAll(this)">全选/全不选
<input type="button" id="reverse" onclick="reverseSelect()" value="反选"/>
</body>
<script>
//绑定全选全不选事件
function selectAll(obj) {
let status = obj.checked;
let intemArray = document.getElementsByName('item');
//遍历数组， 同步状态
for (let i in intemArray){
intemArray[i].checked = status;
}
}
//反选
function reverseSelect() {
//获取一组name= ‘item’复选框
let itemArray = document.getElementsByName('item');
//遍历数组，与之前的状态相反
for (let i in itemArray){
itemArray[i].checked = !itemArray[i].checked;
}
}
</script>
</html>
2.2.4 案例：省市级联的操作
需求： 有两个下拉列表，左边选择相应的省份，右边出现对应的城市列表
案例效果：
分析：
- 创建二维数组，保存每个省份对应的城市，第1维的第0个元素是一个空数组
- 给左边省的下拉列表添加改变事件，在事件方法中获取到当前省份所选择到的索引值。
- 索引从0开始，索引值对应的就是该省份对应的城市数组索引，城市所有的名字是一个一维数组。
- 先创建一个字符串，内容是："< option> --请选择市–< option>"
- 遍历一维城市数组，每个城市用字符串拼接成一个option字符串
- 得到城市的下拉列表的，将上面接近的option字符串，使用innerHTML加到下拉列表中
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03_省市联动-拔高</title>
</head>
<body>
<div>
<select name="" id="province">
<option value="noChange">--请选择省份--</option>
</select>
<select id="city">
<option value="noChange"> --请选择城市--</option>
</select>
</div>
</body>
<script>
// 创建数组对象
var pList = new Array();
// 定义二维数组
pList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区'];
pList['上海市'] = ['宝山区', '黄浦区', '青浦区', '南汇区'];
pList['广东省'] = ['广州市', '佛山市', '中山市', '东莞市'];
pList['河北省'] = ['邯郸市', '石家庄市'];
pList['河南省'] = ['郑州市', '洛阳市'];
pList['湖北省'] = ['武汉市', '宜昌市'];
pList['湖南省'] = ['湖南省', '长沙市'];
pList['陕西省'] = ['陕西省', '西安市'];
pList['山西省'] = ['山西省', '太原市'];
pList['黑龙江省'] = ['黑龙江省', '哈尔滨市'];
pList['台湾省'] = ['台北市'];
pList['其他'] = ['其他'];
//获取数组的一维索引
for(let i in pList){
let province= document.getElementById('province');
province.innerHTML += '<option value="'+i+'">'+i+'</option>'
}
//触发省份列表 onchenge事件
document.getElementById('province').onchange = function () {
//获取省份索引
let pValue = this.value;
let cityList = pList[pValue];
//查询城市列表 的 select 标签
let city = document.getElementById('city');
//清除上一次城市列表
city.length = 1;
//给城市下拉列表赋值
for(let i in cityList){
city.appendChild(new Option(cityList[i],cityList[i]));
}
}
</script>
</html>
2.3 js操作css样式
2.3.1 在JS中操作css属性命名上的区别
以前css直接写死在html中， 现在可以通过js脚本去动态修改一个标签的样式。
2.3.2 方式一
元素.style.样式名 = “样式值”;
2.3.3 方式二
元素.className = “类名”;
2.3.4 JS修改CSS的示例代码
案例效果：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_动态修改字段样式</title>
<style>
.myClass{
color: skyblue;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<p id="first">
这是第一自然段
</p>
<p id="second">
这是第二自然段
</p>
<input type="button" value="改变几个样式" onclick="changeCss()" >
<input type="button" value="改变类样式" onclick="changeClass()" >
</body>
<script>
//直接改变css的样式
function changeCss() {
//获取p标签对象
let first = document.getElementById('first');
//字体大小
first.style.fontSize = '20px';
//颜色
first.style.color= 'red';
}
//结合类选择器修改样式
function changeClass() {
//获取p标签对象
let second =document.getElementById('second');
second.className= 'myClass';
}
</script>
</html>
2.3.5 案例：使用JS修改表格行的背景色
需求：
使用JS修改表格的背景色，产生隔行变色的效果，鼠标移上去的时候这一行变成其他颜色，移出去，变为原来的颜色。
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05_隔行换色</title>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<caption><h1>商品分类</h1></caption>
<tr style="background-color: #ccc;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
<script>
//获取所有的tr
let trArray = document.getElementsByTagName('tr');
//遍历数组
for(let i=1;i<trArray.length;i++){
if (i %2 == 0){
trArray[i].style.backgroundColor='lightyellow';
}else{
trArray[i].style.backgroundColor='skyblue';
}
var color;
//鼠标移入，高亮
trArray[i].onmouseover = function () {
//存储之前的背景色
color = this.style.backgroundColor
this.style.backgroundColor = 'lightpink';
}
//移出 恢复
trArray[i].onmouseout = function () {
this.style.backgroundColor= color;
}
}
</script>
</html>
3.1 正则对象
3.1.1 创建的方式
方式一
正则表达式是一个JS中的一个类：RegExp = Regular Expression
var reg = new RegExp("正则表达式");
方式二
以/ 开头，以/ 结尾，中间的部分是正则表达式.
var reg = /正则表达式/；
两种方式的区别：
- 在js中，正则表达式的两种声明方式对于：“\d,\D”的匹配模式中，前者需要转义，而后者无需转义
- 前者支持字符串拼接，支持变量，更加灵活，；后者对于固定的表达式，书写起来方便快捷。
3.1.2 常用的方法
| JS中正则表达式的方法 | 说明 |
|---|---|
| Boolean test（“字符串”） | 如果正则表达式匹配字符串，返回true，否则返回false |
/*
*
* 邮箱账号：xiao-mimi_123 @ qq . com
* aa@163.com
* cn
* com
* com.cn
* 正则规则：/^ ( [a-z0-9_\.-]+ ) @ ([\da-z\.-]+) \. ([a-z\.]{2,6})$/
*
* /^正则表达式$/ 最标准的
*
* （） 代表一组
* [] 代表任意
* a-z 小写字母
* 0-9 数值
* _
* \ 转义字符
* . 代表一个字符
* -
* + 一个或多个
* \d digit 数值 0-9
* {2,6} 量词 至少2个，最多6个
*
* */
3.2 案例：校验表单
案例需求：
用户注册，需要进行如下验证，请在JS中使用正则表达式进行验证。
- 用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
- 密码： 大小写字母和数字6-20个字符
- 确认密码：两次密码要相同
- 电子邮箱: 符合邮箱地址的格式 /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/
- 手机号：/^1[34578]\d{9}$/
- 生日：生日的年份在1900～2009之间，生日格式为1980-5-12或1988-05-04的形式，/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/
案例效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
//验证表单中所有的项
function checkAll () {
//所有的方法都返回true，这个方法才返回true
return checkUser() && checkMail();
}
//验证用户名
function checkUser () {
//1. 创建正则表达式
var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
//2. 得到文本框中输入的值
var value = document.getElementById("user").value;
//3. 如果不匹配，在后面的span中显示错误信息，返回false
if (reg.test(value)==false) {
document.getElementById("userInfo").innerHTML = "用户名不正确";
return false;
}
//4. 如果匹配，在后面的span中显示一个打勾图片，返回true
else {
document.getElementById("userInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
return true;
}
}
//验证邮箱
function checkMail () {
//1. 创建正则表达式
var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
//2. 得到文本框中输入的值
var value = document.getElementById("email").value;
//3. 如果不匹配，在后面的span中显示错误信息，返回false
if (reg.test(value)==false) {
document.getElementById("emailInfo").innerHTML = "邮箱格式不正确";
return false;
}
//4. 如果匹配，在后面的span中显示一个打勾图片，返回true
else {
document.getElementById("emailInfo").innerHTML = "<img src='img/gou.png' width='15'/>";
return true;
}
}
</script>
</head>
<body>
<form action="server" method="post" id="myform" onsubmit="return checkAll()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="img/logo.jpg" alt="logo" /><img src="img/banner.jpg" alt="banner" /></td>
</tr>
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- 长度为4～16个字符，并且以英文字母开头 -->
<td class="left">用户名：</td>
<td class="center">
<input id="user" name="user" type="text" class="in" onblur="checkUser()"/>
<span style="color: red" id="userInfo"></span>
</td>
</tr>
<tr>
<!-- 不能为空， 输入长度大于6个字符 -->
<td class="left">密码：</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<!-- 不能为空， 与密码相同 -->
<td class="left">确认密码：</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 邮箱格式要正确 -->
<td class="left">电子邮箱：</td>
<td class="center">
<input id="email" name="email" type="text" class="in" onblur="checkMail()"/>
<span id="emailInfo" style="color: red;"></span>
</td>
</tr>
<tr>
<!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
<td class="left">手机号码：</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 不能为空， 要正确的日期格式 -->
<td class="left">生日：</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html
扫一扫
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
