2020/7/11 js复习笔记
2020/7/11
严格模式下不被允许的 eval() 能执行字符串里面的东西,该能改变作用域
var a = 1;
var m = eval("a+1");
console.log(m);//2
改变作用域:
不被允许,是魔鬼
XML: 与HTML基本一直,但区别 标签可以随便自己定义 这个数据格式被抛弃,用json
DOM树 继承关系:
Document 后面还有HTMLDocument 和XMLDocudment XML没写
获取body head 直接document.body document.head
获取节点:
获取元素节点:
IE8一下获取滚动距离 有这俩个方法,但是互相冲突,一个有值,另外一个一定是0
所以计算时 滚动距离直接相加
除了IE8就用pageXOffset获取滚动条距离
浏览器有俩种渲染模式,一种是标准模式,一种是怪异模式,启动怪异模式就会向下兼容,没有下面这个就是怪异模式,他是来声明文档类型,告诉浏览器用哪种规范来声明文档
为什么div.style可以直接设置样式 因为div.style 会产生带有所有样式的对象
但是div.style只能读写行内样式
只有上.style才能写入改变css
window.getComputedStyle(div,null) 另外一种获取样式值方法
返回一个类数组,是当前样式的显示值,什么叫显示值,可能多个方面要作用同一个样式,显示的最后合在一起的结果 如 window.getComputedStyle(div,null).width
注意获取后的值是计算后的值,如 设置了颜色值为red 返回的是rgba形式,设置10em 返回是160px
获取显示样式用这个 获取行内样式.style
IE8以下不支持Window.getComputedStyle支持下面属性
ele.currentStyle.width 获取元素宽度 与getComputerStyle区别获取的不是计算值,单位假如是em 获取的就是多少em
获取伪元素的方法:
JSON.stringify() 将对象转化为 字符串类型的JSONs数据格式
var obj = {
name: "kkk",
age: 1230
}
console.log(JSON.stringify(obj)); //{"name":"kkk","age":1230}
console.log(typeof JSON.stringify(obj)); //string
JSON.parse()方法 将JSON数据格式转换为普通的对象
var json = '{ "name": "kkk", "age": 1230 }';
console.log(JSON.parse(json)); //{ name: 'kkk', age: 1230 }
console.log(typeof JSON.parse(json)); //object
defer IE9以下可以用
IE9 以上 等其他浏览器都行
aysnc 只能加载外部脚本 就是不能在它的内部写js代码
动态创建script标签 因为是异步的,所以在引入外部js文件的时候,回去执行后面的程序,这就有可能报错,因为可能还没读完程序就在下面用了 所以用到了load事件
加载完了才会触发事件
正则表达式:
转义符号\ 使用完后就把后面的符号 这了是”看成字符串
var str = "abc\"vnkd"
console.log(str);
将\看成字符串
var str = "abc\\vnkd"
console.log(str);
\t 制表符产生空格
var str = "abc\tvnkd"
console.log(str); //abc vnkd
\n 换行
var str = "abc\nvnkd"
console.log(str);
创建正则表达式的2种方法,用test方法来检测
var reg = /abc/i;
var str = "Abcs";
var reg2 = new RegExp("abc", "i")
console.log(reg.test(str)); //true
console.log(reg2.test(str)); //true
m 多行匹配
test是正则表达式的方法,符合返回true;还有一个match方法 会将符合正则表达式的所有部分以数组的形式返回
var reg = /abc/ig;
var str = "Abcsabcndnvklabc";
console.log(str.match(reg)); //[ 'Abc', 'abc', 'abc' ]
常见符号:
[] :表示取里面的任意一个 有几个这个符号就是取几个
^ : 在符号[]里面表示非 ; 外面表示以什么开头
() :优先关系
| : 或关系 (a|b) a或者b
元字符:
\w ===[0-9A-z_]
\W===[^\w]
\d===[0-9]
\D===[^\d]
\s 查找 空白字符 空格符,换行符,等为空的符
\S===[^\s]
\b===单词边界
\B===非单词边界 以n为边界开头是对的且s结尾是非边界 错误s也是边界,null
var str = 'ac nnks dv';
var reg = /\bnnks\B/g;
console.log(str.match(reg)); //NULL
\t
\n 匹配时注意,不是手动给字符串空格,换行能匹配上 是字符串本身能学习上的
.===[^\r\n] :表示除了换行和行结束符
量词:贪婪匹配原则 尽量匹配多的
n+ 匹配任何一个包含至少出现一次
n*表示出现次数>=0
var str = 'abc';
var reg = /\w*/g;
console.log(str.match(reg)); //[ 'abc', '' ]
n? 表示匹配0~1个
var str = 'abc';
var reg = /\w?/g;
console.log(str.match(reg)); //[ 'a', 'b', 'c', '' ]
n{X} 匹配X个 确定的
n{X,Y} 匹配X-Y个尽量Y个不行就少点
var str = 'abcbskjbvk13 vsdl fn455v54 435vds';
var reg = /\w{3,5}/g;
console.log(str.match(reg)); //[ 'abcbs', 'kjbvk', 'vsdl', 'fn455', 'v54', '435vd' ]
n{x,} 表示匹配x到正无穷
exec()方法
从头开的匹配 index是游标位置开始匹配 每执行一次游标向后移动 到达下一个匹配点 index就是下一次匹配成功的开始位置,注意一定要是全局匹配,否则游标不会移动,到了最后一个 再执行返回是null 再在执行就会返回到首部开始新一轮移动
var str = 'ablabababab';
var reg = /ab/g;
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
console.log(reg.exec(str));
reg.lastIndex 直接输出游标的位置 为exec()而存在 手动控制匹配位置
需求 匹配形如aabb类型的字符,
这就用到了反向引用: 将第几个匹配成功的字符copy一份
加括号有变成子表达式的作用
\1表示把第一个子表达式copy一份 \2把第二个表达式copy一份
var str = 'aabbccddeevslkvvll';
var reg = /(\w)\1(\w)\2/g;
console.log(str.match(reg)); //[ 'aabb', 'ccdd', 'vvll' ]
search()方法返回匹配成功东西的位置,加g和不加没区别都是返回第一个匹配成功的位置,没有匹配返回-1
replace(reg,’替换上的’) 替换匹配成功的 正则一次能替换多个
var str = 'aabbccddeevslkvvll';
var reg = /(\w)\1(\w)\2/g;
console.log(str.replace(reg, '2222'));
split(reg) 注意写子表达式,切割后会被保留一个,不写才干净的切割
var str = 'aa1bbc0cddee1vslkv0vll';
var reg = /\d/g;
console.log(str.split(reg)); //[ 'aa', 'bbc', 'cddee', 'vslkv', 'vll' ]
replace精华:
需求将形如aabb类型的转换为bbaa类型
被替换的东西一定要加” ” 在replace里面用$表示反向引用
还可以写函数 返回一个字符串就行了
案列: 将 the-first-name 类型转换为大驼峰形式
var str = 'the-first-name';
var reg = /-(\w)/g;
str = str.replace(str[0], str[0].toUpperCase());
console.log(str.replace(reg, function($, $1) {
return $1.toUpperCase();
})); //[theFirstName]
要用$反向引用子表达式 第一个参数就是$ 后面$1表示引用第一个子表达式 一个小()就是一个子表达式
案列: 选出带有修饰符的
选出有后面跟着b的a
var str = 'abanladjabsl';
var reg = /a(?=b)/g;
console.log(str.match(reg));// [ 'a', 'a' ]
选出有后面不是跟着b的a :正向预查
var str = 'abanladjabsl';
var reg = /a(?!b)/g;
console.log(str.match(reg)); //[ 'a', 'a' ]
打破贪婪匹配模式
var reg=/a{1,3}?/g; 不加?会尽量的匹配多个 加上就会尽量匹配最少那个
var reg=/a??/g 第一个?是量词0~1 再加上? 就变成尽量取0个了
本文地址:https://blog.csdn.net/qq_44755188/article/details/107293633
推荐阅读
-
【JS复习笔记】03 继承(从ES5到ES6)
-
AMD 7nm/35W锐龙9 4900HS笔记本续航实测:11个半小时
-
联想首款Win11笔记本IdeaPad Slim 7发布:锐龙5000+90Hz OLED屏
-
2020年11月windows7安装使用nodejs
-
前端JS基础知识复习笔记(18)---AXIOS
-
(精华)2020年7月16日 JavaScript 插件 dropZone.js拖动文件上传
-
js utc时间格式(2020-11-27T02:58:41.000000Z)转换成北京时间
-
Beego 学习笔记7:JS分页
-
最新 抖音 X-Gorgon 0408 和8408 算法定位查找过程笔记 最新抖音xg算法13.3版本 2020-11-11
-
Vue.js 学习笔记 第7章 组件详解