前端知识点总结

前端知识点总结

一、HTML、CSS/CSS3

二、JavaScript

三、JQuery

一、HTML、CSS/CSS3

1. HTML+CSS+JavaScript

• 动态的HTML（DHTML）

2. 易忘标签

• pre 预定义格式
• 单标签 br、hr、img、input…
• u 加下划线文本
• s 加删除线文本
• < 小于
• > 大于
•   空格
• cellspacing 表格单元格间距
• cellpadding 表格单元格内边距
• colspan 表格同一行上多列合并
• rowspan 表格同一列上多行合并

3. 锚点

 <a href='#t1'>点击</a>
 <a id='t1'>定位到着</a>或  <a name='t1'>定位到着</a>

4. img标签

• 定义img标签时，注意一定要定义宽、高。

5. 样式优先级

• 默认样式< 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

6. 盒子模型

• 宽度=内容宽度+左右内边距+左右边框粗细+左右边界
• 高度=内容高度+上下内边距+上下边框粗细+上下边界
• margin、border、padding、content这四个属性都会影响盒子的宽高

7. 图片显示位置

• background-position：50% 0% ;//x-y

8. border-color上右下左

• border-color:red;//四个边框
• border-color:red black;//上下、左右
• border-color:red black blue;//上、左右、下
• border-color:red black blue green;//上、右、下、左

9. 文档流（标准流）

• 元素自上而下，自左向右，块元素独占一行，行内元素在一行上显示，碰到父集元素的框换行

10. 浮动

• 标准流->浮动流

11. 元素选择器

• 通配符选择器 *
• 标签选择器 p
• ID选择器 #t1
• 类选择器 .t1
• 属性选择器 [href=’#’]
• 复合选择器

12. 浮动特点：
    ★元素浮动之后不占据原来的位置（脱标）
    ★浮动的盒子在一行上显示
    ★行内元素使用浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）
13. 重叠关系

• z-index（可为负数，越大越前面）

14. 规避脱标流
    ◆尽量使用标准流。
    ◆标准流解决不了的使用浮动。
    ◆浮动解决不了的使用定位。
15. 背景色渐变

• background:linear-gradient(to lfet,#000 50%,#fff %50)；
  to left（从右到左）、to right（从左到右）、to bottom（从上到下）、to top（从下到上）

16. 居中对齐
    display:flex;
    align-items:center;//y
    justify-content:center;//x
17. 边框阴影

• box-shadow：0px 0px 1px #000 ;
  (xy可负值,模糊度，阴影颜色)
• box-shadow：0px 0px 1px inset;
  （内阴影）

18. 边框图片
    border:20px solid transparent; //透明
    border-image: url(“images/b8.png”) 20 20 stretch;
19. 文字倒影

• text-shadow:0px 0px 1px red;

20. 英文换行

• word-wrap:break-word;

21. 内核

• -ms代表ie内核识别码
• -moz代表火狐内核识别码
• -webkit代表谷歌内核识别码
• -o代表欧朋【opera】内核识别码

23. css3动画
    1.0 旋转（播放）
    transform：rotate（45deg）；
    transform:rotateX(45deg);
    transform:rotateY(45deg);
    2.0 缩放（放大镜）
    transform：scale（1.5，1）；//（x，y）
    3.0 移动
    transform:translate（xpx,ypx）;
    4.0 倾斜
    tranform:skew(10deg,20deg);
    5.0 透视（3d视图效果）
    当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
    perspective：100；
24. 动画过度（transition）
    1.0 transition-property:none|all|property ;属性的名称
    2.0 transition-duration:0.5s|5ms; 过渡效果花费的时间,默认是 0
    3.0 transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); 渡效果的时间曲线,默认是 “ease”
    4.0 transition-delay:5s; 过渡效果何时开始,默认是 0
25. 动画
    1.0 规定动画
    @keyframes myfist
    {
    from{background:red;}
    to{background:yellow;}
    }
    关键词 “from” 和 “to”，等同于 0% 和 100%。
    2.0
    animation-name: ; @keyframes 动画的名称
    animation-duration:5s; 动画完成一个周期所花费的秒或毫秒。默认是 0。
    animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n); 动画的速度曲线。默认是 “ease”
    animation-delay:2s; 动画何时开始。默认是 .
    animation-iteration-count:n|infinite; 规定动画被播放的次数。默认是 1。
    animation-direction:normal|alternate;动画是否在下一周期逆向地播放。默认是 “normal”。
    animation-play-state:paused|running;动画是否正在运行或暂停。默认是 “running”
    animation-fill-mode:none | forwards | backwards | both; 对象动画时间之外的状态
26. 箭头变手

• cursor:pointer;

27. 数字转换成字符串：String（12）、（123）.toString
    字符串转化成数字：Number(“3.14”)

二、JavaScript

28. 变量

• 【区分大小写】 a A
• 字母、数字、下划线、$ 以字母、下划线或$打头

