黑马程序员技术交流社区

标题: [杭州校区][技术笔记] javaScript高级 [打印本页]
作者: 小江哥    时间: 2018-7-23 16:43
标题: [杭州校区][技术笔记] javaScript高级
今日任务
Ø 使用JS完成图片轮播效果
Ø 使用JS完成页面定时弹出广告
Ø 使用JS完成表单的校验
Ø 使用JS完成表格的隔行换色
Ø 使用JS完成复选框的全选效果
Ø 使用JS完成省市联动效果
教学导航
教学目标
掌握JS中的BOM对象
掌握JS中的常用的事件
掌握JS中的常用DOM操作
了解JS中的内置对象
教学方法
案例驱动法
1.1 上次课内容回顾：
CSS：
* CSS的概述：层叠样式表.
    * 修饰HTML的页面.使页面与样式分离.
* CSS的语法：
    * 选择器{属性名:属性值;属性名:属性值;...}
* CSS的引入方式：
    * 行内样式：在html元素上使用style属性设置
    * 内部样式：在html中使用<style></style>进行设置
    * 外部样式：定义一个css文件,在html中引入该文件.<link href=”” type=”” rel=””/>
* CSS的选择器：(****)
    * 元素选择器:
    * ID选择器：
    * 类选择器：
    * 后代选择器：
    * 子元素选择器：
* CSS的样式：
    * 文本
    * 背景
    * 字体
    * 列表
* CSS的盒子模型：
    * 内边距：padding
    * 边框：border
    * 外边距：margin
* CSS的悬浮和定位：
    * 悬浮：float属性设置悬浮.
    * 清除悬浮：clear属性清除.
    * 定位：position属性设置定位.
        * 使用left和top属性控制位置.
    * display属性：控制元素的显示方式：
        * block--显示的, none--隐藏的,inline--显示到一行.
JS:
* JS的概述：JavaScript运行在浏览器端脚本语言.
* JS的历史：由网景公司研发的.由ECMA组织统一标准:ECMAScript.
* JS的组成：ECMAScript，BOM，DOM.
* JS的语法：
    * JS的变量声明:
    * JS的数据类型：
        * 原始类型：undefined,boolean,string,number,null
        * 引用类型：
    * JS的运算符：
        * 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.
    * JS的语句：
        * 与Java中的语句一致.
* 简单的表单校验：
    * 正则的校验：使用String的match方法和正则中的test方法.
1.2 案例一：使用JS完成图片的轮播的效果：1.2.1 需求：1.1.1 分析：1.1.1.1 技术分析：
【JS中的Window对象的定时的操作】
* 设置定时的方法
* 清除定时的方法
1.1.1.2 步骤分析：
【步骤一】创建一个HTML文件
【步骤二】当页面加载的时候开始计时.使用onload事件.
【步骤三】编写onload事件触发的函数.
【步骤四】获得操作图片的控制权.
【步骤五】修改图片的src的属性.
1.1.2 代码实现：
[AppleScript] 纯文本查看 复制代码
<script>

                        window.onload = function(){

                                // 设置定时：

                                window.setInterval("changeImg()",5000);

                        }

                        var i = 1;

                        function changeImg(){

                                i++;

                                // 获得图片的控制权：

                                if(i > 3){

                                        i=1;

                                }

                                var img1 = document.getElementById("img1");

                                img1.src="../img/"+i+".jpg";

                        }

                        

                </script>

1.1 案例二：使用JS实现定时弹出广告定时隐藏.1.1.1 需求:
在网站的首页上定时弹出一个广告，并且定时隐藏掉.
1.1.1 分析：1.1.1.1 技术分析：
【JS的window对象的定时的方法】
* 设置定时的方法
* 清除定时的方法
【CSS的显示和隐藏的属性】
* display
    * block：显示元素：
    * none：隐藏元素：
1.1.1.2 步骤分析：
【步骤一】创建一个HTML页面
【步骤二】确定事件：页面的加载事件
【步骤三】触发一个函数，编写该函数.
【步骤四】在函数中设置定时操作.定时执行一个显示的函数.
【步骤五】清空定时，重新设置定时，5秒钟隐藏.
1.1.2 代码实现：
[AppleScript] 纯文本查看 复制代码
var time;

                        

                        window.onload = function(){

                                time = window.setInterval("show()",5000);

                        }

                        

                        // 显示广告的方法

                        function show(){

                                // 获得广告的div元素:

                                var adDiv = document.getElementById("adDiv");

                                adDiv.style.display = "block";

                                window.clearInterval(time);

                                time = window.setInterval("hide()",5000);

                        }

                        

                        // 隐藏广告的方法:

                        function hide(){

                                // 获得广告的div元素:

                                var adDiv = document.getElementById("adDiv");

                                adDiv.style.display="none";

                                window.clearInterval(time);

                        }

