四、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的函数的重载

时间： 2024-11-04 12:19:16

四、javaScript基础&DOM的相关文章

JavaScript基础--DOM对象加强篇（十四）

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）

DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象模型)DOM是HTML与XML的应用编程接口(API) BOM和DOM相辅相成的关系BOM为纲,DOM为目,DOM是BOM的具体体现 3.DOM对象 3.1 Windows对象 3.1.1 confirm function test(){ var res= window.confirm("你要删除&

JavaScript基础—dom,事件

Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让javascript能操作html页面控件的类,函数. 这就是文档对象模型.按照xml文档的理解就可以. à页面中的属性,标签要是没有注明给那个对象,则统一时给window的,我们都可以通过window点击出来,进行操作,这个js中理解的一样.但是我们现在通过document.getElementById

JavaScript基础 DOM的操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 一.属性和方法: window对象——浏览器窗口window.location:地址栏window.history:访问历史window.status:状态栏window.document:重点! 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgum

从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM

1:DOM(Document  Object  Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DOM常用属性 title:返回或设置当前文档的标题. all:返回所有元素的集合. forms:返回对文档中所有form对象的引用. 通过集合来访问相应的对象: 1.通过下标的形式. 2.通过name形式. 3:DOM查询方法 1.getElementById(id):返回拥有指定id的(第一个)对象

javascript基础--DOM选取子节点

一.节点选取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> // 首尾子节点有兼容性问题 // firstChild firstElementChild // lastChild lastElementChild // 兄弟节点 // ne

javascript基础--DOM选取父节点

一.parentNode <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { var aA = document.getElementsByTagName('a'); var i = 0;

五、javaScript基础&amp;DOM（二）

笔记内容导图:   一.元素对象(element对象) 要操作element对象,首先要获取到element  (使用document里面相应的方法获取) element里面的方法 getAttribute("属性名称") :获取属性里面的值 <html> <body> <input type="text" id="a" class="haha" value="name">

javascript基础dom操作html元素

语法:document.getElementById("id"); 举例:<script> window.onload = funtion () { var oDiv = document.getElementById("div1");// js选择html元素id元素 oDiv.style.color = "red";//js控制html元素css样式color颜色: } <script> <body> &l