day04 JS

2018-06-24 00:55:49来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  很伤心,就在前天下午,本人的电脑突然挂了,电脑售后告知需要10个工作日才可修好.

  于是乎,昨天学的内容来不及整理,暂且跳过,改天再抽空补上,就当缓几天再复习吧.

  今天继续学习了JS的内容.

  

1 js的内置对象

1-1 Array对象

1. 定义
* Array对象是数组对象,跟java中的数组一个意思,但是使用语法上稍微有些区别。

2. 使用
a. 创建数组对象
* 创建一个空数组:var arr = new Array();
* 创建一个指定大小的数组:var arr = new Array(size);
* 创建数组并填充元素:var arr = new Array(element0, element1, ..., elementn);
* 直接创建元素数组:var arr = [element0, element1, ..., elementn];

* 数组的特性:js没有集合,为了方便使用,数组可以自动扩容。

b.数组中的元素获取
* 跟java一样通过索引的方式获得数组中的元素:

c. 数组的常用属性:length
* 细节:不存在数组越界的问题

d. 获得数组中的一个元素:arr[0]
遍历获得数组中的所有元素:
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}

3. 多维数组的操作
a. js中的多维数组跟java中相似,也就是数组中的元素也是数组
arr = [ [1,2,3], [4,5,6],[7,8,9] ];

arr[1][0]

获取数组中的8数字可以:arr[2][1]

* 数组的成员,也是一个数组,就是多维数组.

1-2 String对象

1. 创建方式
var str1=new String("abc");
var str2="abc";

* 细节:需要开点脑洞
* str1是引用对象,指向一个字符串对象;str2是基本类型,指向一个字符串。
* typeof str1:返回结果是:object(引用类型); typeof str2:返回结果是:string(基本类型)
* 但是两者在使用上,没有任何区别。

2. 常见方法
* charAt(number):获取指定位置的字符
* indexOf():查找某个字符的第一次出现的下标
* lastIndexOf():查找某个字符最后一次出现的下标
* split():切割字符串
* substring(i,j):截取字符

1-3 Date日期对象

1. 创建方式
* 创建当前日期时间:var date = new Date();
* 创建指定日期时间:var date = new Date(毫秒值);
* 其中毫秒值为1970-01-01至今的时间毫秒值

2. 创建方法
* getFullYear() 从 Date 对象以四位数字返回年份。
* getMonth() 从 Date 对象返回月份 (0 ~ 11)。
* getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
* getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
* getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

1-4 Math对象

1. 介绍
* Math对象是数学对象,是一个工具对象
* Math对象不用使用new的方式创建,直接使用Math就可以调用对象内部的方法。

2. 常用方法
* abs(x) 返回数的绝对值。
* ceil(x) 对数进行上舍入。 3.1 -->4
* floor(x) 对数进行下舍入。 3.9 -->3
* random() 返回 0 ~ 1 之间的随机数。 [0,1): 前闭后开区间
* round(x) 把数四舍五入为最接近的整数。

2 DOM 

2-1 定义

1. 定义
* DOM(document object model),文档对象模型,DOM定义了操作HTML文档的接口,提供了访问HTML文档的途径和操作方法。

document.getElementById(); //dom的一个接口

2. 原理
* html文档加载到浏览器的内存中后,我们认为形成了一颗DOM树(浏览器内存中),即html标签按照层级结构而形成了一颗“家谱树”,而任何一个html标签、标签属性和文本都是这个树上的节点元素。

* 通过模型提供的接口,修改html文档的内容,即通过js动态的修改内存中的DOM树。

3. 演示dom树的创建

    <html>
        <head>
            <title>标题</title>
        </head>
        <body>
            <h1>h1标题</h1>
            <a href="http://www.baidu.com">百度</a>
        </body>
    </html>

2-2 标签的操作

2-3-1 获取元素节点

1. 方法
* getElementByid("id值"):根据id获取元素
<xxx id="id值"> ----整个html文档唯一

* getElementsByTagName("html标签名"):根据html标签获取多个元素
* <xxx> : xxx即标签名

* getElementsByClassName("class属性的名字"):根据类名获取多个元素
* <xxx class="class属性的名字">

* getElementsByName("name属性的名字"):根据name属性获取多个元素
* <xxx name="name的属性名字"> --整个html文档不唯一

2. 难点
* getElementsByTagName,getElementsByClassName,getElementsByName获取的是多个,返回的是一个html元素的数组,使用的时候,必须要遍历。

2-3-2 获取和设置文本节点

* innerHTML
* innerText

2-3-3 获取和设置属性节点

1. 方法
* getAttribute(属性的名字):获取属性的值
* setAttribute(属性的名字,属性的值):设置属性的值
* removeAttribute(name):删除某个属性

2. 对比以前的方式如何使用
* HTML元素,固有的属性,使用以前的获取和设置的方法;对于自定义属性,使用getAttribute,setAttribute

1. 方法
* getAttribute(属性的名字):获取属性的值
* setAttribute(属性的名字,属性的值):设置属性的值
* removeAttribute(name):删除某个属性

2. 对比以前的方式如何使用
* HTML元素,固有的属性,使用以前的获取和设置的方法;对于自定义属性,使用getAttribute,setAttribute

1. 方法
* 父节点.hasChildNodes():判断是否有子节点(细节:有看不见的子节点)
* firstChild: 属性,第一个子节点信息
* childNodes: 属性,返回所有节点


* 父节点.removeChild(子节点):删除子节点
* document.createElement(node):创建一个新元素
* 父节点.replaceChild(newnode, oldnode):替换子节点
* 父节点.appendChild(node):添加子节点
* 父节点.insertBefore(newnode,brothernode); // 在指定兄弟节点之前,插入新节点

2. 要点
* 先找“孩子他爸”,后操作“孩子”

3.难点
document.createElement("参数")的使用:
参数:你需要创建的html元素的标签名字

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript学习笔记(十三)——生成器(generator)

下一篇:javascript图片隐写术,感觉可以用它来干点有想法的事情