黑马程序员技术交流社区

标题: [技术笔记] [杭州校区] javaScript [打印本页]

---

作者: 小江哥    时间: 2018-6-7 14:48
标题: [技术笔记] [杭州校区] javaScript
今日任务
使用JS完成图片轮播效果
使用JS完成页面定时弹出广告
使用JS完成表单的校验
使用JS完成表格的隔行换色
使用JS完成复选框的全选效果
使用JS完成省市联动效果
教学导航
教学目标1.1.1 分析：1.1.1.1 技术分析：

【JS中的Window对象的定时的操作】

* 设置定时的方法

* 清除定时的方法

1.1.1.2 步骤分析：

【步骤一】创建一个HTML文件

【步骤二】当页面加载的时候开始计时.使用onload事件.

【步骤三】编写onload事件触发的函数.

【步骤四】获得操作图片的控制权.

【步骤五】修改图片的src的属性.

1.1.2 代码实现：

[AppleScript] 纯文本查看 复制代码

<script>

1.1.1 分析：1.1.1.1 技术分析：
【JS的window对象的定时的方法】
* 设置定时的方法


* 清除定时的方法


【CSS的显示和隐藏的属性】
* display
    * block：显示元素：
    * none：隐藏元素：
1.1.1.2 步骤分析：
【步骤一】创建一个HTML页面
【步骤二】确定事件：页面的加载事件
【步骤三】触发一个函数，编写该函数.
【步骤四】在函数中设置定时操作.定时执行一个显示的函数.
【步骤五】清空定时，重新设置定时，5秒钟隐藏.
1.1.2 代码实现：[mw_shl_code=applescript,true]        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);

                        }

                        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>[/mw_shl_code]
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.2 分析：1.1.2.1 技术分析:

【JS的输出】

* document.getElementById(“”).innerHTML=”HTML的代码”;

* document.write(“”);

【JS的事件】

* onfocus        :获得焦点.

* onblur        :失去焦点.

* onsubmit        :提交的时候.

1.1.2.2 步骤分析：

【步骤一】创建一个html文档

【步骤二】在要去校验的文本框上添加事件.

【步骤三】触发函数

【步骤四】在函数中向文本框后的html的区域中写入一段提示的内容.

1.1.3 代码实现:

[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.2 分析：1.1.2.1 技术分析：

【使用JS获得表格的行数】

* 获得到控制的表格元素:

    * var tab1 = document.getElementById(“tab1”);

    * var len = tab1.rows.length;

1.1.2.2 步骤分析：

【步骤一】创建一个HTML页面：可以使用后台设计页面.

【步骤二】确定事件：onload事件.

【步骤三】触发一个函数.在这个函数中获得操作的表格.

【步骤四】获得表格中的所有的行数.

【步骤五】遍历表格的行数.

【步骤六】判断是否是奇数行还是偶数行.

1.1.3 代码实现：

[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.1.1 技术分析：

1.1.1.2 步骤分析：

【步骤一】创建一个HTML页面.

【步骤二】确定事件：复选框的单击事件.

【步骤三】触发一个函数

【步骤四】在函数中,获得上面的复选框是否被选中.

【步骤五】如果选中,下面的所有的复选框都被选中.

【步骤六】如果不选中,下面的所有的复选框都不选中.

1.1.1 代码实现：

[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;

                                        }

                                }

                                

                        }

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.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/forum.php?mod=viewthread&tid=345570
• 
  
• [color=inherit !important]一贴看杭州分校吃住行，学习生活攻略大集锦
• http://bbs.itheima.com/thread-347847-1-1.html
•   
• 全新图文杭州新校区来校路线图：
• http://bbs.itheima.com/thread-347847-1-1.html
  

---

作者: 2048    时间: 2018-6-8 10:48
感谢分享

---

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

黑马程序员IT技术论坛 X3.2