哈哈,偶尔看到我入行程序员的时候写的一个笔记,见证了我的成长,感觉挺有纪念意义的,就整理一下搬过来吧~~~~

视频音频标签

带控制器的视频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的视频格式

1
2
3
4
<video width="300" height="200" controls="controls">
<source src="movie.mp4">
<source src="movie.ogv">
</video>

带控制器的音频标签, 不同浏览器有不同的文件格式要求
所以用 2 个 source 标签指定不同的音频格式

1
2
3
4
<audio id='id-audio-player' controls="controls">
<source src="audio.ogg">
<source src="audio.mp3">
</audio >

audio 基本操作如下

1
2
3
4
5
6
7
8
9
var a = document.querySelector('#id-audio-player')
a.play() //播放
a.pause() //暂停
a.autoplay //自动播放 (设为true)
a.src //链接音频文件
a.volume //音量(0-1之间的数)
a.duration //音频时间长度
a.currentTime = 1 //现在播放第几s(设置)
a.playbackRate // 播放速率, 默认是 1

移动端设置

设置 viewport
viewport 是 html 的父元素
在手机上需要用下面的语句设置它的尺寸

网易移动端模板

1
2
3
4
5
6
7
8
9
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script>
//设置rem
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5(iPhone6相对宽度) + 'px';

//通过设计图宽度 / 100 来得出相对宽度 rem
//比如iphone5 设计图宽度640 相对宽度 6.4
</script>
属性 说明
width=device-width 宽度等于设备宽度
height=device-height 高度等于设备宽度
initial-scale 初始缩放比例
minimum-scale 允许用户缩放的最小比例
maximum-scale 允许用户缩放的最大比例
user-scalable 是否允许用户缩放

###媒体查询-响应式开发
响应式设计就是一套 CSS 根据当前的分辨率选择不同的样式
媒体查询主要用来:

  • 检测媒体的类型, 比如 screen, tv 等
  • 检测布局视口的特性, 比如视口的宽高分辨率等
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
@media all and (min-width: 200px) and (max-width: 300px){
body {
background: red;
}
}

//网易移动端字体设置
@media screen and (max-width: 321px) {
body {
font-size:16px
}
}

@media screen and (min-width: 321px) and (max-width:400px) {
body {
font-size:17px
}
}

@media screen and (min-width: 400px) {
body {
font-size:19px
}
}
</style>

上面代码中, all 是媒体类型, 代表任何设备
and 是逻辑操作
意思是, 对于任何设备, 在宽度在 200-300 的范围内应用这个样式


CSS


选择器

举例:< h1 id=”id-h1“ class=”class-h1“> 琉璃 < /h1 >
一切标签都可被选择包括 html, style 等

元素 选择器 符号 优先级 从高到低
!important ! h1 { color: red !important; }
id # #id-h1 { color: red; }
class . .class-h1 { color: red; }
标签 h1 { color: red; }

定义 优先级 从高到低
! !important
内联 禁止使用 < h1 ~~style="color: red;"~~ > Hello World < /h1 >
中联 < style > h1{ color: red; } < /style >
外联 < link rel=”stylesheet” href=”tag.css“ >

常用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body {
background: lightblue; /* 背景色 */
margin:0px; /* 外边距 */
border:0px; /* 边框 */
border-style: solid; /* 边框样式 */
padding:0px; /* 内边距 */
font-family: Microsoft YaHei; /* 字体 */
font-size: 22px; /* 字体大小 */
text-align: center; /* 对齐 */
}
.tanChuang {
z-index: 100; /* 顶层 */
position: fixed; /* 定位 */
top: 0px; /* 顶部 */
left: 0px; /* 左部 */
width: 100%;
height: 100%;
opacity: 0.96; /* 透明度 */
background: black;
color: white;
}
.tanCenter {
position:relative;
top: 50%;
transform: translateY(-61.8%); /* Y轴距离 */
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%; /* 圆角 */
}

background 相关属性和缩写
background-color: #233;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed; 背景图片随滚动轴移动方式
background: #233 url(bg.png) no-repeat;

三种缩写, 分别对应有 4 2 3 个值的时候的解释, padding 同理
margin: top right bottom left
margin: (top/bottom) (right/left)
margin: top (right/left) bottom

overflow属性
visible 默认
auto 需要的时候加滚动条
hidden 隐藏多余元素
scroll 就算用不着也会强制加滚动条

内联元素 居中 text-align: center
区块元素 居中 margin: 0px auto;

伪类

:link 未访问 :hover 悬停
:visited 已访问 :active 选定
1
2
3
4
5
6
a:link   { color: white; text-decoration: none; } /*去下划线*/
a:visited{ color: black; }
a:hover { color: red; cursor: pointer; } /*鼠标样式*/
a:active { color: lightblue; }

a.class:visited {color: white;} /* 独立伪类 */

定位 position

描述
static 默认 static
relative 相对定位 可相对自身偏移
absolute 完全绝对定位, 忽略其他所有东西, 往上浮动到 非 static 的元素
fixed 基于 window 的绝对定位, 不随页面滚动改变

非 static 元素可以用 top left bottom right 属性来设置坐标
非 static 元素可以用 z-index 属性来设置显示层次
e.pageX——相对整个页面的坐标
e.clientX——相对可视区域的坐标
e.offsetX——相对当前坐标系的 border 左上角开始的坐标

布局 flex

容器的属性 描述
flex-direction:row 属性决定主轴的方向(即项目的排列方向
row,row-reverse 主轴为水平方向,起点在左(右)端
column,column-reverse 主轴为垂直方向,起点在上(下)沿
flex-wrap:nowrap 定义如果一条轴线排不下如何换行,默认不换行
wrap,wrap-reverse 换行,第一行在上(下)方
flex-flow flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content 属性定义了项目在主轴上的对齐方式
flex-start,flex-end 左对齐(默认),右对齐
center,space-between 居中,两端对齐,项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
align-items 属性定义项目在交叉轴上如何对齐
stretch (默认值)如果项目未设置高度或设为 auto,将占满整个容器的高度
flex-start,flex-end 交叉轴的起(终)点对齐
center,baseline 交叉轴的中点对齐,项目的第一行文字的基线对齐
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
flex-start,flex-end 与交叉轴的起(终)点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐,轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值) 轴线占满整个交叉轴
项目的属性 描述
order:0 定义项目的排列顺序。数值越小排列越靠前,默认为 0
flex-grow:0 定义项目的放大比例,默认 0 即如果存在剩余空间,也不放大
flex-grow:1 属性都为 1,则它们将等分剩余空间(如果有的话)
flex-grow:2 如果一个项目的 flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍
flex-shrink:1 定义了项目的缩小比例,默认为 1,即如果空间不足,该项目将缩小
flex-shrink:0 如果一个项目的属性为 0,其他项目都为 1,则空间不足时,前者不缩小,负值无效
flex-basis:auto 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto,即项目的本来大小
flex-basis:350px 可以设为跟 width 或 height 属性一样的值(比如 350px),则项目将占据固定空间
flex flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。
flex:auto,none 默认值分别是(1 1 auto) 和 (0 0 auto)
align-self:auto 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch.该属性可能取 6 个值,除了 auto,其他都与 align-items 属性完全一致

