一、基础
1、常用框架、引入JS外表文件
image.png
2、变量
-
什么是变量? 从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种/某些数值的存储器。我们可以把变量看做一个盒子，为了区分盒子，可以用BOX1,BOX2等名称代表不同盒子，BOX1就是盒子的名字（也就是变量的名字）。image.png
image.png
3、判断语句（if...else）
image.png
4、函数
-
我们就可以把完成特定功能的代码块放到一个函数里，直接调用这个函数，就省重复输入大量代码的麻烦。image.png
二、常用互动方法
1、输出内容（document.write）
![]()
image.png
image.png
2、警告（alert 消息对话框）
![]()
image.png
image.png
3、确认（confirm 消息对话框）
![]()
image.png
image.png
4、提问（prompt 消息对话框）
![]()
image.png
image.png
5、打开新窗口（window.open）
![]()
image.png
![]()
image.png
image.png
image.png
6、关闭窗口（window.close）
![]()
image.png
image.png
7、练习
-
制作新按钮，“新窗口打开网站” ，点击打开新窗口。新窗口打开时弹出确认框，是否打开。image.png
三、DOM操作
1、认识DOM
-
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。image.png
-
将HTML代码分解为DOM节点层次图:image.png
- HTML文档可以说由节点构成的集合，三种常见的DOM节点:
- 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
- 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
-
属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。image.png
2、通过ID获取元素
![]()
3、innerHTML 属性
-
innerHTML 属性用于获取或替换 HTML 元素的内容。image.png
4、改变 HTML 样式
![]()
image.png
image.png
5、显示和隐藏（display属性）
-
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。image.pngimage.png
6、控制类名（className 属性）
- className 属性设置或返回元素的class 属性。
- 作用:
1.获取元素的class 属性
-
为网页内的某个元素指定一个css样式来更改该元素的外观
image.pngimage.png
