今日任务

使用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函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
  1. 再去开启一个定时5秒钟之后,关闭广告

1.4 代码实现

<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 代码实现

<!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文件

<script src="js文件的路径"  type="text/javascript"/>

表单校验中常用的事件:

获得焦点事件: onfocus

失去焦点事件 onblur

按键抬起事件: onkeyup

JS开发步骤

1. 确定事件

2. 事件要触发函数: 定义函数

3. 函数通常都要去做一些交互:  点击, 修改图片,  动态修改innerHTML属性...  innerTEXT

3.表格隔行换色

3.1 需求分析

我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色

3.2 技术分析

改变行的颜色

3.3 步骤分析

确定事件: 文档加载完成 onload
1. 事件要触发函数: init()
  1. 函数:操作页面的元素
    要操作表格中每一行
    动态的修改行的背景颜色

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. 事件要触发函数 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()"> &gt;&gt; </a> <br />

                        <a href="#" onclick="selectAll()"> &gt;&gt;&gt; </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="#"> &lt;&lt; </a> <br />

                        <a href="#"> &lt;&lt;&lt; </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. 函数里面要做一些交互

JavaWEB开发03——JS的更多相关文章

带你玩转JavaWeb开发之三 -JS插件实战开发
前提:需要掌握的知识点填写HTML代码 Element元素中有一个innerHTML属性,这个属性可以填写一段html代码 innerHTML = "<font ...
JavaWeb学习总结-01 JavaWeb开发入门
一基本概念 1 Web开发的相关知识 Web,表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面): ...
JavaWeb---总结(一)JavaWeb开发入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
JavaWeb学习总结(一)——JavaWeb开发入门
http://www.cnblogs.com/xdp-gacl/p/3729033.html 只为成功找方法,不为失败找借口! JavaWeb学习总结(一)--JavaWeb开发入门一.基本概念 1 ...
JavaWeb学习总结(一)——JavaWeb开发入门（转载）
转载自http://www.cnblogs.com/xdp-gacl/p/3729033.html感谢孤傲苍狼的分享. 一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意 ...
李兴华JavaWeb开发笔记
李兴华JavaWeb开发笔记 1.Java语法-基础环境变量-JAVA_HOME, PATH, ClassPath 变量名作用举例 JAVA_HOME 指向JDK目录 C:\Program Fi ...
Javaweb开发中URL路径的使用
看到博客园孤傲苍狼的web系列文章中有关于URL路径的使用文章后,感觉自己对URL的使用清楚了很多,自己再对着动手写一遍以加深记忆. JavaWeb开发中常看到URL以"/"开头, ...
javaWeb学习总结（1）- JavaWeb开发入门
一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...
JavaWeb开发技术基础概念回顾篇
JavaWeb开发技术基础概念回顾篇第一章动态网页开发技术概述 1.JSP技术:JSP是Java Server Page的缩写,指的是基于Java服务器端动态网页. 2.JSP的运行原理:当用户第 ...

随机推荐

python日记：优化(SEO)狗学Python的日子（1）
一名优秀的程序员,在穿越单行道时也会确认双向的来车情况 ——道格拉斯.林德(Doug Linder) 大家可能好奇Python是什么东东,今天是小猿开始学习Python的第一天.周五在公司的时候收到了 ...
重写移动端滚动条[iScroll.js核心代码]
最近写组件库的时后,发现这个滚动条是真的丑啊,决定重新撸一个滚动条: 首先咱们回顾一下移动端浏览器滚动条特性: 滚动条在开始滚动时渐显,滚动结束后渐隐滚动条不占内容区宽度,悬浮固定滚动条高度(深灰 ...
selenium与页面交互之二：webelement类的属性
webelement类的属性如下: element.size() 获取元素的大小 element.tag_name() 获取元素的HTML标签名称 element.text() 获取元素的文本 ...
npm学习（十一）之package-lock.json
package-lock.json 描述对于npm修改node_modules树或package.json的任何操作,都会自动生成package.json,它描述生成的确切树,以便后续安装能够生成相 ...
javascript 与node的 event-loop
参考:https://juejin.im/post/5c337ae06fb9a049bc4cd218 https://github.com/forthealllight/blog/issues/5 h ...
利用ab压力工具对服务器进行压力测试
假如我们需要对http://letv.com进行压力测试,指定请求总数为100,并发用户数为10,我们可以以下面的方式进行测试 $ ab -n 100 -c 10 http://letv.com/Th ...
jfinal layui easyexcel 实现文件的上传下载
jfinal layui easyexcel 这三样开源技术这里就不多介绍了,自行百度了解吧,他们的组合算是一个很高效又不失美观的操作体验. 操作主要分以下几步: 1.建立jfinal的操作环境, ...
gradle 刷新打包的时候报错
java.lang.AbstractMethodError: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm ...
python-ssh-远程服务器+远程docker执行命令
在python语言中实现远程服务器执行命令+远程dcoker执行命令 def ssh_exec_command(ip, username, password, cmd=None): "&qu ...
Linux课程学习第四课
学习必须如蜜蜂一样,采过许多花,这才能酿出蜜来这月事比较多,每课的笔记都会慢慢补回来的,做事得有始有终在网络上,人们越来越倾向于传输压缩格式的文件,原因是压缩文件体积小,在网速相同的情况下,传输时 ...

JavaWEB开发03——JS