《javascript从入门到精通》第二篇 javascript核心技术

时间：2021-08-15 14:31:10

第九章 事件处理

javascript是基于对象的语言，它的一个最基本的特征是采用事件驱动(event-driven)，通常鼠标或热键的动作称之为事件(event)，有鼠标或热键引发的一连串程序动作称之为事件驱动(event driven)，对事件进行处理的程序与函数称之为事件处理程序(event handler)。

第十章 处理文档（document对象）

10.3.1 改变链接文字的颜色

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>链接文字颜色设置</title>
</head>
<body>
<font size="10pt"  face="隶书"><a id="a1" href="#">xxx</a></font>
<script language="JavaScript">
document.vlinkColor ="#00CCFF" ;
document.linkColor="green";
document.alinkColor="000000";
</script>
</body>
</html>
10.3.2 改变文档文字颜色与背景色 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>背景颜色和字体颜色自动变色</title>
</head>
<body>
背景自动变色
<script language="javascript">
var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","#00FFFF","#FFFF00","#FFCC00","#FF00FF");
var n=0;
function turncolors(){
n++;
if (n==(Arraycolor.length-1)) n=0;
document.bgColor = Arraycolor[n];
document.fgColor=Arraycolor[n-1];
setTimeout("turncolors()",1000);
}
turncolors();
</script>
</body>
</html>


10.3.7在文档中输出数据

document.write(text);

document.writeln(text);   

writeln()与write()不同之处是：writeln有换行符，换行符只有在<pre></pre>中才生效

<html>
<head>
<title>在文档中输出数据</title>
</head>
<body>
<script language="javascript">
<!--
document.write("使用write()方法输出的第一段内容！");
document.write("使用write()方法输出的第二段内容<hr color='#003366'>");
document.writeln("使用writeln()方法输出的第一段内容！");
document.writeln("使用writeln()方法输出的第二段内容<hr color='#003366'>");
-->
</script>
<pre>
<script language="javascript">
<!--
document.writeln("在pre标记内使用writeln()方法输出的第一段内容！");
document.writeln("在pre标记内使用writeln()方法输出的第二段内容");
-->
</script>
</pre>
</body>
</html>


10.3.8 打开新窗口并输出内容

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>打开新窗口并输出内容</title>
<script language="javascript">
<!--
function oc()
{
var dw;
dw=window.open();
dw.document.open();
dw.document.write("<html><head><title>一个新的窗口</title>");
dw.document.write("<script languange='JavaScript'>");
dw.document.write("function woc() {document.write('侃侃'); }  ");
dw.document.write("</script></head>");
dw.document.write("<body>");
dw.document.write("<img name='i1' src='1.jpg' > <br>")
dw.document.write("这里是写入的新内容<br>");
dw.document.write("</body></html>");
dw.document.close();
}
-->
</script>
</head>
<body>
<input type="button"  value="打开一个新文档" onclick="oc();"/>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术


10.3.9 动态创建一个html标记

sElement=document.createElement(sName)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态添加一个文本框</title>
<script>
<!--
function addText()
{
var txt=document.createElement("input");
txt.type="text";
txt.name="txt";
txt.value="动态添加的文本框";
document.fm1 .appendChild(txt);
}
-->
</script>
</head>
<body>
<form name="fm1">
<input type="button" name="btn1" value="动态添加文本框" onclick="addText();" />
</form>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术

10.3.10获取文本框并修改其内容

sElement=document.getElementById(id)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>获取文本框并修改其内容</title>
</head>
<body>
<script>
<!--
function c1()
{
var t=document.getElementById("txt");
t.value="修改文本内容"
}
-->
</script>
<input type="text" id="txt" value="初始文本内容"/>
<input type="button" value="更改文本内容" name="btn" onclick="c1();" />
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术
第十一章 文档对象模型（DOM对象）

 11.1.1DOM分层

根节点，父节点，子节点，兄弟节点，后代，叶子结点，元素节点，文本节点，属性节点，

11.2.1访问指定节点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>访问指定节点</title>
</head>
<body id="b1">
<h3 >三号标题</h3>
<b>加粗内容</b>
<script language="javascript">
<!--
var by=document.getElementById("b1");
var str;
str="节点名称:"+by.nodeName+"\n";
str+="节点类型:"+by.nodeType+"\n";
str+="节点值:"+by.nodeValue+"\n";
alert(str);    
-->
</script>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术


