js02
一、<thead></thead>，<tbody></tbody>：为了使表头和表格内容分开设置样式
1、tbody里边有一个rows.length，获取行数的知识点
2、<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>只需将上述的th换为td即可
以一个案例说明如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格隔行换色</title>
<script>
window.onload = function(){
//1.获取表格
var tblEle = document.getElementById("tbl");
//2.获取表格中tbody里面的行数(长度)
var len = tblEle.tBodies[0].rows.length;
//这里的.tBodies[0]说明可以有多个tbody，这里只取第一个
//3.对tbody里面的行进行遍历
for(var i=0;i<len;i++){
if(i%2==0){
//4.对偶数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}else{
//5.对奇数行设置背景颜色
tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
}
}
}
</script> </head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>
二、js常见的内置对象
javascript内置对象
1、Array对象
数组的创建：
数组的特点：长度可变！数组的长度=最大角标+1
2、Boolean对象
对象创建：
如果value 不写，那么默认创建的结果为false
3、Date对象
getTime()；返回 1970 年 1 月 1 日至今的毫秒数。解决浏览器缓存问题。
4、Math和number对象
与java里面的基本一致。
5、String对象
match()：找到一个或多个正则表达式的匹配。
substr()：从起始索引号提取字符串中指定数目的字符。
substring()：提取字符串中两个指定的索引号之间的字符。
例子：
<script>
var str = "-a-b-c-d-e-f-";
var str1 = str.substr(2,4);//-b-c
//alert(str1);
var str2 = str.substring(2,4);//-b
alert(str2);
</script>
6、 RegExp对象：正则表达式对象方法：test；比如：正则.test(字符串)；检索字符串中指定的值。返回 true 或 false。
三、js全局函数（可直接使用，不同于内置对象：使用方法之前要先创建对象）
以代码来介绍几个全局函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全局函数</title>
<script>
var str = "张三";
alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89 alert(decodeURI(encodeURI(str)));//张三
alert(decodeURIComponent(encodeURIComponent(str)));//张三 var str1 = "http://www.itheima.cn";
alert(encodeURI(str1));//http://www.itheima.cn
alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn var str2 = "alert('abc')";
alert(str2);
eval(str2); </script>
</head>
<body>
</body>
</html>
四、js常见案例
1、案例一：使用js完成省市二级联动的效果
首先，技术分析：
确定事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建？)
获取用户选择的省份(使用方法传参的方式：this.value)
遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下 所有的城市)
创建文本节点和元素节点并进行添加操作
createTextNode()
createElement()
appendChild()
其次，步骤分析：
第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面重新布局</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
} #clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#bottom{
text-align: center;
}
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
background: url(../img/regist_bg.jpg);
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
} </style> <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内容（清空上一次选择省份添加进去的optioncity内容）
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 opEle = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script> </head>
<body>
<div> <!--1.logo部分的div-->
<div>
<!--切分为3个小的div-->
<div class="top">
<img src="../img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="../img/header.png" height="47px"/>
</div>
<div class="top" style="padding-top: 15px;height: 35px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div id="clear"> </div>
<!--2.导航栏部分的div-->
<div id="menu">
<ul>
<li >首页</li>
<li >电脑办公</li>
<li >手机数码</li>
<li >孕婴保健</li>
<li >鞋靴箱包</li>
</ul>
</div>
<!--3.中间注册表单部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td> </tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位！')" onblur="check('password','密码不能为空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<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>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>
<!--4.广告图片的div-->
<div id="">
<img src="../img/footer.jpg" width="99%" />
</div>
<!--5.超链接与版权信息的div-->
<div id="bottom">
<a href="#">关于我们 </a>
<a href="#">联系我们 </a>
<a href="#">招贤纳士 </a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式 </a>
<a href="#">服务声明 </a>
<a href="#">广告声明 </a>
<p>Copyright 2005-2016 传智商城 版权所有 </p>
</div>
</div>
</body>
</html>
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 opEle = document.createElement("option");
//6.将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//8.将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
</script>
（具体部分）js代码
<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>
（具体部分）HTML代码
js02的更多相关文章
- Vue.js-02：第二章 - 常见的指令的使用
一.前言 在上一章中,我们了解了一些在使用 Vue 进行开发中经常会遇到的基础概念,与传统的前端开发不同,Vue 可以使我们不必再使用 JavaScript 去操作 DOM 元素(还是可以用,但是极度 ...
- Vue.js02：数据绑定v-model用法
<!-- v-model 实现数据的双向绑定 --> <!-- v-model 只能用在表单元素中 --> 示例: <!DOCTYPE html> <!-- ...
- 前端---js02
主要内容 1.数组 2.字符串 3.Date日期对象 4.内置对象 5.定时器 6.DOM 7.伪数组 内置对象: 1 数组(列表) Array (1) 数组的创建 <script>//字 ...
- d3.js--02（data和datum原理）
原文链接: http://d3.decembercafe.org/pages/lessons/3.html 解析一下data和datum原理: datum():绑定一个数据到选择集上 data():绑 ...
- js02 变量数据类型
变量 JavaScript 是一种弱类型的脚本语言 var c = 3:即变量的声明(变量使用之前必须加var声明,编程规范) 变量的命名规则! 1.变量命名必须以字母或是下标符号”_”或者”$”为开 ...
- JS-02 一元运算符理解
<script> var i=1; j=i++ + i++; console.log(j); //结果是3 console.log(i); //结果是3 </script> 代 ...
- Ext js-02 -官方API文档使用
官方API文档地址: http://docs.sencha.com/extjs/6.5.3/classic/Ext.html 打开网页如下: 1.选择所使用的Ext js版本,后面offline do ...
- 【JavaScript】js02
正则对象. 声明: //var reg = new RegExp('', '');// i,g 修正符. // i,不区分大小写,g 全局匹配. //var reg = /\w/i; 方法: //ex ...
- node.js02 安装Node环境
安装Node环境 在node.js01中我大概了解了什么是node.js,这次进入起步阶段,首先要安装下Node环境. 开始安装 查看当前Node环境的版本号 win+r输入cmd进入命令行,输入no ...
随机推荐
- Eureka讲解与应用
Eureka[juˈriːkə] 简介 Eureka是Netflix服务发现的服务端与客户端,Eureka提供服务注册以及服务发现的能力,当是Eureka Server时(注册中心),所有的客户端会向 ...
- 手写Spring MVC框架（一） 实现简易版mvc框架
前言 前面几篇文章中,我们讲解了Spring MVC执⾏的⼤致原理及关键组件的源码解析,今天,我们来模仿它⼿写⾃⼰的mvc框架. 先梳理一下需要实现的功能点: tomcat加载配置文件web.xml: ...
- 手写一个最简单的IOC容器，从而了解spring的核心原理
从事开发工作多年,spring源码没有特意去看过.但是相关技术原理倒是背了不少,毕竟面试的那关还是得过啊! 正所谓面试造火箭,工作拧螺丝.下面实现一个最简单的ioc容器,供大家参考. 1.最终结果 2 ...
- opencv——机器视觉检测和计数
引言 在机器视觉中,有时需要对产品进行检测和计数.其难点无非是对于产品的图像分割. 由于之前网购的维生素片,有时候忘了今天有没有吃过,就想对瓶子里的药片计数...在学习opencv以后,希望实现对于维 ...
- QFNU 10-02 19 training
B - Yet Another Crosses Problem 题意:找如果使图中某一行某一列全部变成黑色,至少需要把多少个白方格变成黑方格 思路:直接找就可以,注意存储的时候要记得进行分开存储,存储 ...
- [刷题] PTA 7-32 说反话-加强版
题目描述: 给定一个英语句子,各个单词之间用空格分隔.要求编写程序,将所有单词倒序输出 输入示例: Hello World Here I Come 输出示例: Come I Here World He ...
- 惊奇发现KEIL也可以C++编译了
在Github上面浏览下载的一个工程,可以用KEIL打开,但是我竟然找不到mian函数.找了一圈发现是用到了面向对象的编程方法,那就必须支持C++,他怎么实现的呢? 看配置工程:明显的一个不一样 -- ...
- Centos7.4 file '/grub/i386-pc/normal.mod' not found,实际为/boot下所有文件丢失
注:如果服务器特别重要,此方案慎用.如果没有其他方案解决,可以使用该方案 事件:搭建在云计算管理平台CAS上的 Centos7.4 虚拟机在一次断电后,启动虚拟机出现file '/grub/i386- ...
- session.flush()与session.clear()区别与使用环境
session是有一级缓存的,目的是为了减少查询数据库的时间,提高效率,生命周期与session是一样的 session.flush() 是将session的缓存中的数据与数据库同步 事物提交失败 缓 ...
- JDK5.0新特性1
目录 静态导入 自动装箱/拆箱 for-each循环 可变参数 枚举 JDK 5.0 新特性简介 JDK 5.0 的一个重要主题就是通过新增一些特性来简化开发,这些特性包括: 静态导入 自动装箱/拆箱 ...