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 -