11.2.2 遍历文档树

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>遍历文档树</title>
</head>

<body >
<h3 id="h1">三号标题</h3>
<b>加粗内容</b>
<form name="frm" action="#" method="get">
节点名称：<input type="text" id="na" /><br />
节点类型：<input type="text" id="ty" /><br />
节点的值：<input type="text" id="va" /><br />
<input type="button" value="父节点" onclick="txt=nodeS(txt,'parent');" />
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,'firstChild');"/>
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,'lastChild');" /><br>
<input name="button" type="button" onclick="txt=nodeS(txt,'previousSibling');" value="前一个兄弟节点" />
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,'nextSibling');" />
<input type="button" value="返回根节点" onclick="txt=document.documentElement;txtUpdate(txt);" />
</form>
<script language="javascript">
<!--
function txtUpdate(txt)
{
window.document.frm.na.value=txt.nodeName;
window.document.frm.ty.value=txt.nodeType;
window.document.frm.va.value=txt.nodeValue;
}

function nodeS(txt,nodeName)
{
switch(nodeName)
{
case "previousSibling":
if(txt.previousSibling)
{
txt=txt.previousSibling;
}else
alert("无兄弟节点");
break;
case "nextSibling":
if(txt.nextSibling)
{
txt=txt.nextSibling;
}else
alert("无兄弟节点");
break;
case "parent":
if(txt.parentNode)
{
txt=txt.parentNode;
}else
alert("无父节点");
break;
case "firstChild":
if(txt.hasChildNodes())
{
txt=txt.firstChild;
}else
alert("无子节点");
break;
case "lastChild":
if(txt.hasChildNodes())
{
txt=txt.lastChild;
}else
alert("无子节点")
break;

}
txtUpdate(txt);
return txt;
}
var txt=document.documentElement;
txtUpdate(txt);
function ar()
{
var n=document.documentElement;
alert(n.length);
}
-->
</script>
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术

11.3节点

1，创建新节点

obj.appendChild(newChild)  ：将新的子节点添加到当前节点的末尾

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>创建新节点</title>
</head>
<body onload="createChild()" >
<script language="javascript">
<!--
function createChild()
{
var b=document.createElement("b");
var txt=document.createTextNode("创建新节点！");
//将节点b添加到页面上
b.appendChild(txt);
document.body.appendChild(b);
}
-->
</script>
</body>
</html>
2，创建多个节点1 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>创建多个节点</title>
</head>
<body onload="dc()">
<script language="javascript">
<!--
function dc()
{
var aText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
for(var i=0;i<aText.length;i++)
{
var ce=document.createElement("p");
var cText=document.createTextNode(aText[i]);
//将新节点添加到页面上
ce.appendChild(cText);
document.body.appendChild(ce);
}

}
-->
</script>
</body>
</html>


《javascript从入门到精通》第二篇 javascript核心技术
3，创建多个节点2

使用appendchild方法，每添加新的节点都会刷新界面，可以使用createDocumentFragment()方法来解决，该方法用来创建文件碎片节点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>创建多个节点2</title>
</head>
<body onload="dc()">
<script language="javascript">
<!--
function dc()
{
var aText=["第一个节点","第二个节点","第三个节点","第四个节点","第五个节点","第六个节点"];
var cdf=document.createDocumentFragment();
for(var i=0;i<aText.length;i++)
{
var ce=document.createElement("b");
var cb=document.createElement("br");
var cText=document.createTextNode(aText[i]);
ce.appendChild(cText);
cdf.appendChild(ce);
cdf.appendChild(cb);
}
document.body.appendChild(cdf);
}
-->
</script>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术
11.3.2插入节点 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>插入节点</title>
<script language="javascript">
<!--
function crNode(str)
{
var newP=document.createElement("p");
var newTxt=document.createTextNode(str);
newP.appendChild(newTxt);
return newP;
}

function insetNode(nodeId,str)
{
var node=document.getElementById(nodeId);
var newNode=crNode(str);
if(node.parentNode)//判断是否拥有父节点
node.parentNode.insertBefore(newNode,node); 
}
-->
</script>
</head>
<body>
<h2 id="h">在上面插入节点</h2>
<form id="frm" name="frm">
输入文本：<input type="text" name="txt" />
<input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" />
</form>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术

