17年项目工作知识点小总结------彭记（022）

Posted 2020-10-06

时间永远是过的最快的，对于现在的我来说，忙碌的工作中不断的学习，不断的成长，已经正能量满满。17年已过大半，对

这段时间的工作和项目知识点做一个小结，重新整理一下小知识点。
总结分一下几大块：

html5：

1、新特性：语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性
a.语义化更好的内容标签(header,nav,footer,aside,article,section)
b.表单控件,calendar、date、time、email、url、search
c.音频、视频 API(audio,video) 自定义播放器案例
d.地理定位(Geolocation) API 掌握获取、使用第三方 API 方法
e.拖拽释放(Drag and drop) API 给元素设置 draggable = "true" 属性使其可拖动,链接和图片默认可拖动
f. WEB 存储 API 只能存储字符串
localStorage 长期存储,浏览器关闭后数据不丢失;sessionStorage 临时存储,不共享,关闭页面数据丢失
g.画布(Canvas) API
h.新的技术 webworker, websocket, Geolocation(作为了解)

2、HTML5 和 CSS3 的新标签
HTML5:canvas , audio , video , datalist , keygen ,meter, header, footer, nav, section, article, aside,

CSS3:RGBA, text-shadow, box-shadow, border-radius, border-image,border-color, transform, transition,

animation, linear-gradient, radial-gradient, flex
--等等--

CSS注意点：

1.CSS中选择器的优先级为:
!important > 行内样式 > id > class > tag > 通配符 > 继承 > 默认
权重算法:(不标准,但可以帮助理解)-用 1 表示派生选择器的优先级、用 10 表示类选择器的优先级、用 100 表示 ID 选

择器的优先级--在项目中用到插件时，想要改变其样式，往往会出现权重不够没有效果，这时就应该想到增加权重来解决。

2.CSS中隐藏元素:
基本的: 设置 display :none;(不占位置),或者设置 visibility :hidden(占位置)
注意两者的区别--使用 display:none 属性后,HTML 元素(对象)的宽度、高度等各种属性值都将"丢失";而使用

visibility:hidden 属性
后,HTML 元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在.
技巧性: 设置宽高为 0,设置透明度为 0,设置 z-index 位置在-9999

3.CSS中透明效果实现:
rgba()和 opacity 的透明效果是有所不同的
opacity 作用于元素,以及元素内的所有内容的透明度
rgba()只作用于元素的颜色或其背景色.(设置 rgba 透明的元素的子元素不会继承透明效果！)
--等等--

JS:

1、javascript：
弱类型:声明变量都使用 var(ES6 中有 let 和 const)
动态类型:声明时类型不定,运行时才明确变量类型;对象可以随意添加属性、方法
解析型:遇到一行解析一行(区别是编译型全解析后再执行)
脚本语言:不需要编译,直接执行

2、javascript 的本地对象、内置对象和宿主对象：
本地对象为 array、obj、regexp 等可以 new 实例化
内置对象为 Global、Math 等不可以实例化的(也是本地对象,Global 不存在,但是类似于 isNaN()、parseInt()和

parseFloat()方
法都是他的方法)
宿主对象为浏览器提供的对象,所有的 BOM 和 DOM,如 document,window

3、日期对象的常用方法：
var date = new Date(); var year = date.getFullYear(); //获取年
var month = date.getMonth(); //获取月份获取的月份从 0 开始

var day = date.getDate(); //获取日,每个月当中的第几天
var week = date.getDay(); //获取星期几 0 代表星期日 6 代表星期六
var hour = date.getHours(); //获取小时 0 - 23
var minutes = date.getMinutes(); //获取分 0 - 59
var second = date.getSeconds(); //获取秒 0 - 59
var ms = date.getMilliseconds(); //获取毫秒 0-999
var tatolms = date.getTime(); //获取时间的总的毫秒数

4、添加删除替换插入到某个节点的方法：
obj.appendChild() //追加子节点
obj.insertBefore() //插入子节点,参数 2 为 null 时等同于 appendChild
obj.replaceChild() //替换子节点,参数:新节点、旧节点(应该是没用过)

obj.removeChild() //删除子节点
此外,jQuery 还提供了 append、perpend、after、before,appendTo、prependTo、insertAfter、insertBefore

5、短路表达式foo = foo||bar：
等同于 if(!foo) foo = bar;如果 foo 存在,值不变,否则把 bar 的值赋给 foo. 作为"&&"和"||"操作符的操作数表达式,

这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告
终止,这称之为短路求值.

6、js 数组类型中常用的方法
concat() 连接两个或更多的数组,并返回结果.
join() 把数组的所有元素放入一个字符串.元素通过指定的分隔符进行分隔.
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素,并返回新的长度.
reverse() 颠倒数组中元素的顺序.
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素,并向数组添加新元素.
toSource() 返回该对象的源代码.
toString() 把数组转换为字符串,并返回结果.
toLocaleString() 把数组转换为本地数组,并返回结果.
unshift() 向数组的开头添加一个或更多元素,并返回新的长度.
valueOf() 返回数组对象的原始值

7、apply 和 call 方法的异同
call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的
指向.因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 二者

的作用完全一样,只是接受参数的方式不太一样,参数 1 是 this ,all 需要把参数按顺序传递进去,而 apply 则是把参数
放在数组里

8、数组和对象有哪些原生方法,列举一下??
1.Array.concat() //数组拼接
2.Array.push() //向数组尾部添加元素
3.Array.pop() //从数组尾部删除元素
4.Array.shift() //从数组头部删除元素
5.Array.unshift() //向数组头部删除元素
6.Array.slice() //返回数组的一部分
7.Array.splice() //插入,删除或替换元素
8.Array.reverse() //颠倒数组中元素的顺序
9.Array.sort() //对数组进行排序
10.Array.toString() //将数组转换成一个字符串
11.Array.valueOf() //
12.Array.join() //将数组元素连接起来以构建一个字符串
13.Array.length() //数组的长度
14.Array.toLocalString() //把数组转换成局部字符串

时间关系，就总结到这里哈