分享我学习js的过程作者aircy javascript学习教程第2/3页

更新时间：2007年02月03日 00:00:00 作者：

实例八（4.4）、
本实例主要介绍了Document对象读取表单元素的使用（单选按钮、复选按钮的使用）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> New Document </TITLE>   <META NAME="Generator" CONTENT="EditPlus">   <META NAME="Author" CONTENT="">   <META NAME="Keywords" CONTENT="">   <META NAME="Description" CONTENT="">   <SCRIPT LANGUAGE="JavaScript">      </SCRIPT>  </HEAD>  <BODY>  <FORM name ="form1" METHOD=POST ACTION="">  单选应用 <INPUT TYPE="radio" NAME="country" value="中国" checked>中国 <INPUT TYPE="radio" NAME="country" value="法国">法国 <INPUT TYPE="radio" NAME="country" value="美国">美国 <INPUT TYPE="button" value="提交" onclick="sel_coun();"/> 复选应用 <INPUT TYPE="checkbox" NAME="love"  value="打球">打球 <INPUT TYPE="checkbox" NAME="love" value="游泳">游泳 <INPUT TYPE="checkbox" NAME="love" value="看书">看书 <INPUT TYPE="checkbox" NAME="love" value="跳舞">跳舞 <INPUT TYPE="button" value="提交" onclick="sel_love();"/>  </FORM>  </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

实例九（4.5）、
本实例主要介绍了Document对象读取表单元素的使用（下拉菜单、链接属性的使用）

