JavaScript小白入门笔记（二）

五、复合类型

1. String

1.1 定义方式

语法：

var str = \'welcome\';   // 基本数据类型stringvar str = new String(\'welcome\');	// 引用数据类型String

使用length属性获取字符串的长度

1.2 常用方法

方法	描述
charAt(index)	返回在指定索引位置的字符，也可使用 [索引] 的方式
indexOf(字符串,index)	返回某个指定的字符串值在字符串中首次出现的位置
lastIndexOf(字符串,index)	返回某个指定的字符串值在字符串中最后出现的位置
toLowerCase()	把字符串转化为小写
toUpperCase()	把字符串转化为大写
substring(start,stop)	提取字符串中两个指定的索引号之间的字符
replace(str1,str2)	将指定的字符串替换为指定的新的字符串
split(separator,howmany)	把字符串分割为字符串数组
trim()	去除前后两端的空格

2. Date

2.1 定义方式

语法：

var date = new Date(); // 定义一个日期对象，表示当前时间var date = new Date(year,month,day,hour,minute,second) // 参数为指定的年、月、日、时、分、秒,月份取值为[0,11]var date = new Date(millSeconds); //参数为与1970-1-1相差的毫秒数

2.2 常用方法

方法名	说明
getFullYear()	以四位数字返回年份
getMonth()	返回月份(0~11)，0表示1月
getDate()	返回一个月中的某一天(1~31)
getHours()	返回小时 (0 ~ 23)
getMinutes()	返回分钟 (0 ~ 59)
getSeconds()	返回秒数 (0 ~ 59)
getMilliseconds()	返回毫秒(0 ~ 999)
getDay()	返回一周中的某一天(0~6)，0表示周日
getTime()	返回从1970-1-1 0:0:0至今的毫秒数

setXxx方法与getXxx方法类似，用于设置对应的值

//以汉字形式显示星期几<script>var date = new Date();var weekday = [\'星期日\',\'星期一\',\'星期二\',\'星期三\',\'星期四\',\'星期五\',\'星期六\'];document.write(\'今天是\' + weekday[date.getDay()]);</script>

3. JSON

3.1 JSON简介

JavaScript Object Notation 是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式

采用与编程语言无关的文本格式，易于阅读和编写，同时也易于解析和生成。

3.2 基本用法

语法： {“属性名”:属性值, “属性名”:属性值……}

注意：

JSON结构是由一系列的键值对所组成，称为JSON对象
属性名必须使用双引号引起来

使用：

简单的JSON对象
复合属性，属性的值为JSON对象
JSON对象的集合

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><script>//定义一个JSON对象var user = {\"id\":1001,\"name\":\"tom\",\"age\":20,\"height\":180.5,\"address\":{\"province\":\"江苏省\",\"city\":\"南京市\",\"district\":\"秦淮区\"},\"isMarried\":true};//访问方式:对象名.属性名console.log(user.name);console.log(user.height);console.log(user.address.city);//JSON对象数组var users = [{\"id\":9527,\"username\":\"admin\",\"password\":\"123\",\"status\":1}, {\"id\":9528,\"username\":\"tom\",\"password\":\"111\",\"status\":2}, {\"id\":9529,\"username\":\"jack\",\"password\":\"222\",\"status\":3}, {\"id\":9530,\"username\":\"alice\",\"password\":\"333\",\"status\":4}];for(var i = 0; i < users.length; i++){var u = users[i];console.log(u.id,u.username,u.password,u.status);}</script></head><body></body></html>

3.3 JSON转换

JSON转换为字符串

var person={\"name\":\"wang\",\"age\":18,\"height\":180.5};var str=JSON.stringify(person);

字符串转换为JSON

var str=\'{\"name\":\"tom\",\"age\":20}\';var obj=JSON.parse(str);var users=\'[{\"id\":1,\"username\":\"admin\",\"password\":\"123\"},{\"id\":2,\"username\":\"tom\",\"password\":\"456\"}]\';var objs=JSON.parse(users);

4. 对象类型

4.1 对象简介

对象类型可以理解为java中的引用数据类型

JavaScript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征

4.2 创建对象

三种方式：

使用Object

// 新创建的对象没有属性和方法var 对象名=new Object();// 为对象添加属性对象名.属性名=属性值;// 为对象添加方法对象名.方法名=function(){方法体};// 调用属性和方法对象名.属性名; 或 对象名[\'属性名\'];对象名.方法名();

使用构造函数，模拟类的定义，相当于自定义了一个类型

function 构造函数名(形参1,形参2…) { // 为了区别于普通函数，构造函数名建议首字母大写this.属性名=形参1;this.属性名=形参2;this.方法名=function(){方法体};}var 对象名=new 构造函数名(实参1,实参2…);

使用JSON格式对象，一般只在JSON对象中定义属性

var JSON对象 = {\"属性名\":属性值,\"属性名\":属性值,...};

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>Title</title><script>/**1.使用Object*/var stu = new Object();//添加属性stu.name = \'tom\';stu.age = 18;stu.height = 180.5;//添加方法stu.study = function () {console.log(\'我叫\' + stu.name + \',正在学习....\');};stu.run = function () {console.log(\'正在参加马拉松....\');};//调用属性和方法console.log(stu.name,stu[\'age\']);stu.study();stu.run();/**2.使用构造函数*/function Student(name,age,sex) {//属性this.name = name;this.age = age;this.sex = sex;//方法this.show = function () {console.log(\'我叫\' + this.name + \',年龄:\' + this.age + \',性别:\' + this.sex);};this.study = function () {console.log(\'正在学习....\');}}var student = new Student(\'tom\',20,\'male\');console.log(student.name,student.age);student.show();student.study();/**3.使用JSON对象*/var student = {\"name\":\"tom\",\"age\":18,\"sex\":\"male\",\"study\":function () {console.log(\'正在学习....\');}};console.log(student.name,student[\'age\']);student.study();</script></head><body></body></html>

六、DOM操作

1. DOM简介

Document Object Model 文档对象模型

浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树

HTML文档和DOM树是一一对应的关系
当DOM树被改变时，与之对应的HTML文档也会随之改变
当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作
DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件
树上的每一个节点都是一个DOM对象，树的顶层为document对象，表示整个文档

2. 查询操作

即获取DOM对象

方法或属性	含义
document.getElementById(“id值”)	根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName(“name属性值”)	根据name属性来查询，返回所有匹配的节点集合
document.getElementsByTagName(“标签名”)	根据标签名来查询，返回所有匹配的节点集合
document.querySelector(“选择器”)	根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll(“选择器”)	根据css选择器来查询，返回所有匹配的节点集合
parentNode属性	查询当前节点的父节点
previousSibling属性	查询当前节点的上一个节点
nextSibling属性	查询当前节点的下一个节点
firstChild属性	查询当前节点的第一个子节点
lastChild属性	查询当前节点的最后一个子节点

3. 访问操作

3.1 访问属性

即获取/设置DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与对应HTML标签同名的属性

用法：

DOM对象.属性

3.2 访问内容

即获取/设置标签中的内容

两种方式：

使用innerHTML
用法：
```
DOM对象.innerHTML
```
将内容解析为HTML
使用innerText
用法：
```
DOM对象.innerText
```
将内容作为纯文本

3.3 访问CSS

即获取/设置CSS样式