JavaScript

这是一篇关于Javascript的思维导图，其内容主要包括变量，数据类型，基本结构，数据结构，函数与DOM模型

JavaScript

• 变量
  • 作用域
    • 局部作用域
    • 全局变量
  • 命名
    • 小驼峰
    • 变量必须以字母开头 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做） 变量名称对大小写敏感（y 和 Y 是不同的变量）
• 数据类型
  • Number
    • 数字可以带小数点，也可以不带，数值较大时可以采用科学计数法
  • string
    • 字符串可以是引号中的任意文本。您可以使用单引号或双引号可以在字符串中使用引号，只要不匹配包围字符串的引号即可
  • null
    • 将变量的值设置为 null 来清空变量
  • undefind
    • Undefined 这个值表示变量不含有值。
• 基本结构
  • 顺序
    • 从上往下执行
  • 选择
    • if语句
    • 三元运算符
    • switch语句
  • 循环
    • for循环
    • while循环
    • do…while循环
• 数据结构
  • 数组
    • 创建
      • 1: 常规方式:var myCars=new Array();myCars[0]="Saab"; myCars[1]="Volvo";myCars[2]="BMW";2: 简洁方式:var myCars=new Array("Saab","Volvo","BMW");3: 字面:var myCars=["Saab","Volvo","BMW"];
    • 访问
      • 通过指定数组名以及索引号码，你可以访问某个特定的元素。以下实例可以访问myCars数组的第一个值：var name=myCars[0];以下实例修改了数组 myCars 的第一个元素:myCars[0]="Opel";
    • 数组元素
      • 你可以在一个数组中包含对象元素、函数、数组
  • 对象
    • 对象只是一种特殊的数据。对象拥有属性和方法。
    • 访问对象的属性
      • 属性是与对象相关的值。访问对象属性的语法是：objectName.propertyName
    • 访问对象的方法
      • 方法是能够在对象上执行的动作。您可以通过以下语法来调用方法：objectName.methodName()
    • 创建对象
      • 创建新对象有两种不同的方法： 1.使用 Object 定义并创建对象的实例。 2.使用函数来定义对象，然后创建新的对象实例。
• 函数
  • 自定义
    • function functionName(parameters) { 执行的代码}
  • 自调用函数
    • 函数表达式可以 "自调用"。自调用表达式会自动调用。如果表达式后面紧跟 () ，则会自动调用。(function () { var x = "Hello!!"; // 我将调用自己})(); 以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。
  • 函数调用
    • 作为一个函数调用
    • 使用构造函数调用函数
    • 函数作为方法调用
    • 作为函数方法调用函数
• DOM模型
  • html
    • 通过 id 找到 HTML 元素 通过标签名找到 HTML 元素 通过类名找到 HTML 元素
    • 改变 HTML 输出流改变 HTML 内容document.getElementById(id).innerHTML=新的 HTML改变 HTML 属性document.getElementById(id).attribute=新属性值
  • css
    • 改变HTML样式document.getElementById(id).style.property=新样式
  • 事件
    • 常见事件反应
      • 当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当输入字段被改变时 当提交 HTML 表单时 当用户触发按键时
    • onload /onunload
    • onchange
    • onmouseover /onmouseout
    • onmousedown/onmouseup/onclick
  • eventListener
    • addEventListener() 方法
    • removeEventListener() 方法
  • 元素
    • 创建新的 HTML 元素 (节点) - appendChild()
    • 创建新的 HTML 元素 (节点) - insertBefore()
    • 移除已存在的元素-removeChild()
    • 替换 HTML 元素 - replaceChild()
  • so on