JavaScript小白入门笔记（二）

五、复合类型

1. String

1.1 定义方式

语法：

var str = 'welcome';   // 基本数据类型string
var 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样式

两种方式：

使用style属性
用法：DOM对象.style.样式属性
如果CSS属性中有短横线-，需要去掉短横线，然后将其后的单词首字母改成大写
使用className属性(用来访问和设置类选择器)
用法：DOM对象.className

4. 添加操作

方法	含义
document.createElement(“标签名”)	创建一个元素节点，即标签
document.createTextNode(“文本内容”)	创建一个文本节点，即标签中的文本内容
node.appendChild(newNode)	将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode,refNode)	将一个新的节点newNode插入到node节点的子节点refNode之前
node.replaceChild(newNode,refNode)	用一个新的节点newNode替换原有的node节点中的子节点refNode

5. 删除操作

方法	含义
node.remove()	删除当前节点
node.removeChild(refNode)	删除当前节点中指定的子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function doAdd() {
            //1.创建元素节点
            var li = document.createElement('li');
            //2.设置文本内容
            var txt = document.createTextNode('alice');
            li.appendChild(txt);
            //也可以用li.innerText = 'alice';
            //3.设置属性
            li.setAttribute('id','fourth');
            //也可以用li.id = 'fourth';
            //4.添加到节点中
            let ul = document.getElementById('myul');
            ul.appendChild(li);
        }

        function doDelete() {
            document.getElementById('first').remove();
            let ul = document.getElementById('myul');
            ul.removeChild(document.getElementById('second'));
        }
    </script>
</head>
<body>
    <input type="button" value="添加节点" onclick="doAdd()">
    <input type="button" value="删除节点" onclick="doDelete()">
    <ul id="myul">
        <li id="first">tom</li>
        <li id="second">jack</li>
        <li id="third">mike</li>
    </ul>
</body>
</html>

6. 实例：使用DOM动态修改页面实现网页集成不同搜索引擎的搜索功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索页面</title>
    <style>
        #logo{
            height: 20px;
            width: 20px;
        }
    </style>
    <script>
        function change() {
            if($('baidu').checked){
                $('logo').src = 'images/baidu.png';
                $('btnSearch').value = '百度搜索';
                $('frmSearch').action = 'https://www.baidu.com/s';
                $('txtSearch').name = 'wd';
            }else if($('sogou').checked){
                $('logo').src = 'images/sougou.png';
                $('btnSearch').value = '搜狗搜索';
                $('frmSearch').action = 'https://www.sogou.com/web';
                $('txtSearch').name = 'query';
            }else{
                $('logo').src = 'images/360.png';
                $('btnSearch').value = '360搜索';
                $('frmSearch').action = 'https://www.so.com/s';
                $('txtSearch').name = 'q';
            }
        }

        /*
         *用来简化元素的获取
         */
        function $(id) {
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <input type="radio" name="search" id="baidu" checked onclick="change()"><label for="baidu">百度</label>
    <input type="radio" name="search" id="sogou" onclick="change()"><label for="sogou">搜狗</label>
    <input type="radio" name="search" id="360" onclick="change()"><label for="360">360</label>
    <br>

    <form action="https://www.baidu.com/s" id="frmSearch" target="_blank">
        <img src="images/baidu.png" id="logo">
        <input type="text" name="wd" id="txtSearch" placeholder="请输入查询关键字">
        <input type="submit" value="百度搜索" id="btnSearch">
    </form>
</body>
</html>

效果预览:
在这里插入图片描述
注：因为内容过多，所以我分成了三篇博客，分别为JavaScript小白入门笔记（一）、JavaScript小白入门笔记（二）、JavaScript小白入门笔记（三），没有看过其他两篇的朋友可以关注我的博客阅读