显示 display

描述
none 不显示
block 独占一行(默认有div p ul ol li h1 h2 h3 h4 h5 h6)
inline 内联元素 无法设置宽高
inline-block 内联元素 可以设置宽高

盒模型

BOX 单位 描述
margin: 0px; 外边距
border: 0px; 边框
padding: 0px; 内边距
width: 80% or 0px;
height: 100% or 0px;

###动画

动画 功能
transform 2D 变形
transition css 动画(运动时间,运动对象,运动速度,等待时间)
animation 多过程动画效果(具体看链接)

JavaScript

定义 插入 < /body > 之前 顺序执行
中联 < script >log('Hello World!')< /script >
外联 < script src=”Echo.js“ charset=”utf-8”>< /script >

Array 数组

属性 秒懂释义 相当于
slice( ) 复制 切片并返回 支持负索引
splice(开始,长度,元素) 删除插入并返回 开始的地方插入
concat( array ) 连接 数组
includes( str[ ] ) 检查 是否包含 str[ ] 返回 bool
indexOf() 返回元素第一次在数组中出现的位置,无返回-1
length 返回长度 长度可设置以清空
push( ) 末尾 添加元素 push(1,2,[1,2])
unshift( ) 头部 添加元素
pop( ) 尾部 删除一个元素
shift( ) 头部 删除一个元素
join( str ) 返回 字符串 str 分隔
reverse( ) 翻转 所有元素
sort( ) 排序函数(需提供排序方式函数)
map() 参数是函数,返回一个新数组
filter() 参数是一个过滤函数,返回符合条件的新数组
toString() 返回数组的字符串形式

Str 字符串

属性 说明
slice( ) 返回 切片
if( == ) 判断相等需要双等号
includes( str ) 检查 是否包含 str 返回 bool
split( str ) 以 str 分割字符串 返回 array
toLowerCase() 字母转小写
toUpperCase() 字母转大写
indexOf( str ) 查找 是否包含 str 返回 下标
match( str ) 整个匹配结果以及任何括号捕获的匹配结果的 Array,没有就返回 null
replace( pattern, str ) 替换 pattern 为 str ;/pattern/g 全部替换
search( pattern ) 查找 pattern 返回下标 否则返回 -1

Object 字典

dict = { ‘初中生’:6, ‘高中生’:7, ‘大学生’:8 }
|属性|说明
|:-|:-|
| dict = { key : ‘value’, }|创建
|dict.(key) |点语法读取|
|dict [‘小学生’] = 4| 添加
|dict [‘小学生’] = 5| 修改
|delete dict [‘大学生’]| 删除
|Object.keys( dict )| 返回 keys

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var Student = function(name, height) {
// 用 this.变量名 来创造一个只有类的实例才能访问的变量
this.name = name
this.height = height
}
// 用 new 函数名(参数) 初始化一个类的实例
var s1 = new Student('gua', 169)
// 可以改变 s1 的属性
s1.name = 'xiaogua'
s1.height = 1.69
// 可以创建多个互相独立的实例
var s2 = new Student()
var s3 = new Student()
//可以给类增加一些方法(函数)
Student.prototype.greeting = function() {
console.log(`hello, I'm ${this.name}`)
}
// 可以调用实例的方法
s1.greeting()

ES6类的表示方法
class Student {
// 初始化的套路
constructor(name, height) {
this.name = name
this.height = height
}

// 方法没有 var
greeting() {
console.log(`hello, I'm ${this.name}`)
}

update(name, age) {
this.name = name
this.age = age
}
}
class Teacher extends Student {
//继承类的用法
}

####this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
apply call bind  //是用来给函数指定 this 用的


apply 接受两个参数
第一个参数是函数里面的 this
第二个参数是要传给函数的参数列表, 类型是 数组(暂定), apply 会把数组拆成一个个的参数传给函数

console.log.apply(console, arguments) //直接用

call 和 apply 类似, 但是小有区别, 如下
第一个参数和 apply 一样
2, 3, 4, 5, ... 个参数会依次作为参数传给函数

console.log.call(console, 1, 2, 3, 4, 5, 6, 7) //直接用

bind 函数/*不直接调用*/, 而是返回一个函数让你来调用
第一个参数是用来指定函数里面的 this, 和 apply call 一样
var log = console.log.bind(console) //不直接用
log() //才可调用

ES6

属性 说明
let 就是限制作用域在 {} 内的 var
const 用来声明一个不可赋值的变量,也是限制作用域在 {} 内的 var
Set Array 相似的数据结构不同之处在于 Set 中的元素都是不重复的
Set var s = new Set() add 方法添加元素s.add(1)
Set has 方法检查元素是否在 set 中 s.has(1) => true
Set size 属性相当于 length s.size => 2
Set delete 方法删除一个元素s.delete(1)
Map Object相似 var m = new Map()
Map set 方法增加一个值m.set('name', 'gua')
Map get 属性得到一个值m.get('name')
叫扩展符号, 作用是把数组解开成单独的元素
var a1 = [1, 2, 3] var a2 = [...a1, 4] => [1, 2, 3, 4]
也可以传参var a1 = [1, 2, 3] log(...a1) => '1,2,3'
语法可以实现可变长度的参数, 多余的参数会被放进 args 数组中
var foo = function(a, ...args) {log(a, args.length)} foo(1, 2, 3, 4)
解包 var [a, b] = [1, 2] [a, b] = [b, a]
箭头 (参数1, 参数2) => 语句 function(参数1, 参数2) {return 语句}

Json 格式

1
2
3
var x = JSON.stringify( [1,2,3] ) //编译

var y = JSON.parse( x ) //读取

