javascript

本文详细介绍了JavaScript的基础知识,包括概述、使用方法、基础语法、常用对象等,并深入探讨了DHTML、DOM操作、事件处理等内容。


1.javascript概述
2.如何使用
3.基础语法
4.常用对象
 a.js中的对象
 b.String对象
 c.数组:存储一些类似的数据
 d.Math对象:常见的数学计算
 e.Number 对象
 f.正则表达式对象
 g.Date 日期对象
 h.Function 对象
  1).定义函数/方法
  2).重载
  3).js中定义方法
  i).全局函数
5.DHTML--动态的 HTML
 a) 什么是 DHTML
 b) 对象模型树
 c) window 对象
 d) document 对象
  1).找到节点对象:遍历树
  2).读取或者修改节点的信息
  3).为文档添加新的内容
  4).删除节点
 e) HTML DOM 
  1).Select和Option
  2).Table
 f) screen 对象
 g) history 对象
 h) location 对象
 j) event:事件
  1).事件的分类
  2).事件可以取消
  3).js中,事件有冒泡机制
  4).event 对象:
  5).元素定义事件
6.面向对象基础:数据和行为的封装
 a).使用 Object 对象实现简单封装
 b).实现自定义封装:构造函数,实现真正的封装
 C).JSON语法实现封装
-----------------------------------------


1、javascript概述


  什么是 javascript:一种基于对象和事件驱动的解释性的脚本语言,
       内嵌到 html 页面上,由浏览器解释运行
 
  作用:为 html 页面添加动态效果,
   常用于 页面元素的动态显示、输入验证、客户端计算等
 
  js语言的组成:标准的 js 代码  +  jquery + ajax

 

2.如何使用 js 代码


   方式1:onXXXX=""
   方式2:script代码块---封装当前页面的代码
     <head><script>代码
   方式3:js文件---建议使用
     代码写入单独的 js 文件
     页面使用 <script src 引入

 

3.基础语法:js 类似于 c/java


   a、基础


    常量和变量
    声明变量  var 变量名称 = 初始值 ;
    标识符: 由字母、数字、下划线、$组成,不能以数字开头;不能与系统关键字重复
    注释  //  /**/
    大小写敏感,以 ; 代表一行代码的结束


  
   b、数据类型


    基本类型:string、number、boolean
    
    number:存储的都是浮点类型 1----1.00000000000000001/0.99999999999999999999
    
      特殊类型:null、undefiend
      复杂类型:Date、Math、Array、Object
    ...
  


   c、数据类型的转换


    隐式转换:直接转换--规则
     
    
    显式转换:调用方法---parseInt/parseFloat/toString/typeof
      额外的方法: isNaN---是否为数值
    --------------------------------       
    练习:求平方
     .html:
      <input type="text"  id="txtData" />
      <input type="button" value="计算"   onclick="getSquare();"/>
     .js:
      function getSquare(){
        var s= document.getElementById("txtData").value;
        if(isNaN(s)){
         alert("清重新输入 ");
        }else{
         var data=parseFloat(s);
         alert(data*data);
        }
       }
     
    -------------------------     
        
        
   


   d、运算符


    相等和严格相等  ==   ===
    三元运算符    表达式?value1:value2;
    ---------------------------------     
    练习:利用三元运算符猜数字
    .html:
     <input type="text" id="txtNum" onblur="guess();"/>
    
    .js:
     function guess(){
      var s=document.getElementById("txtNum").value;
        if(isNaN(s)){
         alert("清重新录入");
        }else{
         var n=parseInt(s);
         var result= n>56?"大了":"小了";
         result = n==56?"对了":result;
         alert(result);
            }
      }
      
   ------------------------------------------
    


  
   e、流程控制


    条件
     if/else
     switch/case
    循环
     for
     while
    ------------------------------------     
    练习:
     .html:
      <input type="button" value="1-50的和"  onclick="getSum();"/>
     
     .js:
      function getSum(){
       var sum=0;
       for(var i=1;i<=50;i++){
        sum+=i;
       }
       alert(sum);
      }
   ------------------------------------ 
---------------------------------------------------------------------------------------


4、js对象


------------------------------------------------


a、js中的对象


    内置对象
     简单对象:String/Number/Boolean
     复杂对象:Array/Date/Math/Regex...
    
    浏览器对象
    DOM对象
    ActiveX对象
------------------------------------------------


