【得心应手】前端小知识

HTML5

• 浏览器支持情况：最新版本的火狐、谷歌、safari、Opera、IE9+

• H5视频元素video:

  支持三种视频格式：Ogg/MPEG 4/WebM
  插入内容是为了让不支持video的元素显示的
  Controls:提供添加播放，暂停和音量控件
  Video元素允许多个source元素，其可以链接不同的视频文件，浏览器将使用第一个可识别的格式：

• H5音频元素

  audio支持三种音频格式：Ogg Vorbis/MP3/Wav
  插入的内容是供不支持 audio 元素的浏览器显示的
  audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式

• H5内联SVG的优势

  -可以通过文本编辑器来创建和修改
  -可以被搜索、索引、脚本化或压缩
  -可伸缩
  -可以在任何分辨率下被高质量的打印
  -可以在图像质量不下降的情况下被放大

TypeScript简单接触

1. 基础类型

   number string boolean null undefined symbol
   元组：

   let x: [string, number]; x = [“hello”,10];

   数组：

   1>在变量类型后边添加[] let list:number[] = [1,2,3];
   2>使用数组泛型 let list: Array = [1,2,3];

   枚举类型emum
   enum Color {Red, Green, Blue} //默认从0开始编号
   let c:Color = Color.Green;

   Any:为在变成阶段还不清楚类型的变量指定一个类型
   let nosure:any = 4;
   Void:表示没有任何类型，当一个函数没有返回值时：
   function warnUser():void{
   Console.log(“warning message”);
   }
   Never:表示的是那些用不存在的值的类型
   (1)返回never的函数必须存在无法到达的终点
   Object:
   declare function create(o: object | null): void;
   create({ prop: 0 }); // OK
   create(null); // OK
   create(42); // Error
   create(“string”); // Error
   create(false); // Error
   create(undefined); // Error

2. 变量声明let/const取代var,解构赋值

3. 接口：typescript核心之一是对值所具有的结构进行类型检查

零碎知识点

-------HTML5------------
localStorage.getItem('guide')：获取指定key本地存储的值
localStorage.setItem('guide',1)：将value存储到key字段

------jQuery---------
$(function(){}):在页面DOM加载完成后加载执行的，等价于：
$(document).ready(function(){})
优于window.onload方法：该方法必须等到页面内包括图片的所有元素加载完毕后才能执行

-------jQuery---------
$().click()和$(document).on(‘click’,’要选择的元素’,function(){})的不同
前者只针对页面中已经存在的选择器，如果之后还动态创建了元素，那么就不会渲染该样式，然而后者支持，即凡是在该选择器选中范围内都可以触发事件。

-------jQuery---------
$('选择器').modal('show');   modal()方法是模态框

-------JavaScript---------
 - e.pageX;  返回值是DOM元素相对于文档的定位，文档的左上角为（0，0），IE不支持。
 - e.clientX:  返回值是DOM元素相对于屏幕可见区域的坐标，不计算浏览器上面的工具栏
 - e.screenX: 返回的是相对于屏幕的坐标，计算浏览器上面的工具栏
 - e.offsetX，e.offsetY：返回的是相对于文档的坐标，和e.pageX，e.pageY作用相同，但是只有IE支持。

----css3选择器----------
[可以参考该网址](https://www.w3cplus.com/css3/pseudo-class-selector)

//在三元运算符中判断一个对象是否为空
Object.keys(对象名).length === 0            

//设置字体大小跟行高一样一样的大小，再进行内外边距的设置，根据UI图设计时才会比较精细
div{   //那么此时div的高度一定是12px
	width:500px;
	font-size:12px;
	line-height:12px;
}

-------------------------------单行文本溢出-------------------------------------------
div{
	......
	max-width:200px;
	overflow:hidden; //（顾名思义超出限定的宽度就隐藏内容）
	white-space: nowrap; //（设置文字在一行显示不能换行）
	text-overflow: ellipsis; //（规定当文本溢出时显示省略符号来代表被修剪的文本）
	......
}