JavaEE NoteJava note

javaScript

2017-09-15  本文已影响11人  chcvn

[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的常用事件

总结：

键盘操作事件:

鼠标操作事件：

案例总结：
用了三个事件：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的添加元素的操作

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代码”);
上一篇下一篇

猜你喜欢

热点阅读