b、String对象


    创建:var s="";  var s = new String();
    属性: length
    方法:
     常用方法
      toLowerCase/toUpperCase
      indexOf/lastIndexOf
      charAt/charCodeAt
      substring
      replace(oldstr,newstr)
      split
     结合正则表达式使用,实现对字符串的搜索、匹配和替换---常用于操作字符串
      search
      match
      replace

     ------------------------------------     
     练习:计算字符串中出现js的次数
      .html:
       <input type="text" id="txtString" onblur="tryString();" />
      .js:
       function tryString(){
        var s=document.getElementById("txtString").value;
        var count=0;
        var index=s.indexOf("js");
         while(index>-1){
           //abcjsjkjsd
           // 012345 6789
          count++;
          index=s.indexOf("js",index+2);
         }
         alert(count);
       }
     ---------------------------------  
     练习:用正则表达式代换字符串中的数字
      .html:
       <input type="text" id="txtString" onblur="tryString();" />
      .js:
       function tryString(){
        var s = document.getElementById("txtString").value;
        var s= s.replace(/\d+/g,"*");
        document.getElementById("txtString").value=s;
       }
    ----------------------------------------
------------------------------------------------


c、数组:存储一些类似的数据


    创建数组、赋值
     var r = new Array();
     r[0] = "mary";
     r[1] = 10;
     r[2] = true;
    
     var r = new Array(100,"mary",false);
    
     var r = [100,"mary",false];
    
    属性:length
    
    方法
     toString/join:链接,常用于输出
     concat:相加
     reverse:翻转
     sort:默认,按照字符比较;可以自定义一个用于比较的方法,由sort方法调用
     slice:
    ------------------------------------    
    练习:翻转,排序方法,用传参数的方法
    .html:
     <input type="text" id="txtArray" value="123,2,3,56,789,6" />
     <input type="button" value="翻转" onclick="operateArray(1);"/>
     <input type="button" value="默认按字符排序" onclick="operateArray(2);"/>
     <input type="button" value="按数值排序" onclick="operateArray(3);"/>
    .js:
     function operateArray(t){
      var s= document.getElementById("txtArray").value;
      var array =s.split(",");
      //判断操作的类型
      switch(t){
       case 1:
        //翻转
        array.reverse();
        break;
        
       case 2:
        //排序--按照字符排序
        array.sort();
        break;
       case 3:
        //按照--数值排序
        array.sort(sortFunc);
        break;
      }
      //用分号连接和输出
      alert(array.join(";"));
     }
     //自定义的比较方法
     function sortFunc(a,b){
      return a-b;
      
     }
   -------------------------------------
------------------------------------------------ 


d、Math对象:常见的数学计算


    使用,不需要new ,直接使用
    属性:数学常数
    方法:round/random/floor/ceil/abs/max/...
    ------------------------------------   
    练习:指定一个范围获取随机数
     .html:
      <input type="button" value="范围"  onclick="randomNumber();"/>

     .js:
      function randomNumber(){
       var r=Math.random();//得到的是一个随机的小数 0 =< r < 1
       var max=30;
       var min=1;
       var result=Math.floor(r*(max-min)+min);
       alert(result); 
      }      
------------------------------------------------


e、Number 对象


    toFixed 方法
------------------------------------------------  


f、正则表达式对象


    var r = /\d{3}/;
    r.test(string);---true/false
    正则表达式:/   /
       /^ $/  从头到尾
       /   /gi , g全局 i不区分大小写
    汉字的范围:\u4e00-\u9fa5
             -----------------------------   
    实现录入的验证
    用户名:_________   必须是3到5个长度的大、小写字母、数字的组合    [a-zA-Z0-9]{3,5}
    
    练习:实现对文本的验证
     .html:
      <input type="text" id="txtName" onblur="judgeName();" />
     .js:
      function judgeName(){
        var name=document.getElementById("txtName").value;
        //定义一个正则表达式
        var reg=/^[\u4e00-\u9fa5]{3}$/;
        //验证string,并判断,提示
        if(!reg.test(name))
         alert("清重新录入");
       }
------------------------------------------------


g、Date 日期对象


    创建日期对象
     var d = new Date();---当前日期和时间
     var d = new Date("2013-01-01 12:12:12");


 * 对Date的扩展,将 Date 转化为指定格式的String       
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符       
 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)       
 * eg:       
 * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423       
 * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04       
 * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04       
 * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04       
 * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 


    方法
     toXXX:转换为某种格式的字符串,常用于界面的显示,如 toDateString/toTimeString/.
    ...
     getXXX:读取时间,如getFullYear/getMonth/getDate
     setXXX:修改时间,如setDate/setMonth/...
    
