吴鹏
--------------------------------------------------------------
高级:
document.getElementById("").innerHTML = "HTML的代码";
document.write("");
onfocus :获得焦点
onblur :失去焦点;
onsubmit :提交的时候
步骤一 船舰一个html文档;
步骤二 在要去检验的文本框创建一个事件;
步骤三 创建一个获得焦点时要触发的函数;
步骤四 写入获得焦点时要显示的内容;
---------------------------------------------------------------
使用JS完成表单的提示和校验:
一,确定触发事件;
二,确认触发事件时要执行的函数(方法);
三,获取要执行操作的元素;
四,对元素进行操作;
本题目的是当鼠标移动到文本框点击后,在文本框后面显示提示语句;
使用到的:document.getElementById().innerHTML = "";
onfocus = ;
1 在文本框所在便签内定义id,为了后面函数可以通过方法获取文本框对象;
2 在文本框所在标签内定义事件onfocus="函数名("id值",提示内容)"(焦点事件,当鼠标对这个标签的元素进行点击等取得焦点后,
执行后面的函数,使用传参,将具体的id值和内容传进函数);
3 文本框所在<td>标签后定义一个<span id = "文本框id值Span"></span>,这个标签是在文本框所在同一行后面可以添加内容,
id值是后面可以将校验提示通过这个id值来进行赋值;
4 在<head></head>内部使用标签<script></script>,写入事件触发后要执行的函数体,函数体要实现扁担的提示和校验功能;
5 语句:
function 函数名() {
通过document.getElementById().innerHTML = "",方法,将提示内容以及要显示的标签的id值传进去;
}
-------------------------------------------------------------
使用JS实现表格隔行换色:
本题要将表格的行数作为数组对象存进数组里,则数组的索引值就代表了表格的行数,
使用的方法:tab1 = document.getElementById("表格的id值");获取表格对象
for方法遍历tab1对象,获取每行的索引值;
进行if判断,当索引值能被2整除时(索引值 % 2 == 0),对该行元素 如tab1.rows[i].style.backgroundColor进行颜色的设置;
当索引值不能被2整除时,进行不同颜色的设置;
另外一种办法:是通过<thead></thead><tbody></tbody>进行设置;
将表格的标题头放进<thead></thead>,其余的内容放进<tbody></tbody>里;
通过document.getElementById().thead.style.backgroundColor = 设置表格的标题颜色;
通过len = document.getElementById().tbodies[0].rows.length,获取表格内容每行的个数;
遍历document.getElementById().tbodies[0],
判断索引值是否能被2整除,分别对其的背景颜色进行设置(通过tab1.tbodies[0].rows[i].style.backgroundColor);
---------------------------------------------------------------
使用JS完成复选框的全选和全不选:
通过getElementsByName(),获取所有同名(要先在标签里用name取相同的名字)的元素集合;
因要求复选框,所以<input type = "checkbox" />;
标题上的复选框:<input type="checkbox" name="selectAll" id="checkAll()" />;
表格体上的复选框统一为:<input type="checkbox" name="ids" />
以上,标题的语句,输入类型为复选框,id为checkAll()(通过id值获取元素),触发事件为点击,触发的函数为checkAll(),通过定义一个
checkAll()函数,在函数内实现复选框的全选和全不选;
表格体上的复选框,输入类型为复选框,name取值为统一的ids,可以通过getElementsByName(),获取全部的复选框,进行操作;
函数:
function checkAll() {
var select = document.getElementById("checkAll()");
//获取标题头的复选框对象;
var ids = document.getElementsByName("ids");
//获取所有需要操作的复选框;
if (select.checked == true) {
//对select的值进行判断;
for (var i = 0; i < ids.length;i++) {
ids[i].checked = true;
}
//主复选框值为true时(勾选),将所有的复选框设置为true;
}else {
for (var i = 0; i < ids.length;i++) {
ids[i].checked = false;
}
//主复选框值为false时(勾选),将所有的复选框设置为false;
}
}
}
注意:上面的数组的值用checked,不是value
------------------------------------------------------------------
用JS完成省市联动:
onchange:此为打开下来菜单时触发事件;
使用二维数组存放省市的数据,比如:
假设有5个省,先定义一个数组var arrs = new Array(5),用来存放具体的每个省,
具体的省份在表单中的option标签里用value定义好(当前有5个省,则value的值为0-4,对应省数组的索引值);
在arrs[0]中,再用数组的方式存放当前省份的市;
在表单中,省的<select id="province"></select>
市的<select id="city"></select>;
省的<option value= " "></option>存放具体不同的省份,不同的省用不同的value值;
定义函数:
function pToC(value) {
//此函数传入一个value值,用来和省的数组的索引值对比,将对比后的市值赋值给city;
var city = document.getElementById("city");
//获取city对象,此时city里面还没有值;
for (var i = city.length;i >0;i++) {
city[i] = null;
//将city的值清空,这样在每次选择其它省份时,不会将其它省份的市的值写进去;
}
var arrs = new Array();//定义省的数组
arrs[0] = {"xx市","xx市",...}
.
.
.
//将所有省数组元素里添加各自的省份;
//遍历省数组,判断省数组的value值,将索引值与赋值给city对象;
for(var i =0;i < arrs.length;i++) {
if(value == i) {
//判断省的value的值与数组中索引的值是否相等;
for(var j=0; j<arrs[i].length;j++){
//当上面判断为true时,遍历对应索引值的市数组;创建option元素,创建对应的城市的文本对象;
var opt = document.createElement("option");
var text = document.createTextNode(arrs[i][j]);
//将对应的元素添加进city数组里;
opt.appendChild(text);
city.appendChild(opt);
}
}
}
}
|