1.1.1 总结：1.1.1.1 JS中的BOM对象:
Ø Window
* alert();                --弹出对话框
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm();        --弹出一个确认窗口
* prompt();                --弹出一个可输入的对话框
* open();                --打开一个新窗口
Ø Navigator ：包含的是浏览器的信息.
Ø Screen:用来获得屏幕信息:
Ø History:浏览器的历史对象:
Ø Location:包含URL信息的对象
1.1 使用JS完成注册页面表单提示及校验
1.1.1 需求：
1.1.1 分析：1.1.1.1 技术分析:
【JS的输出】
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
【JS的事件】
* onfocus        :获得焦点.
* onblur        :失去焦点.
* onsubmit        :提交的时候.
1.1.1.2 步骤分析：
【步骤一】创建一个html文档
【步骤二】在要去校验的文本框上添加事件.
【步骤三】触发函数
【步骤四】在函数中向文本框后的html的区域中写入一段提示的内容.
1.1.2 代码实现:
[AppleScript] 纯文本查看 复制代码
        function tips(id,content){                                document.getElementById(id+"Span").innerHTML = "<font color='red'>"+content+"</font>";

                        }

                        

                        function checkForm(){

                                // 判断用户名不能为空:

                                var username = document.getElementById("username").value;

                                if(username == ""){

                                        document.getElementById("usernameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>";

                                        return false;

                                }

                                

                                var password = document.getElementById("password").value;

                                if(password == ""){

                                        document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空！</font>";

                                        return false;

                                }

                        }

1.1.1 总结：1.1.1.1 JS的事件的总结：
* onload        :
* onclick        :
* onsubmit        :
* onfocus        :
* onblur        :
* onchange        :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
键盘操作事件:
* onkeydown        :
* onkeyup        :
* onkeypress:
鼠标操作事件：
* onmousemove：
* onmouseout：
* onmouseover：
* onmousedown
* onmouseup
1.1 案例四：使用JS完成后台数据展示的隔行换色的表格：1.1.1 需求：
在后台展示数据的页面上，通常使用表格标签进行数据的展示.没有背景的表格比较难看的，可以使用JS控制表格的隔行换色.
1.1.1 分析：1.1.1.1 技术分析：
【使用JS获得表格的行数】
* 获得到控制的表格元素:
    * var tab1 = document.getElementById(“tab1”);
    * var len = tab1.rows.length;
1.1.1.2 步骤分析：
【步骤一】创建一个HTML页面：可以使用后台设计页面.
【步骤二】确定事件：onload事件.
【步骤三】触发一个函数.在这个函数中获得操作的表格.
【步骤四】获得表格中的所有的行数.
【步骤五】遍历表格的行数.
【步骤六】判断是否是奇数行还是偶数行.
1.1.2 代码实现：
[AppleScript] 纯文本查看 复制代码
function changeColor(){                                // 获得要操作的对象的控制权：

                                var tab1 = document.getElementById("tab1");

                                // 获得表格的所有的行数:

                                var count = tab1.rows.length;

                                // 遍历每行:

                                for(var i = 0;i<count;i++){

                                        if(i % 2 == 0){

                                                // 偶数行

                                                tab1.rows.style.backgroundColor = "#00FF00";

                                        }else{

                                                // 奇数行

                                                tab1.rows.style.backgroundColor = "#00FFFF";

                                        }

                                }

                        }

1.1.1 总结：1.1.1.1 表格中的tbody和thead标签
[AppleScript] 纯文本查看 复制代码
        function changeColor(){                                // 获得操作的表格的控制权:

                                var tab1 = document.getElementById("tab1");

                                // 获得tbody中的所有的行.

                                var len = tab1.tBodies[0].rows.length;

                                for(var i = 0;i< len ;i++){

                                        if(i % 2 == 0){

                                                tab1.tBodies[0].rows.style.backgroundColor = "green";

                                        }else{

                                                tab1.tBodies[0].rows.style.backgroundColor = "gold";

                                        }

                                }

                        }

1.1 案例五：使用JS完成复选框的全选和全不选的效果1.1.1 需求：
在实际的开发中一条记录一条记录进行删除的话，效率很低，有的时候需要一起删除多条记录.需要通过在表格之前设置一个复选框的形式进行勾选复选框.点击一个删除的按钮.
1.1.1 分析:1.1.1.1 技术分析：
1.1.1.2 步骤分析：
【步骤一】创建一个HTML页面.
【步骤二】确定事件：复选框的单击事件.
【步骤三】触发一个函数
【步骤四】在函数中,获得上面的复选框是否被选中.
【步骤五】如果选中,下面的所有的复选框都被选中.
【步骤六】如果不选中,下面的所有的复选框都不选中.
1.1.2 代码实现：
[AppleScript] 纯文本查看 复制代码
function checkAll(){                                // 获得上面的复选框

                                var selectAll = document.getElementById("selectAll");

                                // 判断这个复选框是否被选中.

                                var ids = document.getElementsByName("ids");

                                if(selectAll.checked == true){

                                        // 上面复选框被选中：获得下面所有的复选框,修改checked属性

                                        for(var i = 0 ;i<ids.length;i++){

                                                ids.checked = true;

                                        }

                                }else{

                                        // 上面复选框没有被选中：获得下面所有的复选框,修改checked属性

                                        for(var i = 0 ;i<ids.length;i++){

                                                ids.checked = false;

                                        }

                                }

                                

                        }

1.1.1 总结：1.1.1.1 JS中的DOM对象：
【DOM的概述】
Ø 什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
Ø DOM的使用：
知道document，element，attribute中的属性和方法
【DOM的常用的操作】
Ø 获得元素：
* document.getElementById();                -- 通过ID获得元素.
* document.getElementsByName();                -- 通过name属性获得元素.
* document.getElementsByTagName();        -- 通过标签名获得元素.
Ø 创建元素：
* document.createElement();                        -- 创建元素
* document.createTextNode();                -- 创建文本
Ø 添加节点：
* element.appendChild();                        -- 在最后添加一个节点.
* element.insertBefore();                        -- 在某个元素之前插入.
Ø 删除节点：
* element.removeChild();                        -- 删除元素
【使用DOM完成对ul中添加一个li元素】
                        function addElement(){
                                var city = document.getElementById("city");
                                // 创建一个元素:
                                var liEl = document.createElement("li");
                                // 创建一个文本节点:
                                var text = document.createTextNode("深圳");
                                // 添加子节点:
                                liEl.appendChild(text);
                                city.appendChild(liEl);
                        }
1.1 案例六：使用JS完成省市联动的效果：1.1.1 需求：
在注册页面上有两个下拉列表,左侧省份的下拉列表一改变,右侧的市的下拉列表也要跟着发生变化.
1.1.1 分析：1.1.1.1 技术分析:
【JS中创建数组】
【JS的事件】
下拉的列表的改变的事件.onchange.
【JS的DOM的操作】
创建元素：
添加元素：
1.1.1.2 步骤分析
【步骤一】创建一个HTML文件.
【步骤二】确定事件：onchange事件.
【步骤三】触发函数,在函数中编写代码.
【步骤四】获得到所选择的省份的信息.
【步骤五】根据选择的省份的信息获得到对应的数组中的市的数据.
【步骤六】遍历数组中的市的信息.
【步骤七】创建元素，创建文本,最后将元素添加到第二个列表中.
1.1.2 代码实现:
[AppleScript] 纯文本查看 复制代码
// 定义数组：二维数组：

                        var arrs = new Array(5);

                        arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");

                        arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");

                        arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");

                        arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");

                        arrs[4] = new Array("长春市","吉林市","四平市","延边市");

                        

                        function changeCity(value){

                                // 获得到选中的省份的信息.

                                var city = document.getElementById("city");

                                

                                // 清除第二个列表中的内容:

                                for(var i=city.options.length;i>0;i--){

                                        city.options = null;

                                }

                                // city.options.length = 0;

                                

                                // alert(value);

                                for(var i= 0 ;i< arrs.length;i++){

                                        if(value == i){

                                                // 获得所有的市的信息.

                                                for(var j=0;j<arrs.length;j++){

                                                        // alert(arrs[j]);

                                                        // 创建元素：

                                                        var opEl = document.createElement("option");// <option></option>

                                                        // 创建文本节点:

                                                        var textNode = document.createTextNode(arrs[j]);

                                                        // 将文本的内容添加到option元素中.

                                                        opEl.appendChild(textNode);

                                                        // 将option的元素添加到第二个列表中.

                                                        city.appendChild(opEl);

                                                }

                                        }

                                }

                        }

推荐阅读






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2