前端总结1

HTML中CSS基本知识

 

定位：

类型	定义	注意
相对定位(relative)	相对于原本文档流中的位置定位	占据原先文档流中的位置
绝对定位(absolute)	相对于离它最近的已经定位 父级定位	如果没有已定位父级，则根据HTML定位，脱离文档流
固定定位(fixed)	相对于浏览器窗口 （HTML）定位	IE8及以下不支持，脱离文档流（不会占据文档流体积），可能跟别人重叠
粘性定位(sticky)	以浏览器的可视窗口为参照点移动元素（固定定位特点）	占据原本文档流 必须添加 top 、left、right、bottom 其中一个才有效
静态定位(static)	表示保留在原本应该在的位置	不会重新定位

圆角属性

有四种写法

类型	代码	含义
单个属性值	border-radius：50px	四个角度都是50px
两个属性值	border-radius：50px 60px	左上与右下(50px)，左下与右上(60px)；
三个属性值	border-radius：50px 60px 70px	左上(50px) 右上与左下(60px) 右下(70px)；
四个属性值	border-radius：50px 60px 70px 80px	左上(50px) 右上(60px) 右下(70px) 左下(80px)；

z-index属性

类似于 PhotoShop 中的图层概念 仅可以加给已定位元素

Css样式的种类

行内（内联样式表）

 <p style="color:pink"></p>

头部（内部）style

 <style>
     div{
         backgroud:pink
        }
 </style>

外部（外链）link，

 <link rel="stylesheet" href="css/index.css">

Css优先级

优先级

后来者居上（后面的优先级高于前面的）

!important 最重要的（优先级最高）

id>class>tag

行内>头部>=外部

优先级权值：内联1000，id100，class10，tag1

Css两大特性

三大特性	定义
层叠性：	可以被后来的样式覆盖（后来者居上）
继承性：	子元素可以继承父元素的某些样式（比如：字体样式属性）

id选择器的命名：

1. 驼峰命名法（区分大小写），要尽可能有具体含义

2. 具有唯一性，不可重复起名都是同一个id

3. 不能以数字开头，

Class选择器的命名：

没有唯一性 其他与id选择器的命名一致

选择器

选择器	用法
类型选择器（标签选择器）	根据标签来选择
通配符选择器	* 选择全部
并集选择器	（使用多个选择器匹配同一组样式） 用逗号， 隔开
后代选择器	div空格a
子代选择器	div>a

紧邻着的下一个兄弟 用+选择器 span + a

Js字符串

'js字符串' " js字符串" js字符串 => `` 反引号包裹

不同数据类型间的类型转换方法

转字符串	注意
toString()方法	不可以转null和underfined
String()方法	都能转

转数值型	注意
Number()	Number()可以把任意值转换成数值 如果要转换的字符串中有一个不是数值的字符，返回NaN
parseInt()	解析一个字符串并返回指定基数的十进制整数
parseFloat()	把字符串转换成浮点数

转布尔值型	注意
Boolean():	0 (空字符串) null undefined NaN 会转换成false 其它都会转换成true

获取Dom

三种方法

获取Dom	代码
根据标签	var divT=document.getElementsByTagName('div')
根据class	var divC=document.getElementsByClassName('divC')
根据id	var div1=document.getElementById('div1')

获取标签里面的内容

document.getElementsByTagName('p').value；

设置输入框里面的内容

document.getElementsByTagName('input').value="你好呀"

字符串方法

方法	注意
length方法	返回字符串的长度
indexOf() 方法	返回字符串中指定文本首次出现的索引（位置）
lastIndexOf() 方法	返回指定文本在字符串中最后一次出现的索引：

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

indexOf(value,50) 从1开始到50结束检索

lastIndexOf(value,50) 从50开始到1结束检索

方法	注意
search("字符串") 方法	搜索特定值的字符串，并返回匹配的位置

• search() 方法无法设置第二个开始位置参数。

• indexOf() 方法无法设置更强大的搜索值（正则表达式）。

  方法	注意
  slice(start，end)方法	提取字符串的某个部分并在新字符串中返回被提取的部分

  如果某个参数为负，则从字符串从后往前开始计数。

   

省略第二个参数

则该方法将返回从第一个数值开始到最后的字符串：

 

方法	注意
substring(start，end)方法	类似于 slice() 但是substring() 无法接受负的索引

省略第二个参数，则该 substring() 将裁剪字符串的剩余部分

方法	注意
substr(start，length) 方法	类似于 slice() 不同之处在于第二个参数规定被提取部分的长度

省略第二个参数，则该 substr() 将裁剪字符串的剩余部分

首个参数为负，则从字符串的结尾开始返回|start|个字符

第二个参数不能为负，因为它定义的是长度

方法	注意
replace(value1,value2) 方法	用另一个值替换在字符串中指定的值

默认地，replace() 只替换首个匹配

replace() 对大小写敏感

如需执行大小写不敏感的替换，请使用正则表达式 /i

 var n = str.replace(/MICROSOFT/i, "W3School");

如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）

 var n = str.replace(/Microsoft/g, "W3School");

方法	注意
toUpperCase()方法	把字符串转换为大写
toLowerCase()方法	把字符串转换为小写

方法	注意
text1.concat(" ",text2)	连接两个或多个字符串

可用于代替加运算符。下面两行是等效的

 var text = "Hello" + " " + "World!";
 var text = "Hello".concat(" ","World!");

方法	注意
trim()方法	删除字符串两端的空白符

Internet Explorer 8 或更低版本不支持 trim() 方法

方法	注意
charAt() 方法	返回字符串中指定下标（位置）的字符串
charCodeAt()方法	返回字符串中指定索引的字符 unicode 编码

方法	注意
split(separator,limit)方法	将字符串切割转换为数组,

• separator 从该参数指定的地方分割

• limit 可指定返回的数组的最大长度 如果没有设置该参数，整个字符串都会被分割

• 数组方法

  方法	注意
  toString()方法	把数组转换为数组值（逗号分隔）的字符串
  join() 方法	将所有数组元素结合为一个字符串(还可以规定分隔符)
  pop() 方法	数组中删除最后一个元素
  push() 方法	（在数组结尾处）向数组添加 一个新的元素
  shift() 方法	删除 首个数组元素 数组的inedx还是1开头
  unshift() 方法	（在开头）向数组添加新元素 数组的index依次往后递推
  更改元素方法（索引）	索引：从一开始
  delete 方法	delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之

  方法	注意
  splice() 方法	返回一个包含已删除项的数组

  splice( x , y , " value1" , "value2" )

  第一个参数 : x 定义了应添加新元素的位置

  第二个参数 : y 定义应删除多少元素

  value1,value2 : 定义要添加的新元素

  splice( x , y )

  第一个参数 : x 定义了应添加新元素的位置

  第二个参数 : y 定义应删除多少元素

  方法	注意
  concat()方法	通过合并（连接）现有数组来创建一个新数组

  concat() 方法也可以将值作为参数： 用于连接值

  方法	注意
  slice(index1,index2) 方法	数组的某个片段切出新数组

  创建新数组。它不会从源数组中删除任何元素

  一个参数的话

  从索引开始切出数组的剩余部分

  两个参数的话

  index1 开始参数 选取元素，直到 index2 结束参数 （不包括）为止

  插入Dom

  innerHTML

   document.getElementById(id).innerHTML = new text

  HTML转义字符

  网址：https://tool.oschina.net/commons?type=2

  文件路径

  ../ 文件的上层目录

  ./ 文件的当前目录