四javaScript基础&DOM

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了四javaScript基础&DOM相关的知识,希望对你有一定的参考价值。

 

笔记内容导图:

技术分享

一、js的String对象

  • 查看W3CSchool文档,有该对象详细属性方法。

     技术分享

  • 常用属性
    • length :声明了该字符串中的字符数。
      <script type="text/javascript">    
          var a = "drby";
          document.write(a.length);   //4
      </script>
  • 常用方法
    • html相关的方法
      • bold() : 使用粗体显示字符串。
        <script type="text/javascript">
            var str="Hello world!"
            document.write(str.bold())    //helloworld!显示为粗体          【发现语句结束不加分号也能运行成功QAQ】
        </script>
      • fontcolor() : 使用指定的颜色来显示字符串。
        <script type="text/javascript">
            var str="Hello world!"
            document.write(str.fontcolor("Red"))
        </script>
      • fontsize() : 使用指定的尺寸来显示字符串
        <script type="text/javascript">
            var str="Hello world!"
            document.write(str.fontsize(7))
        </script>
      • link(): 将字符串显示为链接。
        <script type="text/javascript">
            var str="this is a url"
            document.write(str.link("http://www.w3school.com.cn"))
        </script>
      • sub() : 把字符串显示为下标。     sup() : 把字符串显示为上标。
        <script type="text/javascript">
            var str="Hello world!下标"
            document.write(str.sub())
        
            var str1="Hello world!上标"
            document.write(str1.sup())
        </script>

        技术分享

    • 与java相似的方法()更多例子用法查看w3c文档
      • concat() : 连接字符串。
      • charAt() : 返回在指定位置的字符。
      • indexOf() : 检索字符串。即返回字符位置
      • split() : 把字符串分割为字符串数组。
      • replace() : 替换与正则表达式匹配的子串。
      • substr()  substring() :
        <script type="text/javascript">
            //concat方法
            var str1 = "abc";
            var str2 = "dfg";
            document.write(str1.concat(str2));
            document.write("<hr>");
        
            //charAt方法
            var str3 = "abcdefg";
            document.write(str3.charAt(20));  //字符位置不存在,返回空字符串
            document.write(str3.charAt(3));
            document.write("<hr>");
        
            //indexOf方法
            var str4 = "poiuyt";
            document.write(str4.indexOf("y"));
            document.write(str4.indexOf("w")); //字符不存在,返回-1    
            document.write("<hr>");
        
            //split方法  【更多例子用法查看w3c文档】
            var str5 = "a-b-c-d";
            var arr1 = str5.split("-");
            document.write("length: "+arr1.length + "<br />");
        
            var str="How are you doing today?"
            document.write(str.split(" ") + "<br />")
            document.write(str.split("") + "<br />")
            document.write(str.split(" ",3))
        
            document.write("<hr>");
            
            //replace方法   【更多例子用法查看w3c文档】
            var str6 = "abcd";
            document.write(str6);
            document.write("<br/>");
            document.write(str6.replace("a","Q"));     //次处传两个参数,第一个原始字符,第二个是要替换成的字符
            document.write("<hr>");
        
            //substr方法
            var str7 = "abcdefghuiop";
            document.write(str7.substr(5,5));  //fghui  从第五位开始,向后截取几位
            document.write("<hr>");
        
            //substring方法
            var str8 = "abcdefghuiopqrst";
            document.write(str7.substring(3,5)); //de  从第几位开始到第几位结束  [3,5) 包左不包右
        </script>

        技术分享

 

      需要注意的是,JavaScript 的字符串是不可变的(immutable),String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法,返回的是全新的字符串,而不是修改原始字符串。

 

 

