JavaScript笔记

一、基础

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

2、警告（alert 消息对话框）

image.png

3、确认（confirm 消息对话框）

image.png

4、提问（prompt 消息对话框）

image.png

5、打开新窗口（window.open）

image.png

image.png

6、关闭窗口（window.close）

image.png

7、练习

• 制作新按钮，“新窗口打开网站” ，点击打开新窗口。新窗口打开时弹出确认框，是否打开。
  image.png

三、DOM操作

1、认识DOM

• 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
  image.png

• 将HTML代码分解为DOM节点层次图:
  image.png
• HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中、、

   等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如
3. ...
中的JavaScript、DOM、CSS等文本。

4. 属性节点:元素属性，如标签的链接属性href="http://www.imooc.com"。
   image.png

2、通过ID获取元素

3、innerHTML 属性

• innerHTML 属性用于获取或替换 HTML 元素的内容。
  image.png

4、改变 HTML 样式

image.png

5、显示和隐藏（display属性）

• 网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
  image.png
  image.png

6、控制类名（className 属性）

• className 属性设置或返回元素的class 属性。
• 作用:
  1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

   
   
   image.png
   image.png