---------------------------------------------------------------------------------------
-----------------------------------------------------------
--------------第二天-------------
--------------------------------------------


h, function对象

 

  函数的参数 不用写数据类型


  1.使用 function关键字,参数直接定义,使用return返回值


  2.不能定义重载的方法,新的方法覆盖旧的方法


   重载:js中方法名相同,覆盖(以最后一次为准)
   模拟方法重载的实现:(只需要一个方法就可以)用arguments
    arguments:当前方法的参数数组
    arguments.length-----得到个数
     xxx[index]------得到元素
   练习 :
    .html:
     <input type="button" value="模拟重载" onclick="tryArguments(12);" />
    .js:
     function tryArguments(){
      if(arguments.length==1){
       var data=arguments[0];
       alert(data*data);
      }else if(arguments.length==2){
       alert(arguments[0]+arguments[1]);
      }
     }

 

  3.定义方法


   方式一:function 声明(一般方式)


   方式二:使用function对象,创建一个方法的实例,最后一个参数是方法体,其它参数是方法的参数


    例子:function对象
    function testFunc(){
     var array=[1,12,56,789];
     //function对象
     var sortFunc =new Function("a","b","return a-b;");
     
     array.sort(sortFunc);
     alert(array.toString);
    }


   方式三:使用匿名函数实现(优先使用)


    var f1=function(a,b){
      alert(a+b);
     };
    f1(10,20);
    例子:匿名函数
    function testFunc(){
     var array=[1,12,56,789];
     //匿名函数
     var sortFunc =function(a,b){
       return a-b;
      };
     
     array.sort(sortFunc);
     alert(array.toString);
    }


  4.全局方法


   parserInt/parseFloat
   isNaN
   eval  用于计算某个字符串 "1+2-3+5" -> 5
   decodeURI/encodeUrI
        解码/编码
       
    练习:模拟简单的计算器
     .html:
      <input type="button" value="1" onclick="cal(this.value);" >
      <input type="button" value="2" onclick="cal(this.value);" >
      <input type="button" value="3" onclick="cal(this.value);" >
      <input type="button" value="4" onclick="cal(this.value);" >
      <input type="button" value="5" onclick="cal(this.value);" >
      <input type="button" value="6" onclick="cal(this.value);" >
      <input type="button" value="7" onclick="cal(this.value);" >
      <input type="button" value="8" onclick="cal(this.value);" >
      <input type="button" value="9" onclick="cal(this.value);" >
      <input type="button" value="0" onclick="cal(this.value);" >
      <input type="button" value="+" onclick="cal(this.value);" >
      <input type="button" value="-" onclick="cal(this.value);" >
      <input type="button" value="=" onclick="cal(this.value);" >
      
      <input type="text" id="txtData" >

     
     .js:
      function cal(str){
       if(str=="="){
        var v=document.getElementById("txtData").value;
        document.getElementById("txtData").value=eval(v);
       }else{
        document.getElementById("txtData").value+=str;
       }      
      
      }
--------------------------------------------------------------------------------


5.DHTML---------动态的HTML----


-----------


a.DHTML:利用js方法和对象,实现动态效果

 

b.对象模型树DOM


 window

     -history
     -navigator
     -document
     -location-------导航栏
     -event----------事件

 

