设为首页收藏本站订阅更新
切换到窄版

无忧脚本

 找回密码
 加入无忧

QQ登录

只需一步，快速开始

无忧脚本 › 论坛 › 无忧脚本技术讨论区 › JavaScript & VBScript & DHTML 脚本技术讨论版 › 开始分享我学习js的过程
返回列表 发新帖
查看: 5444|回复: 18

[推荐] 开始分享我学习js的过程 [复制链接]

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 09:40:55 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站
一键分享 一键分享
前言：
      接触JS以来，一直没有好好学完过一本js的书；从今天开始，我将从新开始学习、整理并分享我学习过程中的js代码。
今后发布的代码中并不代表全属于原创，相反很多部分都会源于互联网，当然也不会少于无忧脚本的。希望大家看了之后不要
在论坛训斥，毕竟“面斥不雅”！在这里发布出来，纯粹是为了共享给哪些曾经和我一样，或者正在学习前线的朋友们；同时我
也希望在这里得到更多人的支持，如果朋友有什么建议和意见，请多多跟帖。共同探讨！thanks！

实例一、
     本实例主要介绍了navigator、cookie、screen、location对象、函数调用以及prompt、alert、confirm交互的简单应用。
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <script language="javaScript">
  6.   if(confirm("真的要看吗？")==true){
  7.   var password;
  8.   password = prompt("密码520:","请输入密码吧！");
  9.   if(password=="520"){
  10.   alert("恭喜你了，进去吧！");
  11.   document.write("测试利用navigator对象检测浏览器如下信息:<br/>")
  12.   document.write("浏览器的名称:"+navigator.appName+"<br/>");
  13.   document.write("浏览器的版本号:"+navigator.appVersion+"<br/>");
  14.   document.write("运行平台:"+navigator.platform+"<br/>");
  15.   document.write("是否支持cookie:"+navigator.cookieEnabled+"<br/><br/>");
  16.   document.write("测试利用screen对象获得浏览器窗口分辩率的大小:<br/>");
  17.   document.write("窗口高度:"+screen.height+"<br/>");
  18.   document.write("窗口宽度:"+screen.width+"<br/>");
  19.   document.write("颜色深度:"+screen.colorDepth+"<br/>");
  20.   }else{
  21.          message();
  22.   }
  23.   }
  24.   function  loadingMessage(param){
  25.     alert("不好意思哦！"+param+"密码不对哦！再来吧！");
  26.         return false;
  27.         }
  28.   function message(){
  29. loadingMessage("哈啰")
  30.   }
  31. </script>
  32.   </HEAD>

  34. <BODY>
  35.   <a href="#" onclick="window.location='http://www.baidu.com';">点击我</a>
  36. </BODY>
  37. </HTML>
复制代码运行代码另存代码

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 10:23:27 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程2

实例二、
     本实例主要介绍了event对象和事件的简单应用。
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>mouse</title>
  5. <script language="javascript">
  6. function catchEvent()
  7. {
  8. var eventSrcID = event.srcElement.id;
  9. var eventtype = event.type;
  10. alert(eventSrcID+"捕获到了"+eventtype+"事件");
  11. }
  12. function GetPosition()
  13. {
  14. var posX = event.clientX;
  15. var posY = event.clientY;
  16. window.status = "鼠标的位置是("+posX+","+posY+")";
  17. }
  18. function GetKey()
  19. {
  20. textfield.value=event.keyCode+","+String.fromCharCode(event.keyCode);
  21. }
  22. </script>
  23. </head>
  24. <body onMouseMove="GetPosition();" >
  25. 鼠标在文本框中按下:<input type="text" name="textfield" onMouseDown="alert('鼠标在文本框中按下')"><br/>
  26. 键盘按下:<input type="text" name="textfield" onKeyDown="alert('键盘按下');"><br/>
  27. event对象:<br/>
  28. <input type="text" name="textfield" id="text" onClick="catchEvent();"><br/>
  29. <input type="submit" name="Submit" value="提交" id="button" onClick="catchEvent();"><br/>
  30. </body>
  31. </html>
复制代码运行代码另存代码

[ 本帖最后由 aircy 于 2007-1-30 10:24 编辑 ]

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 11:06:47 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程3

