2020-08-05

 

前端笔记

前言

CSS

Javascript

Log大法

数组

对象

Dom

事件

匿名函数

写代码封装

Js测试：

Http

类

Jquery

HTML5

EM6

继承

generator

yield

Bom

Node

数据结构

找工作

工作之后

前言

一、什么是程序员的自学能力？

1，信息资源搜集检索能力

2，能不能禁的住锤

3，，，，，

二、码代码的本质：使代码可读性好， 简洁。

三、编程的核心：是码代码吗？个人理解：是思想 是从编程中获得的素养带到生活中。

四、编程的能力：以程序员的思维来思考 分解问题

五、抽象化编程，如何封装功能，如何组织代码结构

好处：容易看，容易debug，分层调试错误，起到隔离错误

六、学习要点：

扣住核心 1，他的本质是什么？ 他的本质是 技术

2，他是用来干什么的？ 他生存的意义

3，来龙去脉。他从哪里来，要到哪里去

CSS

 

 

样式优先级(从高到低)

color: white !important;

!important

内联样式

<style> 中的样式

link 中的样式

 

选择器优先级(从高到低)

!important

内联样式

id 选择器

class 选择器

元素选择器

 

4种多元素的 组合选择器

div, p 同时匹配

div div 匹配后代 (All)

div > p 匹配子元素

div + div 匹配同级的下一个元素(仅匹配一个)

 

div + div 应用经典场景三个标签之间分割符。用border-left: 1px solid red;

 

div p 与 div > p的区别

前者匹配全部的后代元素，而后者仅匹配向下一层（子元素）

4种属性选择器 根据某类的属性来查找选择器

E[att]

E[att=val]

伪类选择器 实际不存在的类

E:first-child

E:link

E:lang(c)

伪元素

E::first-line

E::first-letter

E::before

div:用于分割页面布局。

outline属性:1px solid red;

 

 

 

盒模型

内容 Padding border margin

 

 

border

border-width

border-style

border-color

简写成 border: 3px red solid; 没有前后顺序，css解析器能识别。

 

border-top border-right border-bottom border-left

border-top-width

border-top-style

border-top-color

等价于 border-top:solid 20px red;

 

border-radius 是用来设置圆角度数的

它也拥有三种缩写, 对应的含义如下

左上角为 top, 右下角为 bottom 左下角为left 右上角right

该元素是一个圆形：

 

background: red url(images/logo.jpg) no-repeat center center fixed;

background 相关属性和缩写

background-color: #233;

background-image: url(bg.png);

background-repeat: no-repeat; 全是狗

background-attachment: fixed; /* 背景图片随滚动轴的移动方式 */

简写成

background: #233 url(bg.png) no-repeat;

background-repeat: repeat repeat-x repeat-y;

 

background-position:left top

background-position:100px 100px

 

background-attachment:fixed

background-attachment:scroll

 

Cursor属性：光标移上去的形状。手的样子。。。

 

居中写法

block 元素居中

margin: 0 auto;

 

inline inline-block 元素居中

text-align: center;

 

text-decoration:

underline

overline

line-through

blink(这个值已经废弃了)

 

margin 合并

 

元素定位

position 每个便签都有一个默认的属性

默认值是static

static relative absolute fixed inherit

非 static 元素可以用 top left bottom right 属性来设置坐标

非static 元素可以用z-index 属性来设置显示层次。

relative 是相对定位 相对于本来存在的定位 E=MC2，不设置top left bottom right height width就相当于static。top left bottom right height width 不影响别人布局.它移动之后，他原先的位置不会被改变,移动的位置也不改变别人。 脱离文档流

absolute 完全绝对定位, 忽略其他所有东西, 往上浮动到非 static 的元素 脱离文档流

top left bottom right height width

fixed 固定定位 基于 window 的绝对定位, 不随滚动条滚动改变，top left bottom right height width 脱离文档流

float 浮动效果，不用这个position也可以实现所有效果。主要做文字环绕图片效果，排版用的。

Inherit 延续父类设置

 

 

 

overflow属性

visible 默认

auto 需要的时候加滚动条

hidden 隐藏多余元素

scroll 就算用不着也会强制加滚动条，横向不需要也加。

display 属性 显示效果

block inline inline-block

block

独占一行，可以设置宽高

默认 block 的标签有

div p ul ol li h1 h2 h3 h4 h5 h6

inline

只占 content 的尺寸，所以会被内容充开。

没有盒子模型，宽高。但img是个例外。

inline-block

inline 布局 block 模式

inline-block 对外表现为 inline，所以可以放在一行

对内表现为 block，所以可以设置宽高 盒子模型

 

CSS 3 中的新特性

动画应该利用 CSS 3 generator（有网站做动画生成器）生成CSS3代码

一句话概括Transform,Transition,Animation区别？

1. 各自特点

Transform：对元素进行变形；

Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。

Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键贞。

1. Transition与Animation:

transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值，从而达到一种动画的效果。

 

 

 

简单动画（和动画结合）

RGBA alpha:透明度 0 完全透明

rgba(255,255,255,0.65)

opacity 不透明度

opacity: 0.5;

border-radius 边框倒角

border-radius : 1px 2px 3px 4px;

box /text shadow 盒子阴影

box-shadow:15px 15px 25px #FFFFFF (阴影相对偏移距离x / y / 虚化值/ 颜色)

transform 2D 变形 做效果

transform: translate(12px, 50%); 不会影响其他元素和position:realtive 效果一样

transform: scale(2, -1); 拉伸 缩放 可以做翻页动画

transform: rotate(0.5deg); 旋转

transform: skew(30deg, 20deg); 偏转

transform: perspective(17px);

*{

transform:scale(1, -1); 整个页面上下翻转

}

transform-origin：center top 由中间往上面走

transform-origin：left top 由左边往上边走

transform的方法都是基于元素的中心来变换的，也就是元素变换的基点默认是元素的中心。所以改变变换基点。

transform-origin: x-axis y-axis z-axis;

x-axis，表示水平方向上的取值，可以取 字符参数值left,center right，也可以取百分比，字符参数值对应的百分值为left=0%;center=50%;right=100%。

y-axis，表示竖直方向上的取值，还可以设置字符值top,center,bottom，也可以取百分比，字符参数值对应的百分值为top=0%;center=50%;bottom=100%。

z-axis，表示视图被置于 Z 轴的何处，用于3D变形中。

Multi Column 将文本分隔成多列

 

一般动画

transition属性的值包括以下四个：

transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理。看MDN animated。

transition动画触发分为

伪类触发 :hover : focus :checked : active

JS触发 改变（切换/增加、删除）元素样式toggleClass

JS触发transition属性应写在触发之后该元素还存在的样式中，使得该元素产生动画。

 

transition-duration：指定属性过渡的持续时间

transition-timing-function：指定渐变的速度：

ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)；

transition 动画

transition-delay: 0s

 

transition-duration: 0s

transition-property: all

 

transition-timing-function: ease

也可以指定属性组合，用逗号隔开。

 

 

动画三部曲：

1.什么类型 transform: scale(1.5)

2 方向 transform-origin: bottom center

3 过渡效果transition: all 0.25s linear

高级动画

keyframes 动画和生成器

 

animation 属性键值:

 

 

步骤1:设置动画名相当于函数调用只不过这是动画，没有括号

 

步骤2:定义一个动画。相当于函数定义（声明）只不过这是动画，没有括号

 

其他 css3 生成器

http://css3generator.com/（要翻墙）

http://css3.me/

https://www.tutorialspoint.com/css/css3_boarder_image.htm

 

CSS3 动画（浏览器自动补全未定义状态即补间动画）

主要用到了 3 个属性

transform 的全部函数 做效果的

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transition 可动画属性列表

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

animation

https://daneden.github.io/animate.css/

http://cssanimate.com/

 

 

常见套路：

 

 

1，img标签上加动画，div标签上加不透明度改变内部元素不透明度产生高亮。

transition：这个css指定了某个属性发生变化的时候自动使用动画效果和动画时间

 

 

 

2，div标签上加滤镜，改变内部元素显示效果（黑白，彩色）

 

3，标签垂直居中