c.window对象   window.xxx


  window对象表示浏览器中打开的窗口


  常用属性:


   -document:整个html文档
   -history:历史访问记录
   -location:导航地址栏
   -name:
   -opener:
 


  对话框


  alert(str)
  
  confirm(str);//确认对话框, str 提示信息, 有返回值true/false
   
  prompt(str,value);//输入框,str提示信息 ,s有返回值


  
 窗口的打开和关闭


 
  open---- 代码中动态的打开某个页面
  open(url);
  open(url,name);//为窗口取了名字不会重复打开
  open("url","name","width=xxx,height=xxx,toolBar=yes");
   例子;
    .html:
     <input  />
    
    .js:
     window.open("url");


 定时器方法:时钟


  setInterval(对象或则代码,时间例如1000毫秒);周期性触发代码,返回一个定时器对象
  clearInterval(定时器对象);停止定时器对象
  setTimeout(,);一次性触发,时间倒计时
  
  例子:每隔1s调用showTime方法
  .html:
   <input type="text" id="txtTime"  />
   <input type="button" value="显示时间"  onclick="showTime();" />
   <input type="button" value="启动时钟" onclick="startClock();" />
   <input type="button" value="停止时钟" onclick="stopClock();" />
  .js:
   function showTime(){
    var now =new Date();
    document.getElementById("txtTime").value=now.toLocaleTimeString();
   }
   var timer;
   function startClock(){
    //每隔一秒地调用showTime对象
    timer=window.setInterval(showTime,1000);
    //window.setInterval("showTime();",1000);//也可
   }
   function stopClock(){
    window.clearInterval(timer);
   }
  例子:一次性倒计时时间,和取消
   .html:
    <input type="button" value="一次性" onclick="wait();" />
    如果想取消此操作清点击<a href="javascript:cancelWait();">这里</a>
   .js:
    var timer1;
    function wait(){
     timer1= window.setTimeout("alert('hello');",5000);
    }
    function cancelWait(){
     window.clearTimeout(timer1);
    }


d.document对象:代表整个html文档, 将整个文档做成一颗节点树,以DOM的方式操作document


  DOM(文档对象模型)节点树 根元素-html-head body --...
  ((增删改查))


 1.找到节点对象:遍历树(三种查找方法)


  *.document.getElementById();------根据id精确查询
  *.层次结构查询:
   parentNode/childNodes/lastChild/firstChild 
   返回对象(不同的名字使用)
   length属性 , 空白算一个子节点,每个子节点的属性nodeName
  *.getElementsByTagName(标签名字)---根据标签的名称,返回一个数组
  


 2.读取或者修改节点的信息:将html标记对象化,对象可用标记的属性


  1).将html标记对象化; 例如:xxx.src,xxx.href,xx.value
  2).innerHTML ;  改变标记中间文本 ;
  3).style.color/fontsize/dispaly;修改简单样式,每次只能修改一个
  4).className="";修改复杂样式(先定义一个样式类,再调用)  
  5).nodeName 属性;得到全大写的节点名称(不知道是什么节点的时候)
  
  
  onxxx="return false;";取消事件
  
 例子:修改html,js
  .html:
   <input type="button" value="按钮" onclick="testDOM();" />
   <img id="img1" src="xxx.jpg" />
   <a id="link1" href="#"> Click me </a>
   <p id="p1">段落</p>
   <h3 id="h3">h3 text</h3>
  .js:
   function testDom(){
   //修改图片
    var obj=document.getElementById("img1");
    obj.scr="xxx.jpg";
   //修改链接
    var linkObj=document.getElementById("link1");
    linkObj.href="http://www.google.com";
    linkObj.innerHTML="google";
   //修改简单样式 
    var pObj=document.getElementById("p1");
    pObj.innerHTML="new text";
    pObj.style.color="red";
    pObj.style.backgroundColor="gray";
    pObj.style.fontSize="30";
   //修改复杂样式
    var h3Obj=document.getElementById("h3");
    h3Obj.className="style1"; 
   }
 例子:模拟输入验证
  .html:
   用户名:<input style="text" id="txtName" onblur="valiName();" />
    <span id="nameInfo">3-5位字母和数字的组合</span>
    <br/>
   电话:<input type="text" id="txtPhone" onblur="valiPhone();" />
    <span id="phoneInfo">5位数字</span>
   <input type="button" value="保存" onclick="return validateDate();" />
  
  .js:
   //验证姓名
   function valiName(){
    var name=document.getElementById("txtName").value;
    var reg=/^[a-zA-Z0-9]{3,5}$/;
    var spanObj=document.getElementById("nameInfo");
    if(reg.test(name)){
     spanObj.style.color="green";
    }else{
     spanObj.style.color="red";
    }
    return reg.test(name);
   }
   //验证电话
   function valiPhone(){
    var phone=document.getElementById("txtPhone").value;
    var reg=/^\d{5}$/;
    var spanObj=document.getElementById("phoneInfo");
    if(reg.test(phone)){
     spanObj.style.color="green";
    }else{
     spanObj.style.color="red";
    }
    return reg.test(phone);
   }
   逐一验证所有的项
   function validateDate(){
    var r1=valiName();
    var r2=valiPhone();
    return r1&&r2;
   }

  例子:模拟购物车
  .html
  
  <table>
   <tr>
    <td>名称</td>
    <td>价格</td>
    <td>数量</td>
    <td>小计</td>
   </tr>
   <tr>
    <td>aaa</td>
    <td>10.0</td>
    <td>
     <input type="button" value="-" onclik="sub(this);"  />
     <input type="text" value="1"/>
     <input type="button" value="+" onclick="add(this);" />
    
    </td>
    <td></td>
   </tr>
   <tr>
    <td>bbb</td>
    <td>20.0</td>
    <td>
     <input type="button" value="-" onclik="sub(this);"  />
     <input type="text" value="1"/>
     <input type="button" value="+" onclick="add(this);" />
    
    </td>
    <td></td>
   </tr>
  
  </table>
  总计:<span id="totalPrice"> </span>
  
  .js:
  
   function sub(btnObj){
    var nodes=btnObj.parentNode.childNodes;
    
    for(var i=0;i<nodes.length;i++){
     var child=nodes[i];
     if(child.nodeName=="INPUT"&&child.type=="text"){
      var n=parseInt(child.value);
      if(n>0){
       n--;
       child.value=n;
      }
     }
    }
     //计算
     calSum();
   }
   function add(btnObj){
    var nodes=btnObj.parentNode.childNodes;
    
    for(var i=0;i<nodes.length;i++){
     var child=nodes[i];
     if(child.nodeName=="INPUT"&&child.type=="text"){
      var n=parseInt(child.value);
      n++;
      child.value=n;
     }
    }
     //计算
     calSum();
   }

 //表行:价格在第二个td里,数量在第三个td里的第二个input里
 /*循环行
 ;*/
 function calSum() {
  //找到所有的tr表行
  var tableObj = document.getElementById("table1");
  var rows = tableObj.getElementsByTagName("tr");
  //从第二行开始循环
  var total = 0;
  for(var i=1;i<rows.length;i++)
  {
   //得到当前行
   var row = rows[i];
   //先找到价格
   var price = parseFloat(row.getElementsByTagName("td")[1].innerHTML);
   //找到数量
   var quantityStr = row.getElementsByTagName("td")[2].
        getElementsByTagName("input")[1].value;
   var q = parseInt(quantityStr);
   //计算小计:显示第4个td,计算总计
   var sum = price * q;
   row.getElementsByTagName("td")[3].innerHTML = sum.toFixed(2);
   //计算总计
   total += sum;
  }
  //显示总计
  document.getElementById("totalPrice").innerHTML = total.toFixed(2);
 }
