JavaScript
2018-08-09 本文已影响6人
须臾之北
JavaScript的学习
HTML:决定页面框架
CSS：用来美化页面
JS：提供用户的交互的
JS的步骤
- 确定事件
- 通常事件会触发一个函数
- 函数里通常都会去操作页面元素，做交互工作
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<script>
function dianwo(){
alert("我被点击了");
}
</script>
</head>
<body>
<div>
<input type = "button" value = "点我，弹框" onclick = "dianwo()"/>
</div>
</body>
</html>
image
JS的输出
1. alert() 直接弹框
2. document.write() 向页面输出
3. console.log() 向控制台输出
4. innerHTML: 向页面输出
5. 获取页面元素：document.getElementById("id的名称");
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<script>
function dianwo(){
var text = document.getElementById("text");
text.innerHTML = "内容已经被替换";
}
</script>
</head>
<body>
<input type = "button" value = "点我，修改div中内容" onclick = "dianwo()"/>
<div id = "text">
这里的内容会被替换掉
</div>
</body>
</html>
JS的简单校验举例
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<!--
校验用户名
1. 确定事件：提交事件onsubmit
2. 事件要触发函数checkUser()
3. 函数中检测用户名长度
-->
<script>
function checkUser(){
//1.获取用户输入
var username = document.getElementById("username");
var usernameVaule = username.value;
if(usernameVaule.length >= 6){
}
else{
alert("用户名太短了，请重新输入");
return false;
}
//邮箱的校验
var email = document.getElementById("username");
var emailVaule = email.value;
if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(emailVaule)){
alert("邮箱校验成功");
}
else{
alert("邮箱校验失败");
return false;
}
return true;
}
</script>
</head>
<body>
<form action = "TestUsername.html" onsubmit = "return checkUser()">
用户名<input type = "text" id = "username"/><br/>
密码<input type = "password" id = "password"/><br/>
邮箱<input type = "text" id = "email"/><br/>
<!--邮箱<input type = "email" id = "email"/><br/>-->
<input type = "submit" value = "提交" id = "email">
</form>
</body>
</html>
JS的应用举例
一、图片轮播技术的分析与实现
轮播图自动播放分析
1 .需求分析：
有一组图片
每隔几秒钟，就去切换一张，最终是一直在不同切换
2 .技术分析：
切换图片
每几秒钟做件事
3 .步骤分析
a. 确定事件：文档加载完成的事件 onload = "init()" onload 事件会在页面或图像加载完成后立即发生
b. 事件要触发:init()--设置定时器--每隔1秒调用一次changeImg进行图片切换
4 .changeImg()
a. 获得要切换图片的元素
1. 切换图片.html
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<script>
function change(){
var pic = document.getElementById("pic");
pic.src = "2.jpg";
}
</script>
</head>
<body>
<input type = "button" value = "点击切换图片" onclick = "change()"/>
<img src = "1.jpg" id = "pic"/>
</body>
</html>
1. 定时器.html
window.setInterval("alert("123")",2000); <!--2000为毫秒值-->
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<script>
function test(){
console.log("setInterval()调用了我");
}
var timeID;
function start(){
timeID = window.setInterval("test()",2000);
}
function end(){
clearInterval(timeID);
}
</script>
</head>
<body>
<input type = "button" value = "开启定时器" onclick = "start()"/><br/>
<input type = "button" value = "取消定时器" onclick = "end()"/><br/>
</body>
</html>
3. 自动轮播技术实现
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<script>
var index = 0;
function changeImg(){
var img = document.getElementById("img");
//计算当前要切换到第几张图片
var curIndex = index%3 + 1; //0,1,2
img.src = curIndex + ".jpg";
index = index + 1;
}
function init(){
setInterval("changeImg()",1000); <!--每隔1秒执行一次changeImg()-->
}
</script>
</head>
<body onload = "init()">
<img src = "1.png" id = "img"/>
</body>
</html>
二、完成页面定时弹出广告
-
需求分析:
打开网页，看到广告5秒后，广告消失
-
技术分析
-
定时器
-
setInterval("function",5000);--每隔5000秒执行一次函数
-
setTimeOut:多少毫秒后执行函数
-
clearInterval
-
clearTimeout
-
显示广告：img.style.display = "block";
-
隐藏广告：img.style.display = "none";
-
-
步骤分析
-
确定事件：页面加载完成的时间 onload = "init()"
-
事件触发函数init()中要做的一件事：
- 启动定时器：setTimeout()
- 显示一个广告
- 再去开启定时器，5秒后关闭广告
-
1. 图片显示与隐藏.html
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<script>
function show(){
var img = document.getElementById("img");
img.style.display = "block";
}
function hide(){
var img = document.getElementById("img");
img.style.display = "none";
}
</script>
</head>
<body>
<input type = "button" value = "显示" onclick = "show()"/><br/>
<input type = "button" value = "隐藏" onclick = "hide()"/><br/>
<img src = "1.jpg" id = "img" style = "display:none"/>
</body>
</html>
2. 定时弹出广告.html
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要获取要操作的img
var img = document.getElementById("img");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要获取要操作的img
var img = document.getElementById("img");
//隐藏广告
img.style.display = "none";
}
</script>
</head>
<body onload = "init()">
<img src = "1.jpg" id = "img" style = "display:none"/>
</body>
</html>
三、JS的表单校验
-
需求分析：
- 对用户输入进行有好的提示
-
技术分析：
-
[HTML中innerHTML属性]
-
[JS的常用事件]
- onfocus事件--获得焦点
- onblur事件--失去焦点
- onkeyup事件--按键抬起事件
-
用户名校验简单代码
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<script>
/*
1.确定事件：onfocus = "showSpan()"--获得焦点操作
2.事件要驱动函数:showSpan()
3.函数中要完成:修改span中的内容
*/
function showSpan(){
var span = document.getElementById("span_username");
span.innerHTML = "<font color = 'red' size = '2'>用户名长度不能小于6位</font>";
}
/*
校验用户名
1.确定事件：onblur = "checkUsername()"--失去焦点操作
2.事件要驱动函数:checkUsername()
3.函数中要完成:校验用户名，显示校验结果
*/
function checkUsername(){
//获取用户输入内容
var user = document.getElementById("username");
var username = user.value;
//获取显示结果span
var span = document.getElementById("span_username");
if(username.length < 6){
//显示校验结果
span.innerHTML = "<font color = 'red' size = '2'>对不起，用户名太短了</font>";
}else{
span.innerHTML = "<font color = 'red' size = '2'>恭喜，用户名可用</font>";
}
}
</script>
</head>
<body>
<form action = "TestUsername.html" onsubmit = "return checkUser()">
用户名<input type = "text" id = "username" onfocus = "showSpan()" onkeyup = "checkUsername()" onblur = "checkUsername()"/><span id = "span_username"></span><br/>
密码<input type = "password" id = "password"/><br/>
确认密码<input type = "password" id = "repassword"/><br/>
邮箱<input type = "text" id = "email"/><br/>
手机号<input type = "text" id = "tell"/><br/>
<!--邮箱<input type = "email" id = "email"/><br/>-->
<input type = "submit" value = "提交" id = "email">
</form>
</body>
</html>
用户注册信息校验代码
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type = "text/javascript" src = "regutils.js"></script>
<script>
/*
1.确定事件：onfocus = "showSpan()"--获得焦点操作
2.事件要驱动函数:showSpan()
3.函数中要完成:修改span中的内容
*/
function showSpan(spanID,msg){
var span1 = document.getElementById(spanID);
span1.innerHTML = msg;
}
/*
校验用户名
1.确定事件：onblur = "checkUsername()"--失去焦点操作
2.事件要驱动函数:checkUsername()
3.函数中要完成:校验用户名，显示校验结果
*/
function checkUsername(){
//获取用户输入内容
var user = document.getElementById("username");
var username = user.value;
//获取显示结果span
var span = document.getElementById("span_username");
if(username.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 password = document.getElementById("password").value;
//获取显示结果
var span = document.getElementById("span_password");
if(password.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 repassword = document.getElementById("repassword").value;
//获取输入的密码
var password = document.getElementById("password").value;
//获取显示结果
var span = document.getElementById("span_repassword");
if(repassword != password){
span.innerHTML = "<font color = 'red' size = '2'>对不起，两次密码不一致</font>";
return false;
}
else{
span.innerHTML = "";
return true;
}
}
/*
邮箱校验
*/
function checkemail(){
//获得用户输入
var email = document.getElementById("email").value;
//获取span显示结果
var span = document.getElementById("span_email");
//校验邮箱
var flag = checkEmail(email);
if(flag){
span.innerHTML = "<font color = 'red' size = '2'>邮箱格式不正确</font>";
return false;
}else{
span.innerHTML = "<font color = 'red' size = '2'>恭喜您,邮箱可用</font>";
return true;
}
}
function checkInfo(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkEmail();
return flag;
}
</script>
</head>
<body>
<form action = "test.html" onsubmit = "return checkInfo()">
用户名<input type = "text" id = "username" onfocus = "showSpan('span_username','用户名长度不能小于6位')" onkeyup = "checkUsername()" onblur = "checkUsername()"/><span id = "span_username"></span><br/>
密码<input type = "password" id = "password" onfocus = "showSpan('span_password','密码长度不能小于6位')" onblur = "checkPassword()" onkeyup = "checkPassword()"/><span id = "span_password"></span><br/>
确认密码<input type = "password" id = "repassword" onfocus = "showSpan('span_repassword','两次密码必须一致')" onblur = "checkRePassword()" onkeyup = "checkRePassword()"/><span id = "span_repassword"></span><br/>
邮箱<input type = "text" id = "email" onfocus = "showSpan('span_email','邮箱格式必须正确')" onblur = "checkemail()" onkeyup = "checkmail()"/><span id = "span_email"></span><br/>
手机号<input type = "text" id = "tell"/><br/>
<!--邮箱<input type = "email" id = "email"/><br/>-->
<input type = "submit" value = "提交" id = "email">
</form>
</body>
</html>
内容回顾
定时器
-
setInterval("",3000);--每隔多少秒执行一次函数
-
setTimeout("",3000);--多少毫秒之后执行一次函数
-
timeID--定时器调用后的返回值
-
clearInterval(timeID);
-
clearTimeout(timeID);
切换图片
- imgsrc = "图片路径";
事件
-
文档加载完成的事件：onload()事件
-
显示广告：img.style.display = "block";
-
隐藏广告：img.style.display = "none";
表单校验
-
引入外部js文件：
<script type = "text/javascript" src = "js文件路径"></script> -
表单校验中常用的事件
- 获得焦点的事件：onfocus
- 失去焦点事件：onblur
- 按键抬起事件:onkeyup
JS开发步骤
-
1.确定事件
-
2.事件要触发的函数
-
3.函数通常要去做一些交互
- 点击，修改图片，动态修改innerHTML属性....
- innerHTML区别对innerTEXT
- innerHTML中可以编写html代码
- innerTEXT中不可以编写html代码
四、表格的相关操作
-
需求分析：
- 提高用户体验，我们要学习隔行换色
-
技术分析：
- 改变行的颜色
- 表格的全选和全不选
——表格的隔行换色/表格的全选与全不选代码
<html>
<head>
<meta charset = "UTF-8">
<title></title>
<!--
1. 确定事件 onload
2. 事件触发函数 init()
3. 函数：操作页面的元素
操作页面中每一行
动态的修改行的背景颜色
-->
<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";
}
}
}
/*
表格的全选和全不选
1.确定事件:onclick
2.事件触发函数：checkALL()
3.函数要做的事：
·获得当前第一个checkbox的状态
·获得所有分类项的checkbox
·修改每一个checkbox的状态
*/
function checkAll(){
//获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
//获得所有分类项的checkbox
var checks = document.getElementsByClassName("check");
for(var i = 0;i < checks.length;i++){
//修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}
</script>
</head>
<body onload = "init()">
<!--
六行六列的表格
-->
<table border = "1px solid black" width = "600px" id = "tab">
<tr>
<td>
<input type = "checkbox" onclick = "checkAll()" id = "check1"/>
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type = "checkbox" class = "check"/>
</td>
<td>1</td>
<td>手机数码</td>
<td>华为、vivo、oppo</td>
<td>产品质量好</td>
<td>
<a href = "#">修改</a>|
<a href = "#">删除</a>
</td>
</tr>
<tr>
<td>
<input type = "checkbox" class = "check"/>
</td>
<td>2</td>
<td>儿童玩具</td>
<td>飞机、火车、托马斯</td>
<td>儿童玩具很好玩儿的哟</td>
<td>
<a href = "#">修改</a>|
<a href = "#">删除</a>
</td>
</tr>
<tr>
<td>
<input type = "checkbox" class = "check"/>
</td>
<td>3</td>
<td>冰箱彩电</td>
<td>格力、海尔</td>
<td>好用</td>
<td>
<a href = "#">修改</a>|
<a href = "#">删除</a>
</td>
</tr>
<tr>
<td>
<input type = "checkbox" class = "check"/>
</td>
<td>4</td>
<td>香烟酒水</td>
<td>中华、威士忌、二锅头</td>
<td>香烟酒水哈哈哈</td>
<td>
<a href = "#">修改</a>|
<a href = "#">删除</a>
</td>
</tr>
<tr>
<td>
<input type = "checkbox" class = "check"/>
</td>
<td>5</td>
<td>江海缘超市</td>
<td>辣条、饮料</td>
<td>便宜好吃</td>
<td>
<a href = "#">修改</a>|
<a href = "#">删除</a>
</td>
</tr>
</table>
</body>
</html>
五、DOM的相关操作
DOM:Document Object Model
HTML DOM Document 对象
此时要理解html文件在内存中到底怎么存
【HTML DOM 节点】
* 在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:
* 文档是一个文档。
* 所有的HTML元素都是元素节点。--Element
* 所有 HTML 属性都是属性节点。--Attribute
* 文本插入到 HTML 元素是文本节点。are text nodes。
* 注释是注释节点。--Node
Document 对象
* 当浏览器载入 HTML 文档, 它就会成为 document 对象。
* document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。
* Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
* 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
元素对象——Element
* 在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
* 元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。
* NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。
* 元素可以有属性。属性属于属性节点。
* 元素对象例如：html head body title img
属性对象——Attribute
* 在 HTML DOM 中, Attr 对象 代表一个 HTML 属性。
* HTML属性总是属于HTML元素。
* 属性对象例如:src style
image
【HTML中的DOM操作】
一些常用的 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() 修改属性节点
HTML中的DOM操作代码
<html>
<head>
<meta charset = "UTF-8">
<title></title>
</head>
<script>
/*
动态添加：<p>文本</p>
*/
function dianwo(){
var div = document.getElementById("div1");
//创建P元素节点
var p = document.createElement("p");
//创建P元素节点的文本内容
var textNode = document.createTextNode("文本内容");
//将P和文本内容关联起来
p.appendChild(textNode);
//将p元素节点追加到div中
div.appendChild(p);
}
</script>
<body>
<input type = "button" value = "点我，添加P" onclick = "dianwo()"/>
<!--一会动态的在div中添加节点-->
<div id = "div1">
</div>
</body>
</html>
一、 省市联动案例
1. 需求及技术分析
-
需求分析
- 在选择省后相应的选择市
-
技术分析
-
涉及到DOM中的动态创建节点
步骤：
-
创建所需的元素节点--此时假定创建的是option节点
var elementNode = document.createElement("option");
-
创建元素节点对应的文本内容
var textNode = document.createTextNode("文本内容");
-
将文本内容与元素节点连接在一起
elementNode.appendChild(textNode);
-
将元素节点追加到相应的需要添加的节点中
select.appendChild(elementNode);
-
citySelect.options.length = 0;
//此时的含义是：清除上次城市的选择框
-
-
2. 省市联动代码实现
<html>
<head>
<meta charset = "UTF-8">
<title></title>
</head>
<script>
/*
准备数据
*/
var provinces = [
["深圳市","东莞市","惠州市"],
["太原市","临汾市","吕梁市"],
["长沙市","岳阳市","株洲市"]
];
/*
1.确定事件：onchange
2.函数:selectProvince()
3.函数中:
得到当前操作元素
得到当前选中的省份
从数组中取出对应的城市信息
动态创建城市元素节点
添加到城市select中
*/
function selectProvince(){
//得到当前操作元素
var province = document.getElementById("province");
//得到当前选中的省份
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
//获取要添加的地方
var citySelect = document.getElementById("city");
//清空城市选择框
citySelect.options.length = 0;
for(var i = 0;i < cities.length;i++){
var cityText = cities[i];
//动态创建城市元素节点<option>太原市</option>
var option1 = document.createElement("option");
//创建城市文本信息
var textNode = document.createTextNode(cityText);
//将option与文本关联在一起
option1.appendChild(textNode);
//将option1追加到select中
citySelect.appendChild(option1);
}
}
</script>
<body>
<!--选择省份-->
<select onchange = "selectProvince()" id = "province">
<option value = "-1">--请选择--</option>
<option value = "0">广东省</option>
<option value = "1">山西省</option>
<option value = "2">湖南省</option>
</select>
<!--选择城市-->
<select id = "city"></select>
</body>
</html>
二、 商品的左右选择
<!--
步骤分析：
1. 确定事件：onclick
2.事件触发函数：selectOne
3.函数中要完成：
将左边选中的元素移动到右边select中
1.获取左边select中被选中元素
2.将选中元素添加到右边select中
-->
商品左右选择代码
<html>
<head>
<meta charset = "UTF-8">
<title></title>
</head>
<script>
function selectOne(){
//获取左边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){
rightSelect.appendChild(option1);
}
}
}
/*
将左边商品全部移动到右边
*/
function selectAll(){
//获取左边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>
<body>
<!--创建四行五列的表格-->
<table border = "1px solid black" width = "400px">
<tr>
<td>分类名称</td>
<td>手机数码</td>
</tr>
<tr>
<td>分类描述</td>
<td>手机数码，应有尽有</td>
</tr>
<tr>
<td>分类商品</td>
<td height = "100px">
<!--设计两个浮动的div-->
<!--左边div-->
<div style = "float:left">
已有商品<br/>
<select multiple = "multiple" id = "leftSelect" ondblclick = "selectOne()">
<option>华为</option>
<option>vivo</option>
<option>oppo</option>
<option>荣耀</option>
<option>魅族</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>三星</option>
<option>小米</option>
<option>锤子</option>
<option>诺基亚</option>
</select><br/>
<a href = "#"><<</a><br/>
<a href = "#"><<<</a>
</div>
<div style = "clear:both"></div>
</td>
</tr>
<tr>
<td colspan = "2">
<input type = "submit" value = "提交"/>
</td>
</tr>
</table>
</body>
</html>
image