11.3.3复制节点

obj.cloneNode(deep)

deep参数是一个boolean值，true表示深度复制，复制其子节点，false表示简单复制，只复制当前节点，不复制子节点。

<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
<title>复制节点</title>   
<script language="javascript"> 
<!--
function AddRow(bl)
{
var sel=document.getElementById("sexType");
    var newSelect=sel.cloneNode(bl);   
var  b=document.createElement("br");
    di.appendChild(newSelect);   
di.appendChild(b);    
}      
-->    
</script>   
</head>   
<body>   
<form>   
<hr>
    <select name="sexType" id="sexType">   
     <option value="%">请选择性别</option>   
     <option value="0">男</option>   
     <option value="1">女</option>   
    </select> 
<hr>
<div id="di"></div>    
 <input type="button" value="复制" onClick="AddRow(false)"/>
 <input type="button" value="深度复制" onClick="AddRow(true)"/>
</form>   
</body>   
</html>
《javascript从入门到精通》第二篇 javascript核心技术

11.3.4删除与替换节点

删除节点：

obj.removeChild(oldChild)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>删除节点</title>
<script language="javascript">
<!--
function delNode()
{
var deleteN=document.getElementById('di');
if(deleteN.hasChildNodes())
{
deleteN.removeChild(deleteN.lastChild);
}
}
-->
</script>
</head>
<body>
<h1>删除和替换节点</h1>
<div id="di">
<p>第一行文本</p>
<p>第二行文本</p>
<p>第三行文本</p>
</div>
<form>
<input type="button" value="删除" onclick="delNode();" />
</form>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术
replaceChild()替换节点

obj.replaceChild(new,old)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>替换节点</title>
<script language="javascript">
<!--
function repN(str,bj)
{
var rep=document.getElementById('b1');
if(rep)
{
var newNode=document.createElement(bj);
newNode.id="b1";
var newText=document.createTextNode(str);
newNode.appendChild(newText);
rep.parentNode.replaceChild(newNode,rep);
}
}
-->
</script>
</head>
<body>
<b id="b1">可以替换文本内容</b>
<br />
输入标记：<input id="bj" type="text" size="15" /><br />
输入文本：<input id="txt" type="text" size="15" /><br />
<input type="button" value="替换" onclick="repN(txt.value,bj.value)" />
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术《javascript从入门到精通》第二篇 javascript核心技术


11.4获取文档中的指定元素

 通过元素的id属性获取元素

document.getElementById("userId");

通过元素的name获取元素

document.ElementByName()


12 windows窗口对象

12.2.1警告对话框

window.alert(str);

<html>
<head>
<title>警告对话框的应用</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body onLoad="al()">
<script language="javascript">
function al(){
window.alert("弹出警告对话框!");
}
</script>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术

12.2.2询问回答对话框

window.confirm(question)

用户单击确定返回true，反击取消返回false

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
var bool = window.confirm("确定要关闭浏览器窗口吗？");
if(bool == true){//如果用户单击了确定按钮
window.close();//关闭窗口
}
</script>
</head>
<body>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术

12.2.3提示对话框

window.prompt(str1,str2)

弹出提示框，提示框中有一个文本框。

<html>
<head>
<title>提示对话框的应用</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script> 
function rdl_doClick(){ 
var oMessage=document.all("oMessage"); 
oMessage.value=window.prompt(oMessage.value,"返回的信息"); 
} 
</script> 
<input id=oMessage type=text size=40 value="请在此输入信息"> 
<br><br> 
<input type=button value=" 显示对话框 " onclick="rdl_doClick();">
<body>
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术《javascript从入门到精通》第二篇 javascript核心技术


12.3.1打开窗口

window.open("new.html","new");

<html>
<head>
<script language="javascript">
<!--
window.open("new.htm","new","height=141,width=693,top=10,left=20");
-->
</script>
</head>
<body>
</body>
</html>

12.3.2关闭窗口

window.close()

close()

this.close()

关闭子窗口时并刷新父窗口

xxx.html

