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
标签:function,Web,schoolid,option,03,DOM,cityid,schoolname,var 来源: https://blog.csdn.net/abc701110/article/details/104675191