• JavaScript 对象


    1.对象(Object)或实例(instance):在JavaScript中,对象则是数据与程序代码的组合,它可以是整个应用程序或整个应用程序的一部分。 
    2.属性(property)或字段(filed):是用来描述对象的特质。 
    3.方法(method):是用来执行对象的动作。 
    4.事件(event):是在某些情况下发出特定信号警告。 
    5.类(class):是对象的分类,就像对象的蓝图,隶属于相同类的对象具有相同 的属性,方法与事件,但属性的值则不一定相同。 
    6.window对象包括以下三类子对象: 
    (1)核心对象:Array,Boolean,Date,Error,Function,Global,Math,Number,Object,RegExp,String等对象; 
    (2)环境对象:可以通过环境对象访问浏览器或用户屏幕的信息,包括location,screen,navigator,history等对象; 
    (3)document对象:这个对象代表的是HTML文件本身,可以通过它访问HTML文件的元素,包括窗体,图片,表格,超链接等。

    1.window对象

    window对象代表一个浏览器窗口(window),索引标签(tab)或框架(frame)。

    2.核心对象

    2.1Number

          window.document.write(Number.MAX_VALUE + "<br>");
          window.document.write(Number.MIN_VALUE + "<br>");
          window.document.write(Number.NaN + "<BR>");
          window.document.write(Number.NEGATIVE_INFINITY + "<br>");
          window.document.write(Number.POSITIVE_INFINITY + "<br>");
          var X = new Number(123.456);
          window.document.write(X + "转换为科学表示法得到" + X.toExponential() + "<br>");
          window.document.write(X + "取到小数点后面二位得到" + X.toFixed(2) + "<br>");
          window.document.write(X + "转换为字符串得到" + X.toString() + "<br>");     
          window.document.write(X + "设定为8位精确位数得到" + X.toPrecision(8) + "<br>");
          window.document.write(X + "取值得到" + X.valueOf() + "<br>");

    2.2Boolean

    当以第一种方式简历布尔类型的变量时,只有在参数为false,0,null,undefined的情况下,会得到值为false的变量。

    var X=new Boolean(false);
    var X=false;

    2.3String

    var X="Java Script!";
    
    charAt(index);
    charCodeAt(index);
    indexOf(str,start);
    lastIndexOf(str);
    match(str);
    search(str);
    concat(str);
    replace(str1,str2);
    split(str);
    substr(index,length);
    substring(i1,i2);
    toLowerCase();
    toUpperCase();

    String对象也提供了如下表的格式编排方法,可以将字符串输出为对应的HTML元素。

          var X = new String("JavaScript程序设计");
          window.document.write("anchor(): " + X.anchor() + "<br>");
          window.document.write("big(): " + X.big() + "<br>");
          window.document.write("blink(): " + X.blink() + "<br>");
          window.document.write("bold(): " + X.bold() + "<br>");
          window.document.write("fixed(): " + X.fixed() + "<br>");
          window.document.write("fontcolor('red'): " + X.fontcolor("red") + "<br>");
          window.document.write("fontsize(7): " + X.fontsize(7) + "<br>");
          window.document.write("italics(): " + X.italics() + "<br>");
          window.document.write("link('http://www.baidu.com'): " + 
          X.link("http://www.baidu.com") + "<br>");
          window.document.write("small(): " + X.small() + "<br>");
          window.document.write("strike(): " + X.strike() + "<br>");
          window.document.write("sub(): " + X.sub() + "<br>");
          window.document.write("sup(): " + X.sup() + "<br>");

    2.4Function

    var Sum=new Function("X","Y","return(X+Y)");

    2.5Object

    var objEmployee =new Object();
    objEmployee.Name="小丸子";
    objEmployee.Age=25;

    2.6Math

          window.document.write("E的值为" + Math.E + "<br>");
          window.document.write("LN2的值为" + Math.LN2 + "<br>");
          window.document.write("LN10的值为" + Math.LN10 + "<br>");
          window.document.write("LOG2E的值为" + Math.LOG2E + "<br>");
          window.document.write("LOG10E的值为" + Math.LOG10E + "<br>");
          window.document.write("PI的值为" + Math.PI + "<BR>");
          window.document.write("SQRT1_2的值为" + Math.SQRT1_2 + "<br>");
          window.document.write("SQRT2的值为" + Math.SQRT2 + "<br>");
          window.document.write("-100的绝对值为" + Math.abs(-100) + "<br>");
          window.document.write("5和25的较大值为" + Math.max(5,25) + "<br>");
          window.document.write("5和25的较小值为" + Math.min(5,25) + "<br>");
          window.document.write("2的10次方为" + Math.pow(2,10) + "<br>");
          window.document.write("1.56的四舍五入值为" + Math.round(1.56) + "<br>");
          window.document.write("2的平方根为" + Math.sqrt(2) + "<br>");
    

    2.7Date

    获取日期信息

          //建立一个名称为objDate的Date对象,默认值为系统目前日期时间
          var objDate = new Date();
          //在浏览器显示objDate对象的值
          document.write("目前日期时间为" + objDate + "<br>");
          //调用Date对象的方法并显示结果
          document.write("getDate()的返回值为" + objDate.getDate() + "<br>");
          document.write("getDay()的返回值为" + objDate.getDay() + "<br>");
          document.write("getMonth()的返回值为" + objDate.getMonth() + "<br>");
          document.write("getYear()的返回值为" + objDate.getYear() + "<br>");
          document.write("getFullYear()的返回值为" + objDate.getFullYear() + "<br>"); 
          document.write("getHours()的返回值为" + objDate.getHours() + "<br>");
          document.write("getMinutes()的返回值为" + objDate.getMinutes() + "<br>");
          document.write("getSeconds()的返回值为" + objDate.getSeconds() + "<br>");
          document.write("getMilliseconds()的返回值为" + objDate.getMilliseconds() + "<br>");
          document.write("getTime()的返回值为" + objDate.getTime() + "<br>");
    

    设置日期信息

          var objDate = new Date();     //建立一个名称为objDate的Date对象
          objDate.setDate(14);              //将日期设置为14日
          objDate.setMonth(1);              //将月份设置为2月
          objDate.setYear(2015);            //将年份设置为2015年
          objDate.setHours(12);             //将小时设置为12点
          objDate.setMinutes(10);           //将分钟设置为10分
          objDate.setSeconds(25);           //将秒数设置为25秒
          document.write("我们设置的日期时间为" + objDate + "<br>");

    2.8Array

    定义

    //定义1
    var UserNames=new Array(5);
    UserNames[0]="小丸子";
    UserNames[1]="花轮";
    UserNames[2]="小玉";
    UserNames[3]="美环";
    UserNames[4]="丸尾";
    //定义2
    var UserNames=new Array("小丸子","花轮","小玉","美环","丸尾");
    //定义3
    var UserNames=["小丸子","花轮","小玉","美环","丸尾"];

    多维数组

     var Students = new Array(5);
        for(var i = 0; i < Students.length; i++)
          Students[i] = new Array(2);//声明Array对象的元素为另一个Array对象
          Students[0][0] = "小丸子";   //一一给二维数组赋值
          Students[1][0] = "花轮";
          Students[2][0] = "小玉";
          Students[3][0] = "美环";
          Students[4][0] = "丸尾";
          Students[0][1] = 80;
          Students[1][1] = 95;
          Students[2][1] = 92;
          Students[3][1] = 88;
          Students[4][1] = 85;
       for(var i = 0; i < Students.length; i++)//使用嵌套循环显示二维数组的值
          {
            document.write("<tr>");
            for(var j = 0; j < Students[i].length; j++)
              document.write("<td>" + Students[i][j] + "</td>");
            document.write("</tr>");
          }

    Array对象的方法
    //concat(arr)——数组合并
          var Arr1 = new Array("a", "b", "c"); 
          var Arr2 = new Array("d", "e");
          var Arr3 = Arr1.concat(Arr2);
          for(var i = 0; i < Arr3.length; i++)
            document.write(Arr3[i] + "<br>");
    //join(str)——使用str连接元素
          var Arr = new Array("a", "b", "c");
          var Result = Arr.join("--");
          document.write(Result);
    //pop()——删除最后一个元素
          var Arr = new Array("a", "b", "c"); 
          var Result = Arr.pop(); 
          document.write(Result);
    //push(data)——添加元素
          var Arr = new Array("a", "b", "c"); 
          Arr.push("d"); 
          for(var i = 0; i < Arr.length; i++)
            document.write(Arr[i] + "<br>");
    //shift()——删除第一个元素
          var Arr = new Array("a", "b", "c"); 
          var Result = Arr.shift(); 
          document.write(Result);
    //unshift(data)——将data加入数组的前端
          var Arr = new Array("a", "b", "c"); 
          Arr.unshift("d"); 
          for(var i = 0; i < Arr.length; i++)
            document.write(Arr[i] + "<br>");
    //reverse() 反转
          var Arr = new Array("a", "b", "c"); 
          Arr.reverse(); 
          for(var i = 0; i < Arr.length; i++)
            document.write(Arr[i] + "<br>");
    //slice(start,end),返回下标start到下标end-1之间元素所形成的新数组
          var Arr1 = new Array("a", "b", "c", "d", "e"); 
          var Arr2 = Arr1.slice(1, 3); 
          for(var i = 0; i < Arr2.length; i++)
            document.write(Arr2[i] + "<br>"); 
    //sort()--排序,由小到大
          var Arr = new Array(50, 40, 80, 90, 60); 
          Arr.sort(); 
          for(var i = 0; i < Arr.length; i++)
            document.write(Arr[i] + "<br>");
    //toString()
          var Arr = new Array("a", "b", "c"); 
          var Result = Arr.toString(); 
          document.write(Result);
    

    Array作为参数

          var Data1 = new Array(1, 2, 3, 4, 5);
          var Data2 = new Array(10, 20, 30, 40, 50);
          var Data3 = ArrAdd(Data1, Data2);
          //在浏览器显示数组Data3的元素
          for(var i = 0; i < Data3.length; i++)
            document.write(Data3[i] + "<br>");
          //声明一个名称为ArrAdd、有两个数组参数的函数
          function ArrAdd(Arr1, Arr2)
          {
            var Arr3 = new Array(); 
            for(var i = 0; i < Arr1.length; i++)
              Arr3[i] = Arr1[i] + Arr2[i];
            return Arr3;
          }

    2.9Error

       var X = 100;
           try                  //错误处理的开头
           {
             X = Y;         //Y 未被定义将导致此程序语句发生错误
           }
           catch(e)         //捕捉到Error对象e
           {
             document.write("捕捉到的Error对象错误码为" + e.number + "<br>");
             document.write("捕捉到的Error对象错误信息为" + e.message + "<br>");
             document.write("捕捉到的Error对象错误描述为" + e.description + "<br>"); 
           }
           finally              //finally区块的程序代码一定会执行
           {
             document.write("X的值为" + X);
           }                        //错误处理的结尾

    3.环境对象

    3.1loacation对象

    location对象包括目前开启之网页的网址信息(URI),可以通过该对象获取或控制浏览器的网址,重载网页或导向其他网页。<!doctype html>

    <html>
      <head>
        <meta charset="utf-8">
        <title>范例</title>
        <script language="javascript">
          for(var Property in window.location)
            window.document.write(Property + ":" +  window.location[Property] + "<br>");
        </script>   
      </head>
      <body>
        <input type="button" value="重载" 
        onclick="javascript:window.location.reload();">
        <input type="button" value="导向到百度网站" 
        onclick="javascript:window.location.replace('http://www.baidu.com');">
      </body>  
    </html>

    3.2screen对象

    用户的屏幕信息。

          window.document.write("height属性的值为" + screen.height + "<br>"); 
          window.document.write("width属性的值为" + screen.width + "<br>");
          window.document.write("availHeight属性的值为" + screen.availHeight + "<br>");
          window.document.write("availWidth属性的值为" + screen.availWidth + "<br>");
           window.document.write("colorDepth属性的值为" + screen.colorDepth + "<br>");

    3.3navigator对象<!doctype html<html>
      <head>
        <meta charset="utf-8">
        <title>范例</title>
        <script language="javascript">
          for(var Property in window.navigator)
            window.document.write(Property + ":" + window.navigator[Property] + "<br>");
        </script>   
      </head>
    </html>

    3.4history对象

    history对象包含浏览器的浏览历程记录。

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>范例</title>
        <script language="javascript">
          for(var Property in window.history)
            window.document.write(Property + ":" + window.history[Property] + "<br>");
        </script>   
      </head>
      <body>
        <input type="button" value="上一页" onclick="javascript:window.history.back();">
        <input type="button" value="下一页" onclick="javascript:window.history.forward();">
      </body>
    </html>

    4.document对象

    4.1新标签

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>范例</title>
        <script language="javascript">
          function openDocument()
          {
            var NewWin = window.open("", "NewWin");//开启新的浏览器
            NewWin.document.open("text/html");//在另一个浏览器开启新文件
            NewWin.document.write("这是新的HTML文件");    //在新文件中显示此字符串
            NewWin.document.close();//关闭新文件数据流
          }
        </script>  
      </head>
      <body>
        <input type="button" value="开启新文件" onclick="javascript:openDocument();">
      </body>
    </html>

    4.2几个方法

    <input type="checkbox" name="phone" id="CB1" value="hTC">
    <input type="checkbox" name="phone" id="CB2" value="Apple">
    <input type="checkbox" name="phone" id="CB3" value="ASUS">
    
    var Element1=document.getElementById("CB1");
    var Element2=document.getElementsByName("phone");
    var Element3=document.getElementByTagName("input");

    4.3document的子对象body

    有属性: 
    link;alink;vlink;background;bgColor,text;

    document.body.bgColor="yellow";

    有集合: 
    all;anchors;links;forms;frames;Images;styleSheets;embeds;applets;plugins;

    <form name="myForm1">
       <input type="button" id="B1" value="按钮1">
       <input type="button" id="B2" value="按钮2">
    </form>
    <form name="myForm2">
       <input type="button" id="B3" value="按钮3">
       <input type="button" id="B4" value="按钮4">
    </form>
    
    document.forms[0].B1.value;//获取值
    document.forms.myForms1.B1.value;
    document.forms[1].B3.value;
    document.forms.myForms2.B3.value;

    5.element对象

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>范例</title>
        <script language="javascript">
          function showMsg()
          {
            var msg = document.getElementById("message");
            msg.innerHTML = "Hello World!";
          }
        </script>  
      </head>
      <body>
        <input type="button" value="显示信息" onclick="javascript:showMsg();">
        <p id="message"></p>
      </body>
    </html>
  • 相关阅读:
    BeanUtils.copyProperties的用法
    WinRAR下载
    安装Perl
    @Value设置默认值
    AutoHotkey
    解决springboot启动日志异常问题
    除以2换成位移操作(骚)
    IDEA生成doc文档生成chm文档
    VMWare虚拟机网络配置
    EOF小结
  • 原文地址:https://www.cnblogs.com/hyea/p/5492027.html
Copyright © 2020-2023  润新知