实例三、
     本实例主要介绍了数组和其slice()方法的使用
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9. </HEAD>

  11. <BODY>
  12. 数组和其slice()方法的使用
  13.   <SCRIPT LANGUAGE="JavaScript">
  14.   <!--
  15.         var firstArray = new Array();
  16.         firstArray[0]="0";
  17.         firstArray[1]="1";
  18.         firstArray[2]="2";
  19.         firstArray[3]="3";
  20.         firstArray[4]="4";
  21.         for(var i=0 ; i<firstArray.length;i++){
  22.         document.write("firstArray["+i+"]="+i+"<br/>");

  24.         }
  25.         var firstArray = firstArray.slice(0,3);
  26.         document.write(firstArray);
  27.   //-->
  28.   </SCRIPT>
  29. </BODY>
  30. </HTML>
复制代码运行代码另存代码

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 11:25:25 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程4

实例四、
     本实例主要介绍了对象和构造方法的使用
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9. </HEAD>
  10.   <SCRIPT LANGUAGE="JavaScript">
  11.   <!--
  12.         var myobject = new Object();//创建一个空对象
  13.         myobject[0]="0";//给对象放值
  14.         myobject[1]="1";
  15.     document.write("对象的使用"+myobject[0]);

  17. function Person(name,age)//构造方法
  18. {
  19. this.name=name;
  20. this.age=age;
  21. this.sayHello=function()
  22. {
  23.   alert("我的名字是"+this.name+",我的年龄是"+this.age);
  24. }
  25. }
  26.   //-->
  27.   </SCRIPT>

  29. <body>
  30. 构造方法的使用
  31. <script language="javascript">
  32. var person1 = new Person("","21");
  33. person1.sayHello();
  34. </script>
  35. </body>
  36. </HTML>
复制代码运行代码另存代码

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 13:12:25 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程5

实例五（4.1）、
     本实例主要介绍了Document对象的使用
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4.   <TITLE> New Document </TITLE>
  5. </HEAD>

  7. <BODY>
  8.   <IMG SRC="C:/Documents and Settings/Administrator/桌面/13608.gif" WIDTH="170" HEIGHT="1" BORDER="0" ALT=""><br/>
  9.   <SCRIPT LANGUAGE="JavaScript">
  10.   <!--
  11.         document.write("文件地址:"+document.location+"<br/>")
  12.         document.write("文件标题:"+document.title+"<br/>");
  13.         document.write("图片路径:"+document.images[0].src+"<br/>");
  14.         document.write("文本颜色:"+document.fgColor+"<br/>");
  15.         document.write("背景颜色:"+document.bgColor+"<br/>");
  16.   //-->
  17.   </SCRIPT>

  19. </BODY>
  20. </HTML>
复制代码运行代码另存代码

[ 本帖最后由 aircy 于 2007-1-30 15:01 编辑 ]

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 13:56:05 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程6

实例六（4.2）、
     本实例主要介绍了Document对象读取表单元素的使用
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <SCRIPT LANGUAGE="JavaScript">
  6.   <!--
  7.         function firstSubmit(){
  8.         alert(document.form1.a01.value);//将表单名为a01的值显示出来
  9.         }
  10.         function copyFirstSubmit(){
  11.         alert(document.form1.a01.value);
  12.     document.form1.a02.value=document.form1.a01.value;//将表单名为a01的值给a02，取a01的值也可以使用、、、//document.form1.elements[0].value
  13.         }
  14.   //-->
  15.   </SCRIPT>

  17. </HEAD>

  19. <BODY>
  20.   <FORM name="firstForm" METHOD=POST ACTION="">
  21.         <INPUT TYPE="text" NAME="firstText" value="哈啰">
  22.   </FORM>
  23.   
  24.   <FORM name="secondForm" METHOD=POST ACTION="">
  25.         <INPUT TYPE="text" NAME="secondText" value="哈啰">
  26.         <INPUT TYPE="submit" name="hehe" value="哈哈">
  27.   </FORM>
  28.   <SCRIPT LANGUAGE="JavaScript">
  29. <!--
  30.         var first = document.firstForm.name;
  31.         var second = document.secondForm.name;
  32.         //alert("第一个表单的名字："+first);//读取表单元素，将注释去点即可
  33.         //alert("第二个表单的名字："+second);
  34.         //alert("第二个表单的按钮的name是："+document.secondForm.elements[1].name);
  35.         //alert("第二个表单文本域的值："+document.secondForm.elements[0].value);
  36.         //alert("第一个文本域："+document.firstForm.firstText.value);
  37. //-->
  38. </SCRIPT>
  39. <FORM name="form1" METHOD=POST ACTION="">
  40.         a01<INPUT TYPE="text" NAME="a01"/><INPUT TYPE="button" name="01s" value="提交" onclick="firstSubmit()"/><br/>
  41.         a02<INPUT TYPE="text" NAME="a02"/><INPUT TYPE="button" name="02s" value="提交" onclick="copyFirstSubmit()"/>×在a01中输入值后再提交
  42. </FORM>
  43. </BODY>
  44. </HTML>
