JavaScript思维导图

大灰

2022-11-20

浏览量: 14

JS基础知识点

编程语言

WEB前端

网站前端代码直译式脚本语言为网站添加动态效果——JavaScript基础知识点

树图思维导图提供《JavaScript》在线思维导图免费制作，点击“编辑”按钮，可对《JavaScript》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：c903e6b5ff2841623ac4d48a0e708b17

思维导图大纲

一：JavaScript简介与数据类型

JavaScript是一种弱类型的脚本编程语言。

JavaScript的数据类型：string、boolean、number、undefined、null、object。

判断数据的类型使用:typeof(数据)

二：JavaScript的组成结构

JavaScript由三部分组成：ECMAScript、DOM、BOM。

ECMAScript是一种标准，规定了JavaScript的语法、数据类型、保留关键字等。

DOM:Document Object Model,文档对象模型。

BOM:Browser Object Model,浏览器对象模型。

三：DOM模型中的常用操作：

document对象的常用方法：

1. getElementById("元素id") // 通过元素的id获取某个元素（返回一个DOM对象）

2. getElementsByName("元素的name") // 通过元素的name值获取一组元素

3. getElementsByTagName("元素的标签名") //　通过元素的标签名获取一组元素

获取到的元素也就是DOM对象，根据DOM对象关联的html元素，DOM对象也有相关的属性。当DOM对象关联的html元素之间可以添加其他内容时候，可以使用DOM对象的innerHTML属性设置之间的内容。

DOM对象的方法：

dom对象.setAttribute("属性名","属性值") // 设置dom对象的属性

dom对象.getAttribute("属性名") // 通过属性名获取属性值

四：BOM模型

BOM模型中，window对象是顶级对象，代表浏览器。window对象有常用的三个附属对象：location（代表地址栏）、document(代表内容文档)、history(代表前进/后退按钮)。

1. location

属性： location的href属性用来设置地址栏的网址。

方法： location的reload()方法用来刷新当前网页。

2. history

方法：back()后退至上一个页面，go(n) 前进n个页面

如果n为正，则前进；如果n为负，则后退

3.window对象代表浏览器，是BOM的顶级对象，系统函数就属于window对象。

4.常用系统函数：

alert("警告信息") // 弹出警告框

confirm("确认信息") // 弹出确认框，返回一个boolean类型的值

prompt("提示信息","提示框中的默认内容") // 返回用户输入的内容

parseInt("要转换的字符串") // 将指定字符串转换为整数

parseFloat("要转换的字符串") // 将指定字符串转换为小数

setInterval("调用函数","间隔时间(以毫秒计算)");

五：自定义函数

function 函数名(参数列表){

函数体代码[可以通过return返回值]

}

注意：在JavaScript中，函数本身也是对象。

六：JavaScript操作CSS样式

通过dom对象操作CSS样式：

dom对象.style.CSS属性名=属性值;

常用CSS属性：

backgroundColor 背景色

visibility 可见性（隐藏后继续占用空间），有两个属性值：visible(显示)、hidden(隐藏)

display(隐藏后不占用空间)，有两个属性值：block(显示)、none(隐藏，不占用空间)。

七：对象的实例化与初始化

方式一：“空手套白狼”

通过Object“从无到有”地实例化一个对象。

例如：var per=new Object(); // 实例化

per.name="tom";

per.age=20;

delete per.age; // 删除对象的某个属性

方式二：通过函数“模版”创建对象

例如：创建Person模版

function Person(name,age){

this.name=name||'令狐冲';

this.age=age||20;

this.setName=function(new_name){

this.name=new_name;

}

var per=new Person("tom",25);

方式三：通过“字面量”方式

{key1:value1,key2:value2,...keyn:valuen}

如何遍历JS对象？

通过for...in语法糖形式遍历：

for(var key in 对象){

key是对象的属性名称

使用对象[key] 获取属性值

}

JavaScript编程学习思维导图

U574133805

2.62

树图思维导图提供《JavaScript编程学习》在线思维导图免费制作，点击“编辑”按钮，可对《JavaScript编程学习》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：5852015be518375442bd28e429894644

JQuery高级编程脑图思维导图

灰色と青

4.24

树图思维导图提供《JQuery高级编程脑图》在线思维导图免费制作，点击“编辑”按钮，可对《JQuery高级编程脑图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：f8bcb77af00adeeb5e740a7b8ea5a368

思维导图模板

IT互联网

互联网干货

正文

相似思维导图模版

思维导图模版推荐

工作能力的小窍门帮助你了解提高工作效率思维导图

首页

我的文件

我的团队

个人中心