------------------------------------------------------------------------------------------
----------第二天------------
------------------------------------------------------


 3.为文档添加新的内容 


  a)创建新节点createElement("")
  b)设置节点的信息
  c)加入文档appendChild/insertBefore
   新节点必须加入某个父节点
   
   
  创建新节点
   document.createElement(标签名字);
   
  添加新节点(作为已有节点的子节点添加)
   parentNode.appendChild(newNode);默认在最后添加
  添加新节点,加在谁(refNode)之前
   parentNode.insertBefore(newNode,refNode)
   
  删除节点
   parentNode.removeChild(childNode);删除某个子节点
 
 例子:添加节点
  .html: 
    <form id="form1">
    <input type="button" value="添加一个新节点" onclick="addNewNode()"  />
    </form>
  .js:
   function addNewNode(){
    var formObj=document.getElementById("form1");
    //按钮后添加一个文本框
    var txtObj=document.createElement("input");
    txtObj.type="text";
    txtObj.value="java";
    formObj.appendChild(txtObj);
    //按钮前添加一个段落
    var pObj=document.createElement("p");
    pObj.innerHTML="段落的文本";
    formObj.insertBefore(pObj,formObj.firstChild);
    //文本框后添加一个按钮,为按钮添加设置单击事件
    var btnObj=document.createElement("input");
    btnObj.type="button";
    btnObj.value="new button";
    btnObj.onclick=function(){
      alert("hello");
     };
    formObj.appendChild(btnObj);
   }
   
  例子:
  
   onchange事件
   .selectedIndex 获取被选择的option下标
   
   .html:
    省:<select id="sel1" onchange="createCities">
      <option>请选择</option>
      <option>北京</option>
      <option>山东</option>
      <option>济宁</option>
     </select>
    城市:<select id="selcity">
      <option>请选择</option>
     </select>
   .js:
    var array=new Array();
    array[0]=["请选择"];
    array[1]=["海淀","朝阳"];
    array[2]=["济南","青岛","济宁"];
    array[3]=["邹城","曲阜","任城"];
    function createCities(){
     
     var index=document.getElementById("sel1").selectedIndex;
     var data=array[index];
     
     var selCity=document.getElementById("selcity");
     
     while(selCity.childNodes.length>0){
      selCity.removeChild(selCity.lastChild);
     }
     
     for(var i=0;i<data.length;i++){
      var obj=document.createElement("option");
      obj.innerHTML=dara[i];
      selCity.appendChild(obj);
     }
    }
