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小白入门笔记(三),没有看过其他两篇的朋友可以关注我的博客阅读

©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页