<html>
<head>
<script language="javascript">
</script>
</head>
<body>
<span>
<a href="#" onClick="Javascript:window.open('new.htm','','width=400,height=220')">
xxxx
</a>
</span>
</body>
</html>
new.htm 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<script language="javascript">
function Mycheck()
{
alert("close son page");
window.opener.location.reload();  //刷新父窗口中的网页
window.close();//关闭当前窗窗口
}
</script>
<body>
<input type="submit" name="Submit" value="xxxx" onclick="Mycheck();">
</body>
</html>


第十三章 级联样式表

13.2应用css来控制页面文字样式

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>更改CSS样式样式后的页面效果</title><!--以下为定义的CSS样式-->

<style>
   h2{
    font-family: 黑体;
    color:blue;
  }
</style>
</head>
<body>
   <h2><!--定义样式后页面会自动加载样式-->
    文字1
   </h2>
   <p>
     正文内容1  
   </p>
    <h2>
    文字2
   </h2>
   <p>
     正文内容2
   </p>
    <h2>
    文字3
   </h2>
   <p>
     正文内容3
   </p>
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术


13.5 style对象

每个html对象都有一个style属性，可以使用这个属性来访问css样式属性

改变选中行的背景色

<html>
<head>
<title>选中的行背景变色</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body>
<table width="234" height="77" border="1">
  <tr align="center" id="tr1" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
    <td width="52"> </td>
    <td width="65">商品</td>
    <td width="95">价格（元）</td>
  </tr>
  <tr align="center" id="tr2" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
    <td>A商场</td>
    <td>S商品</td>
    <td>100</td>
  </tr>
  <tr align="center" id="tr3" onMouseOver="over(this.id)" onMouseOut="out(this.id)">
    <td>B商场</td>
    <td>S商品</td>
    <td>80</td>
  </tr>
</table>
<script language="javascript">
function over(trname){
eval(trname).style.backgroundColor="0000FF";
eval(trname).style.color="FFFFFF";
}
function out(trname){
eval(trname).style.backgroundColor="FFFFFF";
eval(trname).style.color="000000";
}
</script>
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术


背景固定居中

在页面背景中添加一张图片，如果图片过小，会在页面中重复显示图片，此处将页面背景固定居中，移动滚动条时，背景图片始终居中。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>背景固定居中</title>
</head>

<body>
<table width="318" height="1081" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td> </td>
  </tr>
</table>
<p>
  <script language="javascript">
document.body.style.backgroundImage="URL(1.jpg)";
document.body.style.backgroundPosition="center";
document.body.style.backgroundRepeat="no-repeat";
document.body.style.backgroundAttachment="fixed";
  </script>
</p>
</body>
</html>
《javascript从入门到精通》第二篇 javascript核心技术


13.6.css选择器

13.6.1 标记选择器

<style>
hi{
font-width:48pt;
font-colr:red;
}
</style>


13.6.2类别选择器

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用类别选择器</title>
<!--以下为定义的CSS样式-->
<style> 
   .one{           
    font-family:宋体; 
font-size:24px; 
    color:red; 
  }
  .two{
    font-family:宋体;
font-size:16px;
    color:red; 
  }
  .three{
    font-family:宋体;
font-size:12px;
    color:red; 
  }
</style>
</head>
<body>
   <h2 class="one"><!--定义样式后页面会自动加载样式-->
    应用了选择器one
   </h2>
   <p>
     正文内容1  
   </p>
    <h2 class="two">
    应用了选择器two
   </h2>
   <p>
     正文内容2
   </p>
    <h2 class="three">
    应用了选择器three
   </h2>
   <p>
     正文内容3
   </p>
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术


在HTML标记中，可以同时使用多个类别选择器

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--以下为定义的CSS样式-->
<style>
  .size{
  font-size:16px;
   }
  .color{
  color:#F00;
}
</style>

</head>
<body>
   <h2 class="size color"><!--应用了两种样式的字体-->
    应用了两种CSS样式
   </h2>  
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术


13.6.3 id选择器

HTML界面中不能包含两个相同的id标记，定义的id选择器只能被使用一次。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
  #frist{
   font-size:18px
}
  #second{
  font-size:24px  
}
#three{
  font-size:36px
}

</style>
<body>
<p id="frist">ID选择器</p><!--在页面定义标记，则自动应用样式-->
    <p id="second">ID选择器2</p>
    <p id="three">ID选择器3</p>
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术


13.6.4 通用选择器

*{
font-size:8px;
}

