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

时间永远是过的最快的,对于现在的我来说,忙碌的工作中不断的学习,不断的成长,已经正能量满满。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() //把数组转换成局部字符串

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

时间: 2024-10-13 02:03:39

17年项目工作知识点小总结------彭记(022)的相关文章

浏览器css的兼容问题小总结------彭记(025)

1.         cursor:hand   VS   cursor:pointer firefox不支持hand,但ie支持pointer 解决方法:   统一使用pointer 2. innerText在IE中能正常工作,但在FireFox中却不行. 需用textContent. 解决方法: if(navigator.appName.indexOf("Explorer")   >   -1){ document.getElementById('element').inne

浏览器js的兼容问题小总结------彭记(024)

1.    HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法:统一使用document.getElementById("idName"); 2.    const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字

小圣求职记(1):腾讯篇

笔试 参加了实习和校招两场笔试,笔试题目难度中等,涉及计算机网络.操作系统.数据库.算法和数据结构.C/C++语法.下面是2014年9月份武汉地区软件研发类的题目和我的解答(事后做的,我是在合肥中科大参加的腾讯笔试,题目不一样): 一.不定项选择题 1. 如果MyClass为一个类,执行“MyClass a[5],*b[6]”语言会自动调用该类构造函数的次数是() A. 2 B.5 C. 4 D. 9 解析:选B,5次.只有a[5]定义了5个对象,而*b[6]定义的是6个对象指针并不会进行实例化

小武小久成长记

Posts 小久坐玩具车 小武画狐狸 Jun 29, 2019 小武气垫船 Jun 18, 2019 小武剪纸 Jun 16, 2019 父亲节 Jun 15, 2019 组装车 Jun 10, 2019 小久帮爷爷修理 Jun 4, 2019 三个小朋友开船 Jun 2, 2019 小武画兔子 May 6, 2019 小武和小久用彩笔乱画 Apr 21, 2019 两兄弟吃药 Apr 20, 2019 小久叫爷爷 Apr 19, 2019 小久躲起来 Apr 19, 2019 小久够奶瓶很得意

【单片机小知识随记1】——排阻respack-8

一.定义 排阻,就是若干个参数完全相同的电阻,它们的一个引脚都连到一起,作为公共引脚,其余引脚正常引出.所以如果一个排阻是由n个电阻构成的,那么它就有n+1只引脚,一般来说,最左边的那个是公共引脚.它在排阻上一般用一个色点标出来. 二.作用 内存芯片下方均匀分布的"芝麻粒",实际上是位于内存颗粒和金手指之间的"排阻".排阻,是一排电阻的简称.我们知道,内存在处理.传输数据时会产生大小不一的工作电流.而在内存颗粒走线的必经之处安装一排电阻,则能够帮助内存起到稳压作用,

小P寻宝记——好基友一起走

小P寻宝记--好基友一起走 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 话说,上次小P到伊利哇呀国旅行得到了一批宝藏.他是相当开心啊,回来就告诉了他的好基友小鑫,于是他们又结伴去伊利哇呀国寻宝. 这次小P的寻宝之路可没有那么的轻松,他们走到了一个森林,小鑫一不小心被触发了机关,被困在了一个大笼子里面,笼子旁边上有一道题目和一个密码锁,上面说只要解出此题输入密码即可救出被困人.小鑫不是很聪明,所以他做不出来,他知道小P很笨,

Codeforces Round #535 (Div. 3)小上分记

Codeforces Round #535 (Div. 3)小上分记 前言 被拉去买新年衣服了,导致半小时后才进场. 虽然做了4道题,但是rating还是涨得不多. 用predictor看了rating变化后心灰意冷,不看E题了. A ...800的难度. B 本来还在想要不要用什么STL.后来发现直接用桶就行了.然后就可以水过了. C 题意差点理解不了. 就6种情况都去考虑一下,找最小代价的即可.不要考虑少了. 每次都是\(O(n)\)的,所以能搞. D 贪心地换字母即可. E 坑.待填. 原

十一小长假自修记之C++充电篇

这些天,放了小假期,正好梳理一下基础知识.基础知识牢固了,复杂的东西也不怕,所以对C++的基本知识做了梳理,以期对C++有更好的理解. 手头上的书有,谈浩强的<C++程序设计>,<C++ primer>,阅读谈教授的书已经很多次,网上多对这本书有争议,但我认为作者对初学者已经用心良苦了,很容易让初学者入门.若不是这本书做基础,看起来<C++ primer>真是一头雾水,只有基础扎实了,才能体会到<C++ primer>的博大精深. <C++程序设计&g

html5的小知识点小集合

html5知识 1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现. (2).标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行.在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作. 2.HTML5 为什么只需要写<!DOCTYPE