一、后台项目隔行换色需要的技术部分
- 新标签的学习
<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(){
//获取表格
var tblEle = document.getElementById("tbl");
var len = tblEle.tBodies[0].rows.length;
for(var i =0;i<len;i++){
if(i%2 == 0){
tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
}
else{
tblEle.tBodies[0].rows[i].style.backgroundColor="yellow";
}
}
}
</script>
TIPS：
tBodies[0]：表示第一个tbody部分，也就是一个表，如果有两个tbody则需要写tBodies[1]……另外注意行一定要写rows，如rows.length和rows[i]。标题头部用thead包裹，表部分用tBody部分包裹。
四、 实现一个表格高亮显示技术需求
- 事件
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>
在每一行进行函数的书写例如：
<tr οnmοuseοver="changeColor('tr1','over')" id="tr1" οnmοuseοut="changeColor('tr1','out')">
六、 常用事件的回顾
onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适。
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress：搜索引擎使用较多
onload：页面加载事件，所有的其它操作(匿名方式)都可以放到这个绑定的函数里面去。如果是有名称，那么在html页面中只能写一个。
onmouseover/onmouseout/onmousemove：购物网站商品详情页。
onsubmit：表单提交事件 ，有返回值，控制表单是否提交。
onchange:当用户改变内容的时候使用这个事件(二级联动)
七、 后台进行全选和全不选操作技术需求
确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面
获取编号前面的复选框的状态(是否选中)
获取复选框：var checkAllEle = document.getElementById(“id”)
获取复选框的状态：checkAllEle.checked ？
获取下面所有的复选框：
document.getElementsByName(“name”);
八、 后台进行全选和全不选的步骤分析
第一步：确定事件(onclick)并为其绑定一个函数
第二步：书写函数(获取编号前面的复选框，获取其状态)
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框，并将其状态置为选中)
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中)
九、 代码实践
function checkALL(){
var checkallEle = document.getElementById("checkall");
if( checkallEle.checked ==true){
var checkOnes = document.getElementsByName("checkOne");
for(var i = 0;i<checkOnes.length;i++){
checkOnes[i].checked = true;
}
}else{
var checkOnes = document.getElementsByName("checkOne");
for(var i =0 ;i<checkOnes.length;i++){
checkOnes[i].checked = false;
}
}
}
在全选对勾上面进行标注：<th><input type="checkbox" onclick="checkALL()" id="checkall"/></th>
在每个格子上面进行选择：<td><input type="checkbox" name="checkOne"/></td>
Tips:
1.记得var checkOnes为一个对象数组，后面将他们选中应当进行遍历。
2.getElementsByName()的返回值是一个对象。
十、 JavaScript的DOM操作
Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.
十一、 Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
后面两个方法获取之后需要遍历！
以下两个方法很重要，但是在手册中查不到！
创建文本节点：document.createTextNode()
创建元素节点：document.createElement()
十二、 Element元素
我们所认知的html页面中所有的标签都是element元素。
element.appendChild()
向元素添加新的子节点，作为最后一个子节点。
element.firstChild()
返回元素的首个子节点。
element.getAttribute()
返回元素节点的指定属性值。
element.innerHTML()
设置或返回元素的内容。 =赋值，若无则获取
element.insertBefore()
在指定的已有的子节点之前插入新节点。
element.lastChild()
返回元素的最后一个子元素。
element.setAttribute()
把指定属性设置或更改为指定值。
element.removeChild()
从元素中移除子节点。
element.replaceChild()
替换元素中的子节点。
十三、 Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute
十四、 添加省市二级城市的一个小DEMO
<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);//<li>深圳</li>
/5.将li添加到ul中去
ulEle.appendChild(liEle);
}
}
</script>
<body>
<input type="button" value="添加城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
十五、 完成省市二级联动技术分析
事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建？)
获取用户选择的省份(使用方法传参的方式：this.value)
遍历数组(获取省份与用户选择的省份比较，如果相同了，继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作
createTextNode()
createElement()
appendChild()
十六、 完成省市二级联动的步骤
第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。
十七、 代码实践
var Cities = new Array(3);
var Cities = new Array(3);
Cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
Cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
Cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
Cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
function selectCity(val){
//获取第二个下拉列表的option内容
var cityEle = document.getElementById("city");
//清空列表列表内容
cityEle.options.length =0;
for(var i =0;i<Cities.length;i++){
if(val == i){
for( var j = 0;j<Cities[i].length;j++){
//创建城市的文本节点
var textNode = document.createTextNode(Cities[i][j]);
//创建option元素节点
var opEle = document.createElement("option");
//将城市的文本节点添加到option元素节点
opEle.appendChild(textNode);
//将option元素节点添加到第二个下拉列表中去
cityEle.appendChild(opEle);
}
}
}
籍贯
<select onchange="selectCity(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>
</div>
十八、 JavaScript内置对象
包含JS Array、JS Boolean、JS Date、 JS Math、JS Number、JS String、JS RegExp
Array对象
Array对象用于在单个的变量中存储多个值。
创建Array对象用于在单个的变量中存储多个值。
创建对象的语法：
new Array();
new Array(size);
new Array(element0,element1,…elementn);
数组的特点：
长度可变！数组的长度=最大角标+1
方法如拼接等，concat()，和插入join()等
Boolean对象
创建Boolean对象的语法：
new Boolean(value) //构造函数
Boolean(value); //转换函数
如果不写value，那么默认创建结果为false；
Date对象
getTime()
返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题
time = new Date().gettime（）；
Math和number对象
取绝对值，ValueOf()，与java中一模一样
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>
RegExp对象
正则表达式对象
test
检索字符串中指定的值。返回 true 或 false。
全局函数
全局属性和函数可用于所有内建的 JavaScript 对象
关于编码和解码的一组方法：
<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>
