前端
2019-03-12 21:34:41 0 举报AI智能生成
前端
作者其他创作
大纲/内容
css
三大特性
层叠性
样式冲突遵循就近原则
继承性
子标签会继承父标签的一些样式(一般文字相关的都可以继承)
优先级
元素选择器0.0.0.1
类选择器0.0.1.0
id选择器 0.1.0.0
内联样式 1.0.0.0
style
字体设置
文字大小: font-size
字体 : font-family
字体粗细 : font-weigth
bold或700加粗
normal或400 不加粗
字体倾斜 : font-style
normal 正常字体
oblique 斜体
字体外观
字体颜色 color
颜色名
十六进制数字 #fff
rgb()
水平对齐方式 text-align
left 左对齐
right 右对齐
center 居中对齐
justify 两端对齐
垂直对齐 vartical-align
基线对齐 baseline
垂直居中 middle
顶部对齐 top
底部对齐 bottom
文本行高 line-height
一般用它来设置垂直居中
文本装饰 text-decoration
none 没有装饰
underline 下划线
overline 上划线
line-through 删除线
可以用来删除a标签的装饰
显示模式
display 显示模式
visibility 可见性
visible 对象可见
hidden 对象不可见
注意display:none和visibility:hidden的区别
背景属性
背景颜色
background-color
使用rgba()可以用来设置透明度
背景图片
background-image:url(地址)
图片重复 background-reprat
repeat 平铺排满
repeat-x 水平排满
repeat-y 垂直排满
no-repeat 不平铺
背景图片位置 background-position: x轴 y轴
方位名词
center
top
bottom
left
right
像素值
代表与左上角的距离
盒子模型
外边距 margin
一个盒子与外部元素的距离
存在的问题
嵌套元素的垂直外边距合并:
解决方案:
给父元素设置边框或者内边距
父元素设置overflow: hidden;
内边距 padding
一个盒子与内部元素的距离
边框 border
边框大小 border-width
边框样式 border-style
dashed 虚线
solid 实线
dotted 点线
none 没有线
边框颜色 border-color
边框弧度 border-radius
一个盒子真正的大小是:内容+margin+padding+border
一个值: 上下左右
浮动
float取值
左浮动
右浮动
none
默认不浮动
浮动规则
禁止浮动 clear
left 禁止左侧有浮动
right 禁止右侧有浮动
both 禁止两边有浮动
none : 允许两边有浮动
父标签塌陷
解决方案
利用为类选择器和clear属性
.clearfix:after { content: \"\"; display: block; clear: both; }
定位
偏移量
bottom: 底部偏移量: 定义元素相对于其父元素下边线的距离
定位模式position
static 静态定位
唯一的用途就是取消定位...
relative 相对定位
以自己原始位置为参照物
移动后还占有原来位置
常用与给绝对定位定坐标
absolute 绝对定位
通过定位和margin-left 可以设置盒子水平居中
fixed 固定
堆叠顺序 z-index
定位与浮动
选择器
基本选择器
标签选择器 标签名{}
id 选择器 #id {}
类选择器 .class {}
通用选择器 * {}
层级选择器
属性选择器
[xxx] {} 包含属性xxx的
[xxx=\"aaa\"] {} xxx属性等于aaa的
[xxx~=\"aaa\
伪类选择器
:hover 鼠标移动到
:before 标签之前
:after 标签之后
前端
js
基础
类型检查
obj instanceof class
typeof 变量名 返回类型
类型转换
转数字
parseFloat() 转浮点
转字符串
String()
转布尔
Boolean()
转换规则
数据类型
函数
形参个数和实参个数可以不一致
arguments : 函数调用时传递的参数伪数组
匿名函数 : function(){}
引用传递
函数调用
通过func.apply() 或者func.call()他们可以改变this的指向
如果this是个null的话不会改变this的指向
escape() url编码
unescape() url解码
变量作用域
变量
局部变量: 函数内用var声明的
预解析
函数和变量的声明都会提前到当前所在的作用域的最上面
面向对象
实例化对象
new Object()
设置属性
obj.xxx=xxx 或 obj['xxx'] = xxx
获取属性
obj.xxx 或 obj['xxx']
删除属性
delete obj.xxx 或 delete obj['xxx']
this关键字
函数的调用者
创建对象的方式
继承
原型和原型链
通过在工厂方法或者自定义构造方法中给实例绑定方法比较占用空间
自定义构造方法的prototype和实例的__proto__都指向了原型对象. 在实例中寻找属性时找不到会去原型对象中查找
所以我们把方法绑定到原型上就可以即绑定给class.prototype就可以共享这些内存了
通过改变原型来实现继承
借用构造函数来继承
所以经常通过构造函数+改变原型来真正的完成继承
内置对象
Array
声明
字面量方式 var aa = []
构造函数方式 var aa = new Array()
多个参数是里面的值
方法
类方法
Array.isArray(obj) 判断obj是不是数组
实例方法
arr.pop() 移除最后一个元素
arr.shift() 移除数组的第一个元素
arr.push() 追加一个元素
arr.unshift() 在前面添加一个元素
arr.splice() 指定元素分割数组
arr.join() 指定元素连接数组
arr.reverse() 反转数组
Math
Math.random()
Date
实例化
new Date() 当前时间
new Date(时间戳)
new Date(时间字符串)
Date.new() 当前的时间戳
dt.getFullYear() 获取年
dt.getDate() 获取日期
dt.getHours() 获取小时
dt.getMinutes() 获取分钟
dt.getSeconds() 获取秒
dt.getDay() 获取星期
dt.toString() 返回字符串
dt.toDateString() 英文日期
dt.toLocaleDateString() /分割的日期
dt.toTimeString() :分割带时区的时间
dt.toLocaleTimeString() 带有中文上下午时间
String
String.formCharCode(num) 返回该数字对应的字符
st.length 返回长度
st.charAt(num) 拿到该索引的字符
st.indexOf(st2) 返回第一次出现的索引
st.lastIndexOf(st2) 返回最后一次出现的索引 没有返回-1
st.toLocalLowerCase() 返回小写
st.toLocalUpperCase() 返回大写
st.trim() 切掉两端空格
st.match(reg) 返回满足正则的字符串数组
Regex
字面量方式
var reg= /正则串/模式
new的方式
var reg=RegExp(/正则串/)
var reg=RegExp(\"正则串\") 双引号里需要转义
reg.test(str) 检查字符串中有没有能匹配的
模式
g全局模式
i 忽略大小写
RegExp.$n 取第n个组的内容
DOM对象
文档对象模型
节点查找
通过document查找
document.getElementById(\"ID\") 根据ID获取一个元素
document.getElementsByClassName(\"class\") 返回包含带有指定类名的所有元素的节点列表。
document.getElementsByTagName (\"x\") 根据元素名获取元素的列表
document.getElementsByName(\"x\") 返回包含带有指定标签名称的所有元素的节点列表
通过已经得到的节点查找
查找元素节点
obj.children obj所有子标签列表
obj.firstElementChild obj的第一个子标签元素
obj.lastElementChild obj的最后一个子标签元素
obj.nextElementSibling obj同级下一个标签元素
obj.previousElementSibling obj同级上一个标签元素
obj.parentNode 父节点
obj.childNodes 所有子节点
obj.firstChild 第一个子节点
obj.lastChild 最后一个子节点
obj.nextSibling 下一个兄弟节点
obj.previousSibling 上一个兄弟节点
直接查找
document.body
document.title
document.documentElement html标签
节点编辑
创建节点
document.createElement(\"标签名\
添加节点
papa.appendChild(son) 追加一个子节点
删除节点
papa.removeChild(son); 获得要删除的元素，通过父元素调用删除
替换节点
tag.innerHTML 所有子节点
tag.outerHTML 返回包含自身的所有子节点
节点属性
属性操作
tag.atttributes 所有的属性名
tag.getAttribute(\"属性\") 获取属性值
tag.setAttribute(\"属性\
tag.removeAttribute(\"属性\") 删除属性值
tag.属性 或者 tag.属性=值 也可以用来获取和设置属性
class操作
obj.className
obj.classList
obj.classList.remove(cls)
obj.classList.add(cls) 一个一个的添加类
obj.classList.contains(cls) 检查是否存在
obj.classList.item(index) 返回该索引位置的类
style操作
offset系列
offsetWidth 获取元素的宽
offsetHeight 获取元素的高
offsetLeft 获取左边的距离
未脱离文档流就是自己border距离页面左边的距离
脱离文档流就是letf加上margin
offsetTop 获取上面的距离
scroll系列
scrollTop 向上滚动的距离
scrollLeft 向左滚动的距离
client系列
clientWidth: 边框内的宽度
clientHeigth: 边框内的高度
clientLeft: 左边框的宽度
clientTop: 上面边框的宽度
事件
阻止事件冒泡
window.event.cancelBubble = true IE特有的火狐不支持
事件对象
e.type 事件名
e.clientY 可视区域的纵坐标
e.target 接受事件的目标dom元素
事件类型
scroll 拖动滚动条
获取整个页面的垂直拖动距离 window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop
事件绑定
event.element.addEventListener(\"event\
event没有on
ie8以及更早不支持该方法
event.attachEvent(\"event\
event必须有on
element.event = func
只能绑定一个事件
阻止默认事件
e.preventDefault()
BOM对象
浏览器对象模型
window 对象
window.onload 页面加载完成时的事件 onunload/onbeforeunload IE关闭前
location 对象
地址栏信息
location.hash 地址栏#后面的内容
location.host 主机名端口号
location.name 主机名
location.pathname 路径
location.port 端口
location.protocol 协议
location.search ?后面的内容
location.reload()刷新
history 对象
history.back() 后退
history.forward() 前进
history.go(num) 前进或后退
navigator 对象
navigator.userAgent 浏览器类型
navigator.platform 系统平台所在类型
定时器
根据任务id取消周期任务 clearInterval(timer);
根据id取消定时任务 clearTimeout(timer);
opener 父页面window对象
严格模式
代码前添加 \"use strict\"; 该有;的地方必须有;
HTML5
html:xt
新标签
nav 导航
header 页眉
footer 页脚
main 文档主要内容
aside 主题之外的内容
article 文章
input新类型
email
tel: 在移动端打开数字键盘
url : 合法网址
number : 有箭头
search : 带个删除按钮
range: 可以设置最大值最小值的一个滑动框
color: 颜色选取
output:
input新属性
placeholder 提示信息
autocomplete : on/off 提示是否关闭
autofocus: 自动获取焦点
required: 必填
pattern: 正则验证
表单新事件
oninput: 内容改变
onkeyup: 键盘弹起时触发
oninvalid: 验证不通过时触发
媒体标签
audio
src播放路径
autoplay: 自动播放
loop: 循环播放
video
src: 视频路径
controls
autoplay
loop
width
height
source标签
<video><source><source><video>
src视频路径
type: 文件类型 video/mp4
新的获取标签的方法
document.querySelector(\"选择器\") 返回满足条件的第一个
document.querySelectorAll(\"选择器\") 返回满足条件的全部
类操作
element.class 全部类
自定义属性
规范
都应该小写
不要用特殊符号
不要用纯数字
新增网络事件
offline: 网络断开时触发
全屏接口
开启全屏element.requestFullScreen()
退出全屏 element.canceFullScreen()
是否全屏 element.fullScreenElement
不同的浏览器需要加不同的前缀
谷歌: webkit
火狐: moz
ie: ms
欧朋: o
文件接口 FileReader 对象
new FileReader()
readAsText()
读取文本文件
readAsBinaryString()
读取任意类型的文件返回二进制
redaAsDataURL(二进制文件)
abort() 中断加载
FileReader对象事件
onabort: 中断时触发
onerror: 错误时触发
onload: 读取成功时触发
onloadstart: 开始读取时触发
onprogress: 读取过程中持续触发
拖拽接口
draggable=\"true\
拖拽事件
目标元素事件
ondragenter 拖拽元素进入时调用
ondragover 停留在目标元素上时调用
ondragleave 离开目标元素时调用
拖拽元素事件
ondrag 整个拖拽过程都会调用
ondragstart 拖拽开始时调用
ondragleave 鼠标离开拖拽元素时调用
ondragend 拖拽结束时调用
地理定位接口
获取位置的方式
ip
gps
wi-fi
手机信号
浏览器会自动选择方式
position.coords.latitude 纬度
position.coords.longitude 经度
position.coords.accuracy 精度
position.coords.altitude 海拔高度
失败的回调参数
error.code 错误码
error.PERMISSION_DENIED 权限不可使用的状态码
error.POSITION_UNAVAILABLE 定位信息不可用的状态码
error.TIMEOUT 超时的状态码
error.UNKNOWN_ERROR 位置错误的状态码
获取位置的其他信息
enableHighAccuracy 是否使用高精度
web存储
sessionStorage
window.sessionStorage
可以存储大概5M左右的数据到本地(当前页面的内存中)
getItem(key) 获取数据
removeItem(key) 指定key删除数据
clear() 清空数据
声明周期为关闭当前页面
localStorage
存储内容的大小大概是20mb
window.localStorage
查询及删除与上面一样
同一浏览器的不同窗口中可以共享数据
在管理控制台的app中可以看到
应用缓存
缓存清单文件
建议后缀名appcache
0 条评论
回复 删除
下一页
