JavaScrip入门笔记（二）
使用JS完成表格的隔行换色
新标签的学习
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
确定事件(页面加载事件onload)
获取元素: 获取表格(document.getElementById()),最终是为了获取表格中tbody里面的行数(长度)
Tbody里面的行数(rows.length)
JS的遍历(for 循环)
获取奇数行和偶数行(对遍历中角标对2取余)
设置背景颜色(.style.backgroundColor)
步骤分析
第一步: 确定事件(onload)，并为其绑定一个函数
第二步: 书写函数(获取表格)
第三步: 获取tbody里面的行数
第四步: 对tbody里面的行数进行遍历
第五步: 获取奇偶行和偶数行(角标对2取余)
第六步: 分别对奇数行和偶数行设置背景颜色
代码实现
<script>
//无名函数
window.onload = function() {
//1.获取表格
var tbEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tbEle.tBodies[0].rows.length;
// alert(len);
//3.对tbody里面的行进行遍历
for(var i = 0; i < len; i++) {
if (i % 2 == 0) {
//4.对偶数行设置背景颜色
tbEle.tBodies[0].rows[i].style.backgroundColor = "pink";
} else {
//5.对奇数行设置背景颜色
tbEle.tBodies[0].rows[i].style.backgroundColor = "yellow";
}
}
}
</script>
实现一个表格的高亮显示
分析：
第一步: 确定事件(onmouseover 和 onmouseout)并分别为其绑定一个函数
第二步: 获取鼠标移上去的那行，对其设置背景颜色
第三步：移出鼠标，对其设置背景颜色
<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>
<body>
<table border="1" width="500" height="50" align="center" id="trl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr onmouseover="changeColor('tr1', 'over')" id="tr1" onmouseout="changeColor('tr1', 'out')">
<td>1</td>
<td>张三</td>
<td>22</td>
</tr >
</tbody>
</table>
</body>
总结
之前使用过的事件(onsubmit/onclick/onload/ onfocus/onblur /onmouseover/onmouseout)
onfocus/onblur :
聚焦离焦事件，用于表单校验的时候比较合适
Onclick/ondblclick:
鼠标单击和双击事件
onkeydown/onkeypress:
搜索引擎使用较多
onload: 页面加载,就访问的代码，其他所有的操作(匿名方式)都可以放到这个绑定的函数里
onmouserover/onmouseout/onmousemove: 购物网站商品详情页
onsubmit: : 单提交事件
onchange: 当用户改变内容的时候使用这个事件(二级联动)
技术分析
确定事件(鼠标单击事件 onclick), 事件绑定到前面的复选框
获取编号前面的复选框的专题(是否选中)
获取复选框: var checkAllEle = document.getElementById("id") 获取复选框的状态: checkAllEle.checked?
获取下面所有的复选框:
document.getElementByName("name")
步骤分析
第一步: 确定事件(onclick)并为其绑定一个函数
第二步: 书写函数(获取编号前面的复选框, 获取其状态)
第三步: 判断编号前面复选框的状态(如果为选中, 获取下面所有的复选框, 并将其状态置为选中)
第四步: 判断编号前面的复选框的状态(如果未选中, 获取下面所有的复选框, 并将其状态置为未选中)
<script>
function checkAll() {
//1.获取编号前面的复选框
var checkAllEle = document.getElementById("checkAll");
//2.对编号前面的复选框的状态进行判断
if (checkAllEle.checked == true) {
//3.后去下面所有的复选框
var checkOnes = document.getElementsByName("checkOne");
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> <html>
<head>
<title></title>
<style></style>
<link/>
</head>
<body>
<span></span>
<div>
<img src='' />
</div>
<p></p>
</body>
</html>
Document对象
Document: 整个html文件都成为一个document文档
Element: 所有的标签都是Element元素
Attribute: 标签里面的属性
Text: 标签中间夹着的内容为 text文本
Node: document，element、attribute、text统称为结点node
(getElementsByName(), getElementsByTagName() ) 后面两个方法获取之后需要遍历!
Element 对象
我们所认知的HTML页面中所有的标签都是element元素
element.appendChild() 向元素添加新的子节点，作为最后一个子节点
element.firstChild() 返回元素的首个子节点
element.getAttribute() 获得指定属性值
element.innerHTML 设置或返回元素的内容
element.insetBefore() 在指定的已有的子节点之前插入新节点.
element.setAtrribute()
Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
attr.value 设置或返回属性的值
DOM练习
在页面中使用列表显示一些城市
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
我们希望点击一个按钮实现动态添加城市
分析:
事件(onclick)
获取ul元素节点
创建一个城市的文本节点
创建一个li元素节点
使用element里面的方法appendChild()来添加子节点
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加城市</title>
<script>
window.onload = function() {
document.getElementById("btn").onclick = function() {
//1.获取ul元素节点
var ulEle = document.getElementById("ul1");
//2.创建城市文本结点
var textNode = document.createTextNode("深圳"); //深圳
//3.创建li元素节点
var liEle = document.createElement("li"); // <li></li>
//4.将城市文本结点添加到li元素中去
liEle.appendChild(textNode);
//5.讲li添加到ui中去
ulEle.appendChild(liEle);
}
}
</script>
</head>
<body>
<input type="button" value="添加新城市" id="btn" />
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
用JS完成省市二级联动
需求分析
希望在注册页面中添加一个字段(籍贯), 当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市,显示效果如下
技术分析:
事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建?)
获取用户选择的省份(使用方法传参的方式: this.value)
遍历数组 (获取省份与用户选择的省份比较, 如果相同了, 继续遍历该省份下所有的城市)
创建文本结点和元素结点，并进行添加操作
createTextNode / createElement appendChild()
步骤分析
第一步: 确定事件(onchange)并为其绑定一个函数
第二步: 创建一个二维数组用于存储省份和城市
第三步: 获取用户选择的省份
第四步: 遍历二维数组中的省份
第五步: 将遍历的与用户选择的省份比较
第六步: 如果相同，遍历该省份下的所有城市
第七步: 创建城市文本结点
第八步: 创建option元素结点
第九步: 将城市文本结点添加到option元素结点中去
第十步: 获取第二个下拉列表，讲option元素结点添加进去
第十一步: 每次操作前清空下拉列表的option内容
代码:
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(4);
for (var i = 0; i < cities.length; i++) {
cities[i] = new Array("武汉市" + i, "黄冈市" + i, "荆州市" + i);
}
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++) {
//4.创建城市的文本操作
var textNode = document.createTextNode(cities[i][j]);
//5.创建option元素结点
var opEle = document.createElement("option");
//6.将城市的文本结点添加到option元素结点
opEle.appendChild(textNode);
//8.将option元素结点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
<select onchange="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>
</tr>
JS的内置对象
JS Array
JS Boolean
JS Date
JS Math
JS Number
JS String
JS RegExp
JavaScrip入门笔记（二）的更多相关文章
- Shader 入门笔记(二) CPU和GPU之间的通信,渲染流水线
渲染流水线 1)应用阶段(CPU处理) 首先,准备好场景数据(摄像机位置,视锥体,模型和光源等) 接着,做粗粒度剔除工作. 最后,设置好每个模型的渲染状态(使用的材质,纹理,shader等) 这一阶段 ...
- onethink入门笔记(二)
5.onethink页面端获得后台服务器传值的方法 1:一般后台通过assign的值前台通过{$value}显示出来; 2:如果需要在js中使用 则可以通过 在js中写 var m = "{ ...
- OpenGLES入门笔记二
#import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> #import <OpenGLES/ES2/gl.h& ...
- Redis入门笔记(二)-配置及运行
转自: http://gly199.iteye.com/blog/1056424 1.redis基本参数 redis的配置文件中的常见参数如下: daemonize 是否以后台进程运行,默认为no ...
- nodeJs入门笔记(二)
js中window通常是全局变量 global 是node.js里的全局变量 node中能访问的对象一般都是 global的 属性 global 对象属性 process 用于描述当前Node 进程状 ...
- Scala入门笔记二
[TOC] 标识符 可用的字符 处理括号类字符,分隔符之外,其他所有的可打印的ASCII字符,如字母,数字,下划线和美元符号($)均可出现在Scala标识符中 插入符包括了(,) [,] {,and} ...
- Shader 入门笔记(二) CPU和GPU之间的通信
渲染流水线的起点是CPU,即应用阶段. 1)把数据加载到显存中 2)设置渲染状态,通俗说这些状态定义了场景中的网格是怎样被渲染的. 3)调用DrawCall,一个命令,CPU通知GPU.(这个命令仅仅 ...
- SpringBoot入门笔记(二)、使用fastjson
1.添加fastjson配置 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastj ...
- JS高度融合入门笔记(二)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS ...
随机推荐
- 02慕课网《进击Node.js基础（一）》——CommonJs标准
是一套规范管理模块 每个js 为一个模块,多个模块作为一个包 node.js和Couchdb是对其的实现: 不同于jQuery 模块:定义.标识.引用(地址/模块名称) 模块类型: 核心模块http ...
- POJ 2376 （区间问题，贪心）
题目链接:http://poj.org/problem?id=2376 题目大意:选择一些区间使得能够覆盖1-T中的每一个点,并且区间数最少 题目分析:这道题目很明显可以用贪心法来解决.但题目没有看起 ...
- 服务器BMC（带外）
服务器除了装linux,windows系统外,相应还有一个可通过网线(服务器默认带外地址--可改)连接具体厂商服务器的BMC(Baseboard Management Controller,基板管理控 ...
- HDU 2154 跳舞毯
http://acm.hdu.edu.cn/showproblem.php?pid=2154 Problem Description 由于长期缺乏运动,小黑发现自己的身材臃肿了许多,于是他想健身,更准 ...
- linux & zip & tar
linux & zip & tar https://zzk.cnblogs.com/s?w=blog%3Axgqfrms%20zip # zip -r 递归 file_name.zip ...
- 第142天：Size Marks下载安装和使用方法
Size Marks下载安装使用方法 一.下载安装 1.下载Size marks:链接: https://pan.baidu.com/s/1breyMf1 密码: fjsn 2. 复制 Size Ma ...
- 51nod 1799 二分答案(分块打表)
首先题目等价于求出满足运行二分程序后最后r=k的排列种数. 显然对于这样的二分程序,起作用的只有mid点,mid处的值决定了接下来要递归的子区间. 于是可以一遍二分求出有多少个mid点处的值<= ...
- Simple上网导航--静态版
现在的网址导航显然是一个针对小白用户的网页大全,新闻.笑话.视频.黄段子要什么有什么,一个网址导航竟然也要滑动好多页.其实80%的功能我都用不到,但是它们却时刻展现在我的眼前.所以我决定做一个简洁清晰 ...
- js复选框插件
<div class="selectList selectQgClass" id="selectQgClass"> <div class=&q ...
- 【BZOJ3625/CF438E】小朋友和二叉树（多项式求逆，多项式开方）
[BZOJ3625/CF438E]小朋友和二叉树(多项式求逆,多项式开方) 题面 BZOJ CodeForces 大致题意: 对于每个数出现的次数对应的多项式\(A(x)\) 求\[f(x)=\fra ...