javaScript

[TOC]

课程内容回顾

1. 什么是JavaScript，有几个部分组成
   脚本语言，浏览器，ECMAScript BOM DOM

2. JavaScript数据类型和语法
   Number，string，Boolean，undefined ，null

3. JavaScript开发步骤
   绑定事件，实现函数，获取标签操作权

4. JavaScript实现表单校验
   onsubmit

5. JavaScript实现图片轮播
   onload

6. Bom对象
   window ：alert confirm prompt settimeout setInterval，cleartimeout clearinterval
   navigator
   screen
   location href
   history

今日重点

1. ==Javascript中的事件==
2. ==DOM模型==
3. JavaScript中内置对象

要求： 完成表单验证+复选框全选

01- 案例三：使用JS完成表单的提示和校验：需求和分析

总结：

1. 事件 onblur/onfocus/onsubmit
   Onblur: 失去焦点的时候会触发
   Onfocus ：获得焦点
   Onsubmit：表单提交
2. 定义函数 function
3. 修改标签体中的内容 元素.innerHTML

02- 案例三：使用JS完成表单的提示和校验：代码实现

1. Span标签：输入提示信息
   <span id=”sp”></span>
2. 设置事件
   <input onblur=”check()”></input>
3. Function check(){…..} 函数功能：校验，输出到span
4. 获得输入框的内容，获得标签document.getElementById(“sp”).value
5. 添加提示内容：.innerHTML
   总结：onfocus,onblur写在input标签上，onsubmit写在form标签上

03-案例三：使用JS完成表单的提示和校验：总结：JS的常用事件

总结：

• onsubmit :提交表单
• onload： 页面加载完执行
• onclick： 按钮点击
• onfocus： 获取焦点
• onblur： 失去焦点
• ondblclick: 双击事件

键盘操作事件:

• onkeydown:
• onkeyup :
• onkeypress:

鼠标操作事件：

• onmousemove： 鼠标移动
• onmouseout： 鼠标移出
• onmouseover：鼠标移入

案例总结：
用了三个事件：onfocus,onblur,onsubmit
用了一个函数：document.getElementById(ID)
用了一个属性：.innerHTML = “”;

04-案例四：使用JS完成表格隔行换色：需求和分析

1.【步骤一】创建一个HTML页面：可以使用后台设计页面.
2.【步骤二】确定事件：onload事件.
3.【步骤三】触发一个函数.在这个函数中获得操作的表格.
4.【步骤四】获得表格中的所有的行数.
表格对象.rows.length 获得总行数
5.【步骤五】遍历表格的行数.
表格对象.rows 下标从0开始
6.【步骤六】判断是否是奇数行还是偶数行.

05-案例四：使用JS完成表格隔行换色：代码实现

1. 获得表格
   Document.getElementById()
2. 总行数tab1.rows.length;
3. for …. 获得奇数行，偶数行

   for(var i =0;i<length;i++){
        if(i%2==0){
           …  红色
           document.getElementByID(“trow”).style.backgroudColor=”red”;
       }else{
          ..  蓝色
       }
     }
   <table>
       <tr style=”css代码”>
        </tr>
   </table>
   

4. 修改对应行的CSS .style属性
   .style.backgroundColor (CSS background-color)

06-案例四：使用JS完成表格隔行换色：总结

1. <thead>
   tr <th>居中，加粗显示</th>
</thead>
2. <tbody>
   tr td
   </tbody>

07-案例五：使用JS完成复选框的全选和全不选：需求和分析

1.【步骤一】创建一个HTML页面.
2.【步骤二】确定事件：复选框的单击事件.
3.【步骤三】触发一个函数
4.【步骤四】在函数中,获得上面的复选框是否被选中.
5.【步骤五】如果选中,下面的所有的复选框都被选中.
6.【步骤六】如果不选中,下面的所有的复选框都不选中.

08-案例五：使用JS完成复选框的全选和全不选：代码实现

1. 复选框的单击事件.
   <input id=”sel” type=”checkbox” onclick=”selectAll()”><input>
