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(