欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

2020/7/11 js复习笔记

程序员文章站 2022-06-22 16:55:28
2020/7/11严格模式下不被允许的 eval() 能执行字符串里面的东西,该能改变作用域vara=1;varm=eval("a+1");console.log(m);//2改变作用域:不被允许,是魔鬼XML: 与HTML基本一直,但区别 标签可以随便自己定义 这个数据格式被抛弃,用jsonDOM树 继承关系:Document 后面还有HTMLDocument 和XMLDocudment XML没写获取body head 直......

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