13.7 在页面中包含css

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>应用CSS样式控制登录页面</title>
<style type="text/css">
</style>
</head>
<body>
<table width="200" border="1" align="center"><!--在页面中定义表格-->
    <tr>
      <td><p style="color:#F00; font-size:36px;">行内样式一</p></td>
     </tr>
    <tr>
      <td><p style="color:#F00; font-size:24px;">行内样式二</p></td>
    </tr>
    <tr>
      <td><p style="color:#F00; font-size:18px;">行内样三</p></td>
    </tr>
    <tr>
      <td><p style="color:#F00; font-size:14px;">行内样式四</p></td>
    </tr>
</table>
</body>
</html>

13.7.2 内嵌样式表 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用内嵌式样式表</title>
<style type="text/css">
h1,h2,h3{/*在页面中定义比较选择器*/
font-family:Tahoma, Geneva, sans-serif;/*定义体质*/
color:#F69;/*文字颜色*/
}
</style>
</head>
<body>
 <h1>文字1</h1>
    <h2>文字2</h2>
    <h3>文字3</h3>
</body>
</html>

13.7.3  链接式样式表

将css样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用。

<link rel="stylesheet" href='path' type='text/css'>

创建css.css样式表

h1,h2,h3{
color:#00ff00;
}
p{
color:#ff0000;
font-weight:200;
}
index.html 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel='stylesheet' href="css.css" type='text/css'/><!--页面引入CSS样式表-->
</head>
<body>
<h1>页面文字一</h1><!--在页面中添加文字-->
    <p>页面文字二</p>
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术


13.8 css的继承

将所有的HTML标记看做一个容器，定义在父容器上的css样式会自动加载到子级容器中。


第十四章 表单和表单元素

14.2  表单标记<form>

在<form>标记中，可以设置表单的基本属性，包括表单的名称，处理程序，传输方式。表单的处理程序action和提交方式method是必不可少的。

14.2.1  处理程序action属性

<form action="URL">.......</form>

url:表单提交的地址，可以是绝对地址，也可以是相对地址，也可以是其他地址如E-mail等。

14.2.2 表单名称name属性

name给表单命名，不是必须属性，为了后台处理程序不出现混乱，所以给表单合适的命名。

<form name="xxx">.....</form>

14.2.3 提交方法method属性

method属性用来定义处理程序从表单中获取信息的方式，可取值为get或post，它决定了表单中收集到的数据用什么方式提交到服务器上。

<form method="get/post">....<form>
 method:get   

使用这种方法提交表单，表单数据会被视为CGI或ASP的参数发送，来访者输入的数据会附加在URL之后，由用户端直接发送至服务器，优点是速度比post快，缺点是数据长度不能太长，没有指定method时，默认为get。

method:post  使用这种设置，表单数据与URL是分开的发送的，用户端的计算机会通知服务器来读取数据，所以通常没鞋油数据长度的限制，缺点是速度会比get慢。

14.2.4 编码方式enctype属性

14.2.5 目标显示方式target属性


14.3 输入标记<input>

<input name="xx" type="xx">

type:控件类型，text，文字域；password，密码域；radio，单选按钮；checkbox，复选框；button，普通按键；submit，提交按钮；reset，重置按钮；image，图像域；hidden，隐藏域；file，文件域；

14.5 菜单和列表标记 <select> <option>

14.7 在javascript中访问表单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function checkit()
{//自定义函数
if(form1.name.value=="")
{//判断用户名是否为空
alert("请输入用户名!");
form1.name.select();
return false;
}        
if(form1.pwd.value=="")
//判断密码是否为空
alert("请输入密码!");
form1.pwd.select();
return false ;
}
return true; 
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">  
<p>用户名：</p>
<input name="name" type="text" size="22" />
<p>密码：</p>
<input name=pwd" type="password" size="24" />
<br/>
<input type="image" name="imageField" onclick="return checkit();" src="images/dl_06.gif" /></td>
<input type="image" name="imageField2" onclick="form.reset(); return false;" src="images/dl_07.gif" />
</form>
</body>
</html>

《javascript从入门到精通》第二篇 javascript核心技术


如果您觉得有用，欢迎打赏，仅接受一元以下金额，谢谢支持，我准备用来买路虎！


《javascript从入门到精通》第二篇 javascript核心技术《javascript从入门到精通》第二篇 javascript核心技术


标签：

相关文章