Dom
属性的分类
- 1.浏览器已经绑定的属性叫固有属性(property)
- 自定义属性(attribute)不能通过 . 来调用
- 相关属性和方法
- attributes属性返回指定节点的属性集合
- getNamedItem()方法可返回指定的属性节点
- nodeValue访问属性的值
- 调用attributes下的removeNamedItem()方法可删除元素属性
attributes['url'].nodeValue // 访问指定的元素属性值
- 创建属性:
var att = document.createAttribute('data-toggle');
att.value = 'toggle';
div.attributes.setNamedItem(att);
- 操作属性:
- getAttribute()可以获得指定属性名的属性值
- setAttribute(属性名,属性值)为元素添加指定的属性,并为其赋指定的值,如果传入的属性是不存在的,则创建
- removeAttribute()可以删除指定的属性
布尔属性
- checked属性
- 其属性值为true即可勾选复选框
- 是input的固有属性
- 调用select元素的options属性得到所有的option集合
- readOnly跟disabled的区别:
- disabled被提交到后台,它的值是不会被获得到的,反之readOnly是可以获得到的
- accesskey属性给元素定义访问到它的快捷键
- 使用dataset属性获得data属性定义的值
javascript事件详解
-
构成
- 事件对象 button
- 事件绑定事件类型
- 事件句柄1
-
事件分类
-
HTML事件:在html中写js代码,不利于代码复用
缺点:违反了“结构与行为相分离”的原则,应尽可能少用
-
Dom0级事件:事件对象的属性添加绑定事件
特点:实现了结构与行为分离,但元素只能绑定一个事件类型
-
Dom2级事件:btn.addEventListener(‘click’,function (){}, false)
特点:高级事件处理方式,一个事件可以绑定多个监听函数
-
-
Dom0级与Dom2级区别:
- Dom2支持同一Dom元素注册多个同种事件
- Dom2新增了捕获和冒泡的概念
- Dom0级兼容所有浏览器( Dom2级 兼容chrome、firefox IE9及以上等)
-
removeEventListener:remove参数要跟add参数一致,注意匿名函数是不相同的
-
针对IE8及IE8以下:
- attachEvent函数(Dom2级事件) 添加绑定事件
- detachEvent函数 为事件解绑
-
addEventListener() 第三个参数:
- False,整个事件是事件冒泡(子向父) 默认
- true,整个事件为事件捕获(父向子)
-
IE的事件模型中没有“事件捕获”阶段
-
Event对象属性和方法(主流浏览器及IE9以上):
- type属性:返回事件类型
- target属性:事件源,点击目标
- currentTarget属性:事件绑定目标
- preventDefault方法:阻止浏览器的默认行为
- stopPropagation方法:阻止事件冒泡捕获
- clientY:浏览器顶部底边到鼠标位置,不包括滚动条距离
- pageY:浏览器顶部底边到鼠标位置,包括滚动条距离
- screenY:屏幕顶部到鼠标位置
-
Event对象属性和方法(IE8及IE8以下):
- type属性:返回事件类型
- srcElement属性:返回点击源
- returnValue = false 阻止浏览器 默认行为
- cancelBubble = true 取消事件冒泡或事件捕获
事件类型
-
UI事件
- load事件:当页面完全加载后在window上面触发
应用场景:window、img(图片预加载)、js和css动态加载
- unload事件:用户从一个页面切换到另外一个页面
- resize事件:窗口发生变化时触发
- scroll事件:滚动条发生滚动时触发
- focus:获得焦点(不支持冒泡)
- blur:失去焦点
- focusin:等同于focus事件,支持冒泡
- focusout:等同于blur,支持冒泡
-
点击事件
- mousedown:鼠标按下事件
- mouseup:鼠标松开事件
- mousedown和mouseup事件区分浏览器
- mousemove:鼠标移动事件
- mouseover:进入目标元素或者其子元素执行(管自身,也管子元素)
- mouseout:鼠标移开
- mouseenter:只能进入目标时候才去触发(只管自身)
- mouseleave
-
键盘事件
- keydown:按下键触发,支持keyCode
- keyup:释放键触发,支持keyCode(键码)
- keypress:按下字符键触发,支持keyCode(支持不稳定) charCode(Ascll码)
- textInput:支持event.data 该属性返回输入的值
-
其他事件
- DOMNodeRemoved: 任意元素被删除时触发(对象是document)
- DOMContentLoaded:在Dom树之后就会触发,不理会图像’JavaScript、css文件或其他资源是否加载好 速度一定比load事件快
- hashchange:给window添加 地址栏#后面的地址发生改变时触发
- 支持event.oldURL 和event.newURL
-
移动端事件
- touchstart:手指触摸到屏幕时触发
- touchmove:手指在屏幕滑动时触发
- touchend:手指离开屏幕时触发
- touchcancel:当系统停止跟踪触摸时触发
正则表达式
- 功能
- 查找、替换、数据有效性验证
- 零碎知识
- 汉字在unicode的范围: \u4e00-\u9fa5
- [] 匹配中括号里的任意一个字符
- ^取反
- . 除了\n,任意字符都可以匹配到
- test和exec
- test()是测试 返回是true或false
- exec()是执行 将找到的字符串以数组形式返回, 找不到返回null
- 模式修饰符
- i :忽略大小写
- g :全局匹配
- m2 :多行匹配
- 别名
- \w代表a-zA-Z0-9_等范围
- \d代表数字0-9范围
- \s匹配空格和制表符
- \S匹配除了空格和制表符之外的任意字符
- 在正则中,大写的转义字符一般表示小写的反面
- 符号匹配
- {1,}表示匹配至少1次或者很多次
- {0,1}至少匹配0次且最多匹配1次
- *表示可能没有或者有很多次
-
- 影响的是它前面的字符,表示至少一次
- 贪婪匹配
- ? 将贪婪匹配转换为非贪婪匹配
- 非贪婪匹配在条件允许的情况下尽可能少匹配
- 选择、分组和引用:
- | :选择。当多个选择时,从左边开始跟字符串匹配 一旦匹配上,后面的会忽略
- css|html|js -->css 选择最先匹配的
- (): 分组
- var pattern = /(ab)c/; 此时是捕获性分组,括号里面的字符将在数组的第二个元素中显示。
- 如不需要捕获,则在括号字符前面加上?: 表示非捕获 var pattern = /(?:ab)c/;
- 引用: \1代表第一个分组 以此类推
- | :选择。当多个选择时,从左边开始跟字符串匹配 一旦匹配上,后面的会忽略
- 指定匹配位置:
- 始匹配:^
- 末匹配:$
- 单词边界匹配:\b
- 前瞻性匹配:
- 当Java后面紧跟着script的时候匹配Java var pattern = /java(?=script)/;
- 负前瞻性:
- 当Java后面紧跟着不是script的时候匹配Java var pattern = /java(?!script)/;
- 实例方法
- exec方法无论实例多少次,都是从第0个位置开始获取
- 实例属性
- ignoreCase: 判断匹配模式是否有i,返回boolear值
- global:判断模式g
- multiline:判断模式m
- source:返回字面量的字符串
- lastIndex属性非全局模式下,默认是0。当在全局模式下,值就是匹配字符的下一个位置当匹配结束后,重置为零
- 构造函数属性:
- RegExp.input:返回待匹配的字符串 别名:$_
- lastMatch:返回最近一次匹配的字符 别名:[’$&’]
- leftContent: 上一次匹配左边剩余的字符
- lastParen:上一次匹配捕获到的分组
- 构造函数的引用:$1
- String对象中与正则表达式相关的方法:
- search:返回模式在匹配字符串中位置,当结果返回-1则代表没有匹配成功
- str.search(pattern)不受全局匹配影响,只返回一个结果
- match:与exec方法类似,不同在于分组,全局匹配会返回所有匹配到的内容
- split:将分隔符把字符串组成数组,作用与join方法相反
- replace:参数1是被替换的内容,参数2是替换内容
- search:返回模式在匹配字符串中位置,当结果返回-1则代表没有匹配成功