前端
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 显示模式
none 隐藏元素, 不占空间
block 设为块级, 独占一行, 可以设置宽高
inline 设为内联, 没有宽高, 由内容填充
inline-block 既能在一行显示, 又能设置宽高
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取值
left
左浮动
right
右浮动
none
默认不浮动
浮动规则
浮动只控制自己, 如果他前面的标签是浮动的, 就挨着放, 飘在后面.
如果前面的标签不是浮动的, 就在下一行开始
禁止浮动 clear
不允许元素两边的元素浮动而不是元素本身,如果设置之后有浮动元素
left 禁止左侧有浮动
right 禁止右侧有浮动
both 禁止两边有浮动
none : 允许两边有浮动
父标签塌陷
一个标签内的子元素浮动后, 父标签不会被撑开
解决方案
利用为类选择器和clear属性
.clearfix:after { content: ""; display: block; clear: both; }
定位
偏移量
top: 顶端偏移量, 定义元素相对于其父元素上边线的距离
bottom: 底部偏移量: 定义元素相对于其父元素下边线的距离
left: 左侧偏移量, 定义元素相对于其父元素左边线的距离
right: 右侧偏移量, 定义元素相对于其父元素右边线的距离
定位模式position
static 静态定位
默认值,无定位,不能当做绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。
唯一的用途就是取消定位...
relative 相对定位
以自己原始位置为参照物
移动后还占有原来位置
常用与给绝对定位定坐标
absolute 绝对定位
相对于最近的已定位祖先元素定位, 如果没有会找到body定位
脱离正常文档流, 不会占据空间
通过定位和margin-left 可以设置盒子水平居中
fixed 固定
以窗口为参照物, 脱离正常文档流
堆叠顺序 z-index
定位与浮动
position:absolute | fixed 脱离了正常文档流, 不能进行浮动
选择器
基本选择器
标签选择器 标签名{}
id 选择器 #id {}
类选择器 .class {}
通用选择器 * {}
层级选择器
AND选择器 连放, 比如 a.class {} class类的a标签
OR选择器 逗号隔开, 比如 a, li {} 这两个都会设置这个标签
后代选择器 空格隔开, 比如 div p{} div下的p标签
儿子选择器 >隔开, 比如 div>p {} 只有儿子才算
毗邻选择器 +隔开, 比如 div+p {} 只有紧挨着div的p标签才会被设置
弟弟选择器 ~隔开, 比如 div~p {} div同级后面的p会被设置
属性选择器
[xxx] {} 包含属性xxx的
[xxx="aaa"] {} xxx属性等于aaa的
[xxx~="aaa"] {} xxx属性包含aaa的, 比如多个类这样的
伪类选择器
:hover 鼠标移动到
:before 标签之前
:after 标签之后
js
基础
类型检查
obj instanceof class
typeof 变量名 返回类型
类型转换
转数字
parseInt() 转整数, 如果开头是数字的话, 转数字部分
parseFloat() 转浮点
Number() 比上面的严格, 必须是纯数字才能转换
转字符串
obj.toString() obj必须被初始化, 不能是null或者undefined
String()
转布尔
Boolean()
转换规则
非0数字, 非空字符串, null, undefined转换为false
对象总是true, 即使是一个new 出来的一个空字符串也是true
数据类型
函数
形参个数和实参个数可以不一致
arguments : 函数调用时传递的参数伪数组
匿名函数 : function(){}
引用传递
函数调用
直接调用: this指向调用者, 外部函数实际为window.func()
通过func.apply() 或者func.call()他们可以改变this的指向
func.apply(thisArg, ArgsArray)
func.call(thisArg,Arg1,Arg2...)
如果this是个null的话不会改变this的指向
绑定参数, 返回一个函数
func.bind(thisArg,arg1,arg2...)
escape() url编码
unescape() url解码
变量作用域
js中没有块级作用域, 大括号内声明的变量在外面也可以使用. 只有函数内定义的变量外部不可以访问
变量
全局变量: 使用var声明的, 不能够被delete语句删除
隐式全局变量: 没有使用var声明的, 隐式全局变量可以被delete 关键字删除
局部变量: 函数内用var声明的
预解析
函数和变量的声明都会提前到当前所在的作用域的最上面
面向对象
面向对象
实例化对象
new Object()
设置属性
obj.xxx=xxx 或 obj['xxx'] = xxx
获取属性
obj.xxx 或 obj['xxx']
删除属性
delete obj.xxx 或 delete obj['xxx']
this关键字
函数的调用者
创建对象的方式
工厂方法 :在函数内new 一个Object, 并且返回obj, 这种方式返回的是Object对象
自定义构造方法: 一般这种函数首字母大写, 函数内直接给this赋值, 且不用返回值,这种方式类型已经变了, 可以通过类型检查
继承
原型和原型链
通过在工厂方法或者自定义构造方法中给实例绑定方法比较占用空间
这种问题有两个解决办法, 一种是提前声明方法, 只设置属性名, 另一种就是通过原型来共享这些方法和属性
自定义构造方法的prototype和实例的__proto__都指向了原型对象. 在实例中寻找属性时找不到会去原型对象中查找
所以我们把方法绑定到原型上就可以即绑定给class.prototype就可以共享这些内存了
通过改变原型来实现继承
原型是可以改变的, 可以直接设置为 class.prototype={}, 但是原型中保存着构造方法, 所以要class.prototype={constructor:class}
我们可以把原型变为一个其他类的实例, 这样一来实例找不到的属性就会去另一个类的实例中去寻找, 再找不到就会去到里一个类的原型
原型最终指向Object, Object的原型是null
缺点: 改变原型指向的时候实例化对象时设置了属性, 自己再去设置比较麻烦
借用构造函数来继承
在子类的构造方法中调用父类的构造方法, 通过父类的构造方法来绑定属性
parmentClass.call(this, attr1...)
缺点: 只继承了属性, 无法继承方法
所以经常通过构造函数+改变原型来真正的完成继承
内置对象
Array
声明
字面量方式 var aa = []
构造函数方式 var aa = new Array()
一个参数可以指定长度, 里面的元素回事undefinde
多个参数是里面的值
方法
类方法
Array.isArray(obj) 判断obj是不是数组
实例方法
arr.pop() 移除最后一个元素
arr.shift() 移除数组的第一个元素
arr.push() 追加一个元素
arr.unshift() 在前面添加一个元素
arr.splice() 指定元素分割数组
arr.join() 指定元素连接数组
arr.every(func(val,index,arr){}) 对数组中的每一个元素进行判断, 函数应返回布尔值,全部是true才返回true
arr.filter(func(val,index,arr){}) func也应该返回一个布尔值, 返回满足条件的元素的数组
arr.forEach(func(val,index){}) 循环
arr.indexOf(val) 返回index的索引, 没有返回-1
arr.map(func(val){}) 对每个元素执行func函数, 将结果放在一个新的数组里
arr.reverse() 反转数组
arr.sort([func(index, index+1){}]) 返回排序后的数组
arr.slice(start,end) 索引切片
arr.splice(index, 修改的长度, val) 可以用来插入和删除元素
Math
Math.random()
Date
实例化
new Date() 当前时间
new Date(时间戳)
new Date(时间字符串)
new Date(年, 月, 日, 时, 分, 秒)
类方法
Date.new() 当前的时间戳
实例方法
dt.getFullYear() 获取年
dt.getMonth() 获取月, 需要加1
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.concat(st1,st2) 返回拼接好的字符串
st.indexOf(st2) 返回第一次出现的索引
st.lastIndexOf(st2) 返回最后一次出现的索引 没有返回-1
st.replace(reg|str, newstr) 返回替换后的字符串
st.slice(start, end) 截取字符串
st.split(st1,[num]) 返回切割后的数组
st.substr(start,[length]) 返回截取后的字符串
st.substring(start,[end])
st.toLocalLowerCase() 返回小写
st.toLocalUpperCase() 返回大写
st.trim() 切掉两端空格
st.match(reg) 返回满足正则的字符串数组
Regex
字面量方式
var reg= /正则串/模式
new的方式
var reg=RegExp(/正则串/)
var reg=RegExp("正则串") 双引号里需要转义
方法
reg.test(str) 检查字符串中有没有能匹配的
reg.exec(str) 和str.match()一样, 返回满足正则的数组
模式
g全局模式
i 忽略大小写
RegExp.$n 取第n个组的内容
DOM对象
文档对象模型
节点查找
通过document查找
document.getElementById("ID") 根据ID获取一个元素
document.getElementsByClassName("class") 返回包含带有指定类名的所有元素的节点列表。
document.getElementsByTagName ("x") 根据元素名获取元素的列表
document.getElementsByName("x") 返回包含带有指定标签名称的所有元素的节点列表
通过已经得到的节点查找
查找元素节点
obj.parentElement obj的父标签(元素节点),obj是已查到的元素
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("标签名"); 只能在document对象中创建节点,返回创建的节点对象
添加节点
papa.appendChild(son) 追加一个子节点
papa.insertBefore(son,某个节点) 插入节点
删除节点
papa.removeChild(son); 获得要删除的元素，通过父元素调用删除
替换节点
papa.replaceChild(newson, oldson)
节点内容, 可以通过这些属性来操作页面内容
tag.innerText 标签内的文本内容, 包括子标签的
tag.innerHTML 所有子节点
tag.outerHTML 返回包含自身的所有子节点
节点属性
属性操作
tag.atttributes 所有的属性名
tag.getAttribute("属性") 获取属性值
tag.setAttribute("属性","值") 设置属性值
tag.removeAttribute("属性") 删除属性值
tag.属性 或者 tag.属性=值 也可以用来获取和设置属性
.的方式和方法的方式的区别在于在处理像checked这样可以没有值的属性时, .的方式会返回true和false
class操作
obj.className
obj.classList
obj.classList.remove(cls)
obj.classList.add(cls) 一个一个的添加类
obj.classList.toggle(cls) 有则移除, 没有就添加
obj.classList.contains(cls) 检查是否存在
obj.classList.item(index) 返回该索引位置的类
style操作
obj.style. 只能拿到直接写在标签里的, 拿不到css文件里的一些属性
element.currentStyle(ie) 或者 window.getComputedStyle(element,null)(其他) 都可以返回全部样式
offset系列
offsetWidth 获取元素的宽
offsetHeight 获取元素的高
offsetLeft 获取左边的距离
未脱离文档流就是自己border距离页面左边的距离
脱离文档流就是letf加上margin
offsetTop 获取上面的距离
scroll系列
scrollWidth内容实际宽度, 没有边框, 包含滚动条
scrollHeight 内容实际高度, 没有边框
scrollTop 向上滚动的距离
scrollLeft 向左滚动的距离
client系列
clientWidth: 边框内的宽度
clientHeigth: 边框内的高度
clientLeft: 左边框的宽度
clientTop: 上面边框的宽度
事件
阻止事件冒泡
window.event.cancelBubble = true IE特有的火狐不支持
e.stopPropagation() IE8不支持, 事件绑定没有传参e
事件对象
e.type 事件名
e.clientX 可视区域的横坐标, 鼠标位置
e.clientY 可视区域的纵坐标
e.target 接受事件的目标dom元素
事件类型
scroll 拖动滚动条
获取滚动距离, 普通标签使用scroll就可以
获取整个页面的垂直拖动距离 window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop
事件绑定
event.element.addEventListener("event",func,useCapture)
event没有on
第三个参数是个布尔值, 指定了是在捕获阶段执行, 还是冒泡阶段(默认 false)执行
ie8以及更早不支持该方法
event.attachEvent("event", func)
event必须有on
ie8之前的支持, 备用方法
element.event = func
只能绑定一个事件
阻止默认事件
e.preventDefault()
BOM对象
浏览器对象模型
window 对象
函数和变量以及document对象都属于window, 所以一个函数中的this是window对象
window 可以省略, 所以window.func() 和func()是一样的
window.name 自带的属性, 不要用name这个变量名
window.onload 页面加载完成时的事件 onunload/onbeforeunload IE关闭前
location 对象
地址栏信息
location.hash 地址栏#后面的内容
location.host 主机名端口号
location.name 主机名
location.pathname 路径
location.port 端口
location.protocol 协议
location.search ?后面的内容
location.href/location.assign(url)可以用来跳转,有后退
location.reload()刷新
location.replace(url), 没有历史, 不能后退
history 对象
history.back() 后退
history.forward() 前进
history.go(num) 前进或后退
navigator 对象
navigator.userAgent 浏览器类型
navigator.platform 系统平台所在类型
定时器
指定周期执行任务,返回任务id var timer = setInterval(function(){console.log(123);}, 3000)
根据任务id取消周期任务 clearInterval(timer);
在指定时间后执行任务, 返回任务id var timer = setTimeout(function(){alert(123);}, 3000)
根据id取消定时任务 clearTimeout(timer);
opener 父页面window对象
严格模式
代码前添加 "use strict"; 该有;的地方必须有;
HTML5
html:xt
新标签
nav 导航
header 页眉
footer 页脚
main 文档主要内容
aside 主题之外的内容
article 文章
input新类型
email
tel: 在移动端打开数字键盘
url : 合法网址
number : 有箭头
search : 带个删除按钮
range: 可以设置最大值最小值的一个滑动框
color: 颜色选取
date, time, datetime, datetime-local
month, week
output:
input新属性
placeholder 提示信息
autocomplete : on/off 提示是否关闭
autofocus: 自动获取焦点
required: 必填
pattern: 正则验证
multiple: 选择多个文件, 或填写多个邮箱
from form的id, 表单提交时可以带着这个
list: 指向datalist的id, datalist里是option标签, 有value和lable属性
progress: 进度条, max最大值, value当前值
meter: 度量器high较高值, low最低值, max,min,value
表单新事件
oninput: 内容改变
onkeyup: 键盘弹起时触发
oninvalid: 验证不通过时触发
媒体标签
audio
src播放路径
controls 必须有控制器,才能显示
autoplay: 自动播放
loop: 循环播放
video
src: 视频路径
controls
autoplay
loop
poster:封面,默认第一帧
width
height
source标签
<video><source><source><video>
src视频路径
type: 文件类型 video/mp4
当其中一个source中的类型不支持时, 会播放下一个
新的获取标签的方法
document.querySelector("选择器") 返回满足条件的第一个
document.querySelectorAll("选择器") 返回满足条件的全部
类操作
element.class 全部类
自定义属性
规范
data-开头, 后面至少有一个字符
都应该小写
不要用特殊符号
不要用纯数字
取值: element.dataset[属性名] 注意属性名不再是上面的属性名, 去掉了前面的data, 后面使用骆驼命名法, 去掉-将首字母大写
新增网络事件
online : 网络连通时触发, 这个on不能去掉
offline: 网络断开时触发
全屏接口
开启全屏element.requestFullScreen()
退出全屏 element.canceFullScreen()
是否全屏 element.fullScreenElement
不同的浏览器需要加不同的前缀
谷歌: webkit
火狐: moz
ie: ms
欧朋: o
文件接口 FileReader 对象
new FileReader()
方法
readAsText()
读取文本文件
readAsBinaryString()
读取任意类型的文件返回二进制
redaAsDataURL(二进制文件)
读取文件获得一段以data开头的字符串, DataURL是将资源转换为base64编码的字符串形式, 常用与图像, 将这些内容直接存储在url中, 优化响应速度
没有返回值, 但会在读取完毕后把读取结果放在对象的result属性中, 注意是读取完毕
可以用来做即时响应, 比如选择头像时切换完网页随之变换
abort() 中断加载
FileReader对象事件
onabort: 中断时触发
onerror: 错误时触发
onload: 读取成功时触发
onloadend: 读取完成时触发, 不论成功失败
onloadstart: 开始读取时触发
onprogress: 读取过程中持续触发
拖拽接口
draggable="true" 使元素可拖拽, 图片和超链接可以不用加, 默认可以
拖拽事件
目标元素事件
ondragenter 拖拽元素进入时调用
ondragover 停留在目标元素上时调用
ondrop 在目标元素上松开鼠标时调用 浏览器默认阻止触发ondrop事件, 需要在ondragover里阻止默认事件
ondragleave 离开目标元素时调用
拖拽元素事件
ondrag 整个拖拽过程都会调用
ondragstart 拖拽开始时调用
ondragleave 鼠标离开拖拽元素时调用
ondragend 拖拽结束时调用
可以将目标元素设置为整个document, 让拖拽元素和目标元素之间通过dataTransfer传输数据
可以在拖拽元素开始时存储值, e.dataTransfer.setData(type, val) 这个类型有两种: text/html text/uri-list
这个存储的值只能在ondrop事件中获取, e.daraTransfer.getData(type)
地理定位接口
获取位置的方式
ip
gps
wi-fi
手机信号
浏览器会自动选择方式
使用: 如果存在navigator.geolocation的话, 就说明浏览器支持定位
navigator.geolocation.getCurrentPosition(success,error,option) 成功的回调函数, 失败的回调函数, 以及获取位置的其他信息
回调成功的参数,
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 是否使用高精度
timeout: 超时时间,单位ms
maximumAge: 重新获取地理位置的时间间隔, 单位ms
web存储
sessionStorage
window.sessionStorage
可以存储大概5M左右的数据到本地(当前页面的内存中)
setItem(key,value) 存储数据
getItem(key) 获取数据
removeItem(key) 指定key删除数据
clear() 清空数据
声明周期为关闭当前页面
localStorage
存储内容的大小大概是20mb
window.localStorage
查询及删除与上面一样
同一浏览器的不同窗口中可以共享数据
数据存储在硬盘上, 不会随着浏览器的关闭而清除
在管理控制台的app中可以看到
应用缓存
如果要开启应用缓存, html标签要添加manifest属性, 值为缓存清单文件路径
缓存清单文件
建议后缀名appcache
0 条评论
下一页