Promise 处理回调的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// 将 fs.readFile 的操作封装成 promise,这样就可以使用 promise 的 api 了
const readFile = function(filename) {
// 一般前端的写法
// return new Promise(function(resolve, reject) {})
const p = new Promise(function(resolve, reject) {
const fs = require('fs')
const options = {
encoding: 'utf8',
}
fs.readFile(filename, options, function(error, content) {
if (error !== null) {
reject(error)
} else {
resolve(content)
}
})
})

return p
}
// 使用 promise 读取文件就不用写成回调的形式了
// 直接按照同步的写法就好了
// 可以无限 then, 只要你保证上一个 then 返回了东西即可
let promise = readFile('foo.txt')
promise
.then(
function(content) {
console.log('debug file content', content)
const c = content + ' suffix1'
return c
},
function(error) {
console.log('debug error message', error)
}
)
.then(function(c1) {
console.log('second then', c1)
const c = c1 + ' suffix2'
return c
})
.then(function(c) {
console.log('third then', c)
})
console.log('GUA ****** line 46')

// 上面的写法也可以写成下面这样
// 把 reject 的操作放在 catch 里面
promise
.then(function(content) {
console.log('debug file content', content)
})
.catch(function(error) {
console.log('debug error message', error)
})
// 有时候会碰到批量执行异步操作,如果直接用循环 + 调用函数的形式会比较麻烦
// 使用 Promise.all 就很方便了
// all 方法是直接挂在 Promise 类上的,而 then catch 这些方法是挂在原型上
// Promise.all 会把数组里面所有的 promise 对象都执行完
// 再往下调用
Promise.all(list).then(function(content) {
console.log('Promise.all, content', content)
})

重命名文件的方法

1
2
3
var file = app.$('videoInput').files[0];
// 重命名
var aafile = new File([file], "aa.mp4");

BOM API

属性 说明
location 管理 URL(改变 href 属性就可以跳转页面)
navigator 对象是用来查询浏览器的信息的 例如 navigator.userAgent
history 对象是用来处理历史纪录的
screen 管理屏幕
window 管理浏览器所有的东西
open(‘url’,‘_self/_blank’) 打开一个新窗口 打开自身或另打开
close() 关闭窗口
document.body.scrollTop 滚轮离顶部距离
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
history.length // 历史列表中的 url 数量
history.back() // 相当于点击后退按钮
history.forward() // 相当于点前进
history.go(-2) // 相当于点击两次后退按钮
//H5新函数
var state = {
page: 'settings',
}
history.pushState(state, 'settings', '/settings')

/*三个参数分别是
1.自定义对象
2.新页面的标题, 但是现在还没有浏览器实现这个功能
3.新页面的地址(/...)

用户点击 前进 后退 按钮的时候, 会触发 window 的 popstate事件
于是可以在这里操作*/

window.addEventListener('popstate', function(event) {
var state = event.state
// state 就是 pushState 的第一个参数 被储存
console.log('pop state', state)
})

/*还有一个 replaceState 函数, 它的作用和 pushState 一样, 只是不生成一条历史纪录
只能在相同域名下使用*/

DOM API

  • DOM 是 HTML 文件
  • DOM API 是浏览器提供给 JavaScript 操作 html 页面的交互方式

常用

