学习目标:
*使用JS可以获得指定元素
*使用JS可以创建元素
*使用JS可以对元素的属性进行操作
*使用JS可以对元素的标签体进行操作
*使用JS可以对指定元素的样式进行操作(获得或修改)
一 案例:表隔行换色
1.1 案例介绍
开发中,需要使用表格陈列数据,数据过多不易查看,通常使用隔行换色进行表示
1.2 案例相关JS事件
1.2.1 相关JS事件
-
onmouseover() 鼠标移入事件,鼠标从外部移入当前元素时触发;
-
onmouseout() 鼠标移出事件,鼠标从当前元素移出时触发;
-
onload() 页面加载成功触发;
方式一 : <body>使用onload属性确定需要执行的函数:
<script>
//JS代码在<body>之前,不能获得<body>标签体中的内容,还没有加载到
var e01 = document.getElementById("e01");
alert(e01); //打印null
function init(){
//页面加载成功后执行
var e02 = document.getElementById("e01");
alert(e02.value); //打印出内容
}
</script><body οnlοad="init()">
<input type="text" name="" id="e01" value="测试代码" />
</body>方式二 : 通过window.onload设置隐名函数:
window.onload = function(){
/页面加载成功后执行
var e02 = document.getElementById("e01");
alert(e02.value); //打印出内容
}1.2.2 this关键字
在函数内部this表示:当前操作的元素;
1.2.3 setAttribute(name,value)设置属性
this.setAttribute(name,value)给当前元素设置属性
1.3 案例实现
<script>
window.onload = function(){
//1 获取表格
var tblEle = document.getElementById("tb1");
//2获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//3对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4对偶数的行设置一个背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor = "blue";
}else{
//5对奇数行设置一个背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor = "red";
}
}
}
</script>表格高亮显示
<script>
function changeColor(id,flag){
if(flag=="over"){
document.getElementById(id).style.backgroundColor = "red";
}else if(flag =="out"){
document.getElementById(id).style.backgroundColor = "white";
}
}
</script>
</head>
<body>
<table border="1px" width="500px" height="50px" align="center" id="tb1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr οnmοuseοver="changeColor('tr1','over')" id = "tr1" οnmοuseοut="changeColor('tr1','out')">
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr οnmοuseοver="changeColor('tr2','over')" id = "tr2" οnmοuseοut="changeColor('tr2','out')">
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr οnmοuseοver="changeColor('tr3','over')" id = "tr3" οnmοuseοut="changeColor('tr3','out')">
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr οnmοuseοver="changeColor('tr4','over')" id = "tr4" οnmοuseοut="changeColor('tr4','out')">
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr οnmοuseοver="changeColor('tr5','over')" id = "tr5" οnmοuseοut="changeColor('tr5','out')">
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr οnmοuseοver="changeColor('tr6','over')" id = "tr6" οnmοuseοut="changeColor('tr6','out')">
<td>6</td>
<td>汾九</td>
<td>20</td>
</tbody>
</table>
</body>二 案例:复选框全选和全不选
2.1 案例介绍
开发中,经常需要对表格数据进行批量处理,就需要快速的对列表项进行操作,
2.2 案例相关JS属性介绍
2.2.1 单选/复选选中
ele.checked 表示元素是否选中, true表示选中,false表示没有选中;
ex:ele.checked = true; //设置元素被选中.
2.3 案例实现
<script>
function checkAll(){
//1获取编号前面的复选框
var checkEle = document.getElementById("checkAll");
//2对编号前面的复选框状态进行判断
if(checkEle.checked == true){
//3获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//4对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//5对每一个复选框进行状态设置成选中
checkOnes[i].checked = true;
}
}else{
//6获取下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
//7对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//8对每个复选框设置状态为未选中
checkOnes[i].checked = false;
}
}
}
</script>
</head>
<body>
<table border="1" width="500" height="50" align="center" >
<thead>
<tr>
<td colspan="4">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td>
</tr>
<tr>
<th><input type="checkbox" οnclick="checkAll()" id="checkAll"/></th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td><input type="checkbox" name="checkOne"/></td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>动态添加城市
<head>
<meta charset="UTF-8">
<title>02动态添加城市</title>
<script>
window.onload = function(){
document.getElementById("btn1").onclick = function(){
//1获取ul元素节点
var ulEle = document.getElementById("ul1");
//2创建城市文本节点
var textNode = document.createTextNode("西安");
//3创建li元素节点
var liEle = document.createElement("li"); //<li></li>
//4将文本节点放到元素节点中区
liEle.appendChild(textNode); //<li>西安</li>
//5将元素节点添加到ul中去
ulEle.appendChild(liEle);
}
}
</script>
</head>
<body>
<input type="button" value="动态添加新城市" id="btn1" />
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>三 案例三:省市二级联动
3.1案例介绍
在日常应用中,我们需要完善个人信息,"所在地"要求选择省市,当选择省的时候,对应省下的市将自动更新
3.2 案例相关JS函数
3.2.1数组:Array
创建语法
new Array();
new Array(size);
new Array(element0,element1,element2...elementn); 数组的长度可以任意修改,类似Java中的List集合等;
3.2.2 元素操作:createElement appendChild
document.createElement() 创建元素节点
ele.appendChild() 向标签体末尾添加新的子节点3.3 案例实现
步骤1:给注册页面添加select标签
<td>
<select οnchange="changeCity(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>步骤2:js实现
<script>
//1创建一个二维数组用于存放城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function changeCity(val){
//7 获取第二个下拉列表
var cityEle = document.getElementById("city");
//9清空第二个option下拉列表中的内容
cityEle.options.length=0;
//2遍历二维数组中的省份
for(var i=0;i<cities.length;i++){
//注意,比较的是角标
if(val==i){
//3遍历用户选择省份下的城市
for(var j=0;j<cities[i].length;j++){
// alert(cities[i][j]);
//4创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
//5创建option元素节点
var optEle = document.createElement("option");
//6将城市的文本节点添加到元素option节点
optEle.appendChild(textNode);
//8将元素节点option添加到第二个下拉列表中
cityEle.appendChild(optEle);
}
}
}
}
</script>
3.4 DOM总结
3.4.1 什么是DOM
DOM:Document Object Model 文档对象模型,定义访问和操作结构化文档(HTML)的方式
创建的结构化文档:html xml等
DOM包括: 核心DOM / HTML DOM / XML DOM; 通常情况下HTML DOM 和XML DOM 是可以相互使用的.
HTML DOM将整个HTML文档呈现成一颗DOM树,树中有元素,属性,文本成员.
3.4.2 document文档对象
浏览器加载整个HTML文档形成Document对象,Document对象可以访问和操作HTML文档中的所有元素;
*获得元素
getElementById() //通过id属性值获得元素(整个HTML id位置)
getElementByName() //通过name值获得所有元素(整个HTML文档中name可能相同)
getElementsByClassName() //通过class属性获得所有元素
getElementsByTagName() //通过标签名获得所有的元素
*创建元素
createElement() //创建指定名称的元素
*常见属性
childNodes,获得所有的子节点
nodeName,返回节点名称(标签名)
nodeType,返回节点类型(元素,属性,文本等)
nodeValue,节点的值(只有文本节点才有该属性)
3.4.3 element元素对象
*Element对象表示HTML文档中的元素(HTML称为标签),元素可包含属性,其他元素或者文本.也就是说HTML标签可以包含属性,其他子标签或文本
3.4.4 名词解释
元素(标签) Element / 属性Attribute / 文本Text统称为 : 节点 Node
3.5 总结
3.5.1 全局函数
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
