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