2. 定义函数，判断是否选中

   function selectAll(){
       var flag = document.getElementById(“sel”).checked;
       if(flag){
           //选中
           //选择下面所有checkbox
           //input  name=”name1”
           var arr = document.getElementsByName(“”)
           //选中所有的checkbox
           for(循环数组){
               arr[i].checked = “true”;
       }else{
           //选择下面所有checkbox
           //input  name=”name1”
           var arr = document.getElementsByName(“”)
           //选中所有的checkbox
           for(循环数组){
               arr[i].checked = “false”;
       }
   }
   

3. 定义函数，判断是否选中

   function selectAll(){
       var flag = document.getElementById(“sel”).checked;
       //选中
       //选择下面所有checkbox
       //input  name=”name1”
       var arr = document.getElementsByName(“”)
       //选中所有的checkbox
       for(循环数组){
           arr[i].checked = flag;
       }
   }
   

09-案例五：使用JS完成复选框的全选和全不选：总结：JS的DOM概述及常用操作

1. DOM的概念
   图一 DOM模型的概述.bmp
2. 常用的API(html文档的增删改查)
3. 获得元素：
   • document.getElementById(); -- 通过ID获得元素.
   • document.getElementsByName(); -- 通过name属性获得元素.
   • document.getElementsByTagName(); -- 通过标签名获得元素.
4. 创建元素：
   • document.createElement(“标签名称”); -- 创建元素
   • document.createTextNode("文本"); -- 创建文本
5. 添加节点：
   • element.appendChild(newItem); -- 在最后添加一个节点.
   • element.insertBeforeinsertBefore(newItem,existingItem); -- 在某个元素之前插入.
6. 删除节点：
   • element.removeChild(existingItem); -- 删除元素

总结：
document对象是HTML文档对应的内存对象
Element： 所有的标签对象
Attribute：所有的属性对象

10-案例五：使用JS完成复选框的全选和全不选：总结：DOM的添加元素的操作

• 获得UL标签
  document.getElementById(“”)
• 创建LI标签节点
  liEle = document.createElement(“”)
• 创建一个文本节点
  textNode = document.createTextNode(“”);
• 将文本节点追加到LI标签中，将LI标签追加到UL末尾
  liEle.appendChild(textNode);

11-案例六：使用JS完成省市联动的效果：需求和分析

1. 【步骤一】创建一个HTML文件.
   2.【步骤二】确定事件：onchange事件.
   3.【步骤三】触发函数,在函数中编写代码.
   4.【步骤四】获得到所选择的省份的信息.
   获得被选中的option值 this.value
   5.【步骤五】根据选择的省份的信息获得到对应的数组中的市的数据.
   二维数组实现
   var arr = new Array(5);
   arr[0]=[1,2,3];
   arr[1]=[4,5,6];
   …….
   6.【步骤六】遍历数组中的市的信息.
   7.【步骤七】创建元素，创建文本,最后将元素添加到第二个列表中.

12-案例六：使用JS完成省市联动的效果：代码实现

function changeCity(value){
                // 获得到选中的省份的信息.
                var city = document.getElementById("city");
                // 清除第二个列表中的内容:
                for(var i=city.options.length;i>0;i--){
                    city.options[i] = null;
                }
                // city.options.length = 0;
                //循环获得第一个select中的所有省份
                for(var i= 0 ;i< arrs.length;i++){
                    //挑选出被选中的省份对应的城市数组
                    if(value == i){
                        // 获得该省份所有的市的信息.
                          for(var j=0;j<arrs[i].length;j++){
                            // 创建option元素：
                            document.createElement(“option”)
                            //创建文本节点
                            document.createTextNode((arrs[i][j]))
                            // 将文本的内容添加到option元素中.
                            opEl.appendChild(textNode);
                            // 将option的元素添加到第二个列表中.
                            city.appendChild(opEl);
                        }
                    }
                }
            }

***优化代码：
技术分析：
1.  下拉列表对象.selectedIndex
2.  加强for循环
    for (i in citys) {
        citys[i]//注意：i为下标   
    }

13-案例六：使用JS完成省市联动的效果：总结：JS的内置对象

重点掌握：

// Array 创建：
new Array(长度);
var arr = [1,2,3,4];
arr = [1,2,3,”aaaa”];
// 数组API：
reverse() 反转

// String对象API：
// 对比Java的String类进行学习
substr(开始位置，长度)  “abcdef”.substr(2,3) = “cde”

14-案例六：使用JS完成省市联动的效果：总结：JS的全局函数

// 将字符串转换成数字
parseInt(“123”)  isNaN 
// 将字符串转换成浮点数
parseFloat(“”)
// eval函数：
// 将一段内容当成是JS的代码执行.
var sss = “alert(‘aaaa’)”;
eval(sss);

总结：

1. JS事件
   ==onclick 点击事件==
   ==ondblclick双击事件==
   ==onload 页面加载==
   ==onsubmit 表单提交事件==
   ==onchange 下拉列表改变==
   ==onfocus 获得焦点==
   ==onblur 失去焦点==

   鼠标相关
   onmouseover 鼠标移入
   onmouseout 鼠标移出
   onmousemove 鼠标移动
   键盘相关
   onkeypress 键盘按键事件
   总结：事件是JS程序的入口

2. JS的DOM模型
   什么是DOM
   DOM：Document Object Model：文档对象模型.
   将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
   ==document对象：表示文档在内存中的树状图==
   ==Element 对象：表示所有的标签==
   ==Attribute对象：标签中的所有的属性==
   HTML文档中一切皆Node（节点）
   常用的API:

   1. 获得元素
      document.getElementById() 通过ID获得标签
      document.getElementsByName() 通过name属性获得一组标签
      document.getElementsByTagName() 通过标签名称获得一组标签
   2. 创建元素
      document.createElement(名字)
      document.createTextNode(文字)
   3. 添加元素
      父标签.appendChild(子标签)
      element.insertBefore(新标签,之前的标签) 某个标签前添加新标签
   4. 删除元素
      父标签.removeChild(子标签)

3. 内置对象
   Array 数组
   数组定义
   var arr = new Array(length)
   var arr = [];
   特点：js数组长度可变并且类型不固定
   arr = [1,2,3,”aaaa”];
   String 类似Java

   全局函数 
   parseInt(“”)   将字符串转换成整数
   parseFloat(“”) 将字符串转换成数字
   eval(“JS代码”);