JavaScript从入门到精通(转)

JavaScript从入门到精通

转自： https://github.com/Eished/JavaScript_notes

视频连接：https://www.bilibili.com/video/BV1LW411Q7qV?p=9

目录：

以下记录了所有笔记：（代码连接：https://pan.baidu.com/s/和谐和谐1NrnnenGpuJ和谐jAiMiRKpHcgA （s51c））

初探 JavaScript 魅力

JavsScript 是什么

网页特效原理
- JavaScript 就是修改样式（文档）
编写 JS 的流程
- 布局：HTML + CSS
- 属性：确定要修改的属性
- 事件：确定用户做哪些操作（产品设计）
- 编写 JS ：在事件中，用 JS 来修改页面元素的样式

第一个 JS 特效：鼠标提示框

分析效果实现原理
- 样式：div 的 display / none
- 事件：onmouseover / onmouseout
- 动手编写效果
特效基础
- 事件驱动：onmouseover
- 元素属性操作：obj.style.[...]
- 特效实现原理概括：响应式用户操作，对页面元素样式修改

兼容性问题

// div2.style.display=\'block\'; // 部分浏览器不兼容
document.getElementById(\'div2\').style.display=\'block\'; // 所有浏览器兼容

函数
- 制作更复杂的效果
- 直接在事件内写代码会很乱
  - 引入 function() 函数的基本形式
  - 把 JS 标签里放入到函数里，类似于 css 里的 class
  - 变量的使用：别名
- 定义和调用
  - 函数定义：告诉系统有这个函数，不会执行
  - 函数调用：执行函数里面的代码
  - 关系和区别

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>第一个JS效果</title>

    <style>
      #div2 {
        display: none; 
        background: red; 
        width: 100px; 
        height: 50px; 
        font-size: 16px;
      }
      #div1 {
        display: block; 
        background: red; 
        width: 100px; 
        height: 100px; 
        font-size: 16px;
      }
    </style>

    <script>

    // 封装 getElementById 函数
    function get(id) {
      return document.getElementById(id);
    }

    // 显示 div2
    function show() {
      // div2.style.display=\'block\'; // 部分浏览器不兼容
      get(\'div2\').style.display=\'block\';
    }

    // 隐藏 div2
    function hide() {
      // div2.style.display=\'none\'; // 部分浏览器不兼容
      get(\'div2\').style.display=\'none\';
    }

    // div1 变绿
    function toGreen() {
     get(\'div1\').style.background=\'green\';
    }

    // div1 变蓝
    function toblue() {
      get(\'div1\').style.background=\'blue\';
    }

    // div1 变红
    function toRed() {
      get(\'div1\').style.background=\'red\';
    }
    
    // 点击循环变色
    var i = 0;
    function changeColor() {
      console.log(\'i=\',i)
      if (i == 0) {
        toGreen();
        i++;
        console.log(\'i=\',i)
        return;
      } 
      if (i == 1) {
        toblue();
        i++;
        console.log(\'i=\',i)
        return;
      } 
      if (i == 2) {
        toRed();
        i = i - 2;
        console.log(