元素的classlist属性是数组吗

来源：蜘蛛抓取(WebSpider) 时间：2016-12-27 06:46 标签： js classlist
[摘要：一.新删标签
&header&用正在页里的头部或版块的头部&/header&&footer&用正在页里的头部或版块的头部&/footer&&section&用去分别地区&/section&&article&主体&/article&
一.新增标签
&header&用在页面的头部或者版块的头部&/header&&footer&用在页面的头部或者版块的头部&/footer&&section&用来划分区域&/section&&article&主体&/article& & & &aside&和主体相关的附属信息&/aside& &article&
&aside&侧边栏&/aside&
&section&内容区域&/section&
&/article&
&time&时间&/time&&datalist&&/datalist&选项列表。与input配合使用，来定义input可能的值 &input type=&text& list=&valList& /&
&datalist id=&valList&&
&option value=/"javascript">script
&address&定义或页面作者信息&/address&&mark&需要标记的词或句子&/mark&&progress max=&100& value=/"76">
进度条输入型控件
email：电子邮箱文本框&，当输入的不是邮箱的时候，验证通不过
tel：号码，输入的不是号码，验证通不过
url：网址，输入的不是网址，验证通不过
range：特定范围内的数值选择器
number：只能包含数字的输入框，并且提供数字加减选择
color：颜色选择器
datatime ：显示完整日期
datatime-local：显示完整日期，不包含时区
time：显示时间，不含时区
date：显示日期
week：显示周
month：显示月表单属性
placeholder：输入框提示信息
autocomplete：是否保存用户输入值
autofocus：指定表单获取输入焦点
list和datalist：为输入框构造一个选择列表（list值为datalist的id）
required：强制用户必须输入
pattern：正则验证；例：pattern=&/d{1,5}&
formaction：在submit里定义提交地址表单验证：
validity对象，通过下面的valid可以查看验证是否通过，如果八字验证都通过返回true，一种验证失败返回false
oTest.addEventListener(&invalid&,fn1,false);
valueMissing：输入值为空时
typeMismatch：输入值与预期类型不匹配
patternMismatch：输入值不满足不满足pattern正则
toolong：超过maxLength最大时
rangeUnderflow：验证range最小值
rangeOverflow：验证range最大值
stepMismatch：验证range的当前值是否符合min、max、step的规则
customError：不符合自定义验证
formnovalidate属性：关闭验证
二.新增选择器
新的选择器
querySelector
用法：var oDiv=document.querySelector('.box'); &//只能选择一组中第一个元素
querySelectorAll & 用法：var oDiv=document.querySelectorAll('.box') &//选择一组中元素，数组
getElementsByClassName &用法：var oDiv=document.getElementsByClassName &('box') &//获取class为box的元素，数组获取class列表属性
classList：
length：class的长度
add()：添加class方法
remove()：删除class方法
foggle()：切换class方法
用法：oDiv.classList.add('box1'); & & oDiv.classList.remove('box3');
& &oDiv.classList.foggle('box2'); &如果oDiv中有box2则删除box2，没有则添加
三.json的新方法
parse()：把转换成json，字符串中属性要严格加上引号
stringify()：把json转化成字符串，会自动把双引号加上
例：var a={name:'lhf'}
var str = JSON.stringify(a);
var b = JSON.parse(str);
alert(b.name);
onhashchange：改变hash值来管理
pushState：三个参数：数据 &标题 & &地址(可选)
popstate事件：读取数据 &event.state
五.元素拖放
draggable & 设置为true，元素就可以拖拽了
&li draggable=&true&&a&/li&
&li draggable=&true&&b&/li&
&li draggable=&true&&c&/li&
拖放事件：
拖拽元素事件：事件对象为被拖拽元素
dragstart，拖拽前触发
drag，拖拽前，拖拽结束之间，连续触发
dragend，拖拽结束触发
目标元素事件：事件对象为目标元素
dragenter：进入目标元素触发，相当于mouseover
dragover：进入目标、离开目标之间，连续触发
dragleave：离开目标元素触发，相当于mouseout
drop：在目标元素上释放鼠标触发
火狐下需要设置dataTransfer对象的setDate方法才可以拖拽除外的其他标签
dataTransfer有以下方法：
setData()：设置数据key和value（必须是字符串）
getData()：获取数据，根据key值，获取对应的value
effectAllowed：设置光标样式（none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized)
setDragImage：三个参数：指定的元素，坐标X，坐标Y
files：获取外部拖拽的文件，返回一个fileslList列表，还有一个type属性，返回文件类型
FileReader
readAsDataUrl ：参数为要读取的文件对象，将文件读取为DataUrl
onload：当读取文件成功时触发此事件
this.result 来获取读取的文件数据，是图片则返回base64格式的图片数据
六. canvas：用于绘制图形
translate：偏移，从起始位置为基准点，移动当前坐标位置
rotate：旋转，参数为弧度
scale：缩放
绘制环境：getContext('2d'); //目前支持2d的场景
fillRect(L,T,W,H)：默认颜色是黑色
strokeRect(L,T,W,H)：带边框的方块设置绘图
fileStyle：填充颜色
lineWidth：线宽度，是一个数值
strokeStyle：边线颜色边界绘制
lineJoin：边界连接点样式：miter（默认）round（圆角）bevel（斜角）
lineCao：端点样式：butt（默认）round（圆角）squre（高多出宽一半的值）绘制路径
beginPath：开始绘制路径
closePath：结束绘制路径
moveTo：移动到绘制的新目标点
lineTo：新的目标点
stroke：画线，默认黑色
fill：填充，默认黑色
rect：矩形区域
clearRect：删除一个画布的矩形区域
save：保存路径
restore：恢复路径绘制圆：
arc(x,y,半径,起始弧度,结束弧度,旋转方向)
x，y：起始位置
弧度与角度的关系：弧度=角度*Math.PI/180
旋转方向：顺时针（默认false）、逆时针（true）
绘制其他曲线
arcTo(x1,y1,x2,y2,r)：第一组坐标，第二组坐标，半径
quadraticCurveTo(dx,dy,x1,y1)：贝塞尔曲线：第一组控制点，第二组结束坐标
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)：贝塞尔曲线，第一组控制点，第二组控制点，第三组结束坐标插入图片：等图片加载完，再执行canvas操作
drawImage(oimg,x,y,w,h)；oImg：当前图片x,y：坐标；w,h：宽高设置背景
createPattern(oImg,平铺方式) &//平铺方式可以是：repeat、repeat-x、repeat-y、no-repeat渐变
createLinearGradient(x1,y1,x2,y2); &线性渐变 第一组参数：起始点坐标，第二组参数：结束点坐标;&addColorStop(位置，颜色)添加渐变点
createRadialGradient(x1,y1,r1,x2,y2,r2); 放射性渐变；第一个圆的坐标和半径，第二个圆的坐标和半径文本
strokeText(文字,x,y)；文字边框
fileText(文字,x,y)；文字填充
font：字体大小
textAlign：默认是start跟left一样的效果end &right & center
textBaseline：文字上下的位置；默认：alphabetic文本、阴影
measureText()：measureText(str).width：只有宽度，没有高度
shadowOffsetX、shaowOffsetY：x轴偏移，Y轴偏移
shadowBlur：高斯模糊值
shadowColor：阴影颜色像素
getImageData(x,y,w,h)；//获取图像数据
putImageData(获取图像,x,y)；//设置新的图像数据
属性：width：一行的像素个数；Height：一列的像素个数；data：一个数组，包含每个像素的rgba四个值，每个值都在0~255之间合成
全局阿尔法值：globalAlpha
覆盖合成：globalCompositeOperation属性将画布导出为图像
topDataUrl事件操作
isPointInPath：是否在点击范围内 & & &jCanvaScript(canvas中的jquery)
七.跨文档消息通信

我要回帖

更多关于 js classlist 的文章

 

随机推荐