Javascript示例
------- android培训、java培训、期待与您交流！ ----------
1.1 Tip：DOM编程：
1． 定义界面：
通过html的标签将数据进行封装
2． 定义一些静态的样式：
通过css
3． 需要动态的完成和用户的交互
A 先明确事件源
B 明确事件将时间注册到事件源上
C 通过javascript的函数对事件进行处理
D 在处理过程中要明确被处理的区域。（DOM节点）
// JavaScript Document
var doc = document;
function byId(id){
return doc.getElementById(id);
}
function byTag(tagName){
return doc.getElementsByTagName(tagName);
}
function byName(name){
return doc.getElementsByName(name);
}
1.1 Tip：tab标签示例（创建，删除）
需求：
在页面上通过按钮创建一个表格。并可以通过按钮删除指定的行或列
思路：
1. 创建一个table节点，document.createElement(“table);
2. 通过table节点的insetRow（）方法创建表格的行对象添加到rows集合中
3. 通过对象的insertCell方法创建单元格对象，并添加到cells集合中
4. 给单元格添加数据
A 创建一个节点，如文本节点document.createTextNode(文本内容”);
通过单元格对象appendChild方法将文本节点添加到单元格的尾部
B 可以通过单元格的innerHTML添加单元格中的元素
5、 建立好表格节点，添加到DOM树中。
6、 删除行或列
A删除行：获取表格对象，通过对象中的deleteRow方法，将指定的行索引传入方法中
B删除列：表格没有直接删除列的方法，通过遍历每一行，然后通过deleteCell方法删除每行的指定列完成删除列的动作。
<title>表格</title>
<link rel="stylesheet" href="tabcss.css" />
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function createTab(){
var tabNode = doc.createElement("table");
//tabNode.id = "tabid";
tabNode.setAttribute("id","tabid");
var row = byName("rownum")[0].value;
var col = byName("colnum")[0].value;
for(var x=1; x<=row; x++){
var trNode = tabNode.insertRow();
for(var y=1;y<=col;y++)
{
var tdNode = trNode.insertCell();
//tdNode.insertText= x+"-----"+y;
tdNode.innerText = x+"......"+y;
}
//tdNode.insertHTML = "<input type='button' value='按钮'/>";
byTag("div")[0].appendChild(tabNode);
event.srcElement.disabled=true;
}
}
function delRow(){
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return ;
}
var rownum = byName("delRow")[0].value;
if(rownum>0 && rownum<=tabNode.rows.length)
tabNode.deleteRow(rownum-1);
else
alert("删除的行不存在");
}
function delCol(){
var tabNode = byId("tabid");
if(tabNode == null)
{
alert("表格不存在");
return ;
}
var colnum = byName("delcol")[0].value;
if(colnum >0 && colnum<=tabNode.rows[0].cells.length)
{
for(var x=0; x<tabNode.rows.length; x++)
{
tabNode.rows[x].deleteCell(colnum-1);
}
}
else
alert("删除的列不存在");
}
</script>
</head>
<body>
行<input type="text" name="rownum" /><br/>
列<input type="text" name="colnum" /><br/>
<input type="button" value="创建表格" onclick="createTab()" /><br />
<input type="text" name="delrow" />
<input type="button" value="删除行" onclick="delRow()"/><br />
<input type="text" name="delcol" />
<input type="button" value="删除列" onclick="delCol()"/>
<div>
</div>
</body>
</html>
1.2 Tip：表格的行颜色的间隔显示，并在鼠标行上高亮显示
思路：
1． 获取所有的行对象，将需要间隔颜色显示的行对象进行动态的className属性的指定，那么前提是：先定义好类选择器。
2． 为了完成高亮，需要用到两个事件：onmouseover（鼠标进入）onmouseout（鼠标移出）。
3． 为了方便可以在遍历对象时，将每一个行对象都进行两个属性的指定，并通过匿名函数完成该事件的处理。
4． 高亮的原理就是将鼠标进入时的指定颜色改变，改变前先记录住原先行对象的样式
5． 该样式需要在页面加载完成直接显示，所以使用的window.onload事件完成
<title>高亮显示</title>
</head>
<link rel="stylesheet" href="tab.css" />
<style type="text/css">
.one{
background-color:#096
}
.two{
background-color:#C9C
}
.over{
background-color:#F00
}
</style>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
//行颜色间隔显示
function highcolor(){
var tabNode = byTag("table")[0];
var trs = tabNode.rows;
for(var x = 1; x<trs.length; x++)
{
if(x%2==1)
trs[x].className = "one";
else
trs[x].className = "two";
trs[x].onmouseover = function(){
name = this.className ;
this.className = "over";
};
trs[x].onmouseout = function(){
this.className = name;
}
}
}
var name;
function over(trNode){
name = trNode.className;
trNode.className= "over";
}
function out(trNode){
trNode.className = name;
}
window.onload = highcolor;
</script>
<body>
<table>
<tbody>
<tr>
<td>姓名</td>
<td><a href="javascript:void(0)" onclick="sorttab()">年龄</a></td>
<td>地址</td>
</tr>
<tr>
<td>张飞</td>
<td>21</td>
<td>北京</td>
</tr>
<tr>
<td>李斯特</td>
<td>23</td>
<td>上海</td>
</tr>
<tr>
<td>舒曼</td>
<td>35</td>
<td>南京</td>
</tr>
<tr>
<td>肖邦</td>
<td>22</td>
<td>波兰</td>
</tr>
<tr>
<td>李云迪</td>
<td>26</td>
<td>香港</td>
</tr>
</tbody>
</table>
</body>
</html>
1.3 Tip：完成一个与css手册中一样的示例
通过下拉菜单的选择显示指定样式属性的使用效果。
<title>通过下拉菜单选择样式</title>
</head>
<style type="text/css">
#cssid{
height:80px;
width:300px;
background:#FC0
}
#textid{
background-color:#999
width:300px;
}
</style>
<script type="text/javascript" src="doctool.js"></script>
<script type="text/javascript">
function change(){
var selNode = byId("selid");
var value = selNode.options[selNode.selectedIndex].value;
//alert(value);
var divNode1 = byId("cssid");
var divNode2 = byId("textid");
divNode1.style.textTransform = value;
divNode2.innerText = "text-transform : "+value+";";
}
</script>
<body>
<div id="cssid">
Good good study,day day up!
</div>
<p></p>
<div >
<select id="selid" onchange="change()">
<option value="none">---text-transform--</option>
<option value="capitalize">首字母大写</option>
<option value="uppercase">所有字母大写</option>
<option value="lowercase">所有字母小写</option>
</select>
</div>
<p></p>
<div id="textid">
text--transform:none;
</div>
</body>
</html>
1.4 Tip：用户注册表单
1.定义页面
通过表格来格式化表单。
表单都有自己的背景颜色
将单元格的数据通过div进行封装，以便操作
2.定义样式
表格的样式
div的样式
3.动态效果
3.1在页面加载时，给所有的输入框定义默认的框线颜色以及获取焦点时的框线颜色
3.2进行内容校验，可以通过正则表达式完成，并通过框线的样式给用户提示
<title>注册表单 </title>
<style type="text/css">
table{
border:#0C6 1px solid;
width:600px;
border-collapse:collapse;
}
table th,table td{ border:#0F0 1px solid;}
table td{ background-color:#FF9; }
table th{ background-color:#F93; }
#repswspan{ margin-left:120px; }
.errorinfo{ color:#F00;display:none; }
.focus{ border:#06F 2px solid; }
.norm{ border:#999 1px solid; }
.error{ border:#F00 2px solid; }
</style>
<script type="text/javascript">
function inputColor(input)
{
input.className = "norm";
input.onfocus = function(){
this.className = "focus";
}
}
window.onload = function(){
with(document.forms[0])
{
inputColor(user);
inputColor(psw);
inputColor(repsw);
inputColor(mail);
}
}
function checkUserDemo(userNode){
var value = userNode.value;
var regex = /^\w{6,12}$/;
var divNode = document.getElementById("userdiv");
if(regex.test(value))
{
userNode.className = "norm";
divNode.style.display="none";
}
else
{
userNode.className = "error";
divNode.style.display="block";
}
}
function check(inputNode,regex,divId){
var flag = false;
var divNode = document.getElementById(divId);
if(regex.test(inputNode.value))
{
inputNode.className = "norm";
divNode.style.display="none";
flag = true;
}
else
{
inputNode.className ="error";
divNode.style.display = "block";
}
return flag;
}
//校验用户名
function checkUser(userNode)
{
var regex = /^\w{6,12}$/
return check(userNode,regex,"userdiv");
}
function checkPsw(pswNode){
var flag =false;
var regex = /^[a-z0-9]{6,12}$/i;
return check(pswNode,regex,"pswdiv");
}
function checkRepsw(repswNode){
var value1 = repswNode.value;
var value2 = document.getElementsByName("psw")[0].value;
var divNode = document.getElementById("repswdiv");
if(value1 == value2)
{
repswNode.className = "norm";
divNode.style.display="none";
flag = true
}
else
{
repswNode.className ="error";
divNode.style.display = "block";
}
return flag;
}
function checkMail(mailNode)
{
var regex = /^\w+@\w+(\.\w+)+$/;
return check(mailNode,regex,"maildiv");
}
//校验表单
/*function checkForm(formNode)
{
//var form = document.forms[0];
alert(".........");
alert(form.user.value);
with(formNode){
if(checkUser(user) && checkPsw(psw) && checkRepsw(repsw) && checkMail(mail))
event.returnValue = true;
else
event.returnValue = false;
}
}*/
function checkForm(){
alert("....");
/*var form = doc.forms[0];
if(checkUser(from.user)&&checkPsw(form.psw) && checkMail(form.mail) && checkRepsw(form.repsw))
event.returnValue =true;
else
event.returnValue = false;*/
//return false;
}
</script>
</head>
<body>
<form onsubmit="checkForm()">
<table>
<tr>
<th>用户注册</th>
</tr>
<tr>
<td>
<div>用户名</div>
<div><input type="text" name="user" onblur="checkUser(this)"/></div>
<div class="errorinfo" id="userdiv">用户名错误，请按要求重写。</div>
<div>用户名必须是6-12位，由字母（a-z），数字（0-9），下划线（-）组成</div>
</td>
</tr>
<tr>
<td>
<div><span>密码</span><span id="repswspan"> 确认密码</span> </div>
<div>
<input type="passwrod" name="psw"/ onblur="checkPsw(this)">
<input type="password" name="repsw"/ onblur="checkRepsw(this)">
</div>
<div class="errorinfo" id="pswdiv">密码格式错误，请按要求重新填写。</div>
<div class="errorinfo" id="repswdiv">两次密码输入不一致</div>
<div>密码必须是6-12位，由字母（a-z），数字（0-9）组成</div>
</td>
</tr>
<tr>
<td>
<div>邮箱</div>
<div><input type="text" name="mail" onblur="checkMail(this)"/></div>
<div class="errorinfo" id="maildiv">邮箱错误，请按要求填写</div>
</td>
</tr>
<tr>
<th><input type="button" value="提交数据" /></th>
</tr>
</table>
</form>
</body>
</html>
1.5 Tip：模拟收件箱表单
功能：全选，反选，删除，高亮显示
<title>收件箱</title>
<style type="text/css">
table{
border:#3CC 3px solid ;
width:%50;
}
table td,table th{
border:#39C 1px solid;
}
.one{
background-color:#0FF
}
.two{ background-color:#9F9
}
.over{ background-color:#FF0}
</style>
<script type="text/javascript">
//行颜色间隔显示并高亮
var name;
function trColor()
{
var tabNode = document.getElementsByTagName("table")[0];
var trs = tabNode.rows;
for(var x=0; x<trs.length-1;x++){
if(x%2==1)
trs[x].className="ond";
else
trs[x].className="two";
trs[x].onmouseover = function(){
name = this.className;
this.className = "over";
};
trs[x].onmouseout = function(){
this.className = name;
}
}
}
window.onload = function(){
trColor();
}
//完成全选功能
function checkAll(index){
var allNode = document.getElementsByName("all")[index];
var mails = document.getElementsByName("mail");
for(var x=0; x<mails.length;x++){
mails[x].checked = allNode.checked;
}
}
function checkByBut(num){
var mails = document.getElementsByName("mail");
for(var x=0; x<mails.length;x++){
if(num >1){
mails[x].checked = !mails[x].checked;
}
else
mails[x].checked = num;
}
}
//删除所选邮件,注意删除时长度在变化
function deleteMail(){
if(!window.confirm("是否要删除所选邮件？"))
return;
var mails = document.getElementsByName("mail");
var arr = new Array();
var pos =0;
for(var x=0; x<mails.length;x++)
{
if(mails[x].checked)
{
//将所要删除的特定行的父节点的父节点封装成对象存入集合
var trNode = mails[x].parentNode.parentNode;
arr[pos++] = trNode;
}
}
for(var x=0; x<=arr.length; x++)
{
var trNode = arr[x];
trNode.parentNode.removeChild(trNode);
}
trColor();
}
</script>
</head>
<body>
<table>
<tr >
<th> <input type="checkbox" name="all" onclick="checkAll(0)"/>全选</th>
<th>发件人</th>
<th>邮件名称</th>
</tr>
<tr>
<th> <input type="checkbox" name ="mail" /></th>
<th> 篮球1</th>
<th> 新邮件</th>
</tr>
<tr>
<th> <input type="checkbox" name ="mail" /></th>
<th> 篮球2</th>
<th> 新的邮件</th>
</tr>
<tr>
<th> <input type="checkbox" name ="mail" /></th>
<th> 篮球3</th>
<th> 新的邮件</th>
</tr>
<tr>
<th> <input type="checkbox" name ="mail" /></th>
<th> 篮球4</th>
<th> 新的邮件</th>
</tr>
<tr>
<th> <input type="checkbox" name ="mail" /></th>
<th> 篮球5</th>
<th> 新的邮件</th>
</tr>
<tr>
<th> <input type="checkbox" name ="mail" /></th>
<th> 篮球6</th>
<th> 新的邮件</th>
</tr>
<tr>
<th> <input type="checkbox" name ="all" onclick="checkAll(1)" />全选</th>
<th colspan="2">
<input type="button" value="全选" onclick="checkByBut(1)"/>
<input type="button" value="取消全选" onclick="checkByBut(0)"/>
<input type="button" value="反选" onclick="checkByBut(2)"/>
<input type="button" value="删除所选邮件" onclick="deleteMail()"/>
</th>
</tr>
</table>
</body>
</html>
