javascript进阶-CSDN博客

本文链接：https://blog.csdn.net/weixin_45102270/article/details/113360899

文章目录

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
- 事件绑定事件类型
- 事件句柄¹
事件分类
- 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 :全局匹配
- m² :多行匹配
别名
- \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是替换内容