第一：基本概念
document()的作用：1，改变标签的样式。2.获取标签中的值
1.Dom模型：一颗倒立的树，反应出了网页中标签和文本内容的结构图。在dom树的最上层是document，是文档的意思
当html文件被浏览器解析（解析就是把代码变成了具体要显示的内容）的时候，在内存中形成了一个当前文件的标签和文本的结构图，也就是dom树。
在这个树中的每一个节点都是一个对象。在我们打开浏览器的时候这些对象已经被创建好了，因此不需要我们创建。
2.D表示document是当前文档的意思，表示当前被浏览器加载解析的html文件（也是就封装了当前的html文件为一个对象，这个对象就是document，相当于java中io流的file。）
O表示的是object是对象的意思，object封装的是标签和文本（把标签和文本内容封装成对象）。
m表示的是model是模型的意思，指的是这个图（网页中的树状结构）
因此，dom模型就是将网页封装和网页中的标签和文本封装成对象，形成一颗倒立的对象结构图。
3.对象不用我们创建，但是在用的时候需要程序员找到自己想要用的对象。document.from.input。其中html和body不用写，因为他们只出现一次，但是document不能不写，它代表当前文档。
找到对象是为了使用对象的属性，对对象的属性进行取值和赋值。
4.一切对象都要在document这个跟对象中去找，因此document给我们提供了一些方法
----1.document.getElementByid():通过元素（标签）的id属性获得对象。
alert(a.nodeName())表示获得a变量的名字（也就是看看是什么标签）。
onmouseover（）是鼠标放上去的时候触发事件，后面跟一个函数名
innerHTML:是设置或者获取起始标签和结束标签所围堵的内容。，这个属性里除了可以放文本内容，还可以放其他标签。
innerText:这个属性只能设置文本内容。innerHTML和innerText是针对文本节点的。
----2.document.getElementByName():通过标签的name属性获取标签，name属性可以重复。用这个写的是全选功能
----3.document.getElementTagName():通过标签来获取标签（element哎你门的，inner恩呢）
5.每个标签都具备以下三个属性：
nodeName():获得标签（节点)名称
nodeValue():获得标签（节点）的值，只有nodeType()的返回值是3的时候才有值，也就说只有文本节点才有值，其他节点是空值
nodeType():获得标签(节点)的类型，如果是1表示元素（标签）节点，如果返回的是3表示文本节点
6.使用dom模型的步骤：
---1.获得某个对象（不需要自己创建）
---2.访问对象的属性和方法。
7.全选问题：要使用input标签的checked属性。
在点击全选的时候就把所有的input选中，因此使用onclick事件，现在不使用这个事件爱你了，使用的是href="javascript：函数名（）"
8.qq的好友列表中的隐藏和显示：display是展示的意思，可以选择隐藏none和显示black。注意样式属性和标签属性。例如div标签没有display属性，可是使用样式的时候就可以有这个属性了。
9.改变字体的样式：就是改变样式，因此最好的办法就是把样式分离出来。
----1.style：只能改变一个样式
----2.className：改变多个样式
作业：完善全选，完善隐藏和显示（选择一个，另外两个要隐藏）
天津店小二
- 浏览: 69275 次
- 性别:
- 来自: 天津
-
文章分类
最新评论
注意：this表示当前对象，由于每个标签都是一个对象，把this写在标签里this也就表示当前标签，例如：
1.这种情况是方法没用this当做形式参数
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function show(){
var value = document.myform.name.value ;
alert("输入的内容是：" + value) ;
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
请输入内容：<input type="text" name="name">
<input type="button" value="显示" onclick="show()">
</form>
</body>
2.这种方式是函数用了this关键字：这里的f就表示下面的form表单，也就能够代替上面的document.myform
function validate(f){
var value = f.email.value ;
return true ;
}
</script>
</head>
<body>
<form action="test.htm" method="post" name="myform" onsubmit="return validate(this)">
EMAIL：<input type="text" name="email">
<input type="submit" value="提交">
</form>
12.注意：f.email.focus() ;// 让email获得焦点
f.email.select() ;// 让已有的内容全选
13.java都是需要程序员自己写类写对象，javascript自己有好多自己的对象，javascript其实就是基于对象操作的。
1.这种情况是方法没用this当做形式参数
<head>
<title>www.mldnjava.cn，MLDN高端Java培训</title>
<script language="javascript">
function show(){
var value = document.myform.name.value ;
alert("输入的内容是：" + value) ;
}
</script>
</head>
<body>
<form action="" method="post" name="myform">
请输入内容：<input type="text" name="name">
<input type="button" value="显示" onclick="show()">
</form>
</body>
2.这种方式是函数用了this关键字：这里的f就表示下面的form表单，也就能够代替上面的document.myform
function validate(f){
var value = f.email.value ;
return true ;
}
</script>
</head>
<body>
<form action="test.htm" method="post" name="myform" onsubmit="return validate(this)">
EMAIL：<input type="text" name="email">
<input type="submit" value="提交">
</form>
12.注意：f.email.focus() ;// 让email获得焦点
f.email.select() ;// 让已有的内容全选
13.java都是需要程序员自己写类写对象，javascript自己有好多自己的对象，javascript其实就是基于对象操作的。
注意：dom树不能改变文档里面的内容，但是改变的是内存中的dom树的内容，没改变原来文件
第二：代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0xp;
margin:0px;
}
#tb{
background-color:#99F;
border: #00F solid 1px;
border-collapse:collapse;
}
#tb tr td {
background-color:#C36;
border:#CCC solid 1px;
}
#tb tr td a{
background-color:#0C6;
text-decoration:none;
}
#tb tr td div{
background-color:#939;
text-align:center;
color:#F00;
display:none;
}
.max{
background-color: #0FC;
color: #000;
width:400px;
height:400px;
font-size:26px;
border: #F9F thin 1px;
}
.min{
background-color: #90F;
color: #FC3;
width:400px;
height:400px;
font-size:12px;
border: #CCC double 1px;
}
.default{
background-color:#066;
color:#CF3;
width:400px;
height:400px;
font-size:18px;
border:#F00 dashed 2px;
}
#res_0,#res_1,#res_2,#res_4,#res_3{
display: none;
}
</style>
<script type="text/javascript">
<!---第一题-->
function changeHref(){
var bd=document.getElementById("bd");
bd.href="http://www.taobao.com";
bd.innerHTML="<h2>淘宝<h2>";
}
<!---第二题-->
function checkAll(){
var ca=document.getElementsByName("ck");
var sum=0;
for(var x=0;x<ca.length;x++){
ca[x].checked=true;
sum=sum+parseInt(ca[x].value);
}
var div = document.getElementById("price");
div.innerText="价钱为："+sum;
}
function cancleAll(){
var ce=document.getElementsByName("ck");
for(var x=0;x<ce.length;x++){
ce[x].checked=false;
}
var div=document.getElementById("price");
div.innerHTML="请选择商品...";
}
function fanxuan(){
var fx=document.getElementsByName("ck");
var sum=0;
for(var x=0;x<fx.length;x++){
if(fx[x].checked==true){
fx[x].checked=false;
}else{
fx[x].checked=true;
sum=sum+parseInt(fx[x].value);
}
}
var div=document.getElementById("price");
div.innerHTML="价钱为："+sum;
}
function jisuan(){
var aaa=document.getElementsByName("ck");
var sum=0;
for(var x=0;x<aaa.length;x++){
if(aaa[x].checked){
sum=sum+parseInt(aaa[x].value);
}
}
var div = document.getElementById("price");
div.innerHTML="总价为："+sum;
}
<!---第三题-->
function changeContent(){
var h=document.getElementsByTagName("h3");
for(var x=0;x<h.length;x++){
h[x].innerHTML="<font color='red' size='26'>哈哈哈</font>";
}
}
<!---第四题-->
function changeDisplay(idaaa){
var myid=document.getElementById(idaaa);
if(myid.style.display=="block"){
myid.style.display="none";
}else{
myid.style.display="block";
}
}
<!--第五题-->
function changeMax(){
var a=document.getElementById("news");
a.className="max";
}
function changeDefault(){
var a=document.getElementById("news");
a.className="default";
}
function changeMin(){
var a=document.getElementById("news");
a.className="min";
}
<!------第六题---->
function jiaNeng(){
var jn=document.getElementsByName("jn");
var sum=0;
for(var x=0;x<jn.length;x++){
if(jn[x].checked){
sum=sum+parseInt(jn[x].value);
}
}
var sp=document.getElementById("s");
sp.innerHTML=" <font color='red'>价钱为￥"+sum+"</font>";
}
<!----第七题--->
function abc(obj){
var divInfo=document.getElementById("divid");
if(obj.value=="1")
{
divInfo.style.display="block";
}
else
{
divInfo.style.display="none";
}
}
function showResult(node){
var num=node.value;
//alert(num);
var div=document.getElementById("res_"+num);
var divs=document.getElementById("showRes");
//alert(div.innerHTML);
if(div==res_0){
res_0.style.display="block";
res_1.style.display="none";
res_2.style.display="none";
res_3.style.display="none";
res_4.style.display="none";
}else
if(div==res_1){
res_1.style.display="block";
res_0.style.display="none";
res_2.style.display="none";
res_3.style.display="none";
res_4.style.display="none";
}else
if(div==res_2){
res_2.style.display="block";
res_1.style.display="none";
res_0.style.display="none";
res_3.style.display="none";
res_4.style.display="none";
}else
if(div==res_3){
res_3.style.display="block";
res_1.style.display="none";
res_2.style.display="none";
res_0.style.display="none";
res_4.style.display="none";
}else
if(div==res_4){
res_4.style.display="block";
res_1.style.display="none";
res_2.style.display="none";
res_3.style.display="none";
res_0.style.display="none";
}
}
<!---第八题---->
function InitImage( )
{
document.getElementById("gameTab2").style.display="none";
document.getElementById("game").style.display="none";
document.getElementById("mobileTab1").style.display="none";
}
function TabChange(show,hidden) {
document.getElementById(show+"Tab1").style.display="none";
document.getElementById(show+"Tab2").style.display="block";
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0xp;
margin:0px;
}
#tb{
background-color:#99F;
border: #00F solid 1px;
border-collapse:collapse;
}
#tb tr td {
background-color:#C36;
border:#CCC solid 1px;
}
#tb tr td a{
background-color:#0C6;
text-decoration:none;
}
#tb tr td div{
background-color:#939;
text-align:center;
color:#F00;
display:none;
}
.max{
background-color: #0FC;
color: #000;
width:400px;
height:400px;
font-size:26px;
border: #F9F thin 1px;
}
.min{
background-color: #90F;
color: #FC3;
width:400px;
height:400px;
font-size:12px;
border: #CCC double 1px;
}
.default{
background-color:#066;
color:#CF3;
width:400px;
height:400px;
font-size:18px;
border:#F00 dashed 2px;
}
#res_0,#res_1,#res_2,#res_4,#res_3{
display: none;
}
</style>
<script type="text/javascript">
<!---第一题-->
function changeHref(){
var bd=document.getElementById("bd");
bd.href="http://www.taobao.com";
bd.innerHTML="<h2>淘宝<h2>";
}
<!---第二题-->
function checkAll(){
var ca=document.getElementsByName("ck");
var sum=0;
for(var x=0;x<ca.length;x++){
ca[x].checked=true;
sum=sum+parseInt(ca[x].value);
}
var div = document.getElementById("price");
div.innerText="价钱为："+sum;
}
function cancleAll(){
var ce=document.getElementsByName("ck");
for(var x=0;x<ce.length;x++){
ce[x].checked=false;
}
var div=document.getElementById("price");
div.innerHTML="请选择商品...";
}
function fanxuan(){
var fx=document.getElementsByName("ck");
var sum=0;
for(var x=0;x<fx.length;x++){
if(fx[x].checked==true){
fx[x].checked=false;
}else{
fx[x].checked=true;
sum=sum+parseInt(fx[x].value);
}
}
var div=document.getElementById("price");
div.innerHTML="价钱为："+sum;
}
function jisuan(){
var aaa=document.getElementsByName("ck");
var sum=0;
for(var x=0;x<aaa.length;x++){
if(aaa[x].checked){
sum=sum+parseInt(aaa[x].value);
}
}
var div = document.getElementById("price");
div.innerHTML="总价为："+sum;
}
<!---第三题-->
function changeContent(){
var h=document.getElementsByTagName("h3");
for(var x=0;x<h.length;x++){
h[x].innerHTML="<font color='red' size='26'>哈哈哈</font>";
}
}
<!---第四题-->
function changeDisplay(idaaa){
var myid=document.getElementById(idaaa);
if(myid.style.display=="block"){
myid.style.display="none";
}else{
myid.style.display="block";
}
}
<!--第五题-->
function changeMax(){
var a=document.getElementById("news");
a.className="max";
}
function changeDefault(){
var a=document.getElementById("news");
a.className="default";
}
function changeMin(){
var a=document.getElementById("news");
a.className="min";
}
<!------第六题---->
function jiaNeng(){
var jn=document.getElementsByName("jn");
var sum=0;
for(var x=0;x<jn.length;x++){
if(jn[x].checked){
sum=sum+parseInt(jn[x].value);
}
}
var sp=document.getElementById("s");
sp.innerHTML=" <font color='red'>价钱为￥"+sum+"</font>";
}
<!----第七题--->
function abc(obj){
var divInfo=document.getElementById("divid");
if(obj.value=="1")
{
divInfo.style.display="block";
}
else
{
divInfo.style.display="none";
}
}
function showResult(node){
var num=node.value;
//alert(num);
var div=document.getElementById("res_"+num);
var divs=document.getElementById("showRes");
//alert(div.innerHTML);
if(div==res_0){
res_0.style.display="block";
res_1.style.display="none";
res_2.style.display="none";
res_3.style.display="none";
res_4.style.display="none";
}else
if(div==res_1){
res_1.style.display="block";
res_0.style.display="none";
res_2.style.display="none";
res_3.style.display="none";
res_4.style.display="none";
}else
if(div==res_2){
res_2.style.display="block";
res_1.style.display="none";
res_0.style.display="none";
res_3.style.display="none";
res_4.style.display="none";
}else
if(div==res_3){
res_3.style.display="block";
res_1.style.display="none";
res_2.style.display="none";
res_0.style.display="none";
res_4.style.display="none";
}else
if(div==res_4){
res_4.style.display="block";
res_1.style.display="none";
res_2.style.display="none";
res_3.style.display="none";
res_0.style.display="none";
}
}
<!---第八题---->
function InitImage( )
{
document.getElementById("gameTab2").style.display="none";
document.getElementById("game").style.display="none";
document.getElementById("mobileTab1").style.display="none";
}
function TabChange(show,hidden) {
document.getElementById(show+"Tab1").style.display="none";
document.getElementById(show+"Tab2").style.display="block";
document.getElementById(hidden+"Tab1").style.display="block";
document.getElementById(hidden+"Tab2").style.display="none";
document.getElementById(show ).style.display="block";
document.getElementById(hidden ).style.display="none";
}
<!--------第九题------->
function calculate(buttons){
var a=document.myform.num1.value;
var b=document.myform.num2.value;
var result
if(buttons=="but1")
result=parseInt(a)+parseInt(b);
if(buttons=="but2")
result=parseInt(a)-parseInt(b);
if(buttons=="but3")
result=parseInt(a)*parseInt(b);
if(buttons=="but4")
result=Number(a)/Number(b);
document.myform.resu.value=result;
}
</script>
</head>
document.getElementById(hidden+"Tab2").style.display="none";
document.getElementById(show ).style.display="block";
document.getElementById(hidden ).style.display="none";
}
<!--------第九题------->
function calculate(buttons){
var a=document.myform.num1.value;
var b=document.myform.num2.value;
var result
if(buttons=="but1")
result=parseInt(a)+parseInt(b);
if(buttons=="but2")
result=parseInt(a)-parseInt(b);
if(buttons=="but3")
result=parseInt(a)*parseInt(b);
if(buttons=="but4")
result=Number(a)/Number(b);
document.myform.resu.value=result;
}
</script>
</head>
<body onload="InitImage()">
<!---第一题-->
<a href="http://www.baidu.com" id="bd" onmouseover="changeHref()">百度</a><br />
<form>
姓名：<input type="text" name="xm" /><br/>
密码：<input type="password" name="mm"/><br />
<input type="submit" value="提交"/>
</form>
<img src="image/zy03.jpg"/>
<hr style="border:#696 dashed 1px"/>
<!---第二题-->
<form>
<table>
<tr><td colspan="2">
<a href="javascript:checkAll()">全选</a>
<a href="javascript:cancleAll()">取消</a>
<a href="javascript:fanxuan()">反选</a>
<!--- <a href="javascript:jisuan()">计算总价</a>-->
<div id="price"></div>
</td></tr>
<tr>
<td><input type="checkbox" name="ck" value="200" onchange="jisuan()"/></td>
<td><img src="image/2-1.jpg" width="100" height="100"/></td>
</tr>
<tr>
<td><input type="checkbox" name="ck" value="100" onchange="jisuan()"/></td>
<td><img src="image/2-1.jpg" width="100" height="100" /></td>
</tr>
<tr>
<td><input type="checkbox" name="ck" value="100" onchange="jisuan()"/></td>
<td><img src="image/2-1.jpg"width="100" height="100"/></td>
</tr>
<tr>
<td><input type="checkbox" name="ck" value="100" onchange="jisuan()"/></td>
<td><img src="image/2-1.jpg" width="100" height="100"/></td>
</tr>
</table>
</form>
<hr style="border:#3FC double 2px"/>
<!---第三题-->
<h3 onmouseover="changeContent();">我想你</h3>
<h3>我想你</h3>
<h3>我想你</h3>
<h3>我想你</h3>
<hr color="#000000"/>
<!---第四题-->
<table id="tb">
<tr><td>
<a href="javascript:changeDisplay('xhb')">小伙伴</a>
<div id="xhb">
张三<br />
李四<br />
王伟<br />
</div>
</td></tr>
<tr><td>
<a href="javascript:changeDisplay('npy')">女朋友</a>
<div id="npy">
1号<br />
2号<br />
3号<br />
</div>
</td></tr>
<tr><td>
<a href="javascript:changeDisplay('lx')">老乡</a>
<div id="lx">
周周周<br />
李克强<br />
王岐山<br />
</div>
</td></tr>
</table>
<hr />
<!---第五题-->
<a href="javascript:changeMax()">大字体</a>
<a href="javascript:changeDefault()">中字体</a>
<a href="javascript:changeMin()">小字体</a><br/>
<div id="news" class="default" >
DOM 模型（描述网页中标签，文本倒立树形结构）
当html文件被浏览器解析的时候，在内存形成一个当前
文件的标签和文本的结构图---DOM,在DOM中的每一个节点
都被封装为对象
<!---第一题-->
<a href="http://www.baidu.com" id="bd" onmouseover="changeHref()">百度</a><br />
<form>
姓名：<input type="text" name="xm" /><br/>
密码：<input type="password" name="mm"/><br />
<input type="submit" value="提交"/>
</form>
<img src="image/zy03.jpg"/>
<hr style="border:#696 dashed 1px"/>
<!---第二题-->
<form>
<table>
<tr><td colspan="2">
<a href="javascript:checkAll()">全选</a>
<a href="javascript:cancleAll()">取消</a>
<a href="javascript:fanxuan()">反选</a>
<!--- <a href="javascript:jisuan()">计算总价</a>-->
<div id="price"></div>
</td></tr>
<tr>
<td><input type="checkbox" name="ck" value="200" onchange="jisuan()"/></td>
<td><img src="image/2-1.jpg" width="100" height="100"/></td>
</tr>
<tr>
<td><input type="checkbox" name="ck" value="100" onchange="jisuan()"/></td>
<td><img src="image/2-1.jpg" width="100" height="100" /></td>
</tr>
<tr>
<td><input type="checkbox" name="ck" value="100" onchange="jisuan()"/></td>
<td><img src="image/2-1.jpg"width="100" height="100"/></td>
</tr>
<tr>
<td><input type="checkbox" name="ck" value="100" onchange="jisuan()"/></td>
<td><img src="image/2-1.jpg" width="100" height="100"/></td>
</tr>
</table>
</form>
<hr style="border:#3FC double 2px"/>
<!---第三题-->
<h3 onmouseover="changeContent();">我想你</h3>
<h3>我想你</h3>
<h3>我想你</h3>
<h3>我想你</h3>
<hr color="#000000"/>
<!---第四题-->
<table id="tb">
<tr><td>
<a href="javascript:changeDisplay('xhb')">小伙伴</a>
<div id="xhb">
张三<br />
李四<br />
王伟<br />
</div>
</td></tr>
<tr><td>
<a href="javascript:changeDisplay('npy')">女朋友</a>
<div id="npy">
1号<br />
2号<br />
3号<br />
</div>
</td></tr>
<tr><td>
<a href="javascript:changeDisplay('lx')">老乡</a>
<div id="lx">
周周周<br />
李克强<br />
王岐山<br />
</div>
</td></tr>
</table>
<hr />
<!---第五题-->
<a href="javascript:changeMax()">大字体</a>
<a href="javascript:changeDefault()">中字体</a>
<a href="javascript:changeMin()">小字体</a><br/>
<div id="news" class="default" >
DOM 模型（描述网页中标签，文本倒立树形结构）
当html文件被浏览器解析的时候，在内存形成一个当前
文件的标签和文本的结构图---DOM,在DOM中的每一个节点
都被封装为对象
Document：表示当前被浏览器加载解析的html文件（封装当前html文
件为一个对象---Document）
Object:封装的是标签和文本
Model : 模型-----在内存中的网页结构图
</div>
<hr />
<!----第六题--->
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="button" value="计算价钱" onclick="jiaNeng()"/><span id="s"></span>
<br /><hr />
<!----第七题--->
你是否愿意参加我们的咨询：
件为一个对象---Document）
Object:封装的是标签和文本
Model : 模型-----在内存中的网页结构图
</div>
<hr />
<!----第六题--->
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="checkbox" name="jn" value="200" />佳能单反<br/>
<input type="button" value="计算价钱" onclick="jiaNeng()"/><span id="s"></span>
<br /><hr />
<!----第七题--->
你是否愿意参加我们的咨询：
<input type="radio" name="a" checked="checked" onclick="abc(this)" value="1"/>是
<input type="radio" name="a" onclick="abc(this)" value="0"/>否<br />
<div id="divid">
姓名：<input type="text" /> <br />
年龄：<input type="text" /><br />
</div>
请选择水果：<br />
<input type="radio" name="b" onclick="showResult(this)" value="0"/>香蕉<br />
<input type="radio" name="b" onclick="showResult(this)" value="1"//>苹果<br />
<input type="radio" name="b" onclick="showResult(this)" value="2"//>西瓜<br />
<input type="radio" name="b" checked="checked" onclick="showResult(this)" value="3"//>桃子<br />
<input type="radio" name="b" onclick="showResult(this)" value="4"//>芒果<br />
<!--<input type="button" value="提交" onclick="xianshi();"/><span id="message"></span>---->
<div id="showRes">
<div id="res_0">
你处于人品爆发1期.....
</div>
<div id="res_1">
你的人品是很让人2鄙视......
</div>
<div id="res_2">
你的人品是很3让人鄙视......
</div>
<div id="res_3">
你的人品是很4让人鄙视......
</div>
<div id="res_4">
你的人品是很让5人鄙视......
</div>
</div>
</div>
<hr />
<!------第八题------->
<TABLE border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
<TD><IMG id="gameTab1" src="image/gameTab1.jpg" width="83" height="47" onMouseOver="TabChange('game','mobile')" >
<IMG id="gameTab2" src="image/gameTab2.jpg" width="83" height="49"></TD>
<TD><IMG id="mobileTab1" src="image/mobileTab1.jpg" width="81" height="49" onMouseOver="TabChange('mobile','game')">
<IMG id="mobileTab2" src="image/mobileTab2.jpg" width="82" height="47"></TD>
</TR>
<TR>
<TD colspan="2"><IMG id="mobile" src="image/mobile.jpg" width="165" height="171">
<IMG id="game" src="image/game.jpg" width="164" height="169" ></TD>
</TR>
<TR>
<TD colspan="2"><IMG src="image/fly.jpg" width="165" height="43"></TD>
</TR>
</TABLE>
<hr />
<!------第九题------->
<form name="myform">
第一个数：<input type="text" name="num1" value=""/><br />
第二个数：<input type="text" name="num2" value="" /><br />
操作：<input type="button" value=" + " name="but1" onclick="calculate('but1')"/>
<input type="button" value=" - " name="but2" onclick="calculate('but2')"/>
<input type="button" value=" * " name="but3" onclick="calculate('but3')"/>
<input type="button" value=" / " name="but4" onclick="calculate('but4')"/><br />
结果：<input type="text" name="resu" >
</form>
<input type="radio" name="a" onclick="abc(this)" value="0"/>否<br />
<div id="divid">
姓名：<input type="text" /> <br />
年龄：<input type="text" /><br />
</div>
请选择水果：<br />
<input type="radio" name="b" onclick="showResult(this)" value="0"/>香蕉<br />
<input type="radio" name="b" onclick="showResult(this)" value="1"//>苹果<br />
<input type="radio" name="b" onclick="showResult(this)" value="2"//>西瓜<br />
<input type="radio" name="b" checked="checked" onclick="showResult(this)" value="3"//>桃子<br />
<input type="radio" name="b" onclick="showResult(this)" value="4"//>芒果<br />
<!--<input type="button" value="提交" onclick="xianshi();"/><span id="message"></span>---->
<div id="showRes">
<div id="res_0">
你处于人品爆发1期.....
</div>
<div id="res_1">
你的人品是很让人2鄙视......
</div>
<div id="res_2">
你的人品是很3让人鄙视......
</div>
<div id="res_3">
你的人品是很4让人鄙视......
</div>
<div id="res_4">
你的人品是很让5人鄙视......
</div>
</div>
</div>
<hr />
<!------第八题------->
<TABLE border="0" align="center" cellpadding="0" cellspacing="0">
<TR>
<TD><IMG id="gameTab1" src="image/gameTab1.jpg" width="83" height="47" onMouseOver="TabChange('game','mobile')" >
<IMG id="gameTab2" src="image/gameTab2.jpg" width="83" height="49"></TD>
<TD><IMG id="mobileTab1" src="image/mobileTab1.jpg" width="81" height="49" onMouseOver="TabChange('mobile','game')">
<IMG id="mobileTab2" src="image/mobileTab2.jpg" width="82" height="47"></TD>
</TR>
<TR>
<TD colspan="2"><IMG id="mobile" src="image/mobile.jpg" width="165" height="171">
<IMG id="game" src="image/game.jpg" width="164" height="169" ></TD>
</TR>
<TR>
<TD colspan="2"><IMG src="image/fly.jpg" width="165" height="43"></TD>
</TR>
</TABLE>
<hr />
<!------第九题------->
<form name="myform">
第一个数：<input type="text" name="num1" value=""/><br />
第二个数：<input type="text" name="num2" value="" /><br />
操作：<input type="button" value=" + " name="but1" onclick="calculate('but1')"/>
<input type="button" value=" - " name="but2" onclick="calculate('but2')"/>
<input type="button" value=" * " name="but3" onclick="calculate('but3')"/>
<input type="button" value=" / " name="but4" onclick="calculate('but4')"/><br />
结果：<input type="text" name="resu" >
</form>
</body>
</html>
</html>
- 04js02.zip (2.3 KB)
- 下载次数: 0
- js02作业.zip (177.1 KB)
- 下载次数: 0
分享到：
发表评论
-
jsp九大内置对象的详解
2016-02-05 09:12 3801.request对象 客户端的请求信息被封装在requ ... -
j2ee23：jquery：使用jquery技术实现奇数行偶数行换色
2016-02-03 13:52 794第一：概念 使用jquery技术实现奇数行偶数行换色aj ... -
j2ee22:json
2016-02-03 11:21 523第一：概念 1.json数据 ... -
j2ee21：ajax01：get提交、post提交(完成用户名搜索)，两者的区别(中文乱码问题、缓存问题)
2016-02-03 09:56 428第一：概念 Ajax技术和jquery技术1.这两个是客 ... -
jsp主要九大内置对象、四大web域、两种包含、两种注释、几个jsp标准动作
2016-01-28 09:41 507第一：概念 （一）JSP ... -
j2ee:servlet练习鲜花项目(购物车、分页、ajax、iframe弹出层、jquery、json(计算小计、总计)、map集合高级遍历、图片上传)
2016-01-28 09:41 422第一：概念购物车全过程的理解： 1.新建一个购物车类，这样，这 ... -
j2ee20:servlet04监听器(监听四大web域)(用于访问人数的统计)、mvc模式的引入
2016-01-27 10:13 412第一：概念 1.监听器listener：一个对象去监听另 ... -
j2ee:servlet练习短信项目，包含过滤器的使用、EL表达式和JSTL标准标签库的使用
2016-01-27 10:11 4431.过滤器的使用 package com.comm; i ... -
j2ee19:servlet03:el表达式，jstl标准标签库、四大web域
2016-01-27 10:05 293第一：概念 EL表达式 ... -
j2ee18:servlet02:过滤器（过滤四大web域）
2016-01-27 09:53 449第一：概念 1.过滤器：放在客户端和服务器之间，客户端发 ... -
j2ee17：servlet01：jsp结束,servlet的配置和生命周期
2016-01-27 09:52 3871.appliation应用程序:session是一个会话 ... -
j2ee16:jsp5:文件上传，jsp标准动作
2016-01-26 16:19 5061.给表在添加一列：alert ... -
j2ee15：jsp04,session的访问控制,分页查询,page include·
2016-01-26 16:09 411第一：基本概念 1.< ... -
j2ee13:jsp03:转发、重定向、三种跳转，短信项目
2016-01-20 16:19 786第一：概念 application ... -
j2ee13:jsp02,request对象，中文乱码处理，url传参
2016-01-19 11:26 447第一：基本概念 1.服务器端的执行过程：1.接收请求，2 ... -
j2ee12：jsp01：jsp页面嵌套java代码、<%@ %>的使用
2016-01-19 11:25 916第一：基本概念 1.html,css,js等属于客户端技 ... -
j2ee11：xml02：dom4j解析
2016-01-18 16:29 516第一：基本概念 1.第三种解析方式不是java官方提供的 ... -
j2ee10:xml01:dom解析和sax解析
2016-01-18 16:17 359第一：基本概念 1.xml是可扩展的标记语言（他可以让程 ... -
j2ee09:jdbc03:jdbc的最后封装(用到了反射)
2016-01-18 15:37 3441.实体类部分 package com.entity; i ... -
j2ee08:jdbc02:事务处理、滚动结果集分页、复杂sql分页
2016-01-18 13:22 504基本概念： 第一个知 ...
相关推荐
自用 勿下！！勿下！！勿下！！勿下！！勿下！！勿下！！勿下！！勿下！！勿下！！勿下！！勿下！！勿下！！
易语言超级列表框全选源码。@易语言源码分享站。
ASP.NET GridView中两种全选方法.txt
易语言超级列表框全选源码,超级列表框全选
JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选 JavaScript 全选全不选
DevExpress中GridControl的属性设置 （只读，得到当前选定记录某字段的值） 及动态绑定数据和全选/取消全选功能。
JS控制checkbox全选、取消全选、删除功能的代码贴出来。 看下面两种实现方法：
JS简单表格列表全选反选代码.zip
Javascript实现全选反选 Javascript绑定事件
JS JS实现全选反选 全选 反选
点击全选所有选项，或者清空全部选项 ，属于js的应用
原生JS表格列表全选反选代码是一款点击表格列表选中，可以单选或者全选。
js全选效果 js全选效果 js全选效果 js全选效果
2.全选全不选的练习：四个功能按钮，全选全不选按钮(点一下全选，再点一下全不选)，全选按钮，全不选按钮，反选按钮 3.创建自定义表格（输入自定义行数和列数点击按钮即可生成表格） 4.时钟（显示当前动态时间） 5....
详细的介绍了 checkbox的全选方法
易语言超级列表框全选和选项及消除全选
HTML checkbox js全选 相信可以对您有用，js全选