很伤心,就在前天下午,本人的电脑突然挂了,电脑售后告知需要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元素的标签名字

day04 JS的更多相关文章

  1. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...

  2. js下 Day04、DOM操作--自定义属性

    语法: 元素.getAttribute('自定义属性名') 功能:获取自定义属性 语法: 元素.setAttribute('自定义属性名','值') 功能:设置自定义属性 语法: 元素.removeA ...

  3. Node.js 自学之旅

    学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在园子里 ...

  4. Node.js 自学之旅(初稿篇)

    学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在园子里 ...

  5. day04 orm操作

    day04 orm操作 昨日内容回顾 小白必会三板斧 request对象方法 静态文件 请求方式 python链接数据库 django链接数据库 小白必会三板斧 HttpResponse :返回前端浏 ...

  6. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  7. js学习笔记：操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  8. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

随机推荐

  1. win10 uwp 无法附加到CoreCLR

    本文说的是在vs调试无法附加到CoreCLR.拒绝访问.已经如何去解决,可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期.如果觉得我有讲的不对的,就多多包含,或者直接关掉这篇文章, ...

  2. Linux文件系统的层级结构

    Linux文件系统的层级结构   文件结构 倒置的树状结构 :Linux的哲学思想是一切皆文件,把几乎所有资源统统抽象为文件形式:包括硬件设备,甚至通信接口等 根目录 :linux的文件起始均从唯一的 ...

  3. javascript 之基本包装类型--04

    基本包装类型 基本包装类型是特殊的引用类型.每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而可以调用属性.方法来进行后续操作. ECMAScript还提供了三种基本包装类型 ...

  4. Java随机数和UUID

    Java随机数和UUID Java随机数 在Java项目中通常是通过Math.random方法和Random类来获得随机数,前者通过生成一个Random类的实例来实现. 此类产生的是一组伪随机数流,通 ...

  5. LeetCode 370. Range Addition （范围加法）$

    Assume you have an array of length n initialized with all 0's and are given k update operations. Eac ...

  6. java swing中Timer类的学习

    最近在完成学校课程的java平时作业,要实现一个计时器,包含开始.暂停以及重置三个功能.由于老师规定要用这个timer类,也就去学习了一下,顺便记录一下. 首先呢去查了一下java手册上的东西,发现t ...

  7. JPA的一对多映射(双向)关联

    实体Customer:用户. 实体Order:订单. Customer和Order是一对多关系.那么在JPA中,如何表示一对多的双向关联呢? JPA使用@OneToMany和@ManyToOne来标识 ...

  8. CodeForces 11D(状压DP 求图中环的个数)

    Given a simple graph, output the number of simple cycles in it. A simple cycle is a cycle with no re ...

  9. Basic Data Structure

    Basic Data Structure Time Limit: 7000/3500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Oth ...

  10. rsync远程数据同步工具的使用

    准备工作 虚拟机1: 192.168.24.41, 用于搭建rsync服务器 虚拟机2: 192.168.26.68, 用于搭建rsync客户端 虚拟机1和虚拟机2均为centos7; 1. 检查虚拟 ...