首页  思维导图  详情

Web前端基础

2021-01-30 13:21:46   1  举报





AI智能生成

Web前端学习路线，前端基础梳理

移动开发

前端基础

软件开发

作者其他创作

大纲/内容

第二部分核心技术

09 DOM基础

9.1 核心技术简介

9.2 DOM是什么？

9.2.1 DOM对象

9.2.2 DOM结构

9.3 节点类型

9.4 获取元素

9.4.1 getElementById()

9.4.2 getElementsByTagName

9.4.3 getElementsByClassName()

9.4.4 querySelector()和querySelectorAll()

9.4.5 getElementsByName()

9.4.6 document.title和document.body

9.5 创建元素

9.6 插入元素

9.6.1 appendChild()

9.6.2 insertBefore()

9.7 删除元素

9.8 复制元素

9.9 替换元素

10 DOM进阶

10.1 HTML属性操作（对象属性）

10.1.1 获取HTML属性值

10.1.2 设置HTML属性值

10.2 HTML属性操作（对象方法）

10.2.1 getAttribute()

10.2.2 setAttribute()

10.2.3 removeAttribute()

10.2.4 hasAttribute()

10.3 CSS属性操作

10.3.1 获取CSS属性值

10.3.2 设置CSS属性值

10.3.3 最后一个问题

10.4 DOM遍历

10.4.1 查找父元素

10.4.2 查找子元素

10.4.3 查找兄弟元素

10.5 innerHTML和innerText

11 事件基础

11.1 事件是什么？

11.2 事件调用方式

11.2.1 在script标签中调用

11.2.2 在元素中调用事件

11.3 鼠标事件

11.3.1 鼠标单击

11.3.2 鼠标移入和鼠标移出

11.3.3 鼠标按下和鼠标松开

11.4 键盘事件

11.5 表单事件

11.5.1 onfocus和onblur

11.5.2 onselect

11.5.3 onchange

11.6 编辑事件

11.6.1 oncopy

11.6.2 onselectstart

11.6.3 oncontextmenu

11.7 页面事件

11.7.1 onload

11.7.2 onbeforeunload

12 事件进阶

12.1 事件监听器

12.1.1 事件处理器

12.1.2 事件监听器

12.2 event对象

12.2.1 type

12.2.2 keyCode

12.3 this

13 window对象

13.1 window对象简介

13.2 窗口操作

13.2.1 打开窗口

13.2.2 关闭窗口

13.3 对话框

13.3.1 alert()

13.3.2 confirm()

13.3.3 prompt()

13.4 定时器

13.4.1 setTimeout()和clearTimeout()

13.4.2 setInterval()和clearInterval()

13.5 location对象

13.5.1 window.location.href

13.5.2 window.location.search

13.5.3 window.location.hash

13.6 navigator对象

14 document对象

14.1 document对象简介

14.2 document对象属性

14.2.1 document.URL

14.2.2 document.referrer

14.3 document对象方法

14.3.1 document.write()

14.3.2 document.writeln()

第一部分基本语法

01 JavaScript简介

1.1 JavaScript是什么

1.1.1 JavaScript 是属于 HTML 和 Web 的编程语言,编程令计算机完成您需要它们做的工作。

1.1.2 Js能做什么？

JavaScript 能够改变 HTML 内容

JavaScript 能够改变 HTML 属性

JavaScript 能够改变 HTML 样式 (CSS)

JavaScript 能够隐藏、显示 HTML 元素

1.2 JavaScript开发工具

1.2.1 Visual Studio Code（推荐）

1、Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。

2、是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。

常用插件

Name: Auto Close Tag Id: formulahendry.auto-close-tag Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text Version: 0.5.10 Publisher: Jun Han VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Name: Live Server Id: ritwickdey.liveserver Description: Launch a development local Server with live reload feature for static & dynamic pages Version: 5.6.1 Publisher: Ritwick Dey VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Name: Vetur Id: octref.vetur Description: Vue tooling for VS Code Version: 0.32.0 Publisher: Pine Wu VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=octref.vetur

Name: CSS Formatter Id: aeschli.vscode-css-formatter Description: Formatter for CSS Version: 1.0.1 Publisher: Martin Aeschlimann VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=aeschli.vscode-css-formatter

使用演示

创建index.html

页面预览

创建第一个js文件

官网地址：https://code.visualstudio.com/

1.2.2 WebStorm

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

官网：https://www.jetbrains.com/webstorm/download/

1.3 JavaScript引入方式

1.3.1 外部JavaScript

1.3.2 内部JavaScript

1.3.3 元素属性JavaScript