方式1 span{

outline: auto;

position: absolute;//记得absolute的特性

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

 

方式2 span{

outline: auto;

position: absolute;//记得absolute的特性

top:50%;

left:50%;

margin-left:span标签宽度的一半

margin-top: span标签高度的一半

}

文字在div中水平垂直居中：text-align line-height vertical-align这三个属性可以。

vertical-align: middle;

4，轮播图套路

• 准备轮播图界面（图片+上下一张按钮）
• 添加点击事件
  • 当前图片隐藏（移除显示class）
  • 下一张图片显示（添加显示class）
  • 当前指示器（div）隐藏
  • 下一个指示器显示
• 定时器实现轮播图自动切换

 

5，弹窗（显示中例如优酷登录界面）

1. 添加html模板

 

1. 添加css样式

 

1. 添加弹窗有关的事件。事件参数要不要加个后回调函数用于数据返回。

 

1. 事件结束后移除html模板和css样式。

style 没有什么特殊的，也可以带class,把样式删除掉。

 

6, 动画

// CSS3 动画的套路(查看 fe21.html, 主要是定了一套测试动画的方案)

// translate 优先于 rorate

// animationend 事件

// 在动画播完后触发

// 动画播放被暂停不会触发

// animationiteration 事件

// 在动画播放一轮后触发

// 如果动画只播放一轮, 那么不会触发此事件

// 利用事件测试动画

7, 五角星

wujiaoxing::after{

content:””;

color:#FF9800;

font-size;

text-shadow:1px 1px black;

}

8, js实现循环动画播放

 

9, 定时器

JavaScript是单线程语言，但是它可以通过设置超时值和间歇时间值来指定代码在特定的时刻执行。超时值是指在指定时间之后执行代码，间歇时间值是指每隔指定的时间就执行一次代码。

3 秒（3000 毫秒）后弹出 "Hello" :

var timeoutID = setTimeout(function(){ alert("Hello"); }, 3000);

clearTimeout(timeoutID)

setInterval(函数表达式，毫秒数)；

setInterval()会不停的调用函数，直到clearInterval()被调用或者窗口被关闭，由 setInterval()返回的ID值可用作clearInterval()方法的参数。

setTimeout(函数表达式，毫秒数)；

setTimeout()只执行函数一次，如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout() clearTimeout()

 

CSS默认样式：

 

Javascript

网景公司：网速很慢，提交缓慢，交互困难，本地校验

Js用的场景：

1. 用户名位数 已存在

2. 1234 5678 9

3. 156 5697 6604

4. 弹幕

5.

标准库

库 是一个编程术语, 意思是一系列函数的集合

标准库 也是一个术语, 指的是语言自带的库

JavaScript 的文档(以 MDN 为例)有所有标准库的文档(当然, 不那么容易看懂)

我们可以用标准库实现很多功能, 使用标准库就是直接使用即可(因为自带)

JS 已经 20 年了,现状是各家在瞎搞。

编程能力和语言没有关系，只是适应领域不同。

编程能力的平台期，个人能力最重要，工具仅仅是工具。

重要的还是编程能力

简化问题的能力: 大问题是由小问题组成，找出核心问题。

快速开发的能力: 通过大量的训练、培养。（合理安排时间）

解决别人不能解决的问题的能力:

函数声明两种方式：

1. var square = function(length){内容}
2. function square(){内容}

JavaScript实现闭包：

(function($){...})(jQuery) 1.其实就是一个匿名函数,但他定义的时候就执行。 可以等价于： function output($){ ... } output(jQuery); 只不过函数名output不存在。

1. 底层：堆栈栈

2. 高层：函数当作对象处理

闭包：和垃圾回收有关，留着不回收。（函数执行完就回收了）

闭包的本质 1. 对局部变量的保存，以便后续使用。 2. 保存的方法，把整个函数封装在对象中，这个对象就是一个栈。 function show(){ let a = 12 document.οnclick=function(){ alert(a) } } show()

常见套路：

javascript 动态修改css样式方法汇总(四种方法)

1、使用obj.className来修改样式表的类名。

function changeStyle1() {   var obj = document.getElementById("btnB");   obj.style.backgroundColor= "black";   }

2、使用obj.style.cssTest来修改嵌入式的css。

function changeStyle2() {    var obj = document.getElementById("btnB");    obj.style.cssText = "background-color:black; display:block;color:White;   }

3、使用obj.className来修改样式表的类名。

function changeStyle3() {   var obj = document.getElementById("btnB");   //obj.className = "style2";   obj.setAttribute("class", "style2"); }

4、使用更改外联的css文件，从而改变元素的css

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/> function changeStyle4() {    var obj = document.getElementById("css");    obj.setAttribute("href","css2.css");  }

Log大法

1, 通过在查看数据的地方书写console.log(x)查看数据 ，查看结果:浏览器终端显示结果。

 

遇到错误如何调试？

1. 自己简单查看一下。
2. 二分法log一下。

1. 首先 查看整个程序有没有运行。（首行+尾行） log
2. 然后二分！

 

 

 

Log两大功能：

1. 查看程序执行流程
2. 查看每时每刻数据变化

Log要素：

1. 确保代码执行
2. 打印所有能打印的变量

 

每个变量打印能打印的方式（type of / length / 穿衣服...）

总结：解决问题:发挥自己的经验和想象力，分解问题。

为什么自己封装log?

1，加功能（查看函数执行时间从而看到执行效率）

2，调试的时候容易调试，var log= function(){};相比console.log()容易管理.

3，写日志到文件中。

 

数组

// array 可以干嘛?

// array 可以存储很多元素, 每个元素的值、类型都不用相同

// 向已经存在的 array 中添加新元素

// 可以用列表的 push 函数往列表末尾插入一个元素

// 并且, 这个新元素可以是任意类型, 这里是一个字符串

// 字符串相当于一个 array，可以用数字下标访问

var a = [3, 9, 2, 0, 8]

a.push('新元素')

log(a)

// [1, 3, 4, 5, '新元素']

a.push(0)

log(a)

// [1, 3, 4, 5, '新元素', 0]

// 多添加几个元素

a.push(12)

a.push(23)

a.push(34)

log(a)

 

// 得到一个你想要的字符串有多种方式

// 但是现在有现代的方式, ES6(上课会解释什么是 ES6) 的 模板字符串（又叫多行字符串）

// 注意, 书上如果和我不一样, 以我为准

// 用法如下

var name = 'gua'

var a = `${name}, 你好`

log(a)

// 简单说来, 就是 ${} 会被变量替换行成新字符串

年月日写法对比: which one do you like?

 

 

转换日期格式

Wed Dec 18 2019 13:02:40 GMT+0800 (中国标准时间) =>yyyy-MM-DD HH:ss:mm let currentDate = new Date().toLocaleDateString() let s2 = currentDate.replace(/(\/)/g, '-') let dateArr = s2.split('-') dateArr[1] = parseInt(dateArr[1]) < 10 ? `0${dateArr[1]}` : parseInt(dateArr[1]) dateArr[2] = parseInt(dateArr[2]) < 10 ? `0${dateArr[2]}` : parseInt(dateArr[2]) let dated = dateArr.join('-')

currentDate.replace(/(\/)/g, '-')

正则基本规则 /匹配内容/ 前后各有两个'/'

因为 '/' 符号 和上面的规则冲突了

所以需要用 '\' 转义

例如要删除 '\' 则写 /\\/ alert(str.replace(/\//g, ''));

后面的g代表删除所有匹配项，如果没有的话，就只删除第一个匹配项

slice：

 

// 字符串可以切片, 当然, array 也可以这样切片

// 语法如下 iamgood

// s.slice(开始下标, 结束下标)

s.slice(0, 3) // 'iam'

s.slice(1, 3) // 'am'

字符串复制：

var a = s.slice(0)

 

// 省略下标参数意思是取到底

s.slice(2) // 'mgood'

includes() 与 target.classList.contains('todo-delete')区分开。别搞混了。

join()方法将数组中的所有元素转换成字符串，然后连接起来，这刚好和String的split()方法是一个相反的操作。

 

 

splice：剪切+返回

splice() 方法用于添加或删除数组中的元素。数组长度变 索引变

splice(index,count)

splice(index,num,插入的项)

参数1，index

参数2，取后面几个，返回类型是数组 要删除元素的个数

 

参数3，添加的目标元素的后面

 

delete: 删除指定元素 但数组长度不变 索引不变 删除的位置为undefined

 

数组和字符串

 

concat()方法

JavaScript的Array对象中提供了一个concat()方法，作用是连接两个或更多的数组或字符串，并返回一个新的数组。

'123'.concat('456')

 

 

 

对象

对象：（字典/ 哈希表/ 映射）

 

 

 

taoer[“name”]等价于taoer.

但点语法有时候用不了 eg:1, ”n t” 2, var k = name

删除对象中元素（值）。

 

// 可见, 字典的创建是花括号 {}

// 字典的值是成对出现的, 由冒号分隔开

// 左边的是 key(键), 都是字符串, 这也是它的主要用途

// 右边的是 value(值), 可以是任意类型, 包括 int string bool array object function等

获取对象属性长度：

var obj = {  

key1:1,  

key2:2,  

key3:3  

};    

Object.getOwnPropertyNames(obj).length  

Object.keys(obj).length

 

Object.keys方法，返回一个数组

Object.values方法 返回一个数组

Object.entries方法 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组。

var obj = { foo: 'bar', baz: 42 }; Object.entries(obj) // [ ["foo", "bar"], ["baz", 42] ]

 

递归：斐波那契数 1 1 2 3 5 8 13

F(n) = f(n-1)+f(n-2)

 

 

 

 

面向对象编程：

 

对象深拷贝

1. var syb = Symbol('obj'); var person = { name :'tino', say: function(){ console.log('hi'); }, ok: syb, un: undefined } var copy = JSON.parse(JSON.stringify(person)) // copy // {name: "tino"}

2. function deepCopy(obj) { var result = Array.isArray(obj) ? [] : {}; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] === 'object' && obj[key]!==null) { result[key] = deepCopy(obj[key]); //递归复制 } else { result[key] = obj[key]; } } } return result; }

 

3. Object.assgin(), 数组的slice()这些，这些只深复制了基本类型数据类型， 不是真正意义的深复制，当然，如果要复制的对象或者数组都是简单数据类型，那就大胆用吧。

 

// 面向对象计算器 var Caculator = { // 结果 result: 0, // 行为 jia: function (num) { this.result += num; return this; }, jian: function(num) { this.result -= num; return this; }, cheng: function (num) { this.result *= num; return this; }, chu: function (num) { this.result /= num; return this; }, log: function () { console.log(this.result); return this; }, clean: function () { this.result = 0; return this; } }; // (6 + 6) * 2 / 3 - 4 // 链式编程的来源 返回当前对象 return this; Caculator.jia(6).jia(6).cheng(2).chu(3).jian(4).log(); Caculator.clean().jia(2).log();

Dom

DOM(文档对象模型) 是浏览器对 html 文件的描述方式

DOM API 是浏览器提供给 JavaScript 操作 html 页面内元素的方式

简而言之, 浏览器提供了一些内置函数来让我们操作页面(增删改查)

 

// 查找元素

// 查找元素使用

document.querySelector(selector):):通过选择器查找该文档下指定的子元素

element.querySelector(selector):通过选择器查找该元素下所有的子元素

// 这个函数的参数是一个选择器(和 CSS 选择器一样)

// 选择器语法和 CSS 选择器一样, 现在只用 3 个基础选择器

// 元素选择器

var body = document.querySelector('body')

// class 选择器, 用的是 .类名

var form = document.querySelector('.login-form')

// id 选择器, 用的是 #id

var loginButton = document.querySelector('#id-button-login')

// log 出来看看

log(body, form, loginButton)

// 操作元素的属性

//

// 获得特定属性值

var user = document.querySelector('#id-input-username')

var userValue = user.getAttribute('value')

log('user value', userValue)

// 不存在的属性会返回 null, 它在 js 中代表不存在

log('没有的属性', user.getAttribute('不存在'))

 

// 设置特定属性值

user.setAttribute('value', '新用户名')

 

// 查询属性是否存在

log(user.hasAttributes()) // 查看元素是否有属性

log(user.hasAttribute('value')) // 查看元素是否有特定属性

 

// 删除某个属性

user.removeAttribute('type')

 

// 获得所有属性

var attributes = user.attributes

log('所有属性', attributes)

 

 

// 操作元素(创建, 删除, 修改)

// ===

//

// 用 document.createElement 函数创建一个元素

var button = document.createElement('button');

// 用 innerHTML 设置属性

button.innerHTML = '注册用户'

 

// 修改

// 用 appendChild 给一个元素添加子元素

// 这里我们给 .login-form 添加刚才创建好的按钮

var form = document.querySelector('.login-form')

form.appendChild(button)

 

// 删除元素

var pwd = document.querySelector('#id-input-password')

form.removeChild(pwd)// 过时了

pwd.remove() //自毁

pwd.parementElement.removeChild(pwd)// 父节点删除子节点

 

 

 

事件

// 事件是用来处理响应的一个机制

// 这个响应可以来自于用户(点击, 鼠标移动, 滚动), 也可以来自于浏览器

//

// 下面的链接描述了所有事件, 不过我们先从最常用的事件学起, click 事件

// https://developer.mozilla.org/en-US/docs/Web/Events

//对那个元素进行操作，第一步就是获得该元素

// 常用例子, 给按钮添加一个点击的事件

// 1, 获得按钮

var loginButton = document.querySelector('#id-button-login')

// 2, 声明一个函数, 用于在按钮点击后执行

var clicked = function() {

log('按钮被点击到了')

}

// 3, 添加事件, 使用 addEventListener 函数, 它有两个参数

// 第一个是事件的名字, 第二个是事件发生后会被自动调用的函数

loginButton.addEventListener('click', clicked)

//

// 添加完成, 可以自己在浏览器试试, 记得打开 console

 

 

// 给多个元素挂上同一个事件

// 选择多个元素使用函数 querySelectorAll

var buttons = document.querySelectorAll('.radio-button')

// 循环遍历每个元素, 并且绑定点击事件

for (var i = 0; i < buttons.length; i++) {

var button = buttons[i]

button.addEventListener('click', function(event){

// 注意, 这次我们直接定义了函数作为参数传递, 这样做是合法的

// 另外, 我们增加了一个 event 参数

// 浏览器会给事件响应函数传递一个参数, 它代表了事件本身

// 我们可以用 event.target 取出响应事件的元素

var self = event.target //获得事件源（元素/标签）

// clearActive 函数是我们自己定义的

// 目的是删除其他元素的 active class

clearActive()

// add 可以增加一个 class

self.classList.add('active')

})

}

 

var clearActive = function() {

var active = document.querySelector('.active')

if (active != null) {

// 使用 classList 可以访问一个元素的所有 class

// remove 可以删除一个 class

active.classList.remove("active")

}

}

</script>

 

 

 

匿名函数

没有函数名的函数。例如：var sum = function(){} sum就是函数名

var process = function(array, processor) {

var l = []

for (var i = 0; i < array.length; i++) {

var a = array[i]

// processor 必须能调用成功, 否则这里就跪了

var element = processor(a)

l.push(element)

}

return l

}

var array = [1.1, -2.2, 3.3]

// 自定义一个函数

Var add1 = function(n){

return n + 1

}

processs(array,add1)

等价于：

process(array, function(n){

return n + 1

})

没有给function(n){}这个函数起名字。

array 是一个数组

processor 是一个函数, 注意, 这是一个函数, 所以可以调用

把 array 中的每个元素都用 processor 函数处理并返回一个新的 list

processor 是一个函数,定义的时候给个名字就行，调用的时候的再定义函数功能。

一般情况是先定义后调用，

 

typeof 可以不用括号

函数也是一个值, 稍微特殊点, 但在 js 中没什么本质不同, 它的类型是函数

// 高阶函数这个名字很唬人, 实际上概念很简单——函数可以作为参数传递

// 有什么用呢？灵活性高，舒适度佳

 

轮播图

凯撒加密

To do 事件委托

 

 

 

 

beforebegining beforeend afterbegining afterend

在todoContainer这个元素中插入一个邻近的html文件 参数：t这个变量插入在todoContainer元素末尾之前。

 

// 事件委托相关概念

// 问题在于, todo 都是运行的时候才添加的元素

// 对于这样的元素, 我们没办法实现绑定事件

// 我们可以把 click 事件绑定在事先存在的父元素上

// 然后在运行的时候检查被点击的对象(通过 event.target 属性)

// 是否是我们需要的对象, 这个概念就是事件委托

原理：

子元素事件响应会被传递到父元素身上。

event.target：指向触发它的那个元素

target.parentElement: 获得父节点

target.classList.contains(‘todo-done’):查看该元素是否有该class

target.classList.remove(‘todo-done’):

target.classList.add(‘todo-done’):

 

 

任何一个元素都可以被编辑内容了。通过contenteditable

 

比如h1 div a ...

$0.innerHtml

 

localStorage（本地存储）

1, 是浏览器自带的功能

2, localStorage 可以用来存储字符串数据, 在浏览器关闭后依然存在

3, 不同页面拥有各自独立的 localStorage

 

// 存储方法如下

localStorage.name = 'gua' // name 自己起的 起一个有意义的名字

// 关闭浏览器, 再次打开, 仍然能获取到这个值

log('关闭浏览器后', localStorage.name)

//

// 利用 localStorage 就可以存储 todo

// 但是 todo 存在 array 中

// 而 localStorage 只能存储 string 数据

// 所以没办法直接存储

//

// 可行的办法如下

// 存储的时候把 array 或对象转换为字符串

// 读取的时候把字符串转成 array

// 这个过程通常被称之为 序列化 和 反序列化

 

 

// 在 js 中, 序列化使用 JSON 数据格式

// 全称 JavaScript Object Notation (js对象标记)

// 这个格式已经是现在用于互联网数据交换的事实标准格式了

// ISO 是国际标准

// IEEE 国际电子电气工程师协会

// GB 中国国标

 

发送Json字符串：

 

 

如何做一个程序以及如何扩展功能？重要的是思路

1，真的编程是一种享受

写代码封装

 

写程序 要保证一致性： 相同类似的东西它应该要有公共的前缀和相似的行为。符合预期。

少用全局变量，后期将难以维护。

 

 

 

Javascript没有 枚举：一类特定数据的集合，可以用object模仿枚举这种类型。

 

一个页面当前只能只有一个焦点

span.focus()

 

当接触一些新东西，不懂不要急，有些东西确实需要一些时间，或者他本身就很难理解。

正则表达式：

是工具。目的，匹配字符串

js风格 let re = new RegExp(";\\d","g") perl风格 let re = /\d+/g 理论： 1. 元字符:[] 含义：①任何一个 ②范围 ③排除 exam: /a[abc]q/ aaq,abq,acq /[a-z]/i /[a-z0-9]/i /3-59/ 3-5 9 [^a-z0-9] 2. 转义字符 \d [0-9] \w [a-z0-9_] \s 空白（空格，制表符，换页，分页） \D [^0-9] \W \S 同上 . 任何字符 /a.{5,18}z/ a和z之间放任意字符，数量5-12个 3. 量词（数量） {n} /a{6}/ /\d{11}/ {n,m} /\d{5,12}/ {n,} /\d{6,}/ + === {1,} ? === {0,1} /\.jsx?/ .js .jsx . 4. 修饰符 ^ 行首 $ 行尾 用法： search:匹配位置 match:配置数据 replace:取代 split:切成数组 1. 寻找字符串下标 str.indexof("a") 等价于 let re = /a/ str.search(re) 2. 忽略大小写 /a/i ignore //或| 优先级很低用括号包起来 /\.(jpg|png|gif)/i 3. 匹配字符 let re = /\d\d/g digital str.match(re) // + 满足匹配越长越好 let re = /\d+/g global 4. 取代字符穿 // 替换所有的含有a字符的，忽略大小小 str.replace(/a/gi,"*") str.split(/##/g).map(item=>`<p>${item}</p>`).join(''); 5. 匹配qq号 let re = /^[1-9]\d{4,11}$/ if(re.test{str}){ console.log(通过) } 6. 匹配文件，匹配网址 /^https?:\/\// /\.js$/i 案例 0-9999 分析：0-9 10-99 100-999 1000-9999 let re = /\d|[1-9]\d|[1-9]\d\d|[1-9]\d\d\d/ 转换 let re = /\d|[1-9]\d{1,3}/ let re = /^(\d|[1-9]\d{1,3})$/ 0-999... let re = /^(\d|[1-9]\d+)$/

2.

Js测试：

人肉测试：3-5行肉眼+log+F12

简单测试：

 

 

增强测试：

 

html测试:将js文件引入到html 文件，然后浏览器打开 F12.

atom分屏测试：左屏写代码 右屏写测试 然后引入到html中 F12查看。

__main()测试：

//简单在测试函数里面添加一个临时测试用例。用处不大

test_find.prototype.constructor(ensure("aajlajf", "k", 2))

 

Q:肉眼就能看出来，log也可以，为什么自己还要写测试？

A: 测试的本质就是自动化，定义好之后，测试100次 10000次 1亿次 仍用这个测试。

 

变量名：

1. 长时间用的变量名字可以长一点，临时用的短一点（for循环中）。最重要方便理解
2. 如果函数要返回一个数据，函数名字用名词。如果函数只做事不返回数据，函数名字用动词
3. 函数：返回数据用名词做前缀，执行动作的用动词做前缀，但有时候很常用的saveXXX，loadXXX等，大家都习惯也就这样了。

写javascript的程序员默认就用驼峰命名法。

 

 

封装自己的函数

 

 

 

HTTP

规定浏览器和服务器如何交互，浏览器说和服务器都懂。

历史：

HTTP 1.0 规定通信如何进行

HTTP 1.1 支持持久连接 持续时间可以配

HTTPS 支持安全协议

HTTP 2.0 支持加密，头部压缩，服务器推送，管线操作

http报文结构

两部分

header <32K

body <2G

网址组成（四部分）

    协议      http, https（https 是加密的 http）

    主机      g.cn zhihu.com之类的网址

    端口      HTTP 协议默认是 80，因此一般不用填写

    路径      下面的「/」和「/question/31838184」都是路径

请求首行 请求头 的编码 ：ASCII编码

请求body 的编码：请求头中有设置 charset=UTF-8 你可以设置

 

状态码

1xx 信息

2xx 成功

3xx 重定向 资源不在这，换地方了

4xx 请求错误 服务器没找到

5xx 服务器错误

6xx 扩展

 

请求方式

GET 获取数据

数据放在url里面 url是放在头里面的 所以

POST 发送数据

数据放在body里面

 

小知识：

1. post数据也可以放在url里面。

2. ajax请求 jsonp请求 请求都是模拟表单的，所以我们研究表单提交。

 

AJAX技术

动态加载数据。

可以用 JS 动态抓取内容构建页面

比如动态评论、加载数据 ，天气预报程序 壁纸图片库

前端做页面、实现功能。

后端对数据处理。

Ajax 是个函数

Ajax安全问题

1 只有http和https协议才可以使用ajax

2不能跨域去访问外边的资源。Script中 Src可以

3 是浏览器的一种自律问题。

ajax发送请求要经过浏览器，然后经过服务器，服务器返回数据经过浏览器，浏览器检查发送请求的域名和返回请求的域名不一致，直接丢掉数据。

如何跨域？

服务器返回时设置返回头 res.setHeader('access-control-allow-origin', '*')

表单可以跨域为什么？

浏览器定的规矩就是可以

ajax为什么不能跨域

SOP 同源策略 相同域名可以访问 所谓的同源,指的是协议,域名,端口相同

http.createServer((req,res)=>{ res.setHeader('access-control-allow-origin', '*') res.write('{"username":"blue","password":12}') res.end() }).listen(8080)

 

readstate 连接状态

 

如何完成复杂程序？

 

划分需求

步骤1，

子步骤1，

子步骤2，

子步骤3，

步骤2，

步骤3，

步骤4，

步骤5，

步骤6，

复杂问题拆分成简单问题。包工头 编程就是流水线的工人

原生AJAX创建和AJAX封装

步骤：创建 设置 注册 发送

注：当发送数据时，一设置数据的格式。二序列化数据。

 

 

 

 

类

This：在js中只有在运行的时候才知道this（这个）

 

 

 

 

// 封装, 上面 greeting 和 update 就是封装的例子

// 意思是说把一些操作做好, 对外部来说只需要简单调用即可

// 类主要的优势就是 可批量制造 object 和 可封装方法

// this 等, 比较复杂, 需要上课讲

// if 的时候的类型, 不能用隐式, if(a) 这样是不行的 必须明确

 

 

 

 

r=event.target

js json html 美化网站 jsbeautifier.org

 

写程序思路：

1. 面向对象的思路，别关心他是怎么做的，只关心他做什么。
2. 上层函数别管下层函数怎么完成

拆分函数的依据：

1, 描绘what

2, 而不是描绘how

 

Jquery

引入js文件

Jquery 有人就叫库有人就叫框架 哈哈哈

1. 下载到本地

 

1. 引入网络资源 ，文件中引入 console中追加script脚本

把jquery封装成自己的函数。

jQuery 是一个常用的 js 库, 提供了 DOM 操作, AJAX 封装, 兼容性等功能。

允许使用以下三种语法

语法 1 $(document).ready(function)

语法 2 $().ready(function)

语法 3 $(function)

 

 

 

 

 

 

绑定事件

.done {

color: lightgray;

text-decoration: line-through;

}

 

按照功能, jQuery 常见的用法划分如下

*/

// a. 选择器

// 1. $

// 2. find 寻找子元素

// 3. siblings 得到自己的兄弟。

// 4. closest, parent

 

往上找，找到最近的一个元素

$('body')

$('#id-button-add')

$('.cell')

jQuery特点：

1, 选择不到的东西它返回的仍然是具有数组形式的jquery对象，不会产生undefined。

2, dom转向jQuery 外边包个$()

3, 没有参数就是查询，有参数就是设置。

 

 

 

 

 

 

 

 

 

 

 

 

 

jQuery事件委托

 

 

b. dom 操作

1. append prepend（在元素之前插入某个元素）

2. remove 连同自己也删除

3. empty 删除自己里面的内容

4. show, hide, toggle

show 让一个元素显示出来

 

c. class 操作

1. addClass removeClass

2. toggleClass

 

 

d. 属性、特性操作

1. attr, prop, data

2. removeAttr

 

 

e. 取值

1. val 给input 取值用的

2. text

3. html

.html() .text() jQuery innerHtml innerText

获得

innerHTML 识别标签, 获取双标签内的内容, 包含内容里的嵌套标签 [高版本的浏览器会将格式原样打印];

innerText 不识别标签, 在获取标签内容时去除所有标签。

value 获取标签的value属性值

设置

innerHTML 是在控件中加html代码 就是设置一个元素里面的HTML

innerText 在控件中添加文字

value 控件中的value属性直接赋值

 

 

 

 

 

 

 

 

浏览器给元素提供存放数据的属性 data-* 获得用dataset.*得到。

dom获取data-*数据 jQuery获取data-*数据

 

f. 事件

1. on 相当于dom中 addEventLister()

2. change : 输入框里面的内容发生改变

 

3. event.target

 

 

g. 数组方法

1. each

2. map

3. grep

查看function函数怎么用的。

 

 

 

 

h. ajax

1. contentType, dataType

jQuery 的AJAX函数用法

 

 

做人一定要有原则 原则来自于哪里？

写代码规范：要有原则，你要保证你写的代码不会出错，不要跟风。代码可读性。

组件：你封装了一个功能，别人拿过来就能用。

 

学习思路：

 

 

自己要有自己一套库，做出来之后

Jquery

库(一系列函数的集合)

1, 增加新的功能，更加方便。

2, 整合不同浏览器的写法

3, 封装方法，把名字搞短一点，写法更简单

 

Var $ = function(select){

Return document.querySelector(select)

}

$(‘.login-form’)

 

Q: 为什么浏览器给我们提供功能名字这么长？

A: 重点实现功能，清楚明了，标准，基础。

.mask {

position: fixed;

top: 0px;

left: 0px;

z-index: 100; //上下层

width: 100%;

height: 100%;

background: black;

opacity: 0.0;

}

.mask-active {

opacity: 0.9;

}

 

 

cursor: pointer;

// 使用 classList 可以访问一个元素的所有 class

// remove 可以删除一个 class

 

String(123)

文档加载完之后执行这个函数。

 

style 没有什么特殊的，也可以带class,把样式删除掉。

 

1. 搜索功能

 

 

HTML5

语义化标签如 article、footer、header、nav、section

视频和音频标签 video 和 audio

新增表单控件标签 calendar email color calendar date time url search等

绘图标签 canvas 标签(用于游戏等)

用于高性能图形的 WebGL(用于游戏等, 这个是专用领域的知识, 我们不会直接接触)

Html所有功能 。

本地离线存储 localStorage 和 sessionStorage

 

这些库集成在浏览器里面。By the way, 腾讯也是web标准委员会的成员。

HTML5 语义化

 

// 原来的标签 用 id 或 class 来写样式和读懂div是干什么，

<div id="wrapper">

<div id="header"></div>

<div id="main">

<div id="sidebar"></div>

<div id="content"></div>

</div>

<div id="footer"></div>

</div>

 

 

完整的 html5 语义化标签是这样的

<!DOCTYPE html>

<html>

<head>

<title>标题</title>

</head>

<body>

<header></header>

<nav>导航</nav>

<article>

<section>区块</section>

</article>

<aside>侧栏</aside>

<footer>页脚</footer>

</body>

</html>

 

 

<div class='article'>

<div class='title'>

前端掏粪指南

</div>

<div class='content'>

前端掏粪指南

前端掏粪指南

</div>

</div>

 

<div class='article'>

<h1 class='title'>

前端掏粪指南

</h1>

<p class='content'>

前端掏粪指南

前端掏粪指南

</p>

<gua></gua>

</div>

 

gua {

display: inline-block;

width: 42px;

height: 42px;

background: url('gua.png');

}