03-JavaScript
今日任务
使用js完成页面定时弹出广告
使用js完成表单的校验
使用js完成表格的隔行换色
使用js完成复选框的全选效果
使用js完成省市的联动效果
js控制下拉列表左右选择
教学导航
1. 掌握js中的bom对象
2. 掌握js中的常用事件
3. 掌握js中的常用dom操作
4. 了解js中的内置对象
上一次内容进行复习:
css: 层叠样式表
主要作用: 美化页面, 将美化和html进行分离,提高代码复用性
选择器:
元素选择器: 元素的名称{}
类选择器: . 开头
id选择器: #id选择器
后代选择器: 选择器1 选择器2
子元素选择器: 选择器1 > 选择器2
选择器分组: 选择器1,选择器2,选择器3{}
属性选择器: 选择器[属性的名称='属性的值']
伪类选择器:
浮动:
float 属性: left right
清除浮动:
clear 属性: both left right
盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向
内边距: 控制的盒子内距离
边框: 盒子的边框
外边距: 控制盒子与盒子之间的距离
绝对定位: position : absolute; top: left
js开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译
js声明变量: var 变量的名字;
js声明函数: function 函数的名称(参数的名字){}
js开发的步骤:
1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作, 弹框, 修改页面内容,动态去添加一些东西
0. 轮播图自动播放
需求:
有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换
技术分析:
切换图片:
每个三秒钟做一件事:
步骤分析:
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeimg()
4. changeimg()
1. 获得要切换图片的那个元素
1. 完成页面定时弹出广告
1.1 需求分析
一般网页，当我们刚打开的时候，它会5秒之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！
1.2 技术分析
- 定时器
- setinterval : 每隔多少毫秒执行一次函数
- settimeout: 多少毫秒之后执行一次函数
- clearinterval
- cleartimeout
- 显示广告 img.style.display = "block"
- 隐藏广告 img.style.display = "none"
1.3 步骤分析
1. 确定事件: 页面加载完成的事件 onload
2. 事件要触发函数: init()
3. init函数里面做一件事:
1. 启动一个定时器 : settimeout()
2. 显示一个广告
1. 再去开启一个定时5秒钟之后,关闭广告
1.4 代码实现
```html
<script>
function init(){
settimeout("showad()",3000);
}
function showad(){
//首先要获取要操作的img
var img = document.getelementbyid("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
settimeout("hidead()",3000);
}
function hidead(){
//首先要获取要操作的img
var img = document.getelementbyid("img1");
//隐藏广告
img.style.display = "none";
}
</script>
```
1.5扩展
- js的引入方式
2. 完成完成表单的校验
2.1 需求分析
昨天我们做了一个简单的表单校验，每当用户输入出错的时候，我们是弹出了一个对话框，提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改，当用户输入信息有问题的时候，我们就再输入框的后面给他一个友好提示。
2.2 技术分析
【html中innerhtml属性】
【js中的常用事件】
onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件
2.3 步骤分析
2.4 代码实现
```css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showtips(spanid,msg){
//首先要获得要操作元素 span
var span = document.getelementbyid(spanid);
span.innerhtml = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkusername()
3.函数去显示校验结果
*/
function checkusername(){
//获取用户输入的内容
var uvalue = document.getelementbyid("username").value;
//对输入的内容进行校验
//获得要显示结果的span
var span = document.getelementbyid("span_username");
if(uvalue.length < 6){
//显示校验结果
span.innerhtml = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerhtml = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密码校验
*/
function checkpassword(){
//获取密码输入
var upass = document.getelementbyid("password").value;
var span = document.getelementbyid("span_password");
//对密码输入进行校验
if(upass.length < 6){
span.innerhtml = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerhtml = "<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
/*
确认密码校验
* */
function checkrepassword(){
//获取密码输入
var upass = document.getelementbyid("password").value;
//获取确认密码输入
var urepass = document.getelementbyid("repassword").value;
var span = document.getelementbyid("span_repassword");
//对密码输入进行校验
if(upass != urepass){
span.innerhtml = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span.innerhtml = "";
return true;
}
}
/*
校验邮箱
* */
function checkmail(){
var umail = document.getelementbyid("email").value;
var flag = checkemail(umail);
var span = document.getelementbyid("span_email");
//对邮箱输入进行校验
if(flag){
span.innerhtml = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerhtml = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkform(){
var flag = checkusername() && checkpassword() && checkrepassword() && checkmail();
return flag;
}
</script>
</head>
<body>
<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkform()" >
用户名:<input type="text" id="username" onfocus="showtips('span_username','用户名长度不能小于6')" onblur="checkusername()" onkeyup="checkusername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" onfocus="showtips('span_password','密码长度不能小于6')" onblur="checkpassword()" onkeyup="checkpassword()"/><span id="span_password"></span><br />
确认密码:<input type="password" id="repassword" onfocus="showtips('span_repassword','两次密码必须一致')" onblur="checkrepassword()" onkeyup="checkrepassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" onfocus="showtips('span_email','邮箱格式必须正确')" onblur="checkmail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
```
上午回顾:
定时器:
setinterval("test()",3000) 每隔多少毫秒执行一次函数
settimeout("test()",3000) 多少毫秒之后执行一次函数
timerid 上面定时器调用之后
clearinterval()
cleartimeout()
切换图片
img.src = "图片路径"
事件: 文档加载完成的事件 onload事件
显示广告 : img.style.display = "block"
隐藏广告: img.style.display ="none"
引入一个外部js文件
```html
<script src="js文件的路径" type="text/javascript"/>
```
表单校验中常用的事件:
获得焦点事件: onfocus
失去焦点事件 onblur
按键抬起事件: onkeyup
js开发步骤
1. 确定事件
2. 事件要触发函数: 定义函数
3. 函数通常都要去做一些交互: 点击, 修改图片, 动态修改innerhtml属性... innertext
3.表格隔行换色
3.1 需求分析
我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色
3.2 技术分析
改变行的颜色
3.3 步骤分析
1. 确定事件: 文档加载完成 onload
2. 事件要触发函数: init()
3. 函数:操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
#### 3.4 代码实现
```html
<script >
function init(){
//得到表格
var tab = document.getelementbyid("tab");
//得到表格中每一行
var rows = tab.rows;
//便利所有的行,然后根据奇数 偶数
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgcolor = "yellow";
}else{
row.bgcolor = "red"
}
}
}
</script>
```
4. 复选框的全选和全不选
4.1 需求分析
商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品
4.2 技术分析
事件 : onclick点击事件
4.3 步骤分析
全选和全不选步骤分析:
1.确定事件: onclick 单机事件
2.事件触发函数: checkall()
3.函数要去做一些事情:
获得当前第一个checkbox的状态
获得所有分类项的checkbox
修改每一个checkbox的状态
代码实现
```html
function checkall(){
// 获得当前第一个checkbox的状态
var check1 = document.getelementbyid("check1");
//得到当前checked状态
var checked = check1.checked;
// 获得所有分类项的checkbox
// var checks = document.getelementsbytagname("input");
var checks = document.getelementsbyname("checkone");
// alert(checks.length);
for(var i = 0; i < checks.length; i++){
// 修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}
```
5. 省市联动效果
5.1 需求分析
5.2 技术分析
什么是dom: document object model : 管理我们的文档 增删改查规则
【html中的dom操作】
```html
一些常用的 html dom 方法：
getelementbyid(id) - 获取带有指定 id 的节点（元素）
appendchild(node) - 插入新的子节点（元素）
removechild(node) - 删除子节点（元素）
一些常用的 html dom 属性：
innerhtml - 节点（元素）的文本值
parentnode - 节点（元素）的父节点
childnodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getelementbyid() 返回带有指定 id 的元素。
getelementsbytagname() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getelementsbyclassname() 返回包含带有指定类名的所有元素的节点列表。
增加节点：
createattribute() 创建属性节点。
createelement() 创建元素节点。
createtextnode() 创建文本节点。
insertbefore() 在指定的子节点前面插入新的子节点。
appendchild() 把新的子节点添加到指定节点。
删除节点：
removechild() 删除子节点。
replacechild() 替换子节点。
修改节点：
setattribute() 修改属性
setattributenode() 修改属性节点
```
5.3 步骤分析
5.4 代码实现
```html
6. 使用js控制下拉列表左右选择
6.1 需求分析:
在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
6.2 步骤分析:
6.3 代码实现
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectone
3. selectone要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边select中被选中的元素
2. 将选中的元素添加到右边的select中就可以
-->
<script>
function selectone(){
// 1. 获取左边select中被选中的元素
var leftselect = document.getelementbyid("leftselect");
var options = leftselect.options;
//找到右侧的select
var rightselect = document.getelementbyid("rightselect");
//遍历找出被选中的option
for(var i=0; i < options.length; i++){
var option1 = options[i];
if(option1.selected){
// 2. 将选中的元素添加到右边的select中就可以
rightselect.appendchild(option1);
}
}
}
//将左边所有的商品移动到右边
function selectall(){
// 1. 获取左边select中被选中的元素
var leftselect = document.getelementbyid("leftselect");
var options = leftselect.options;
//找到右侧的select
var rightselect = document.getelementbyid("rightselect");
//遍历找出被选中的option
for(var i=options.length - 1; i >=0; i--){
var option1 = options[i];
rightselect.appendchild(option1);
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftselect" ondblclick="selectone()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectone()"> >> </a> <br />
<a href="#" onclick="selectall()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightselect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
```
今天内容简单回顾:
定时器:
setinterval
settimeout
clearinterval
cleartimeout
控制图片显示隐藏
img.style.display = "block"
img.style.display = "none"
表单中常用的事件:
onfocus: 获取焦点事件
onblur : 失去焦点的事件
onkeyup: 按键抬起的事件
onclick: 单击事件
ondblclick: 双击事件
表格隔行换色,鼠标移入和移除要变色:
onmouseenter: 鼠标移入
onmouseout: 鼠标移出
onload: 文档加载完成事件
onsubmit: 提交
onchange: 下拉列表内容改变
checkbox.checked 选中状态
dom的文档操作:
添加节点: appendchild
创建节点: document.createelement
创建文本节点: document.createtextnode()
js开发步骤:
1. 确认事件
2. 事件触发函数
3. 函数里面要做一些交互