29. js关键字：js已经在使用的特殊含义的单词
    break、case、class、catch、continue、debugger、default、delete、do、else、export、extends、finally、for、function、if、import、in、instanceof、let、new、return、super、swith、this、throw、try、typeof、var、void、while、with、yield

30. js保留字：js将来可能会使用其作为特定用途的单词
    enum await implements package protected static interface private public abstract boolean byte char double final float goto int long native short synchronized transient volatile

31. 字符串常用函数
    1 lenght: 字符串的字符个数
    2 chatAt(number): 获取指定字符串在索引的位置，从零开始
    3 concat(‘a’,‘b’)😕/ab 拼接字符串
    4 indexOf（char）:从左往右找字符，从0开始
    5 lastIndexOf(char): 从右往左找字符，从一开始
    6 replace(‘b’,‘x’)😕/b替换成x 替换第一个匹配字符
    7 split(,): 以指定的字符分割字符串
    8 join(😉: 以指定的字符拼接字符
    9 trim():去除头尾两边的空白字符
    10 toUpperCase(); 转大写
    11 toLowerCase(); 转小写
    12 substr(0,2)😕/从索引0开始，截取2个字符
    13 substring(1,2)//截取 (索引1) <= (截取的字符串) < 2

32. 数组常用函数
    1 join（；）：以指定；拼接数组元素，返回字符串
    2 arr= arr1.concat(arr2):拼接数组，返回新数组
    3 arr.sort(function(a，b){
    return a-b;//升序，//b-a降序
    });匿名函数
    4 push()；在末尾添加元素
    5 unshift(); 在开头添加元素
    6 pop();删除末尾元素
    7 shift();删除开头元素

33. 日期常用函数
    1 var date=new Date();系统当前时间
    2 年月日时分秒
    var year=date.getFullYear(); 年份四位数
    var month=date.getMonth()+1; 月份0~11
    var day=date.getDate();日期1~31
    var hour=date.getHours();小时0~23
    var mimute=date.getMinutes();分钟0~59
    var second=date.getSecond(); 秒0~5

console.log(year+“年”+month+“月”+day+“日”+hour+“时”+mimute+“分”+second+“秒”);

34. 数学常用函数
    1 Math.ceil(1.5);向上取整
    2 Math.floor(1.5);向下取整
    3 Math.pow(2,3);2的3次方
    4 Math.random();返回0~1之间的随机小数
    5 1~50 var r=Math.ceil(Math.random()*50);

35. 单行文本溢出
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

36. 多行文本溢出
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

37. 相对定位（相对于原来位置移动）
    position: relative；
    relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局

38. 绝对定位（完全脱离了普通流）
    position: absolute；
    absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位

39. location.reload()//刷新本页
    history.back();//前一个 返回主页面
    .forward();//后一个
    .go(-1);//后退
    .go(1);前进

40. 构造函数
    函数名大写（定义好了还不算）。当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。

41. 自调用函数

• 如果表达式后面紧跟 () ，则会自动调用。
  (function(){
  //操作
  })();

三、JQuery

42. 文档就绪函数
    $(document).ready(function(){
    })
43. 事件的绑定(bind, on)
    $(‘p’.bind(‘click’,function(){
    //操作
    })
    $(“p”).on(‘click’,function(){
    //操作
    })
44. 事件解除绑定(unbind, off)
    $(“p”).unbind(“click”);
    $(“p”).off(“click”);
45. jQuery 效果

• 显示隐藏 hide()与show() 切换toggle()
• 淡入淡出 fadeIn()与fadeOut() 切换fadeToggle()
• fadeTo(1000,0.4) 渐变为给定的不透明度（值介于 0 与 1 之间)
• 滑动 slideDown()与slideUp() 切换 slideToggle()

5. 设置/获得内容和属性

• 内容 - text()、html() 以及 val()
• 属性 - attr()

6. 添加元素

• append() 方法在被选元素的结尾插入内容
• prepend() 方法在被选元素的开头插入内容
• after() 方法在被选元素之后插入内容
• before() 方法在被选元素之前插入内容

7. 删除元素

• remove(子元素) 方法删除被选元素及其子元素
• empty() 方法删除被选元素的子元素

8. 获取并设置 CSS 类

• addClass() 方法向被选元素添加一个或多个类
• removeClass() 方法从被选元素删除一个或多个类
• toggleClass() 方法对被选元素进行添加/删除类的切换操作
• hasClass() 方法判断是否有这个类
• css() 方法设置或返回被选元素的一个或多个样式属性

9. 尺寸

• width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
• height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
• innerWidth() 方法返回元素的宽度（包括内边距）
• innerHeight() 方法返回元素的高度（包括内边距）
• outerWidth() 方法返回元素的宽度（包括内边距和边框）
• outerHeight() 方法返回元素的高度（包括内边距和边框）
• outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
• outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）