• 前端笔记4-3


    JS对象

    1.访问JS对象属性

    语法:objectName.propertyName

    2.访问对象的方法:

    语法:objectName.methodName()

    3.创建JS对象

    创建新对象有两种不同的方法:

    1. 定义并创建对象的实例
    2. 使用函数来定义对象,然后创建新的对象实例

    创建直接的实例

    <script>
       person=new Object();
       person.name="Bill Gates";
       person.age=56;
       person.eyecolor="blue";
       document.write(person.name+" is "+person.age+" years old.");
    </script>
    

      

    <script>
       person={name:"John",age:56}
       document.write(person.name+" is "+person.age+" years old.");
    </script>
    

      

     创建对象构造器

    <script>
      function person(name,age){
      	this.name=name;
      	this.age=age;
      }
      myRoomate=new person("John",56);
      document.write("myRoomate is "+myRoomate.name+", and she is "+myRoomate.age+" years old.");
    </script>
    

      

    把方法添加到 JavaScript 对象

    方法只不过是附加在对象上的函数。

    在构造器函数内部定义对象的方法:

     1 <script>
     2   function person(name,age){
     3       this.name=name;
     4       this.age=age;
     5   this.changename=changename;
     6   function changename(n){
     7      this.name=n;
     8   }
     9   }
    10   
    11    Roomate=new person("Bill",56);
    12     Roomate.changename("John");
    13    document.write(Roomate.name,Roomate.age);
    14 </script>

    JavaScript 类

    JavaScript 是面向对象的语言,但 JavaScript 不使用类。

    在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

    JavaScript 基于 prototype,而不是基于类的。

    JavaScript for...in 循环

    JavaScript for...in 语句循环遍历对象的属性。

    <body>
    <button onclick="myfunction()">click</button>
    <p id="t"></p>
    <script>
    function myfunction(){
        var x;
        var txt="";
        var person={name:"John",age:56};
        for(x in person){
            txt=txt+person[x];
        }
        document.getElementById("t").innerHTML=txt;
    }
    </script>
    </body>

    JS数字

    JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。

    精度

    整数(不使用小数点或指数计数法)最多为 15 位。

    小数的最大位数是 17,但是浮点运算并不总是 100% 准确

    <script>
    document.write(0.2+0.1);
    </script>

    八进制和十六进制

    如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。

    JS字符串

    1 <script>
    2 var txt="hello world";
    3 document.write(txt.length);
    4 </script>
    1 <script>
    2 var txt="hello world";
    3 document.write(txt.toUpperCase());
    4 </script>

    为字符串添加样式

     1 <!DOCTYPE html>
     2 <html>
     3 <body>
     4 
     5 <script type="text/javascript">
     6 
     7 var txt="Hello World!"
     8 
     9 document.write("<p>Big: " + txt.big() + "</p>")
    10 document.write("<p>Small: " + txt.small() + "</p>")
    11 
    12 document.write("<p>Bold: " + txt.bold() + "</p>")//粗体
    13 document.write("<p>Italic: " + txt.italics() + "</p>")//斜体
    14 
    15 document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
    16 document.write("<p>Fixed: " + txt.fixed() + "</p>")
    17 document.write("<p>Strike: " + txt.strike() + "</p>")//贯穿线
    18 
    19 document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
    20 document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")
    21 
    22 document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
    23 document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")
    24 
    25 document.write("<p>Subscript: " + txt.sub() + "</p>")//下角标
    26 document.write("<p>Superscript: " + txt.sup() + "</p>")//上标
    27 
    28 document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")//创建超链接
    29 </script>
    30 
    31 </body>
    32 </html>

    indexOf方法

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

    1 <script type="text/javascript">
    2 var x="hello world!";
    3 document.write(x.indexOf("hello")+"<br/>");
    4 document.write(x.indexOf("!")+"<br/>");
    5 document.write(x.indexOf("q")+"<br/>");
    6 </script>

    match()方法

    如何使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符,没有返回NULL

    1 <script type="text/javascript">
    2 var x="hello world!";
    3 document.write(x.match("hello")+"<br/>");
    4 document.write(x.match("tim")+"<br/>");
    5 </script>

    replace()方法

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

    1 <script type="text/javascript">
    2 var x="hello world!";
    3 document.write(x.replace(/world/,"doggy"));
    4 </script>

    JS日期

    1.定义日期

    1 <script type="text/javascript">
    2 var myDate=new Date();
    3 document.write(myDate);
    4 </script>

    2.操作日期

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

    <script type="text/javascript">
    var myDate=new Date();
    myDate.setFullYear(2016,0,21);
    document.write(myDate);
    </script>

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

    1 <script type="text/javascript">
    2 var myDate=new Date();
    3 myDate.setDate(myDate.getDate()+5);
    4 document.write(myDate);
    5 </script>

    3.比较日期

     1 <script type="text/javascript">
     2 var myDate=new Date();
     3 myDate.setFullYear(2008,2,3);
     4 var today=new Date();
     5 if(myDate>today){
     6     alert("today is before 2008.3.3");
     7 }
     8 else{
     9     alert("today is after 2008.3.3");
    10 }
    11 </script>

     4.返回当前日期

    1 <script type="text/javascript">
    2 document.write(Date());
    3 </script>

    5.getTime()方法:getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

    1  var today=new Date();
    2  document.write("从1970.1.1到现在过去了 "+today.getTime()+"毫秒");

    6.setFullYear()方法:使用 setFullYear() 设置具体的日期

    1 <script type="text/javascript">
    2  var today=new Date();
    3  document.write(today+"<br/>");
    4  today.setFullYear(2019,7,7);//月份0-11,1月为0
    5  document.write(today);
    6 </script>

    7.toUTCstring:使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串

    http://www.360doc.com/content/14/1023/10/7821691_419148948.shtml

    UTC与北京时间关系↑

    1 <script type="text/javascript">
    2  var today=new Date();
    3  document.write(today+"<br/>");
    4  document.write(today.toUTCString());
    5  // document.write(today);//不可行
    6 </script>

    8.getDay()方法:使用 getDay() 和数组来显示星期,而不仅仅是数字

     1 <script type="text/javascript">
     2  var d=new Date();
     3  var weekday=new Array(7);
     4  weekday[0]="星期日";
     5  weekday[1]="星期一";
     6  weekday[2]="星期二";
     7  weekday[3]="星期三";
     8  weekday[4]="星期四";
     9  weekday[5]="星期五";
    10  weekday[6]="星期六";
    11  document.write("今天是"+weekday[d.getDay()]);
    12 </script>

    9.显示一个时钟

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

    setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

     1 <body onload="startTime()">
     2 <div id="txt"></div>
     3 <script type="text/javascript">
     4  function startTime(){
     5      var today=new Date();
     6      var h=today.getHours();
     7      var m=today.getMinutes();
     8      var s=today.getSeconds();
     9      m=checkTime(m);
    10      s=checkTime(s);
    11  document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    12      t=setTimeout('startTime()',500);
    13      
    14  }
    15  function checkTime(i){
    16      if(i<10){
    17          i="0"+i;
    18      }
    19      return i;
    20  }
    21 </script>
    22 </body>

    JS数组

    1.定义数组(任意大小)

    1 <script type="text/javascript">
    2 var array=new Array();
    3 array[0]="Bob";
    4 array[1]="Sam";
    5 array[2]="Dean";
    6 document.write(array);
    7 </script>

       定义数组(指定大小)

    1 <script type="text/javascript">
    2 var array=new Array(3);
    3 array[0]="Bob";
    4 array[1]="Sam";
    5 array[2]="Dean";
    6 document.write(array);
    7 </script>

     定义数组

    1 <script type="text/javascript">
    2 var array=new Array("Bob","Dean","Sam");
    3 document.write(array);
    4 </script>

    2.访问数组

    通过指定数组名以及索引号码,你可以访问某个特定的元素。

    document.write(array[0]);

    3.修改已有数组中的值

    如需修改已有数组中的值,只要向指定下标号添加一个新值即可:

    array[0]="Zchen";

    JS逻辑对象

    1.创建逻辑对象

    var myBoolean=new Boolean();

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

    创建值为False的逻辑对象

    var myBoolean=new Boolean();
    var myBoolean=new Boolean(0);
    var myBoolean=new Boolean(null);
    var myBoolean=new Boolean("");
    var myBoolean=new Boolean(false);
    var myBoolean=new Boolean(NaN);

    创建值为true的逻辑对象

    var myBoolean=new Boolean(1);

    var myBoolean=new Boolean(true);

    var myBoolean=new Boolean("true");

    var myBoolean=new Boolean("false");

    var myBoolean=new Boolean("Bill Gates");

    JS数学对象

    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.round() :

    使用了 Math 对象的 round 方法对一个数进行四舍五入

    var x=Math.round(4.7);

    3.Math.random()  

     Math 对象的 random() 方法来返回一个介于 0 和 1 之间的随机数

    document.write(Math.random());

    4.Math.floor()

    floor() 方法可对一个数进行下舍入。

    document.write(Math.floor(Math.random()*11));

     

     

     

    JS正则表达式

    1.定义RegExp

    var patt1=new RegExp("e");

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

    2.RegExp的方法:test()、exec() 以及 compile()。

      test()方法:检索字符串中的指定值。返回值是 true 或 false

    1 <script type="text/javascript">
    2 var patt1=new RegExp("e");
    3 document.write(patt1.test("this is an egg")+"<br/>");
    4 document.write(patt1.test("try again"));
    5 </script>

     

    exec()方法:检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。

    1 <script type="text/javascript">
    2 var patt1=new RegExp("e");
    3 document.write(patt1.exec("this is an egg")+"<br/>");
    4 document.write(patt1.exec("try again"));
    5 </script>

    如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。

    1 <script type="text/javascript">
    2 var patt1=new RegExp("e","g");
    3 do{
    4     
    5     result=patt1.exec("The best things in life are free");
    6     document.write(result);
    7 }while(result!=null)
    8 </script>

    compile()方法:用于改变 RegExp, 既可以改变检索模式,也可以添加或删除第二个参数。

    1 <script type="text/javascript">
    2 var patt1=new RegExp("e");
    3 document.write(patt1.test("The best things in life are free"));
    4 patt1.compile("d");
    5 document.write(patt1.test("The best things in life are free"));
    6 </script>

    JS常用的内置对象

    1.String

     属性:length  包括所有空格和符号

     方法:

    String 对象共有 19 个内置方法,主要包括字符串在页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换等功能,下面是一些常用的:

    charAt(n) :返回该字符串第 n 位的单个字符。(从 0 开始计数)

    charCodeAt(n) :返回该字符串第 n 位的单个字符的 ASCII 码。

    indexOf() :用法:string_1.indexOf(string_2,n); 从字符串 string_1 的第 n 位开始搜索,查找 string_2,返回查找到的位置,如果未找到,则返回 -1,其中 n 可以不填,默认从第 0 位开始查找。

    lastIndexOf() :跟 indexOf() 相似,不过是从后边开始找。

    split('分隔符') :将字符串按照指定的分隔符分离开,返回一个数组,例如:'1&2&345&678'.split('&');返回数组:1,2,345,678。

    substring(n,m) :返回原字符串从 n 位置到 m 位置的子串。

    substr(n,x) :返回原字符串从 n 位置开始,长度为 x 的子串。

    toLowerCase() :返回把原字符串所有大写字母都变成小写的字符串。

    toUpperCase() :返回把原字符串所有小写字母都变成大写的字符串。

    2.Math

    属性:

    Math 的几个属性,是数学上几个常用的值:

    E :返回常数 e (2.718281828...)。

    LN2 :返回 2 的自然对数 (ln 2)。

    LN10 :返回 10 的自然对数 (ln 10)。

    LOG2E :返回以 2 为底的 e 的对数 (log2e)。

    LOG10E :返回以 10 为底的 e 的对数 (log10e)。

    PI :返回π(3.1415926535...)。

    SQRT1_2 :返回 1/2 的平方根。

    SQRT2 :返回 2 的平方根。
    方法:

    Math 的内置方法,是一些数学上常用的数学运算:

    abs(x) :返回 x 的绝对值。
    round(x) :返回 x 四舍五入后的值。
    sqrt(x) :返回 x 的平方根。
    ceil(x) :返回大于等于 x 的最小整数。
    floor(x) :返回小于等于 x 的最大整数。
    sin(x) :返回 x 的正弦。
    cos(x) :返回 x 的余弦。
    tan(x) :返回 x 的正切。
    acos(x) :返回 x 的反余弦值(余弦值等于 x 的角度),用弧度表示。
    asin(x) :返回 x 的反正弦值。
    atan(x) :返回 x 的反正切值。
    exp(x) :返回 e 的 x 次幂 (e^x)。
    pow(n, m) :返回 n 的 m 次幂 (nm)。
    log(x) :返回 x 的自然对数 (ln x)。
    max(a, b) :返回 a, b 中较大的数。
    min(a, b) :返回 a, b 中较小的数。
    random() :返回大于 0 小于 1 的一个随机数。
    3.Array数组对象

    属性:length

  • 相关阅读:
    vs2010 在函数级别设置优化
    从快速排序开始的代码演化
    pocket API学习笔记
    工作笔记:复制文件--从windows到ubuntu,再到fedora
    Win10 64位 Apache 2.4+MySQL 5.7+PHP 7环境搭建
    Json简介
    TCP/IP 协议详解和运作过程
    PHP 编程中 10 个最常见的错误,你犯过几个?
    php中的扩展解析
    php.ini设置详解
  • 原文地址:https://www.cnblogs.com/jieyi/p/8378772.html
Copyright © 2020-2023  润新知