zoukankan      html  css  js  c++  java
  • JavaScript学习之对象

    JavaScript对象

    一、对象简介

    JavaScript 是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。注意:对象只是一种特殊的数据。对象拥有属性和方法。

    1、属性:指与对象有关的值。

    eg:使用字符串对象的长度属性来计算字符串中的字符数目。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JS</title>
     6 </head>
     7 
     8 <body>
     9     <script type="text/javascript">
    10         var str = "Hello World!";
    11         document.write(str.length);
    12     </script>
    13 </body>
    14 </html>

      结果:(空格也包含在内)

    2、方法:指对象可以执行的行为(或者可以完成的功能)。

    eg:使用字符串对象的 toUpperCase() 方法来显示大写字母文本。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JS</title>
     6 </head>
     7 
     8 <body>
     9     <script type="text/javascript">
    10         var str = "Hello World!";
    11         document.write(str.toUpperCase());   //注意方法的大小写!!!
    12     </script>
    13 </body>
    14 </html>

      效果:


    二、字符串(String

      String 对象用于处理已有的字符块。

    1、String对象属性

    2、String 对象方法

      

    3、实例:

      (1)indexOf():用来定位字符串中某一个指定的字符首次出现的位置。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JS</title>
     6 </head>
     7 
     8 <body>
     9     <script type="text/javascript">
    10         var str = "Hello World!";
    11         document.write(str.indexOf("Hello") + "<br />")
    12         document.write(str.indexOf("World") + "<br />")
    13         document.write(str.indexOf("world"))
    14 
    15     </script>
    16 </body>
    17 </html>

        效果:

      (2)match() :用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JS</title>
     6 </head>
     7 
     8 <body>
     9     <script type="text/javascript">
    10         var str = "Hello World!";
    11         document.write(str.match("world") + "<br />")
    12         document.write(str.match("World") + "<br />")
    13         document.write(str.match("worlld") + "<br />")
    14         document.write(str.match("world!"))
    15 
    16     </script>
    17 </body>
    18 </html>

        效果:

      (3) replace() 方法:使用其在字符串中用某些字符替换另一些字符。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JS</title>
     6 </head>
     7 
     8 <body>
     9     <script type="text/javascript">
    10         var str = "Hello World!";
    11         document.write(str.replace(/World/,"Boy"));     //注意大小写!!!
    12     </script>
    13 </body>
    14 </html>

          效果:


    三、JavaScript Date(日期)对象  

      日期对象用于处理日期和时间。

    1、定义日期

    var myDate=new Date() 

      Date 对象自动使用当前的日期和时间作为其初始值。

    2、改变日期

      (1)为日期对象设置一个特定的日期 (2008 年 8 月 9 日):

    var myDate=new Date()
    myDate.setFullYear(2008,7,9)

      **表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。**

     (2)将日期对象设置为 5 天后的日期:

    var myDate=new Date()
    myDate.setDate(myDate.getDate()+5)

      **如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。**

    3、Date 对象属性

    4、Date 对象方法

    5、实例

      (1)使用 getDay() 来显示星期,而不仅仅是数字。

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JavaScript</title>
     6 </head>
     7 <script type="text/javascript">
     8     var d=new Date();
     9     var weekday=new Array(7);
    10     weekday[0]="星期日";
    11     weekday[1]="星期一";
    12     weekday[2]="星期二";
    13     weekday[3]="星期三;"
    14     weekday[4]="星期四";
    15     weekday[5]="星期五";
    16     weekday[6]="星期六";
    17     
    18     document.write("今天是" + weekday[d.getDay()]);
    19 </script>
    20 
    21 <body>
    22 </body>
    23 </html>

      效果:

      (2)显示一个钟表

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JS</title>
     6 </head>
     7 <script type="text/javascript">
     8     function startTime() {
     9         var today=new Date();
    10         var h=today.getHours();   //返回当前的时针
    11         var m=today.getMinutes();   //返回当前的分针
    12         var s=today.getSeconds();    //返回当前的秒针
    13         m=checkTime(m);
    14         s=checkTime(s);
    15         document.getElementById('txt').innerHTML=h+":"+m+":"+s;    //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
    16         t=setTimeout('startTime()',500);    //javascript通过setTimeout函数暂停一段时间后执行,这里每隔500ms就调用一次代码
    17     }
    18     
    19     function checkTime(i) {
    20         if (i<10)  {i="0" + i;}     //如果分、秒为个位数,在前面+“0”,这一步很重要
    21           return i;
    22         }
    23 </script>
    24 
    25 <body onload="startTime()">
    26     <div id="txt"></div>    
    27 </body>
    28 </html>

      效果:


    四、JavaScript Array(数组)对象

    1、定义数组

    var myArray=new Array()

    2、变量赋值
      (1)可以添加任意多的值,就像可以定义需要的任意多的变量一样

    var mycars=new Array();
    mycars[0]="Saab";
    mycars[1]="Volvo";
    mycars[2]="BMW";

      可以使用一个整数自变量来控制数组的容量:

    var mycars=new Array(3)
    mycars[0]="Saab";
    mycars[1]="Volvo";
    mycars[2]="BMW";

      (2)

    var mycars=new Array("Saab","Volvo","BMW")

      注意:如果你需要在数组内指定数值或者逻辑值,那么变量类型应该是数值变量或者布尔变量,而不是字符变量。

    3、Array 对象属性

    4、Array 对象方法

    5、实例:

      (1)输出数组中的元素

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JavaScript</title>
     6 </head>
     7 <script type="text/javascript">
     8     var i,j;
     9     var text = new Array("张三","李四","王五");
    10     document.write("1.用for语句来循环输出:"+"<br>");
    11     for(i=0;i<text.length;i++) {
    12         document.write(text[i] + "<br>");
    13     }
    14     
    15     document.write("2.用for...in...语句来循环输出:" + "<br>");
    16     for( j in text) {
    17         document.write(text[j] + "<br>");
    18     }
    19 </script>
    20 
    21 <body>
    22 </body>
    23 </html>

    效果:注意:取数组名时不要和关键字重复,否则运行结果会出错。

      (2)合并两个数组:concat()

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>js</title>
     6 </head>
     7 
     8 <body>
     9 <script type="text/javascript">
    10     var arr = new Array(3);
    11     arr[0] = "George";
    12     arr[1] = "John";
    13     arr[2] = "Thomas";
    14     
    15     var arr2 = new Array(3);
    16     arr2[0] = "James";
    17     arr2[1] = "Adrew";
    18     arr2[2] = "Martin";
    19     
    20     document.write(arr.concat(arr2));
    21 </script>
    22 </body>
    23 </html>

        效果:


    五、JavaScript Boolean(逻辑)对象

      Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。

    1、使用关键词 new 来定义 Boolean 对象

    var myBoolean=new Boolean()

    注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!

    2、Boolean 对象属性

    3、Boolean 对象方法


    六、JavaScript Math(算数)对象

      Math(算数)对象的作用是:执行常见的算数任务。Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin()
    这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。

    1、算数值

    JavaScript 提供 8 种可被 Math 对象访问的算数值:

    • 常数
    • 圆周率
    • 2 的平方根
    • 1/2 的平方根
    • 2 的自然对数
    • 10 的自然对数
    • 以 2 为底的 e 的对数
    • 以 10 为底的 e 的对数

    这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)

    • Math.E
    • Math.PI
    • Math.SQRT2
    • Math.SQRT1_2
    • Math.LN2
    • Math.LN10
    • Math.LOG2E
    • Math.LOG10E

    2、Math 对象方法

    3、eg:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>js</title>
     6 </head>
     7 
     8 <body>
     9 <script type="text/javascript">
    10     document.write(Math.round(0.6)+ "<br />");   //把数四舍五入为最接近的整数
    11     document.write(Math.random()+ "<br />")     //返回0~1之间的随机数
    12     document.write(Math.max(5,7) + "<br />")    //返回两个数之间较大的数
    13 </script>
    14 </body>
    15 </html>

    效果: 刷新一下:


    七、JavaScript RegExp 对象

      RegExp 对象用于规定在文本中检索的内容。它是对字符串执行模式匹配的强大工具。

    1、什么是 RegExp?

      RegExp 是正则表达式的缩写。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。您可以规定字符串中的检索位置,以及要检索的字符类型,等等

    2、定义 RegExp

      RegExp 对象用于存储检索模式。通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":

    var patt1=new RegExp("e");

    当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "e"。

    3、RegExp 对象方法

    eg:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>JavaScript</title>
     6 </head>
     7 <script type="text/javascript">
     8     var patt1=new RegExp("e");
     9     document.write(patt1.test("The best things in life are free")+"<br>");
    10     document.write(patt1.exec("The best things in life are free")+"<br>"); 
    11     document.write(patt1.test("The best things in life are free")+"<br>"); 
    12     patt1.compile("d");   //compile() 既可以改变检索模式,也可以添加或删除第二个参数。这里改变检索模式,搜索的是d
    13     document.write(patt1.test("The best things in life are free")+"<br>");
    14 </script>
    15 
    16 <body>
    17 </body>
    18 </html>

        效果:

      **可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。在使用 "g" 参数时,exec() 的工作原理如下:

    • 找到第一个 "e",并存储其位置
    • 如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置

    eg:

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>js</title>
     6 </head>
     7 
     8 <body>
     9 <script type="text/javascript">
    10     var patt1=new RegExp("e","g");
    11     do {
    12         result=patt1.exec("The best things in life are free");
    13         document.write(result);
    14     }
    15     while (result!=null) 
    16 </script>
    17 </body>
    18 </html>

      效果:

  • 相关阅读:
    vue 遇到的问题
    vue webpack添加jQuery
    如何将在线电子书保存为pdf格式
    swagger 支持动态host和basePath
    本地chrome调试服务器node
    滚动页面一定距离后固定导航条
    发布-订阅模式
    react生命周期
    redux
    原型及继承
  • 原文地址:https://www.cnblogs.com/jasmine-95/p/5024101.html
Copyright © 2011-2022 走看看