Web UI前端设计基础——javascript学习笔记03（DOM操作）

第三节

复习巩固

1、EMCAScript : 编程语言基础 —— 包括数据类型、流程控制、函数

2、 DOM ：文档对象模型——包括选择器

属性——基本属性、样式事件

结构—— 父容器，dom节点（父容器、兄弟节点）

3、数据：Json （JavaScript对象表示法）

/*json对象*/
var emp1={empName:'Mat',gender:'Male'};

/*json对象数组*/
var arr=[
    {empName:'Mat',gender:'Male'},
    {empName:'Green',gender:'Male'},
    {empName:'Mary',gender:'Male'}
]

4、循环：
1）单层循环

2）多层循环（如果出现两层以上的循环，一般认为是程序设计出现了问题——修改程序结构）

新课笔记

DOM操作

1、主要解决问题

json数组如何呈现在table、select等组件上
单个的对象如何呈现在面板上

题外话：vue.js的两大部分：

1、数据驱动：页面上需要保存的属性值的管理

2、组件化：组件（结构）+事件（机制）

事件如何描述：事件名称+处理方法+事件绑定

https://www.w3school.com.cn/jsref/dom_obj_event.asp

ex:click(单击事件)：点击某个按钮作出一些响应

事件举例：模拟用户登录时的点击事件

/**页面初始化**/
window.onload=function () {
    /**事件绑定**/
    /**事件并不会马上发生,要等到触发节点才会调用处理方法**/
    document.getElementById('btnLogin').onclick = function () {
        btnLoginClick();
    }
}

function btnLoginClick() {
    var username = document.getElementById('username').value;
    if(username!='admin'){
        alert('用户名错误');
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>

</head>
<body>
<div class="login-box">
    <div class="row">
        用户名: <input id="username" value=""/>
    </div>
    <div>
        <button id="btnLogin">按钮</button>//防止侵入式开发，不能将onclick写入html文件
    </div>
</div>
</body>
<script src="js/event.js"></script>
</html>

2、应用举例：二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select上的onchange</title>

</head>
<body>
    大学
        <select id="sltArea">

        </select>
        <select id="sltSchool">

        </select>
</body>
<script src="js/onchange.js"></script>
<script src="js/json.js"></script>
</html>

/**
 *id是业务无关项
 */
var citites = [
    {cityid:1,cityname:'天津'},
    {cityid:2,cityname:'北京'}
]
var schools = [
    {schoolid:1,schoolname:'天津大学',cityid:1},
    {schoolid:2,schoolname:'南开大学',cityid:1},
    {schoolid:3,schoolname:'北京大学',cityid:2}
]

window.onload = function () {
    /**初始化城市列表**/
    initCities();
    /**
     * 通过选择城市设置学校列表
     */
    setSchoolsByCity();
}
function initCities(){
    /**
     * 1、找到父容器
     * 2、创建子元素
     * 3、把子元素放到父容器中
     */
    var area = document.getElementById('sltArea');
    for(var i = 0;i<citites.length;i++){
        var opt = document.createElement('option');
        opt.value = citites[i].cityid;
        opt.innerText = citites[i].cityname;
        area.appendChild(opt);
    }
}
function setSchoolsByCity(){
    var area = document.getElementById('sltArea');
    area.onchange = function () {
        sltSchoolOnChange();
    }
}
function sltSchoolOnChange() {
    /**
     * 1、获取选中的value
     * 2、过滤学校数组产生新数组
     * 3、把数组绑定到学校列表——Q：编程一个通用的方法
     */
    var area = document.getElementById('sltArea');
    var selected = area.selectedOptions[0].value;
    var newSchools = schools.filter(function (item) {
        return item.cityid == selected;
    })
    var school = document.getElementById('sltSchool');
    school.innerHTML='';
    for(var i = 0;i<newSchools.length;i++){
        var opt = document.createElement('option');
        opt.value = newSchools[i].schoolid;
        opt.innerText = newSchools[i].schoolname;
        school.appendChild(opt);
    }
}

作业布置

作业1：独立完成二级联动编码。Q：尝试用一个统一的函数，处理下拉列表赋值

问题：如何创建（设计）函数？

1、先编写具有重复片段的代码

2、找到表示单一职责的代码

3、找到那些（因）变量，抽象成模板

4、提升变量

1）分离变量和处理过程：变量对应结构；过程对应算法

2）把处理过程封装成函数，使用形式参数（占位符）来代表变量的位置

5、函数使用：

1）为实际参数赋值

2）把实际参数传入函数中，从而执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级联动</title>

</head>
<body>
    大学
    <select id="sltArea">
    </select>
    <select id="sltSchool">
    </select>
</body>
<script src="js/school.js"></script>
<script src="js/json.js"></script>
</html>

window.onload = function () {
  
    init();
}
function init(){
    /**
     * 1、找到父容器
     * 2、创建子元素
     * 3、把子元素放到父容器中
     */
     /**
     *1、对可变内容进行抽象-->变量——>随时被替换成具体的内容
     * 2、变量   变成   函数的参数，写成函数
     */
    var selector = document.getElementById('sltArea');//选择器：找到将要赋值的select
    var arr = citites;//数据源：循环生成select中option对应的value和innerText
    var option = {var:'cityid',text:'cityname'};//value和innerText与列名之间的对应关系

    //option.val = option['val'];
    setOptionForSelect(selector,arr,option);
    selector.onchange = function(){
        sltSchoolOnChange();
    }
}

function sltSchoolOnChange() {
    var selector = document.getElementById('sltArea');
    var selected = selector.selectedOptions[0].value;
    var newSchools = schools.filter(function (item) {
        return item.cityid == selected;
    })
    var area = document.getElementById('sltSchool');
    area.innerHTML='';
    var data = newSchools;
    var opt = {var:'schoolid',text:'schoolname'};
    setOptionForSelect(area,data,opt);
}
function setOptionForSelect(selector,arr,option){
    for(var i = 0;i<arr.length;i++){
        var opt = document.createElement('option');
        opt.value = arr[i][option.var];//arr[i]['cityid']=>arr[i].cityid;
        opt.innerText = arr[i][option.text];
        selector.appendChild(opt);
    }
}

/**
 *id是业务无关项
 */
var citites = [
    {cityid:0,cityname:''},
    {cityid:1,cityname:'天津'},
    {cityid:2,cityname:'北京'}
]
var schools = [
    {schoolid:0,schoolname:'',cityid:0},
    {schoolid:1,schoolname:'天津大学',cityid:1},
    {schoolid:2,schoolname:'南开大学',cityid:1},
    {schoolid:3,schoolname:'北京大学',cityid:2}
]

作业2：提前预习jQuery

锦鲤姑娘

发布了5 篇原创文章 · 获赞 5 · 访问量 117

私信关注