1
<input id="id" type="text" value="Gua">
属性 (元素 .class #id) 说明
var omg = document.querySelector( '#id' ) 获取 DOM 对象
var omgs = document.querySelectorAll('.classname') 获取 DOM 对象组
var omgValue = omg.getAttribute( 'value' ) 获取 属性值
omg.setAttribute( 'value' , 'Gua' ) 修改 属性值
omg.hasAttribute( 'value' ) 查询 是否存在
omg.removeAttribute( 'type' ) 删除 某个属性
var allProperty = omg.attributes 查找 所有属性
omg.remove( ) 整个删除 元素
omg.dataset.() 获取 data-()值
var button = document.createElement(‘button’) 创建 元素
button.innerHTML = ‘注册用户’ 设置属性
omg.appendChild(button) 给一个元素添加子元素
omg.insertAdjacentHTML( 'beforeend', html ) 插入 HTML
insertAdjacentHTML 标签 描述
beforebegin 开始标记 前
afterbegin 开始标记 后
beforeend 结束标记 前
afterend 结束标记 后

####本地存储

贮藏:localStorage[ 'name' ] = ‘馒头’
取出:localStorage[ 'name' ]
电脑本地储存 5MB Object,只能存字符串,可使用 Json 转字符串
localStorage 没有过期时间, 要用 clear remove 主动删除数据


贮藏:sessionStorage[ 'name' ] = ‘馒头’
取出:sessionStorage[ 'name' ]
sessionStorage 的数据在用户关闭浏览器后将被删除


事件

事件绑定:
区分元素 > 绑定元素 > 触发 Event > 操作元素

说明

|var button = document.querySelector( "#id-div-cont" )
|// 获取 元素|
|button.addEventListener( 'click', callback)|
|// 事件 绑定 或 委托 |

常用事件 说明
‘focus’ 获得 焦点
‘blur’ 失去 焦点
‘click’ 单击
‘dblclick’ 双击
‘mousedown’ 鼠标点下
‘mousemove’ 鼠标移动
‘mouseup’ 鼠标抬起
‘mouseover’ 鼠标悬停
‘mouseout’ 鼠标移开
‘keydown’ 按下 某键
‘ended’ 播放结束
submit <form>提交时触发
change <input><select><textarea>的内容改变时触发
‘animationend’ 动画结束之后
onload 事件页面加载时发生
onscroll 页面滚动时发生
onresize 页面改变大小时发生
事件 event 参数 描述
event.target.parentElement 父元素
event.target 元素
event.target.children 子元素
event.target.parentElement.children 父子元素

Ajax

  • 阿贾克斯中 event 事件本身,包含触发事件所有内容

GET

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var ajaxGet = function(ku) {
var r = new XMLHttpRequest() // 创建 AJAX 对象
r.open('GET', ku.url, true) // 设置 请求方法 地址
r.onreadystatechange = function() {
if (r.readyState === 4) {
// 如果 完成
ku.callback(r.response) // 注册 响应函数 结果
}
}
r.send() // 发送 请求
}
// readyState有4种状态 0. 未初始化 1.载入 2.载入完成 3.交互 4.交互完成
var ku = {
url: '/login', // 地址
callback: function(response) {
// 响应函数
console.log(response)
},
}
ajaxGet(ku)

POST

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var ajax = function( ku ) {
var r = new XMLHttpRequest( ) // 创建 AJAX 对象
r.open( ku.method, ku.url, true ) // 设置 请求方法 地址
r.setRequestHeader('Content-Type', ku.ContentType)
r.onreadystatechange = function() {
if (r.readyState === 4) { // 完成
ku.callback(r.response) // 注册 响应函数 结果
}
}
r.send( ku.data ) // 发送 请求
}
var ku = {
method: 'POST', // 请求方法
url: '/login', // 地址
ContentType: 'application/json',// 数据格式
data: JSON.stringify({ // 发送内容
username: 'abc',
password: '123',
}),
callback: function(response) { // 响应函数
console.log('result:', response )
}
}
ajax( ku )

http 协议

请求和返回是一样的数据格式,分为 4 部分:
1,请求行或者响应行
2,HTTP Header(请求的 Header 中 Host 字段是必须的,其他都是可选)
3,\r\n\r\n(连续两个换行回车符,用来分隔 Header 和 Body)
4,HTTP Body(可选)

请求的格式,注意大小写(这是一个不包含 Body 的请求):
原始数据如下
‘GET / HTTP/1.1\r\nhost:g.cn\r\n\r\n’
打印出来如下
GET / HTTP/1.1
Host: g.cn
r\n(空一行)


jQuery

常用

选择器
\$( '.class' ) 匹配所有 符合元素 返回 数组
\$( ' #id, .class ,div ') 组选择
.find( '#id' ) 向下查找子元素
.closest( '.class' ) 查找 父元素(一直向上 找到为止)
.parent() 查找 父元素
.next() 下一个元素
.prev() 上一个元素
.children() 查找 子元素
.parent().children() 查找 父子元素
.siblings() 查找 父子元素(除过 自己)
.first() 第一个元素
.last() 最后一个元素
.slice( , ) 同数组 slice()方法一致
1
2
3
4
5
6
$('ul.lang li') // 选出JavaScript、Python和Lua 3个节点
$('ul.lang li:first-child') // 仅选出JavaScript
$('ul.lang li:last-child') // 仅选出Lua
$('ul.lang li:nth-child(2)') // 选出第N个元素,N从1开始
$('ul.lang li:nth-child(even)') // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)') // 选出序号为奇数的元素

jQuery 对象 DOM 操作

dom 操作修改
.text( ) 取值文本(有参数则为赋值)
.html( ) 取值字符串(有参数则为赋值)
.show() 显示
.hide() 隐藏
.toggle() 开关
.hasClass( ) 查询 class 返回 ture 或 false
.addClass(‘className’) 添加 class
.removeClass( ) 删除 class
.removeClass( ) 删除 class
.data( ) 获取 data 属性
.width()//.height() 查询宽高,填写参数是设置宽高
.attr( , ) 第一个参数属性名,查询(有第二个参数赋值)
.removeAttr( ) 填入参数移除属性
.prop() 与 attr 类似,但是处理 checked 等 bool 属性
.val() 表单元素专属获取和设置(填参数)对应的 value 属性
.append( ) 最末尾
.prepend( ) 最开头
.before( ) 同级节点 之前
.after( ) 同级节点 之后
.remove() 删除
.empty() 删除(除过 自己)

####jQuery 对象 css 操作

1
2
3
4
5
6
7
8
9
//jQuery对象有“批量操作”的特点可调用css对象方便修改对象的CSS
$('#test')
.css('background-color', 'black')
.css('color', 'red')
var div = $('#test-div')
div.css('color') // '#000033', 获取CSS属性
div.css('color', '#336699') // 设置CSS属性
div.css('color', '') // 清除CSS属性
//css()方法将作用于DOM节点的style属性,具有最高优先级

jQ 动画

动画操作
.show(‘slow’) 显示(参数时间 1000 或者时间描述)
.hide(3000) 同上
.toggle() 开关
.slideUp() 窗帘效果的关(参数同上)
.slideDown() ….开
.slideToggle() 开关
.fadeOut() 淡入(参数同上)
.fadeIn() 淡出
.fadeToggle() 淡入淡出
.animate({opacity: 0.25,width: ‘256px’},3000,callback) 自定义动画,三个参数,1 变化对象,2 时间,3 动画结束回调函数
.delay(1000) 暂停动画
.data(‘id’) <div data-id='101'>取 data 值

jQ 事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function hello() {
alert('hello!');
}

a.click(hello); // 绑定事件

// 10秒钟后解除绑定:
setTimeout(function () {
a.off('click', hello);
}, 10000);
使用off('click')一次性移除已绑定的click事件的所有处理函数
无参数调用off()一次性移除已绑定的所有类型的事件处理函数

a.on('click', function () {
alert('Hello!');
})
// 两者等价(常用下一种)
a.click(function () {
alert('Hello!');
})
//事件委托用法
$( '#id-div-cont' ).on( 'click', '.del', Event )
// 绑定 父元素 #id-div-cont 监听.del(如果点击的是.del则发生)

jQ 函数

each 遍历

1
2
3
4
var eve = function(i, eve) {
console.log(i, eve)
}
$('.notePad_one').each( eve )

map 遍历 返回值

1
2
3
4
5
6
7
var a = [1, 2, 3, 4, 5]
var eve = function( i ) {
return i * i
}
var b = $.map( a, eve )
// 结果 b = [1, 4, 9, 16, 25]
//map与each最大区别是返回值

filter 过滤器

1
2
3
4
5
6
var a = [1, 2, 3, 4, 5]
var eve = function( i ) {
return i % 2 == 1
}
var b = $.grep( a, eve )
// 结果 b = [1, 3, 5]

jQ Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var request = {
url: '/uploads/tags.json',
type: 'get',
success: function(r) {
console.log(r)
},
error: function() {
console.log(arguments)
}
}
$.ajax(request)

//基础的jq ajax方法
$.ajax({name:value, name:value, ... })

// jq get方法
$.get("test.php", function(data){
console.log(data);
})
//jq post 方法
$.post(URL,{name:'小明'},function(data,status,xhr),dataType)

Bootstrap

Bootstrap 设置响应式的 CSS 布局

1
2
3
<!--配置bootstrap需要加入以下设置-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src=' jQuery'>` bootstrap 必须引用 jq</script>

布局 col

col-(xs,sm,md,lg)每一个 div 可以加入多个 col-?类 叫做混合布局,会根据屏幕自适应布局.
每一横行都是新的 12 格,如果父元素 8 格,子元素还是新的 12 格

ClassName 类效果
col-(xs,sm,md,lg)-(0-12) 布局:一个屏幕分成 12 栏网格效果
row 设置新的一排的布局
container 内容居中
page-header 标题下面加一条灰色的线
col-(xs,sm,md,lg)-push-(0-12) 在 col-?尺寸上把主体内容向右推?个网格宽度
col-(xs,sm,md,lg)-pull-(0-12) 在 col-?尺寸上把主体内容向左拉?个网格宽度
clearfix 修复元素浮动的问题
col-(xs,sm,md,lg)-offset-(0-12) 在 col-?尺寸把主体内容向右偏移?个网格宽度
visible-(xs,sm,md,lg) 在特定尺寸上显示内容
hidden-(xs,sm,md,lg) 在特定尺寸上隐藏内容
pull-right(left) 靠右显示与靠左显示

导航栏 navbar

ClassName 类效果
navbar 灰色边框的条
navbar-light(dark) 亮色背景与暗色背景
navbar-default 条是灰色背景
navbar-inverse 条是暗色背景
navbar-fixed-top(bottom) 导航栏固定在页面顶部(不滚动)
navbar-static-top(bottom) 导航栏固定在页面顶部(随页面滚动)
navbar-brand 给标签添加样式
nav navbar-nav 给 ul 添加样式
nav-item 表示这是导航栏里的一个项目
active 添加灰色的背景
glyphicon 使用小图标(用 span 标签使用)
glyphicon glyphicon-search 搜索小图标
form-control input 添加样式
navbar-from form 样式
navbar-left 向左浮动
btn 按钮基本样式
btn-primary 按钮的一个样式
btn-sm 按钮大小
navbar-btn 按钮边距
navbar-left(right) 元素靠左(靠右)
collapse navbar-collaps 响应式导航栏类(div 包围要折叠的导航界面)
navbar-toggle 切换显示隐藏的界面按钮类
data-toggle='collapse' data-target='#(div包围元素的id)' 切换按钮指定 2 个 data 属性
navbar-header 隐藏后显示的界面类

对话框 modal

ClassName 类效果
modal-backdrop in 添加一层暗色半透明的背景
data-toggle='modal' data-target='#(对话框id)' 给一个按钮绑定开关 id 对话框功能
modal fade 过渡的效果
data-dismiss=’modal’ 设置关闭对话框功能
tabindex=’-1’ 点击 tab 键优先跳转这个位置
data-backdrop=’false’ 关闭自动暗色背景功能
‘show.bs.modal’ 事件名,对话框显示时发生
‘hide.bs.moda’ 事件名,对话框隐藏时发生

ClassName 类效果
carousel 旋转木马组件大类
data-ride='carousel' data-interval='?000' 自动播放与?s 一次
data-pause=’false’ 默认值 hover 鼠标悬浮暂停播放
data-wrap=’false’ 默认为 true 播放结束循环播放
slide 过度效果
carousel-inner 放置旋转东西的小类
item 每一个幻灯片项目都放到一组带 item 类的容器里
item active 幻灯片开始播放的那个项目的上添加
<a href='#(carousel)的id'... 为幻灯片添加下一张功能
left(right) carousel-control 为 a 标签添加向左(右)转换功能的类
data-slide=’prev(next)’ 为 a 标签添加向左(右)转换功能的设置
glyphicon glyphicon-chevron-left(right) 左右的小图标
<ol class='carousel-indicators' 添加幻灯片对应小圆点
<li data-target='#(id)' data-slide-to='(0)' 0 对应第一个项目
active 默认从添加这个类的项目开始旋转
‘slide.bs.carousel’ 事件,播放时触发
‘slid.bs.carousel’ 事件,播放完成触发

lodash

lodash 是一个非常实用的 js 工具库 _是表达符号

lodash 函数

each

1
2
3
4
5
6
_.each(list(数组或对象), (v, k) => {
// each 方法的两个参数
// 如果 list 是 列表,那么 v 和 k 分别是指 list 的 element/index
// 如果 list 是 对象(字典),那么 v 和 k 分别是指 object 的 value/key
console.log('element and index', v, k)
})

map (旧数组/对象生成一个新数组)

1
2
3
4
5
const list2(新数组) = _.map(list1(旧数组), (v, k) => {
const r = v * v
return r
})
console.log('list2', list2)

filter (遍历数组/对象,返回符合判断函数中的元素)

1
2
3
4
5
6
var u(符合条件的新数组) =
_.filter(us(数组可包含对象), (e) => {
var b = e.score > 70(bool值)
return b
})
console.log('filter u', u)

orderBy (按照条件排序,先按 score 升序,如果有 score 一样的,再按 name 降序)

1
2
var users = _.orderBy(us, ['score', 'name'], ['asc'(升序), 'desc'(降序)])
console.log('order by users', users)

flatten (减少一层嵌套数组(只减少一层),也就是可以将二维数组拍成一维数组)

1
2
3
var l = [1, [2], [3, [4]], [5, [6], [7]]]
var f = _.flatten(l)
console.log('flatten result', f)

compact 剔除数组中的假值元素(js 中假值元素分别为false null 0 NaN '' undefined)

1
2
3
4
5
6
7
8
9
10
var result = _.compact(l(包含假值元素的数组))
console.log('compact result', result) ** (isEqual ** isEqual比较两个对象或者数组是否相等)
var o1 = {
key: 1,
}
var o2 = {
key: 1,
}
var result = _.isEqual(o1, o2)
console.log('isEqual result', result)

result (获取嵌套对象的值)

1
2
3
4
5
6
7
8
9
10
11
12
13
var o = {
k1: {
k2: {
k3: {
k4: 'value in nested dict',
},
},
},
}

var path = 'k1.k2.k3.k4'
var result = _.result(o, path)
console.log('result nested result', result)

cloneDeep 深拷贝(改变赋值不影响原函数的拷贝)

1
2
3
4
5
6
var o = {
a: [1],
b: [2],
}
var deep = _.cloneDeep(o)
console.log('deep', deep)

random (返回给定范围的随机值)

1
2
3
4
5
6
7
    var a = 10      var b = 20
// 返回 a 和 b 之间的一个整数
var r1 = _.random(a, b)
console.log('random r1', r1)
//如果指定第三个参数为 true,这个参数的意思是指 floating ,那么返回的就是一个浮点数
var r2 = _.random(a, b, true)
console.log('random r2', r2(浮点数))

shuffle (返回打乱顺序后的数组)

1
2
3
var l = [1, 2, 3, 4]
const s = _.shuffle(l)
console.log('shuffle l', s)

vue.js


注意事项 1.确保在初始化根实例之前注册了组件

  1. 内部使用 vue 属性需要使用 this 3.要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法 4.在数据变化之后立即使用 Vue.nextTick(callback) == this.$nextTick(callback)

Vue 属性 说明
el 绑定的 id
data 储存的一些属性
methods 储存的一些方法(函数)
filters 储存一些过滤函数
computed 储存一些计算属性函数(存在缓存,一般情况可以用 methods 替代)
watch 数据改变时触发,允许我们执行异步操作
components 局部注册组件属性
props 子组件要显式地用 props 选项声明它期待获得的数据
template 组件模板
data(组件) 组件 data 必须是函数 return 出的对象
Vue.set(object, key, value) 将响应属性添加到嵌套的对象上
directives 注册局部指令
beforeCreate 在实例初始化之后数据观测之前被调用
created 实例被创建之后被调用
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用
mounted el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
activated keep-alive 组件激活时调用
deactivated keep-alive 组件停用时调用
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用
destroyed Vue 实例销毁后调用
1
2
3
4
5
6
this.$on('事件名字', function(r) {
console.log(r)
})
//监听自定义事件 第一个事件名字 第二个参数触发函数
this.$emit('事件名字', '输入值')
//触发自定义事件 第一个参数名字 第二个参数函数参数

常用 vue 指令

指令 说明
v-if(show) true 显示 false 隐藏
v-else 跟 v-if 并列的话,v-if 隐藏它显示
v-bind:() 绑定某个属性,v-bind 可隐藏 :()
v-text 纯文本内容显示
v-html 渲染显示
v-on:click 绑定点击 click 事件也可以用@click
v-model input 默认值(复选单选按钮,选择列表) 修改后值随之改变
v-once 渲染的值不发生变化
v-for ( ,index)in( ) 循环取值 index 为序号,也可以是循环整数
v-for (value,key,index)in(object)也可以循环取值 object
key 为 vue 指定唯一性 key 值,可以防止切换的重复组件被复用
is <tr is="my-row"></tr>将 tr 替换为 my-row 模板
scope 值对应一个临时变量名,此变量接收从子组件中传递的 props 对象
ref 可以使用 ref 为子组件指定一个索引 IDnew Vue({ el: '#id' }).$refs.(ID)
inline-template 组件将把它的内容当作它的模板,而不是把它当作分发内容
:duration="{ enter: 500, leave: 800 }" 定义动画持续时间

html 代码事例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div id='app'>  
<div v-if(show)='welcome' v-bind:title='title' v-once>
<!--1.显示隐藏元素(if是添加show是改变display) 2.v-bind(可省略)绑定title属性为'title' 3.message值不随着改变-->
{{ loggedIN? message : '请先登录 '}}
<!--loggedIN值为true hello false 请先登录 -->
</div>
<div v-else> //v-else-if也可以使用
Now you don't
</div>
<!--if为false时显示 -->
<div v-text='message'></div> <!--message纯文本显示 -->
<div v-html='message'></div> <!--渲染显示 -->

<!--触发的事件调用 event.preventDefault()-->
<form v-on:submit.prevent="onSubmit"></form>
<form v-on:submit.prevent></form>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 阻止单击事件冒泡,可以串联按照顺序执行 -->
<a v-on:click.stop.once="doThis"></a>
<!-- 只当事件在该元素本身(比如不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
<!-- 自动转换输入的字符为数字 -->
<input v-model.number="age" type="number">
<!-- 自动过滤用户输入的首尾空格 -->
<input v-model.trim="msg">


<input v-model='message'>
<!--input框中默认为message 修改此值即修改data里message值 -->
<ol>
<li v-for='comment in comments //(value, key, index) in object)'>
{{ comment.content }}
</li>
<!--循环comments数组创建li 可通过app.comments.push({content:'lalala'})添加新的li元素-->
</ol>
<!--组件化演示 -->
<comment v-for='comment in comments' v-bind:comment='comment'></comment> <!--效果同上li -->
<div>

js 代码事例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//定义全局组件化
Vue.component('comment', {
//声明组件名字
template: '<li> {{ comment.content }} </li>', //组件模板
// '<slot> :) </slot>' 内容分发
//包含slot标签的div没有内容时显示:) 有内容时隐藏
props: ['comment'], //组件传入的对象
/* prosp: {
comment: {
type:String,
default: 'button', 默认值
required: true, 必须有值
validator (value) {
return value.length > 3 值长度大于 3
} prosp的另一种对象形式
} 可以过滤传入对象的属性
}*/
methods: {
logMessage() {
console.log(this.message)
}, //组件化中也可以直接定义data与methods
},
})

var vm = new Vue({
el: '#app', //选择应用vue的选择器,等效于vm.$mout('#app')
methods: {
logMessage() {
console.log(this.message)
},
},
data: {
message: 'hello',
title: 'hello', //鼠标放上去显示
welcome: true, //true显示这个元素 false隐藏
loggedin: false,
comments: [{ content: 'yayaya1' }, { content: 'yayaya2' }, { content: 'yayaya3' }],
},
created: function() {
// 实例被创建之后调用
console.log('hello word~')
},
})

vue-router.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<!-- 渲染模板里面根据路由再次嵌套渲染-->
<router-link to="/user/foo/profile">/user/foo/profile</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const User = { //动态参数值会被设置到 this.$route.params
template: '<div>User {{ $route.params.id }}</div>'
}
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User,
//自路由再次渲染
children: [ { path: 'profile', component: UserProfile },
{ path: 'posts', component: UserPosts } ]
}
]
})
const app = new Vue({
router
}).$mount('#app') //$mount('#app')相当于 el:'#app'

router.push 会向 history栈添加一个新的记录点击浏览器后退按钮回到之前的 URL
router.replacerouter.push 很像,唯一的不同就是,它不会向 history 添加新记录
router.go 参数是一个整数,意思是在 history 记录中向前或者后退多少步
{ path: '/a', redirect: { name: 'foo' }}
重定向的意思是,当用户访问 /a 时,URL 将会被替换成 /b,然后匹配路由为 /b
{ path: '/a', component: A, alias: '/b' }
/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
router.beforeEach((to, from, next) => {
// 全局注册的钩子 3个参数 去哪 哪来 干嘛
})
beforeEnter: (to, from, next) => {
//组件内部的钩子 效果一样
}
beforeRouteEnter (to, from, next) //渲染该组件的对应路由被 confirm 前调用 无this

beforeRouteUpdate (to, from, next) //在当前路由改变,但是该组件被复用时调用

beforeRouteLeave (to, from, next) //导航离开该组件的对应路由时调用

scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}

node.js

node(fs)专属配置环境工具

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var fs = require('fs')     //加载fs库赋值于fs
fs.readdir('.', (err,files) => { // .当前目录..上一级
if(err != null) {
console.log(err)
} else {
console.log('files', files)
}
}) // 读取当前目录下的文件(readdirSync同步版本)

fs.rmdir('目录名',(err) => { })
//删除目录文件(目录必须为空)

fs.unlink(file, (err) => { })
// 删除file文件

fs.mkdir('目录名字',(err) => { })
//创建目录

fs.readdir('目录',(err, files) => {})
//读取目录内容

fs.writeFile('file', '你好 Node.js', (err) => {})
// 创建file文件

fs.appendFile('file', '你好 python', (err) => {})
//添加文件内容

fs.readFile('message.txt', 'utf8', (err, data) => {
console.log('读取了文件', data)
}) // 读取文件

fs.rename('原名字','新名字',(err) => {})
//重命名文件

var fileReadStream = fs.createReadStream('文件名')
var fileWriteStream = fs.createWriteStream('文件名')
//读取文件流 写入文件流
fileReadStream.pipe(fileWriteStream)
//pipe好像管道,可以把读取流接入写入流 效果类似write
//pipe可以链式使用
fileReadStream.pipe(fileWriteStream).pipe(...)

var i = 0
fileReadStream.on('data',(chunk) => {
console.log(`${i++}接受到:${chunk.length}`)
fileWriteStream.write(chunk) //写入每次内容
}) //读取次数,每次长度

fileReadStream.on('end',() => {})
//读取结束事件

fileReadStream.on('error',(err) => {})
//发生错误事件

express 库用于后端开发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 引入 express 并且创建一个 express 实例赋值给 app
var express = require('express')
var app = express()
app.use(express.static('static'))
//封装一个函数
var sendHtml = function(path, response) {
var fs = require('fs') // path是读取文件
var options = {
// options解码环境
encoding: 'utf-8',
}
fs.readFile(path, options, function(err, data) {
console.log(`读取的html文件 ${path} 内容是`, data)
response.send(data)
})
}
// 用 get 定义一个给用户访问的网址
// request 是浏览器发送的请求
// response 是我们要发给浏览器的响应
app.get('/', function(request, response) {
var path = 'index.html'
sendHtml(path, response)
})

app.get('/todo/all', function(request, response) {
var todos = [
{
id: 1,
task: '吃饭',
},
]
var r = JSON.stringify(todos)
response.send(r)
})
app.post('/todo/add', function(request, response) {
// request.body 这个函数可以获取前端post的数据
})

//打开端口服务器
// listen 函数的第一个参数是我们要监听的端口
// 这个端口是要浏览器输入的
// 默认的端口是 80
// 所以如果你监听 80 端口的话,浏览器就不需要输入端口了
// 但是 1024 以下的端口是系统保留端口,需要管理员权限才能使用
var server = app.listen(8081, function() {
var host = server.address().address
var port = server.address().port

console.log('应用实例,访问地址为 http://%s:%s', host, port)
})

###node 的一些库

1
2
3
4
5
6
7
8
//sync-request 用于下载网页
var request = require('sync-request')

//cheerio 用于解析网页数据
var cheerio = require('cheerio')

//模块中函数输出
module.exports = 函数名

git

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
git init   //创建git仓库
git add (文件名) //添加文件
git commit -m "改动说明" //上传改动
git status //查询仓库状态
git diff () //查询文件变动
git log //查询版本改动
git log --pretty=oneline //格式化显示版本改动状态
git reset --hard HEAD^ //HEAD当前版本 ^上个版本 ^^上2个版本 HEAD-100 上100个版本
git reset --hard (版本号(可只写几个开头)) //回滚到指定版本
git reflog //记录每次操作
git checkout -- () //文件回滚到最后一次add或commit状态
git reset HEAD () //撤销最后一次的git add
git rm () //删除文件
git checkout -b dev //创建并切换为dev分支
git branch //查看所有分支
git checkout master //切换分支到master
git merge dev //合并指定分支(dev)到当前分支
git branch -d(D) dev //删除(强制删除)dev分支
git stash git stash pop //储存目前工作现场,读取。。。
git remote -v //显示远程仓库信息
git push (origin branch-name//本地推送分支到远程仓库
git branch --set-upstream (branch-name origin/branch-name
// 建立本地分支和远程分支的关联
git tag (name//打标签
git tag //查看所有标签
git tag (v1.0) (提交id) //打历史标签
git show (name) //显示对应标签说明
git tag -a <tagname> -m "blablabla..." //添加标签说明
git tag -d (name//删除本地标签
git push origin :refs/tags/<tagname> //删除一个远程标签
git push origin <tagname> //推送一个本地标签
git push origin --tags //推送全部未推送过的本地标签
//忽略某些文件时,需要编写.gitignore
git config --global alias.(co) checkout //配置简化git命令checkout为co

gulp

创建 gulpfile.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var gulp = require('gulp')     //引入gulp

gulp.task('images', function () {
return gulp.src('images/*.png').pipe(gulp.dest('dist/images'))
})
//创建images函数,将images下所有png格式图片复制到dist/images文件下

var sass = require('gulp-sass') //编译sass为css
var connect = require('gulp-connect')
gulp.task('server', function() {
connect.server({
root: 'dist'
})
})
//创建本地服务器监视dist文件下内容
var concat = require('gulp-concat'); //合并
var uglify = require('gulp-uglify'); //压缩js文件
var rename = require('gulp-rename'); //重命名文件
gulp.task('scripts', function () {
return gulp.src(['javascripts/**/*.js',''])
.pipe(concat('vendor.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
//合并文件,取名vendor.js压缩后放在dist/js下
var minifyCSS = require('gulp-minify-css');
// 压缩css文件 minifyCSS()
var imagemin = require('gulp-imagemin');
//压缩图片体积 imagemin()
var browserSync = require('browser-sync').create();
// 游览器同步
// 静态服务器
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// 代理
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "你的域名或IP"
});
});
npm install browser-sync --save-dev
//安装browser-sync
browser-sync start --server forest --files "forest/index.html, forest/css/*.css"
//监视forest文件夹下文件
--tunnel
//使外网也可以访问
browser-sync start --proxy localhost:9090
//监视指定代理服务器

// 直接使用browser-sync
browser-sync start --server --files "css/*.css, *.html"

webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
webpack (原.js) (处理后.js)
module.exports = 'zh is boss!' //name.js
var name = require('./name') //引入name.js
npm install css-loader // 处理css文件
npm install style-loader // 应用css文件
require('style!css!./css/*.css') //引入css文件
webpack --devtool source-map //生成可source调试的js
npm install webpack-dev-serve //生成开发用服务器
webpack-dev-server --inline --hot //模块热更新监控
//配置webpack文件
新建一个名为webpack.config.js的文件
module.exports = {
devtool: 'eval-source-map',//配置生成Source Maps
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}

一些常用函数/数据

循环

1
2
3
4
5
6
7
8
9
for (var i = 0; i < iterable.length; i++) {
iterable[i]
}

var i = 0
while (i < iterable.length) {
function语句
i += 1
}
1
2
3
4
5
arr.forEach(function(iteam, index, array)
for (i of iterable) { i } // i = 值
for (i in iterable) ( iterable[i] } // i = 下标
break 结束单次循环
continue 语句可以跳过单次循环

常用函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
var log = function() {
console.log.apply(console, arguments)
//alert( )
}
//测试函数情况

var ensure = function(def, result, message) {
if (JSON.stringify(def) !== JSON.stringify(result)) {
log('错误', message)
}
}
//测试函数正确

var e = function(selector) {
return document.querySelector(selector)
}
// 绑定元素

var appendHtml = function(element, html) {
element.insertAdjacentHTML('beforeend', html)
}
//加入html字符串

var toggleClass = function(element, className) {
if (element.classList.contains(className)) {
element.classList.remove(className)
} else {
element.classList.add(className)
}
}
// 开关(className)

var removeClassAll = function(className) {
var selector = '.' + className
var elements = document.querySelectorAll(selector)
for (var i = 0; i < elements.length; i++) {
var e = elements[i]
e.classList.remove(className)
}
}
//批量删除className

var bindEvent = function(element, eventName, callback) {
element.addEventListener(eventName, callback)
}
//绑定事件

var bindAll = function(selector, eventName, callback) {
var elements = document.querySelectorAll(selector)
for (var i = 0; i < elements.length; i++) {
var e = elements[i]
bindEvent(e, eventName, callback)
}
}
//批量绑定事件

var time = function(z) {
if (z === undefined) {
z = new Date()
}
var han = '日一二三四五六'
var Year = z.getFullYear()
var Month = z.getMonth() + 1
var Day = z.getDate()
var Hour = z.getHours()
var Minute = z.getMinutes()
var Second = z.getSeconds()
var Week = han[z.getDay()]
if (String(Month).length === 1) {
Month = '0' + Month
}
return `${Year}${Month}${Day}${Hour}${Minute}${Second}秒 星期${Week}`
}
time()
//时间函数 括号里输入时间对象 否则为当前时间
// (new Date()).getTime()把时间转换为当前毫秒计算事件 常用于倒计时
//可通过new Date('2017/6/10,10:30:30')的格式来设置时间

参数说明

名称 秒懂释义
iterable 可迭代对象
path 路径
url 网址
src 需暂停加载(比如 script img) 引用的意思
href 不需暂停加载(比如 link a ) 跳转的意思
pattern 正则表达式
property 属性
arguments 参数
event 事件 event.target
clientX clientY 鼠标

Math 数学

属性 说明 举栗
floor( x ) 返回 <= x 整数 向下取整 ( -2.1 ) = -3
ceil( x ) 返回 >= x 整数 向上取整 ( -2.1 ) = -2
round( x ) 返回 x 四舍五入 ( 5.4 ) = 5
abs( x ) 返回 x 绝对值
random( ) 生成 0 - 1 随机小数 随机取数主要操作
parseInt( ) 取整数

逻辑符号

&& \ \ !!
and or not

定时器

a 是执行函数 b 是时间(例如 1000)

名称 作用 例子
setInterval 间隔型 b 秒执行一次 setInterval(a,b)
setTimeout 延时型 只执行一次
clearInterval 关闭间隔型
clearTimeout 关闭延时型

offsetLeft 距离左边的距离 用于做无缝滚动

####类型

属性 说明
typeof( object ) 判断 类型
String( number ) 数字 转 字符串
Number( string ) 字符串 转 数字

RegExp 正则表达式

  • 语法:/Pattern/Property
    |Property|说明|
    |:-:|:-:|
    |/i|无视大小写|
    |/g|全局匹配|
    |/m|多行匹配 |
    |/img|组合使用|
  • 常用
正则表达式 说明
/[A-Z]\ [a-z]/img 所有字母
/[0-9]/img 所有数字
  • 编译:new RegExp( Pattern, Property )
1
2
var name = '馒头'
var re = new RegExp(`${name}`, 'img') //加变量

转义符

转义符 说明
\n 换行
\t TAB
\\ 反斜杠
\' 单引号
\" 双引号

注释

注释 快捷键 CTRL + / 单行
JavaScript // JS
CSS /* CSS */
HTML <!-- HTML -->
Python ``` Python ``` # Python

编码

ASCII:2 进制 8 字节表示 Base64:2 进制 6 字节
|ASCII - Unicode 编码|说明|
|:-: |:-: |
|'Aa'.charCodeAt( 0 ) === 65|0 下标|
|String.fromCharCode( 65 ) === “A”|65 ASCII 码|
|( 10 ).toString( 2 ) === “1010”|进制转换|


#参考资料:

####书籍

《Head First HTML 与 CSS》第 2 版 ;
《JavaScript 语言精粹》;
《JavaScript 高级程序设计》;


《编码》;《计算机程序的构造和解释》;SICP 解题集
《深入理解计算机系统》;
《算法导论》;《编程珠玑》;《程序设计语言》;《代码大全》;

####网络

文档:MDN /w3school
教程:廖雪峰/宁皓网/慕课网


基础教程:
计算机科学和 Python 编程导论 > 计算机科学 cs50 > 计算机程序设计 > 算法导论 > 编程语言 > 英语学习