页面导航：首页 → 网络编程 → JavaScript → 基础知识 → 正文内容分享我学习js的过程作者aircy javascript学习教程

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

发布：游客字体：[增加减小] 类型：转载

实例八（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"> 
  <!-- 
    function sel_coun(){ 
        var country = document.form1.country.length; //得到radio个数 
    for(var i=0;i<country;i++){ 
    if(form1.country[i].checked){ 
    alert(form1.country[i].value); 
    break; 
    }else{ 
    continue; 
    } 
    } 
    }

</BODY> 
</HTML>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

实例九（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 全选提示:你可先修改部分代码,再按运行]

实例十（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;

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

实例十一（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>

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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：分享我学习js的过程作者aircy javascript学习教程

浏览次数：载入中... 打印本文关闭本文文章来源

顶一下

上一篇文章：使用JS操作页面表格，元素的一些技巧
下一篇文章：Javascript入门学习资料收集整理篇

·在百度中搜索关于“分享我学习js的过程作者aircy javascript学习教程”相关内容
·在谷歌中搜索关于“分享我学习js的过程作者aircy javascript学习教程”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

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

文章评论

同类文章

最近更新

热点排行

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

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

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

同类文章

最近更新

热点排行