--------------------------------------------------------------------------------


e.HTML DOM :原有的DOM基础上,对一些常用的操作进行封装 ,简化代码---将所有的元素封装为对象


   比如Input对象,A对象,Select对象,Table对象等


 1.Select 对象


  Select对象代表HTML表单中的一个下拉列表
    <select>标签表示一个Select对象
   常用属性:
     options,selectedIndex,size
   常用方法:
     add(option),remove(index)
   事件:
     onchange
  Option对象
    Option对象代表HTML表单中下拉列表中的一个选项
    <option>标签表示一个Option对象
   创建对象
    var o=new Option(text,value);
   常用属性:
    index,text,value,selected   
  -------
  sel.options
  sel.add
  var o = new Option(text,value);
  
  例子:
  function createCities(){
   var index=document.getElementById("sel1").selectedIndex;
   var data=array[index];
   
   var selCity=document.getElementById("selcity");
   
   selCity.options.length=0;
   for(var i=0;i<data.length;i++){
    var obj=new Option(data[i]);
    //selCity.options[i]=obj;
    selCity.add(obj);
   }
  }
 


 2.Table  


  Table对象代表一个HTML表格
   <table> 标签表示一个table对象
   常用属性:
    rows,cells
   常用方法
    indertRow(imdex),返回TableRow对象
    deleteRow(index)
  TableRow对象
   TableRow对象代表一个HTML表格行
    <tr>标签表示一个TableRow对象
   常用属性
    cells,innerHTML,rowIndex
   常用方法
    insertCell(index):返回TableCell对象
    deleteCell(index)
   TableCell对象
    TableCell对象代表一个HTML表格单元格
     <td>标签表示一个TableCell对象
    常用属性
     cellIndex,innerHTML,colSpan,rowSpan
      
 
   rows属性:所有的行,有length,
   
   insertRow(index);行,index是索引,行放的位置,返回新创建的行对象
   row.insertCell(index);单元格,返回新创建的单元格对象
   
   .html:
    
    ID:<input type="text" id="txtID" />
    名称:<input type="text" id="txtName" />
    <input type="button" value="增加" onclick="addRow();" />
    
    <table id="t1" border="1">
     <tr>
      <td>ID</td>
      <td>名称</td>
     </tr>
     <tr>
      <td>1</td>
      <td>aaa</td>
     </tr
     <tr>
      <td>2</td>
      <td>bbb</td>
     </tr>     
    </table>
   .js:
    //为表格添加行及单元格
    function addRow(){
     //最后添加(t.rows.length)
     var t=document.getElementById("t1");
     var row=t.insertRow(t.rows.length);
     //为行添加单元格
     var cell1=row.insertCell(0);
     cell1.innerHTML=document.getElementById(txtID).value;
     
     var cell2=row.insertCell(1);
     cell2.innerHTML=document.getElementById(txtName).value;
    
    }
--------------------------------------------------------------------------------


f.screen 对象:屏幕的信息


 
 包含有关客户端显示屏幕的信息
 获取分辨率和色彩
  只有属性没有方法
   属性:读取
   方法:改变行为
 常用属性:
  width/height
  availWidth/avilHeigth    

 


g.history对象:所有的历史访问记录


 属性:
  length属性:浏览器历史列表中的URL数量
 方法:
  back()后退
  forward()前进
  go(num)去访问过的页面,+前-后


h.location对象:当前的地址栏


  href属性 :实现网页跳转,原网页在历史记录
  方法:
   replace("");实现网页跳转,原网页不会保留历史记录,避免重复提交时
   reload();
   
   例子:
    .html:
     <input type="button" value="网页跳转" onclick="testLocation();" />
    .js:
     function testLocation(){
      location.href="http://www.google.com";
      location.replace("http://www.google.com");
     }
   总结:
   A页面------->B页面
   跳转页面的三中方式:
    a:静态
    window.open:动态,在新窗口打开
    location:动态,不需要在新窗口打开 (需不需要保留记录)

 

