前端学习总结的一些知识点

html+css

html

输入日期

css

.clearfix:after{ content: ''; display: block; clear:both;}清除浮动常用语

a:hover:鼠标放上标签上的反应

::after|::before:{content:""}伪元素

position:absolute(绝对定位)|relative(相对定位)fixed(固定定位)

line-height:行高

text-align:conter(文字居中对齐)

text-indent:2em(缩进)

list-style: none;列表清除圆点

cursor:pointer(鼠标变小手)

.iconfont用于特殊符号

box-sizing: border-box;/*定义出IE盒模型（怪异盒模型）

backgroud-image:linear-gradient(to right,#f90000,#ff5000); (线性渐变）

width:calc(100%-190px)利用函数计算间距

transition: 0.9s;过渡

transition: all 0.3s ease-in-out 0.3s;高级过渡

transition:background 0.9s;只过渡颜色

opacity:0.5;整体透明度

display:table-cell等于td单元格

display:table-cell; vertical-align: middle; 单元格实现垂直水平居中

display:flex; justify-content: space-around; align-items: center;弹性盒模型垂直水平居中，ie10以上支持

background: white url(../images/2.jpg) -400px -200px;/*图片精灵/雪碧图*/

table{border-collapse:colllapse}边框模式,合并,解决两个td中间有间隙的问题

table-layout:fixed;定义列宽的算法 ，fixed的计算方式为根据表格宽度自动计算列宽，每列的宽度为均分整个表格的宽度

.webp格式的图片占用的空间更小

woed-break:keep-box;用空格来代替换行

:after{content:''}伪类; ::after{{}}伪元素

transparent透明

box-shadow: 0 0 50px aqua;设置阴影的大小和颜色

display: flex; align-items: center;justify-self: center;弹性布局居中

label for=".."可以说是为input而生,for里面输入input的ID,这样点击label里的内容就相当于点击了input框

/*清除浮动代码*/ .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

writing-mode：*;可改变文档流

vertical-align: middle;垂直方向内容居中

javascript

• target.charAt(i)获取变量名为target的字符串的第i个元素

• target.charDoteAt(i)获取变量名为target的字符串的第i个元素的ASCII码

• null==undefined;

• switch…case里的case用的是“===”

• “abcdsas”.indexOf(‘ds’);返回括号里的字符串在该字符串的位置，没有，则返回-1

• 创建对象的方法

  1. var obj={… } 对象直面量、对象直接量plainObject
  2. 构造函数
  • 系统自带的构造函数Object()
    包括new Object();Array();Number();Boolean();Date();等
    var obj=new=Object();和var obj={}这样写区别不大
  • 自定义 Object.create(原型)方法
    必须用new这个操作符，才能构造出对象
    构造函数必须要按照大驼峰式命名规则，但凡是构造函数就要大写

• 构造函数内部原理

1. 在函数体最前面隐式的加上this={}
2. 执行this.xxx=xxx;
3. 隐式的返回this
   eg:
   function Car(color){

     this.name='玛莎',
     this.color=color,
     this.health=100,
     this.run=function (){
         health--;
     }
     <!-- return this; -->
   

   }

• 包装类

  • var num=new Number(123)的num对象有计算属性，但是没有num.length之类属性
  • var str=new String(‘abcd’)的str对象有字符串属性，但是str.length的只能查找不能更改
  • var bool=Boolean(true)的bool为布尔类型的对象

• 原型

  • Person.prototype.firstname=“jiang”;***.prototype.***="***"
    
    function Person(lastname){
    
    this.lastname=lastname;
    
    }
    
    var name=new Person(tuantuan);

• Math

  • 例向上取整 Math.ceil(123.234) 答案 124
  • 例向下取整 Math.floor(123.999) 答案 123
  • 四舍五入 Math.round(123.502) 答案 125
  • 例 Math.random()是产生一个 0 到 1 区间的开区间 随机数

• 对象

  • (var prop in obj){};遍历对象；
  • obj.hasOwnproperty[prop];判断是否是自己的财产
  • A instanceof B:判断B是否是A所创

• this

  • 1.函数预编译过程 this —>指向 window
  • 2.全局作用域里 this —> 指向 window
  • 3.call/apply 可以改变函数运行时 this 指向
  • 4.obj.func(); func()里面的 this 指向 obj

• argument

  • arguments.callee;指向函数的引用（函数自己）
  • function.caller;caller 谁叫他，caller 不能用在 arguments 里面

• 三目运算符

  • var num = 1 > 0 ? 2 + 2 : 1 + 1;

• 数组

  • 一、改变原数组（在原来数组基础上去改变）
    1）reverse,sort,push,pop, unshift, shift
    2）splice
  • 二、不改变原数组
    1）forEach filter map reduce reduceRight
    2）slice concat,join—>split,toString
  • 利用call,类数组也可以使用数组方法：

• 类数组变成数组的几种方法
  var allDoms=[].call(document.body.getElementsByTagName(‘‘));
  var allDoms=Array.form(document.body.getElementsByTagName(’’));
  var allDoms=(…document.body.getElementsByTagName(‘*’));

• try{};catch{}

  • 以下代码b报错,c不执行,d执行,catch里面写出报错类型和名称
  • 数组的一个小技巧：
    var arr1=[1,2];
    var arr2=arr1.concat([3,4])等效于arr2=[…arr1,3,4];

• 报错

  • Error.name 的六种值对应的信息：
    （ 前面是错误名称，后面是错误信息）
  1. EvalError：eval()的使用与定义不一致
     //eval 是不被允许使用的
  2. RangeError：数值越界
  3. ReferenceError：非法或不能识别的引用数值
     //未经声明就使用，没有定义就使用
  4. SyntaxError：发生语法解析错误
     // Syntax 是语法解析（）
  5. TypeError：操作数类型错误
  6. URIError：URI 处理函数使用不当
     //引用地址错误

• 快捷

  • div.demo#only > p 就是让 div 下面包含一个子元素 p
  • p[style=’background-color:red;width:100px;height:100px;’]
  • div>(p+span)div下p与span并列
  • div{123};
  • div{$*2}*10十个变化的文本

• 取消a的默认

  • 右侧也能取消 a 标签的默认值

• BOM对象包含以下内容

  • 定义：DOM中文名称为文档对象模型，是js操作文档的中介，BOM中文名称为____浏览器对象模型，是js操作____浏览器的中介

  • Window JavaScript 层级中的顶层对象,表示浏览器窗口。

    1. 以下四个也包含其中
    2. 重要属性:innerheight innerwidth pageXOffset pageYOffset parent
    3. 重要方法：alert() confirm() prompt() scrollBy() scrollTo() setInterval()
       setTimeout clearInterval() clearTimeout() close() open()

  • Navigator包含客户端浏览器的信息

    1. 重要属性：cookieEnabled是否启用cookie online是否联机
    2. 重要方法：无

  • History包含了浏览器窗口访问过的URL

    1. 重要属性：length
    2. 重要方法：back() forward() go()

  • Location包含了当前URL信息

    1. 重要属性：hash host href pathname protocol seach
    2. 重要方法：assign()加载新文档
       reload()重新加载当前文档
       replace()用新的文档替换当前文档
    3. URL：https://www.baidu.com/s?ie=UTF-8&wd=nba
       协议：https:
       域名：www.baidu.com(默认端口号443)
       路径：/s
       参数：?后面的ie=UTF-8&wd=nba
       锚点：#**(此处无锚点)

  • Screen包含客户端显示屏的信息