复制代码运行代码另存代码

[ 本帖最后由 aircy 于 2007-1-30 15:01 编辑 ]

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 15:00:11 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程7

实例七（4.3）、
     本实例主要介绍了Document对象读取表单元素的使用，一个注册验证代码
  1. <html>
  2.   <head>
  3.     <title>用户注册</title>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">
  5. <!--
  6. body {
  7.         margin-left: 0px;
  8.         margin-top: 0px;
  9.         margin-right: 0px;
  10.         margin-bottom: 0px;
  11. }
  12. .STYLE1 {color: #FFFFFF}
  13. -->
  14.   </style>
  15.   <SCRIPT type="text/javascript">
  16.     function Form_Submit()
  17.         {
  18.                 if(regForm.userNumber.value=="")
  19.                 {
  20.                  alert("用户名不能为空!");
  21.                  return false;
  22.                 }
  23.                 else if(regForm.userpassWord.value=="")
  24.                 {
  25.                  alert("密码不能为空!");
  26.                  return false;
  27.                 }
  28.                 else if(regForm.userpassWord.value!=regForm.reuserpassWord.value)
  29.                 {
  30.                 alert("两次输入的密码不一致!");
  31.                  return false;
  32.                 }
  33.                 return true;
  34.                 //regForm.submit(); //不采用表单提交
  35.         }
  36.   </SCRIPT>
  37.   </head>
  38.   
  39.   <body>
  40.   <FORM id="register" name="regForm" method="post" action="">
  41.   <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#0099FF">
  42.     <tr>
  43.       <td align="center" valign="middle" bgcolor="#FFFFFF">用户注册</td>
  44.     </tr>
  45.     <tr>
  46.       <td align="center" valign="middle" bgcolor="#FFFFFF">用户账号：
  47.       <input name="userNumber" type="text" id="usernumber" size="15"></td>
  48.     </tr>
  49.     <tr>
  50.       <td align="center" valign="middle" bgcolor="#FFFFFF">用户密码：
  51.       <input name="userPassWord" type="text" id="userpassWord" size="15"></td>
  52.     </tr>
  53.     <tr>
  54.       <td align="center" valign="middle" bgcolor="#FFFFFF">确认密码：
  55.       <input name="reuserPassWord" type="text" id="reuserpassWord" size="15"></td>
  56.     </tr>
  57.     <tr>
  58.       <td align="center" valign="middle" bgcolor="#FFFFFF">电子邮箱：
  59.       <input name="email" type="text" id="email" size="15"></td>
  60.     </tr>
  61.     <tr>
  62.       <td align="center" valign="middle" bgcolor="#FFFFFF"><input type="button" name="Submit" value="提交" onClick="Form_Submit()"></td>
  63.     </tr>
  64.   </table>
  65. </FORM>
  66.   </body>
  67. </html>
复制代码运行代码另存代码

[ 本帖最后由 aircy 于 2007-1-30 15:02 编辑 ]

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 15:04:02 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程8

实例八（4.4）、
     本实例主要介绍了Document对象读取表单元素的使用（单选按钮、复选按钮的使用）
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9.   <SCRIPT LANGUAGE="JavaScript">
  10.   <!--
  11.         function sel_coun(){
  12.                 var country = document.form1.country.length; //得到radio个数
  13.         for(var i=0;i<country;i++){
  14.         if(form1.country[i].checked){
  15.         alert(form1.country[i].value);
  16.         break;
  17.         }else{
  18.         continue;
  19.         }
  20.         }
  21.         }

  23.         function sel_love(){
  24.                 var country = document.form1.love.length; //得到checkbox个数
  25.                 var love =""; //new Array();
  26.                 for(var i=0;i<country;i++){       
  27.                 if(form1.love[i].checked){       
  28.                 love+=form1.love[i].value+"、";  
  29.                 }
  30.                 }
  31.                 love = love.substring(0,love.lastIndexOf("、"));
  32.                 alert("你的爱好有:"+love)
  33.         }
  34.   //-->
  35.   </SCRIPT>
  36. </HEAD>

  38. <BODY>
  39. <FORM name ="form1" METHOD=POST ACTION="">
  40. 单选应用
  41. <INPUT TYPE="radio" NAME="country" value="中国" checked>中国
  42. <INPUT TYPE="radio" NAME="country" value="法国">法国
  43. <INPUT TYPE="radio" NAME="country" value="美国">美国
  44. <INPUT TYPE="button" value="提交" onclick="sel_coun();"/><br/>
  45. 复选应用
  46. <INPUT TYPE="checkbox" NAME="love"  value="打球">打球
  47. <INPUT TYPE="checkbox" NAME="love" value="游泳">游泳
  48. <INPUT TYPE="checkbox" NAME="love" value="看书">看书
  49. <INPUT TYPE="checkbox" NAME="love" value="跳舞">跳舞
  50. <INPUT TYPE="button" value="提交" onclick="sel_love();"/><br/>
  51. </FORM>

  53. </BODY>
  54. </HTML>
复制代码运行代码另存代码

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 15:12:14 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程9

实例九（4.5）、
     本实例主要介绍了Document对象读取表单元素的使用（下拉菜单、链接属性的使用）
  1. <html>
  2. <head>
  3. <title>下拉菜单</title>
  4. <script language="javascript">
  5. function display()
  6. {
  7.         if(document.selectForm.team.selectedIndex==0) //判断是否进行了选择
  8.         {
  9.                 alert("您没有做选择!");
  10.         }
  11.         else
  12.         {
  13.                 var index = document.selectForm.team.selectedIndex; //读出当前选项的下标
  14.                 alert("您选择的球队是:"+document.selectForm.team.options[index].value);
  15.         }
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <div align="center">
  21.   <form action="" method="post" name="selectForm" id="selectForm">
  22.     <table width="70%"  border="0">
  23.       <tr>
  24.         <td>请选择喜欢的球队:</td>
  25.       </tr>
  26.       <tr>
  27.         <td><select name="team">
  28.           <option value="0">--未选择--</option>
  29.           <option value="巴塞罗那">巴塞罗那</option>
  30.           <option value="AC米兰">AC米兰</option>
  31.           <option value="尤文图斯">尤文图斯</option>
  32.           <option value="曼彻斯特联">曼彻斯特联</option>
  33.           <option value="切尔西">切尔西</option>
  34.         </select></td>
  35.       </tr>
  36.       <tr>
  37.         <td><input name="look" type="button" id="look" value="单击查看" onClick="display()"></td>
  38.       </tr>
  39.     </table>
  40. <a href="http://www.baidu.com" name="baidu" target="_blank">有问题百度一下</a>
  41. <br>
  42. <a href="http://www.google.com" name="google" target="_blank">Google也可以</a>
  43. <script language="javascript">
  44. document.write("第一个连接的信息:<br>");
  45. document.write("<b>href:</b>"+document.links[0].href+"<br>");
  46. document.write("<b>pathname:</b>"+document.links[0].pathname+"<br>");
  47. document.write("<b>port:</b>"+document.links[0].port+"<br>");
  48. document.write("<b>protocol:</b>"+document.links[0].protocol+"<br>");
  49. document.write("<b>target:</b>"+document.links[0].target+"<br>");
  50. document.write("<br><br>");
  51. document.write("第二个连接的信息:<br>");
  52. document.write("<b>href:</b>"+document.links[1].href+"<br>");
  53. document.write("<b>pathname:</b>"+document.links[1].pathname+"<br>");
  54. document.write("<b>port:</b>"+document.links[1].port+"<br>");
  55. document.write("<b>protocol:</b>"+document.links[1].protocol+"<br>");
  56. document.write("<b>target:</b>"+document.links[1].target+"<br>");
  57. </script>
  58.   </form>
  59. </div>
  60. </body>
  61. </html>
复制代码运行代码另存代码

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-1-30 15:23:27 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程10

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

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>图像编程</title>
  5. <script language="javascript">
  6. 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");
  7. var index = 0;

  9. function GetNext()
  10. {
  11.         index++;
  12.         if(index < imageArray.length)  //判断图像的下标是否小于数组的长度
  13.         {
  14.                 document.images["saint"].src=imageArray[index]; //如果小于，那么就显示该下标所指定的图像
  15.         }
  16.         else
  17.         {
  18.                 index = 0;
  19.                 document.images["saint"].src=imageArray[index];        //如果不小于，那么就显示第一幅图像，并把index值置为0       
  20.         }
  21. }

  23. function GetPrev()
  24. {
  25.         index--;
  26.         if(index >= 0) //判断图像的下标是否大于0
  27.         {
  28.                 document.images["saint"].src=imageArray[index]; //如果大于，那么就显示该下标所指定的图像
  29.         }
  30.         else
  31.         {
  32.                 index = imageArray.length-1;
  33.                 document.images["saint"].src=imageArray[index];                //如果不大于，那么就显示最后一幅图像，并把index值置为数组长度减1       
  34.         }
  35. }
  36. </script>
  37. </head>
  38. <body>
  39. <img name="saint" src="http://yi-bo.com/Article/UploadFiles/200610/2006101751022184.jpg" width="400" height="300">
  40. <br>
  41. <a href="javascript:GetNext()">下一幅</a>
  42. <a href="javascript:GetPrev()">上一幅</a>
  43. </body>
  44. </html>
复制代码运行代码另存代码

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-2-2 19:57:22 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程11

实例十一（6）、
     本实例主要介绍了鼠标动作的使用，这个例子太简单了，可以多找点别点资料看看！
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>改变文字样式</title>
  5. <style type="text/css">
  6. .red{ color:red;
  7. font-style:italic;
  8. font-size:32;
  9. }
  10. .blue{color:blue;
  11. font-size:36;
  12. }
  13. .black{color:black;
  14. }
  15. </style>

  17. <script language="javascript">
  18. function color(e)
  19. {
  20.         switch(e.srcElement.id){ //获得标记的id
  21.                 case "first":
  22.                         document.getElementById("first").className="red"; //修改文字的样式
  23.                         break;
  24.                 case "second":
  25.                         document.getElementById("second").className="blue";
  26.                         break;
  27.         }
  28. }

  30. function clearText(e)
  31. {
  32.         switch(e.srcElement.id){
  33.                 case "first":
  34.                         document.getElementById("first").className="black";
  35.                         break;
  36.                 case "second":
  37.                         document.getElementById("second").className="black";
  38.                         break;
  39.         }
  40. }
  41. </script>
  42. </head>
  43. <body>
  44. <div id="first" onMouseOver="color(event);" onMouseOut="clearText(event);">我是新手，摸一下</div>
  45. <br>
  46. <div id="second" onMouseOver="color(event);" onMouseOut="clearText(event);">老油条了</div>
  47. </body>
  48. </html>
复制代码运行代码另存代码

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-2-2 20:02:50 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程12

实例十二、
     本实例主要介绍了js访问XML节点的应用，读节点最基本的有2中方法，我分2个实例发上来，方便学习。
  1. <html>
  2. <head>
  3. <title>访问XML文档</title>
  4. <script language="javascript">
  5. function GetInfo()
  6. {
  7.         var document_xml = new ActiveXObject("Microsoft.XMLDOM");
  8.         document_xml.load("info.xml");  //加载info.xml
  9.         var        RootNode = document_xml.documentElement;  //获得info.xml文档的根节点
  10.         var FirstNode = RootNode.firstChild;  //获得根标记的第一个子节点
  11.         var SecondNode = RootNode.lastChild;  //获得根标记的最后一个子节点
  12.         var nameNode = FirstNode.firstChild;
  13.         var ageNode = nameNode.nextSibling;  //获得nameNode节点的下一个兄弟结点
  14.         var sexNode = FirstNode.lastChild;
  15.         var str = "名称是:"+nameNode.firstChild.nodeValue+
  16.                                 "\n年龄是:"+ageNode.firstChild.nodeValue+
  17.                                 "\n性别是:"+sexNode.firstChild.nodeValue+
  18.                                 "\n描述是:"+SecondNode.firstChild.nodeValue;
  19.                                
  20.         alert(str);
  21.        
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <input type="button" name="Submit" value="按钮" onClick="GetInfo()">
  27. </body>
  28. </html>
复制代码运行代码另存代码

因为不能发附件，所有2个文件分别帖上来了，测试的时候分别保存即可。下面的是XML文件。说了一句废话，相信不会有人认为这个也是html！：）
  1. <?xml version="1.0" encoding="gb2312"?>
  2. <Info>
  3.         <basic country="china">
  4.                 <name num="3">霍元甲</name>
  5.                 <age>42</age>
  6.                 <sex>男</sex>
  7.         </basic>
  8.         <description>精武门的创始人</description>
  9. </Info>
复制代码运行代码另存代码

[ 本帖最后由 aircy 于 2007-2-2 20:10 编辑 ]

使用道具 举报

aircy

Rank: 2

升级  73.33%

注册时间
2006-7-12
威望
77
阅读权限
20
积分
160
帖子
68
精华
1
UID
54280
状态
当前离线
发表于 2007-2-2 20:14:33 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料 QQ 查看个人网站

开始分享我学习js的过程12－1

实例十三、
     本实例主要介绍了js访问XML节点的应用，读节点的又一种方法，我上面发了一个，xml跟上面的一样就不重复了。
  1. <html>
  2. <head>
  3. <title>按名称访问XML文档中的元素</title>
  4. <script language="javascript">
  5. function GetInfo()
  6. {
  7.         var document_xml = new ActiveXObject("Microsoft.XMLDOM");
  8.         document_xml.load("info.xml");
  9.         var nameNode = document_xml.getElementsByTagName("name"); //获得文档中所有<name>标记
  10.         var ageNode = document_xml.getElementsByTagName("age"); //获得文档中所有<age>标记
  11.         var sexNode = document_xml.getElementsByTagName("sex");  //获得文档中所有<sex>标记
  12.         var desNode = document_xml.getElementsByTagName("description");//获得文档中所有<description标记>
  13.         var str = "名称是:"+nameNode(0).firstChild.nodeValue+
  14.                                 "\n年龄是:"+ageNode(0).firstChild.nodeValue+
  15.                                 "\n性别是:"+sexNode(0).firstChild.nodeValue+
  16.                                 "\n描述是:"+desNode(0).firstChild.nodeValue; //将这些标记的文本内容添加进变量str中
  17.                                
  18.         alert(str);
  19.        
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. 点下我看看》》》<input type="button" name="Submit" value="按钮" onClick="GetInfo()">
  25. </body>
  26. </html>
复制代码运行代码另存代码

使用道具 举报

小鱼泡泡

Rank: 3Rank: 3

升级  1.33%

注册时间
2006-9-2
威望
101
阅读权限
30
积分
204
帖子
81
精华
0
UID
56030
状态
当前离线
发表于 2007-2-5 16:46:15 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料

这个DIV自适应问题，大家来看看

使用道具 举报

los

Rank: 6Rank: 6

升级  77.3%

注册时间
2007-12-28
威望
869
阅读权限
70
积分
2546
帖子
971
精华
0
UID
81082
状态
当前离线
发表于 2008-1-12 21:20:50 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
一起学习，楼主想必现在已是大牛了

使用道具 举报

andy-lin

Rank: 3Rank: 3

升级  14%

注册时间
2007-9-23
威望
105
阅读权限
30
积分
242
帖子
109
精华
0
UID
76314
状态
当前离线
发表于 2008-1-12 21:25:31 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
很好很实在。
THX

使用道具 举报

不告诉你

Rank: 2

升级  87.33%

注册时间
2007-12-5
威望
8
阅读权限
20
积分
181
帖子
13
精华
0
UID
79867
状态
当前离线
发表于 2008-1-14 14:10:26 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
楼主辛苦了

使用道具 举报

ystar

Rank: 2

升级  49.33%

注册时间
2007-12-12
威望
59
阅读权限
20
积分
124
帖子
65
精华
0
UID
80216
状态
当前离线
发表于 2008-1-14 14:32:28 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
上次访问: 2007-11-16 17:13
最后发表: 2007-8-20 10:30

楼主有阵子没来,学习不知道有没有中断.

使用道具 举报

小贼

Rank: 1

升级  62%

注册时间
2006-2-17
威望
24
阅读权限
10
积分
31
帖子
3
精华
0
UID
47108
状态
当前离线
发表于 2008-2-28 16:01:24 |显示全部楼层 |串个门|加好友|打招呼|发消息 |
查看详细资料
正在学习中,感谢楼主发了一些入门的东西,真的很感激!

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入无忧

Archiver|手机版|无忧脚本 ( 苏ICP备05080427号 )|值班电话:027-62300445  

GMT+8, 2012-2-7 21:35 , Processed in 0.079940 second(s), 14 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 1999-2011 无忧脚本

回顶部