i.navigator:浏览器软件的相关信息


  
  
  代码动态的遍历某个对象的所有属性
  
  //js中对象所有的属性以数组的方式存在
  //低层的封装location.href==location["href"]
  .html:
   <input type="button" value="得到所有的属性" onclick="testNavigator();" />
  
  .js:
   function testNavigator(){
    var str="";
    for(var r in navigator){
     str+=r+":"+navigator[r]+"\n";
    }
    alert(str);
   }

 


j.event:事件

 


 事件触发后将产生一个event对象


 1).事件的分类


  鼠标事件:onclick,...
  键盘事件:onkeydown,onkeyup...(return false;事件失效)
  状态改变事件:onfocus,onchange,onblur,onload onunload(加载,body),onsubmit(提交,form)


 2).事件可以取消


  onxxx="return false;"


 3).js中,事件有冒泡机制

 

就是在大框架上定义的事件在里面的小元素内也有作用
  如果层次元素定义了相同的事件,从最底层开始触发,层层向上,直到最高层---就是冒泡机制
  (底层元素能够触发高层的事件)
  利用冒泡机制,解决大量事件重复定义问题


  
 4).event对象:只要有事件发生,event


  事件触发后产生一个event对象,记录(位置,键盘的按键信息,和触发对象)
   火狐浏览器: 在页面中获得event传入js
   其他浏览器:页面或则js中直接使用event
  
  event.srcElement/target;得到触发事件的对象
  
  eObj.target||eObj.srcElement(解决浏览器兼容问题)

 


  例子:改进计算器


  .html:
   <div onclick="cal(event);">
    <input type="button" value="1"  />
    <input type="button" value="2"  />
    <input type="button" value="3"  />
    <input type="button" value="4"  />
    <input type="button" value="5"  />
    <input type="button" value="6"  />
    <input type="button" value="7"  />
    <input type="button" value="8"  />
    <input type="button" value="9"  />
    <input type="button" value="0"  />    
    <input type="button" value="+"  />
    <input type="button" value="-"  />
    <input type="button" value="="  />    
    <input type="txt" id="txtData" />
   </div>
  .js:
   function cal(e){
    var node=e.target||e.srcElement;
    var txtObj=document.getElementById("txtData");
    if(node.nodeName=="INPUT"&&node.type=="button"){
     if(node.value=="="){
      txtObj.value=eval(txtObj.value);
     }else{
      txtObj.value+=node.value;
     }
    }
   }


  5).元素定义事件


   静态定义:onxxx="";大多数用的
   动态定义:onxxx=function对象;//function(){};
--------------------------------------------------------------------------------------


6.js的面向对象基础:数据和行为的封装

 


    封装的数据:

 

        自用:js代码中用,(简单封装,自定义封装)
        他用:数据封装后传递给服务器端,通用的代码格式,(JSON)


  js中如何实现封装


   a).使用Object对象实现简单封装


    创建一个Object对象,直接定义属性和方法不能实现重用

 


   b).实现自定义封装,打包数据


      构造函数,实现真正的封装
      undefined???

 

   c).JSON


    JSON是一种轻量级的数据交换格式
    一般只封装数据,不封装方法
    
    语法: var p={
       "":"",
       "":""
      };
   
  例子 :简单封装
  
   .html:
    <input type="button" value="封装" onclick="testObject();">
   
   .js:
    function testObject(){
     //实现封装
     var o = new Object();
     o.name="java";
     o.age=18;
     o.sing=function(){alert("hello");};
     //测试封装
     alert(o.name);
     alert(o.age);
     o.sing();
    }
  例子:自定义封装
    定义
     function Person(n,a){
      this.name=n;
      this.age=a;
      this.introSelf=function(){
       var str="i am " +this.name+",i am " +this.age +"years old.";
       alert(str);
      };
     }
    测试
     function testPerson(){
      var p1 = new Person("j",20);
      p1.introSelf();
      var p2 = new Person("s",30);
      p2.introSelf();
     }  

  例子:JSON封装
     function testJSON{
      var p={
       "name":"java",
       "age":20
      };
     }   

----------------------------------------------------------------------------------

 

 

 

 


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值