二、js的Array对象

  • 常用属性
    • length :设置或返回数组中元素的数目。
      <script type="text/javascript">
          var arr = new Array(3)
          arr[0] = "John"
          arr[1] = "Andy"
          arr[2] = "Wendy"
      
          document.write("Original length: " + arr.length)
          document.write("<br />")
      
          arr.length=5
          document.write("New length: " + arr.length)
      </script>
      //结果:
      //Original length: 3
      //New length: 5 
  • 常用方法
    • concat(): 连接两个或更多的数组,并返回结果。
      • 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。即返回一个新的数组。
    • join(): 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
    • push(): 向数组的末尾添加一个或更多元素,并返回新的长度。 
      • push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
      • 如果添加的是一个数组,这个时候把数组当做一个整体字符串添加进去
    • pop(): 删除并返回数组的最后一个元素
      • pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。
    • reverse(): 颠倒数组中元素的顺序。
      • 该方法会改变原来的数组,而不会创建新的数组。
        <script type="text/javascript">
            //concat方法  
            var arr1 = [1,2,3];
            var arr2 = [4,5,6];
            var arr3 = [7,8,9];
            document.write(arr1.concat(arr2) +"<br/>");  //1,2,3,4,5,6
            document.write(arr1.concat(arr2,arr3));  //1,2,3,4,5,6,7,8,9
            document.write("<hr>");
        
            //join方法    
            var arr4 = new Array(3)
            arr4[0] = "George"
            arr4[1] = "John"
            arr4[2] = "Thomas"
            document.write(arr4.join() +"<br/>")  //George,John,Thomas
            document.write(arr4.join("."))  //George.John.Thomas
            document.write("<hr>");
        
            //push方法  
            var arr5 = new Array(3);
            arr5[0] = "tom";
            arr5[1] = "lucy";
            arr5[2] = "jack";
            document.write("old array: "+arr5);
            document.write("<br/>");
            document.write("old length:"+arr5.length);
            document.write("<br/>");
            document.write("new length: "+arr5.push("zhangsan"));
            document.write("<br/>");
            document.write("new array: "+arr5);
            document.write("<br/>","<br/>");
        
            var arr6 = ["www","qqq"];
            var arr7 = ["aaa","bbb","ccc"];
            document.write("old array:"+arr6 +"<br/>");
            document.write("old length:"+arr6.length +"<br/>");
            document.write("new length:"+arr6.push(arr7) +"<br/>");  //结果3 不是5 ,因为把arr7当做一个整体字符串(即一个元素)添加到arr6
            document.write("new array: "+arr6);
            for(var i=0;i<arr6.length;i++) {
                alert(arr6[i]);
            }
            document.write("<hr>");
            
            //pop方法   
            var arr8 = ["zhangsan","lisi","wangwu","zhaoliu"];
            document.write("old array: "+arr8 +"<br/>");
            document.write("return: "+arr8.pop() +"<br/>");
            document.write("new array: "+arr8);
            document.write("<hr>");
        
            //reverser方法
            var arr9 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];
            document.write("old array: "+arr9);
            document.write("<br/>");
            document.write("new array:"+arr9.reverse());
        </script>

         技术分享

三、js的Date对象

  • 在java里面获取当前时间
    Date date = new Date();
    //格式化 
    toLocaleString()   //xxxx年xx月xx日 xx:xx:xx
  • js里面获取当前时间
    <script type="text/javascript">
        //获取当前时间
        var date = new Date();
        document.write(date);  // Sat May 28 2016 22:33:17 GMT+0800 (中国标准时间)
        //转换成习惯的格式
        document.write("<hr/>");
        document.write(date.toLocaleString());  //‎2016‎年‎5‎月‎28‎日‎ ‎22‎:‎33‎:‎17 
    </script>
  • 获取当前的年方法  getFullYear()
    var date = new Date();
    document.write("year: "+date.getFullYear());  //year: 2016 
  • 获取当前的月方法  getMonth()
    <script type="text/javascript">
        //返回的是 0-11月,如果想要得到准确的值,加1
        var date = new Date();
        var date1 = date.getMonth()+1;
        document.write("month: "+date1);
    </script>
  • 获取当前的星期  getDay()
    <script type="text/javascript">
        //返回的是 (0 ~ 6)
        //外国朋友,把星期日作为一周的第一天,星期日返回的是0,而星期一到星期六 返回的是 1-6           
        var date = new Date();
        document.write("week: "+date.getDay());
    </script>
  • 获取当前的日  getDate()
    <script type="text/javascript">
        //得到当前的天 1-31       
        var date = new Date();
        document.write("day: "+date.getDate());
    </script>
  • 获取当前的小时  getHours()
    <script type="text/javascript">
        //得到当前的小时 0~23       
        var date = new Date();
        document.write("hour: "+date.getHours());
    </script>
  • 获取当前的分钟  getMinutes()
    <script type="text/javascript">       
        var date = new Date();
        document.write("minute: "+date.getMinutes());
    </script>
  • 获取当前的秒  getSeconds()
    var date = new Date();
    document.write("second: "+date.getSeconds());
  • 获取毫秒数  getTime()  【返回的是1970 1 1 至今的毫秒数】         setTime() 根据毫秒数设置时间
    var date = new Date(); 
    document.write("second: "+date.getTime());
    • 应用场景:

      常用在防止浏览器缓存时候    ,比如银行网站就不需要缓存

      使用毫秒数处理缓存的效果(不有缓存) http://www.baidu.com?毫秒数

四、js的Math对象

  • Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
  • 数学的运算。里面的都是静态方法,使用可以直接使用 Math.方法()
  • ceil(x): 向上舍入
    <script type="text/javascript">       
        var mm = 10.3;
        //不用创建math对象
        document.write(Math.ceil(mm));   //11
    </script>
  • floor(x):向下舍入
  • round(x):四舍五入
  • random():得到随机数(伪随机数)(返回 0.0 ~ 1.0 之间的随机数。)
    • 得到0-9的随机数
      Math.random()*10
      Math.floor(Math.random()*10));      //Math.floor舍去小数部分

五、js的全局函数

六、js的函数的重载

 

以上是关于四javaScript基础&DOM的主要内容,如果未能解决你的问题,请参考以下文章

C#-WebForm-JS串讲一:基础部分BOM部分DOM部分

前端入门6-JavaScript客户端api&jQuery

JavaScript基础语法四(对象操作)

C#-WebForm-JS知识:基础部分BOM部分DOM部分JS事件

JavaScript 入门教程四 语言基础

JavaScript基础四