分享我学习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 数组排序详解
JavaScript实现多维数组、对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序。今天我们就来详细探讨下sort（）方法
2014-10-10
JavaScript DOM 学习第三章内容表格
在这一章我会解释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有h3和h4的列表，然后给他们添加一个链接。
2010-02-02
在javaScript中关于submit和button的区别介绍
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上
2013-10-10
javascript中的原型链深入理解
要弄清楚原型链就要先弄清楚 function 类型，在javascript中没有类的概念，都是函数，所以它是一门函数式的编程语言
2014-02-02
js单例模式详解实例
这篇文章主要介绍了什么是单例单例模式、使用场景，提供了3个示例给大家参考
2013-11-11
JavaScript学习笔记记录我的旅程
JavaScript和Java没有直接的关系，唯一的关系就是JavaScript原名LiveScript，后来吸取了Java的一些特性，升级为JavaScript，JavaScript有时被简称为JS
2012-05-05
Javascript基础知识（三）BOM，DOM总结
本文是基础知识系列的第三篇文章，主要介绍javascript中BOM,DOM的一些心得总结，非常实用，有需要的朋友可以参考下
2014-09-09
Js逆向教程作用域和自执行函数介绍
这篇文章主要介绍了Js逆向教程作用域和自执行函数介绍，本文章内容详细，具有很好的参考价值，希望对大家有所帮助，需要的朋友可以参考下
2023-01-01
关于js中alert弹出窗口文本换行问题简单详细说明
js中alert弹出窗口文本换行是一个小问题，本人很是郁闷，于是搜集整理下，晒出来和大家分享
2012-12-12
使图片旋转的3种解决方案
这篇文章主要介绍了使图片旋转的3种解决方案,并了几个方法的对比，大家参考看一下吧
2013-11-11