前端
2019-04-10 18:24:39 0 举报AI智能生成
web前端之旅，想开始学前端可以看看
作者其他创作
大纲/内容
前端
学习途径
基础
html
css
选择器
类选择器
id选择器
子选择器
.sss > li{}
范围
第一代子集
后代选择器
.sss li{}
所有子集
通用选择器
* {color:red;}
分组选择符
继承性
具有继承性的样式
p{color:red;}
不具有继承性的样式
p{border:1px solid red;}
权值
当样式层叠时，权值最高的样式被使用
权值相同时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100-继承也有权值但很低，有的文献提出它只有0.1
样式优先级
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
特殊
p{color:red!important;}
最高权值样式
文字排版
字体
font-family:\"宋体\"
字号、颜色
font-size:10px;color:#000
粗体
font-weight:bold
斜体
font-style:italic
下划线
text-decoration:underline
删除线
text-decoration:line-through
缩进
text-indent:2em
行间距（行高）
line-height:1.5em
中文字间距、字母间距
letter-spacing:50px
在英文单词时，是设置字母与字母之间的间距
word-spacing:50px
单词之间的间距
对齐
text-align:center
盒子模型
结构图
组成
边框
border:2px solid red
border-width
2px
像素
border-style
solid 实线
dashed 虚线
dotted 点线
border-color
red
#888
十六进制颜色
填充
padding:20px 10px 15px 30px;
padding-top
padding-right
padding-bottom
padding-left
上、右、下、左的填充都为10px
div{padding:10px;}
上下填充一样为10px，左右一样为20px
div{padding:10px 20px;}
边界
div{margin:20px 10px 15px 30px;}
元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
布局模型
种类
流动模型 (Flow)
默认的网页布局模式
元素分布
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸
内联元素都会在所处的包含元素内从左到右水平分布显示
浮动模型 (Float)
设置元素浮动，可以让两个块状元素并排显示
左浮动
float:left
右浮动
float:right
层模型 (Layer)
绝对定位(position: absolute)
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}
直接定位
相对定位(position: relative)
#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}
相对移动位置
固定定位(position: fixed)
与绝对定位类似，但不随滚动条移动位置
常用设置
居中
垂直居中
height:100px; line-height:100px;/*行高*/
水平居中
position:relative;\tleft:50%
display:inline;text-align:center;
width:200px; margin:0 auto;
多行垂直居中
使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
display:table-cell;/*IE8以上及Chrome、Firefox*/\tvertical-align:middle;/*IE8以上及Chrome、Firefox*/
隐性改变display类型
1. position : absolute 2. float : left 或 float:right
自动变为以 display:inline-block（块状元素）
js
变量
判断变量类型typeof（）
typeof(null)=\"object\"
null=undefined
引用数据类型
JavaScript中对象都是函数
instanceof可以用来判断对象是否属于某类型。返回true和false
类型转换
转换成字符串
num+\"\"
转换成数字
parseInt(String)
将string解析为number， 整数型（小数不解析），无法解析，返回NaN（不是数字）
parseFloat(string)
将string解析为number类型，浮点型
强制类型转换
Boolean(value)
把value转换成boolean型
Number(value)
将给定值转为数字（可以是整数或浮点数）
String(value)
都是通过字面值转换
返回值均为原始数据类型的值
运算符
算数运算符
+
算数运算加
字符串连接符
number转换符（其它类型转number）
string 转 number
+\"11\"=11
boolean转number
var boo = +true;true为1，false为0
null转number
+null 等于0
undefined转number
+undefined 为 NaN
-
算数运算减
数字转换符
-\"11\"=-11
-true=-1
-null=-0
-undefined=NaN
比较运算符
==
比较值
1==\"1\" 为true
===
比较值和类型
1===\"1\" 为false
!=
!==
全不等
比较值或者类型，有一个不同就为不同
1 !== \"1\" true
逻辑运算符
&&
||
！
使用以上逻辑运算符，最终都会用boolean类型运算，若不是boolean类型，则进行转换。
0、-0、null、\"\"、false、undefined 或 NaN，为false否则为true
循环语句
for
for in
for( i in p){}
内置对象
Array
创建数组
var arr = new Array();
创建指定长度的数组
var arr = new Array(size);
创建空数组
var arr = [];
创建数组直接实例化元素
方法
Date
var date = new Date();
var date = new Date(毫秒值)
getFullYear()
年
toLocalString
获取本地时间格式的字符串
Math
没有构造函数 Math()
Math.PI 圆周率
Math.abs(val)
绝对值
Math.ceil(val)
上舍入
Math.floor(val)
下舍入
x的y次幂
Math.random()
0-1之间的随机数
Math.round()
四舍五入
RegExp
创建
var reg = new RegExp(pattern)
var reg = /\\^正则规则$/;
test(str)
检索字符串中指定的值。返回 true 或 false
例
校验邮箱：var email = haohao_827\\@163.comvar reg = /\\^[A-z]+[A-z0-9_-]*\\@[A-z0-9]+\\.[A-z]+$/;reg.test(email);
js函数
js事件
事件类别
onclick
鼠标点击事件
onchange
域内容改变事件
onfoucus
获取焦点事件
label
将自己的属性名和其它元素绑定
点击name和文本框获取焦点，有同样效果
onblur
失去焦点事件
onmouseover
鼠标悬浮事件
onmouseout
鼠标离开事件
onload
等到页面加载完毕在执行onload事件所指向的函数
或者理解为页面刷新后立刻执行
事件的绑定方式
1、将事件和响应都内嵌到标签中
2、将事件内嵌到标签中，响应用函数封装
3、将事件和响应行为与标签完全分离
a、先获取标签
b、然后绑定事件，编写响应函数
this经过事件的函数进行传递的是html标签对象
this = var btn = document.getElementById(\"btn\");
阻止事件的默认行为
组织事件的传播
0 条评论
回复 删除
下一页