<html> <head> <title>下拉菜单</title> <script language="javascript"> function display() {     if(document.selectForm.team.selectedIndex==0) //判断是否进行了选择     {         alert("您没有做选择!");     }     else     {         var index = document.selectForm.team.selectedIndex; //读出当前选项的下标         alert("您选择的球队是:"+document.selectForm.team.options[index].value);     } } </script> </head> <body> <div align="center">   <form action="" method="post" name="selectForm" id="selectForm">     <table width="70%"  border="0">       <tr>         <td>请选择喜欢的球队:</td>       </tr>       <tr>         <td><select name="team">           <option value="0">--未选择--</option>           <option value="巴塞罗那">巴塞罗那</option>           <option value="AC米兰">AC米兰</option>           <option value="尤文图斯">尤文图斯</option>           <option value="曼彻斯特联">曼彻斯特联</option>           <option value="切尔西">切尔西</option>         </select></td>       </tr>       <tr>         <td><input name="look" type="button" id="look" value="单击查看" onClick="display()"></td>       </tr>     </table> <a href="http://www.baidu.com" name="baidu" target="_blank">有问题百度一下</a>  <a href="http://www.google.com" name="google" target="_blank">Google也可以</a> <script language="javascript"> document.write("第一个连接的信息:"); document.write("<b>href:</b>"+document.links[0].href+""); document.write("<b>pathname:</b>"+document.links[0].pathname+""); document.write("<b>port:</b>"+document.links[0].port+""); document.write("<b>protocol:</b>"+document.links[0].protocol+""); document.write("<b>target:</b>"+document.links[0].target+""); document.write(""); document.write("第二个连接的信息:"); document.write("<b>href:</b>"+document.links[1].href+""); document.write("<b>pathname:</b>"+document.links[1].pathname+""); document.write("<b>port:</b>"+document.links[1].port+""); document.write("<b>protocol:</b>"+document.links[1].protocol+""); document.write("<b>target:</b>"+document.links[1].target+""); </script>   </form> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

实例十（5）、
本实例主要介绍了图像属性的使用，模拟百度图片显示

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>图像编程</title> <script language="javascript"> var imageArray = new Array("http://yi-bo.com/Article/UploadFiles/200610/2006101751022184.jpg","http://www.66ylw.com/Article/UploadFiles/200610/2006101751024517.jpg","http://www.ishare.cc/d/247965-3/6519C067DAA1F4B0F5EB44BC0FFD5DA4.JPG"," http://www.dipan8.com/Article/UploadFiles/200610/2006101751015599.jpg","http://www.66ylw.com/Article/UploadFiles/200610/200610175936198.jpg","http://wanmeiad.net/Article/UploadFiles/200610/2006101751024347.jpg"); var index = 0; function GetNext() {     index++;     if(index < imageArray.length)  //判断图像的下标是否小于数组的长度     {         document.images["saint"].src=imageArray[index]; //如果小于，那么就显示该下标所指定的图像     }     else     {         index = 0;         document.images["saint"].src=imageArray[index];    //如果不小于，那么就显示第一幅图像，并把index值置为0         } } function GetPrev() {     index--;     if(index >= 0) //判断图像的下标是否大于0     {         document.images["saint"].src=imageArray[index]; //如果大于，那么就显示该下标所指定的图像     }     else     {         index = imageArray.length-1;         document.images["saint"].src=imageArray[index];        //如果不大于，那么就显示最后一幅图像，并把index值置为数组长度减1         } } </script> </head> <body> <img name="saint" src="http://yi-bo.com/Article/UploadFiles/200610/2006101751022184.jpg" width="400" height="300">  <a href="javascript:GetNext()">下一幅</a> <a href="javascript:GetPrev()">上一幅</a> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

实例十一（6）、
本实例主要介绍了鼠标动作的使用，这个例子太简单了，可以多找点别点资料看看！

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>改变文字样式</title> <style type="text/css"> .red{ color:red; font-style:italic; font-size:32; } .blue{color:blue; font-size:36; } .black{color:black; } </style> <script language="javascript"> function color(e) {     switch(e.srcElement.id){ //获得标记的id         case "first":             document.getElementById("first").className="red"; //修改文字的样式             break;         case "second":             document.getElementById("second").className="blue";             break;     } } function clearText(e) {     switch(e.srcElement.id){         case "first":             document.getElementById("first").className="black";             break;         case "second":             document.getElementById("second").className="black";             break;     } } </script> </head> <body> <div id="first" onMouseOver="color(event);" onMouseOut="clearText(event);">我是新手，摸一下</div>  <div id="second" onMouseOver="color(event);" onMouseOut="clearText(event);">老油条了</div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

实例十二、
本实例主要介绍了js访问XML节点的应用，读节点最基本的有2中方法，我分2个实例发上来，方便学习。

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

因为不能发附件，所有2个文件分别帖上来了，测试的时候分别保存即可。下面的是XML文件。说了一句废话，相信不会有人认为这个也是html！：）

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

Javascript入门学习第五篇 js函数
上篇文章讲了js中对象和数组的一些方法。这章我们先说说函数，然后来点实战。
2008-07-07
js JSON.stringify()基础详解
JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以选择性的替换值，或者如果指定了replacer是一个数组，可选择性的仅包含数组指定的属性
2019-06-06
uniapp实现录音上传功能
这篇文章主要介绍了uniapp 实现录音上传功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-09-09
在JS中操作时间之getUTCMilliseconds()方法的使用
这篇文章主要介绍了在JavaScript中操作时间之getUTCMilliseconds()方法的使用,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
2015-06-06
javascript中的对象和数组的应用技巧
javascript中的对象和数组的应用技巧...
2007-01-01
javascript学习笔记（五）原型和原型链详解
许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。我将用最简洁明了的文字介绍JavaScript的原型及原型链。
2014-10-10
浅谈javascript:两种注释,声明变量,定义函数
下面小编就为大家带来一篇浅谈javascript:两种注释,声明变量,定义函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
JS中Map和ForEach的区别
本篇文章给大家详细分析了JS中Map和ForEach的区别以及用法上的不同之处，对此有兴趣的朋友参考学习下吧。
2018-02-02
详解JavaScript中的变量命名规范
程序员三大难题：变量命名、缓存失效、循环边界。这篇文章主要为大家介绍了JavaScript中的变量命名规范，感兴趣的小伙伴可以跟随小编一起学习一下
2022-12-12
javascript使用window.open提示“已经计划系统关机”的原因
这篇文章主要介绍了javascript使用window.open提示“已经计划系统关机”的原因,本文得出结论是安装了系统更新或其它原因,要把系统重启时才会提示这个问题,所以,遇到这个问题,重启你的电脑吧
2014-08-08