02-Web前端知识 day03-javaScript
使用JS完成页面定时弹出广告
使用JS完成表单的校验
使用JS完成表格的隔行换色
使用JS完成复选框的全选效果
使用JS完成省市的联动效果
JS控制下拉列表左右选择
教学导航
- 掌握JS中的BOM对象
- 掌握JS中的常用事件
- 掌握JS中的常用DOM操作
- 了解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 步骤分析
- 确定事件: 页面加载完成的事件 onload
- 事件要触发函数: init()
- init函数里面做一件事:
- 启动一个定时器 : setTimeout()
- 显示一个广告
- 再去开启一个定时5秒钟之后,关闭广告
1.4 代码实现
<script>function init(){setTimeout("showAD()",3000);}function showAD(){//首先要获取要操作的imgvar img = document.getElementById("img1");//显示广告img.style.display = "block";//再开启定时器,关闭广告setTimeout("hideAD()",3000);}function hideAD(){//首先要获取要操作的imgvar 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 代码实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--引入外部的js文件--><script type="text/javascript" src="../js/regutils.js" ></script><script>/*1. 确定事件 : onfocus2. 事件要驱动函数3. 函数要干一些事情: 修改span的内容*/function showTips(spanID,msg){//首先要获得要操作元素 spanvar span = document.getElementById(spanID);span.innerHTML = msg;}/*校验用户名:1.事件: onblur 失去焦点2.函数: checkUsername()3.函数去显示校验结果*/function checkUsername(){//获取用户输入的内容var uValue = document.getElementById("username").value;//对输入的内容进行校验//获得要显示结果的spanvar 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" οnsubmit="return checkForm()" >用户名:<input type="text" id="username" οnfοcus="showTips('span_username','用户名长度不能小于6')" οnblur="checkUsername()" οnkeyup="checkUsername()" /><span id="span_username"></span><br />密码:<input type="password" id="password" οnfοcus="showTips('span_password','密码长度不能小于6')" οnblur="checkPassword()" οnkeyup="checkPassword()"/><span id="span_password"></span><br />确认密码:<input type="password" id="repassword" οnfοcus="showTips('span_repassword','两次密码必须一致')" οnblur="checkRePassword()" οnkeyup="checkRePassword()" /><span id="span_repassword"></span><br />邮箱:<input type="text" id="email" οnfοcus="showTips('span_email','邮箱格式必须正确')" οnblur="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文件
<script src="js文件的路径" type="text/javascript"/>
表单校验中常用的事件:
获得焦点事件: onfocus
失去焦点事件 onblur
按键抬起事件: onkeyup
JS开发步骤
1. 确定事件
2. 事件要触发函数: 定义函数
3. 函数通常都要去做一些交互: 点击, 修改图片, 动态修改innerHTML属性... innerTEXT
3.表格隔行换色
3.1 需求分析
我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色
3.2 技术分析
改变行的颜色
3.3 步骤分析
- 确定事件: 文档加载完成 onload
2. 事件要触发函数: init()
3. 函数:操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
3.4 代码实现
<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的状态
代码实现
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 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 代码实现
6. 使用JS控制下拉列表左右选择
6.1 需求分析:
在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
6.2 步骤分析:
6.3 代码实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--步骤分析1. 确定事件: 点击事件 :onclick事件2. 事件要触发函数 selectOne3. selectOne要做一些操作(将左边选中的元素移动到右边的select中)1. 获取左边Select中被选中的元素2. 将选中的元素添加到右边的Select中就可以--><script>function selectOne(){// 1. 获取左边Select中被选中的元素var leftSelect = document.getElementById("leftSelect");var options = leftSelect.options;//找到右侧的Selectvar rightSelect = document.getElementById("rightSelect");//遍历找出被选中的optionfor(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;//找到右侧的Selectvar rightSelect = document.getElementById("rightSelect");//遍历找出被选中的optionfor(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. 函数里面要做一些交互
02-Web前端知识 day03-javaScript相关推荐
- web前端知识集合——javascript基础篇之javascript背景历史和运行环境(一)
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
- web前端知识集合——javascript基础篇之常量和变量(二)
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
- 零基础该如何学习Web前端知识?
想要跳槽到IT行业人在近几年越来越多,大部分都是想要学习web前端技术,但是这其中有很多都是零基础学员,大家都想知道零基础该如何学习Web前端知识?我们来看看下面的详细介绍. 零基础该如何学习Web前 ...
- web前端知识体系大全
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- Web前端知识技能大汇总
Web前端知识技能大汇总 来源:github 发布时间:2015-07-08 阅读次数:3432 28 项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们 ...
- Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
- 如何快速学Web前端开发?JavaScript函数好学吗?
如何快速学Web前端开发?JavaScript函数好学吗?很多企业在招聘Web前端工程师时会倾向于招聘JavaScript技术的人才,因此专业中必然要包含JavaScript知识.函数是为完成某一功能 ...
- 如何学习Web前端知识转型?
现在的互联网工作者都比较向往高薪,所以有一些运营或者设计岗也会想要转行去技术岗.今天就以设计师转型学习Web为例,一起来看看如何学习Web前端知识转型? 1.HTML/CSS学习 第一阶段,你要从最基 ...
- 好程序员分享Web前端知识之HTML
今天好程序员分享Web前端知识之HTML.Web前端技术由HTML.CSS和Javascript三大部分构成,而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者 ...
- Web 前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
最新文章
- 数据结构与算法 第二次实验报告堆栈队列
- Remove Nth Node From End of List - LeetCode
- Array.Copy 方法 总结
- 当思科交换机密码遗忘之后......(附图)
- 搜索推荐系统实战:终极奥秘
- 【Python】format()中槽的嵌套以及range()函数用法
- DRBD 高可用配置详解(转)
- iOS7(+) 图像资源Images Assets使用
- 依赖注入Bean属性——手动装配Bean
- 戴尔看好Ubuntu超越Windows的十个优势
- openglshader实现虚拟场景_云桌面,实现办公终端的统一管理与运维
- Ubuntu版本更新一路走来:朕就是这样的汉子
- matlab怎么写集合,matlab集合操作
- ANSYSworkbench中skewness解释
- 面经 - JAVA知识点
- ipad iphone横屏竖屏
- MySQL初始密码获取
- swift 时间选择器第三方。公历转农历,农历转公历。
- 「硬见小百科」100个示波器基础知识问答
- 打印机可以打印不能扫描怎么弄_打印机无法扫描怎么解决 打印机无法扫描相关介绍【解决方法】...
热门文章
- python打开csv文件、计算总成绩_python – 读取CSV文件,计算平均值并打印所述平均值...
- android 裁剪图片工具,十大最佳Android图像裁剪(裁剪小部件)库
- python字典筛选
- HTML_龙湖地产界面自制
- linux 2t gpt 分区,linux大于2T的磁盘使用GPT分区方式
- 百度热力图颜色说明_揭秘!张家口100万人口热力图,看完你就知道房子该买哪里了...
- Laravel - 从百草园到三味书屋 From Apprentice To Artisan目录
- iPhone屏幕分辨率
- 农用化学活性成分的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- java文件一行一行读取_java一行一行写入或读取文件