js的重要知识点

Posted 2020-08-17

一、事件 1-26
1、onmousedown
定义：onmousedown事件会在鼠标按键被按下时发生

2、onmouseup
定义：onmouseup事件会在鼠标按键被松开时发生

3、onmousemove
定义：onmousemove事件会在鼠标指针移动时发生
支持该事件的js对象：document
但是onmousemove默认情况下没有任何对象的一个事件；
因为鼠标移动频繁发生。

4、onmouseover
定义：onmouseover事件会在鼠标指针移动到指定的对象上时发生

5、onmouseout
定义：onmouseout事件会在鼠标指针移出指定的对象时发生

6、onclick单击事件
定义：onclick事件和onmousedown不同。单击事件是在同一元素上发生了
鼠标按下时间之后发生了鼠标放开时间是发生的。
理解：鼠标按下抬起以后事件才发生。

7、onfocus光标移入事件
定义：onfocus事件在对象获得焦点时发生

8、onblur光标移出事件
定义：onblur事件会在对象失去焦点时发生

9、oncontextmenu右键事件
鼠标按下右键的时候发生

10、onsubmit
onsubmit事件会在表单中的确认按钮（submit）被
点击是发生。

11、onkeydown
onkeydown事件会在用户按下一个键盘按键时发生

12、onkeyup
obkeyup事件会在键盘按键被松开时发生

13、onload
onload事件会在页面或图像加载完成后立即发生

14、onscroll
onscroll事件拖动滚动条时发生

15、onresize
onresize事件会在窗口或框架被调整大小时发生

16、onmousewheel
onmousewheel事件ie、chrome下鼠标滚轮滚动时发生

17、DOMMouseScroll
DOMMouseScroll事件是标准下（ff)鼠标滚轮事件，
鼠标滚轮滚动时发生

18、onreadystatechange
onreadystatechange事件：当请求被发送到服务器时；
我们需要执行一些基于响应的任务。每当readyState
改变时，就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
在onreadystatechange事件中，我们规定当服务器响应
已做好被处理的准备时所执行的任务。

19、attachEvent绑定事件
ie下的绑定事件，2个参数，第一个什么事件，第二个执
行函数（倒序执行）。注意this指向
如：obj。attachEvent（‘onclick’，aaa）
function aaa（）{}

20、addEventListener绑定事件
标准下的绑定事件，3个参数。1什么事件（不加ON），
2执行函数 3、一个布尔值。true是捕获阶段，false是
冒泡阶段

21、event对象指事件的状态

简单的：一个 存了 事件详细信息的东西

网上较专业的：Event对象代表事件的状态，比如事件在其中发生的元素
键盘按键的状态，鼠标的位置，鼠标按钮的状态，通常
与函数结合使用。

22、clientX、clientY
在Event对象下获取鼠标位置

23、cancelBubble =true
在Event对象下取消冒泡事件

24、keyCode
在Event对象下获取用户按下键盘的哪个按键

25、preventDefault（）
阻止默认默认事件的绑定写法

26、return false
阻止默认时间的普通写法

 

二、DOM 27-46
27、getElementById
通过id获取某一个元素

28、getElementsByTagName
通过标签名获取一组元素的集合

29、childNodes
获取子节点，但是标准下会获取空白节点
获取第一级子元素的节点

30、nodeType
节点类型
1）元素节点（标签）2）文本节点（空白节点）

31、children
获取子节点，但是没有兼容性问题
获取第一级子元素的节点

32、firstElementChild || firstChild
标准下：firstElementChild ie不支持
ie下是 firstChild
获取子元素里的第一个

33、lastElementChild || lastChild
标准下：lastElementChild ie不支持
ie下是 lastChild
获取子元素里的最后一个

34、nextElementSibling || nextSibling
标准下：nextElementSibling ie不支持
ie下 nextSibling
获取子指定元素的下一个兄弟节点

35、previousElementSibling || previousSibling
标准下： previousElementSibling ie不支持
id：previousSibling
获取指定元素的上一个兄弟节点

36、parentNode
获取父节点

37、offsetParent
获取有定位的父节点，都没有定位的话父节点就是body

38、offsetWidth-----有问题
获取元素的实际宽度（width+padding+border）

39、offsetHeight
获取元素的高度（height+padding+border）

40、clientWidth
获取元素的内部宽度（width+padding）

41、clientHeight
获取元素的内部高度（height+padding）

42、createElement（标签名）
创建一个节点

43、appendchild（节点）
追加一个节点

44、insertBefore（节点，原有节点）
在已有的元素前面插入

45、removeChild（节点）
删除一个节点

46、replaceChild（节点，已有节点）
替换已有的节点

 

三、BOM操作： 47-53
47、window。open（）
打开窗口

48、window。close（）
关闭窗口,标准下不支持

49、window。location
获取浏览器地址

50、window。location。href
获取整体的网址

51、window。location。search
获取问号？后面的内容，包括问号

52、window。location。hash
获取警号#后面的内容，包括警号

53、window。location。reload（）
自动刷新，定时器配合

53、window。navigator。userAgent
获取浏览器信息

 

四、js基础： 54-126
54、if else 如果。。。。否则。。。

55、switch 如果

56、？： 三木，就是如果。。。否则。。。

57、for（）{} for循环

58、for in

59、while=for

60、continue 终止本次循环 
if（i=2）continue 跳过这个条件

61、break 终止当前循环 
if(i=3)break 结束本次

62、undefined 未定义

63、null=========？

64、=== 只比较，不转换类型

65、== 不仅比较，而且还会将两个东西转换成相同的类型

66、= 赋值

67、！ 就是 不 的意思

68、setTimeout 
设置定时器，2秒钟后，执行一次，并且只执行一次，---定时炸弹

69、clearTimerout
清楚定时器，清理setTimerout

70、setInterval
设置定时器，每两秒执行一次

71、clearInterval
清楚定时器，清理setInterval

72、arguments
实参的元素集合

73、call
改变this取向
fn名.call（this，‘black’）第一个参数是函数之行的环境，
从第二个参数开始，才是函数的真正参数

oDiv.onclick = function(){
toChange.call(this,‘black‘); 
};
function toChange(sColor){
this.style.background = sColor;
}

74、apply
改变this取向，
function show(a, b)
{
alert(‘this是：‘+this+‘\na是：‘+a+‘\nb是：‘+b);
}
show(12, 8);
show.apply(document, [12, 8]);
第二个参数是以数组形势存在的

75、callee ===============？调用这个函数自身的

76、var arr=【】； 声明一个数组

77、var arr=new Array（） 声明一个数组

78、push 
向数组的末尾添加一个或更多元素，并返回新的长度

79、pop
删除数组最后一个元素，并返回这个元素

80、shift
删除数组第一个元素，并返回这个元素

81、unshift
向数组的开头添加一个或多个元素，并返回新的长度

82、splice
删除元素，并向数组添加新的元素

83、join（）
把数组的所有元素放入一个字符串。元素通过指定
的分隔符进行分隔

84、sort（）
对数组的元素进行排序

85、concent----concat（）？
连接两个数组或者多个数组，并返回结果

86、split
分割字符串，获得数组

87、substring
获取字符串
包括开始不包括结束

88、indexOf
从前往后检索字符串

89、charAt
获取某个字符

90、var re=//； 声明一个正则对象

91、var re=new RegExp() 声明一个正则对象

92、search 查找一个字符串，只找第一次出现的位置

93、month ===============？
match-匹配符合正则的东西，挑东西返回数组

94、test 用正则检验字符串是否符合它所规定的规则

95、replace 替换，把符合规则的东西替换成字符串

96、量词：{n，m}至少出现n次，最多出现m次
+许多 
* {0,} 0到任意次
？零次或者一次{0,1}
{n，}最少n次，最多不限
{，m}最少不限最多m次
{n}正好n次

97、字符类：
1[abc]2 1和2中间出现a或b或c
[^0-9]排除数字以外所有都可以
[a-z]所有的英文
[0-9]所有的数字

98、标识： i 忽略大小写 g 全局匹配

99、首尾： ^ $

100、转义：
\d 查找数字 [0-9]
\D 除了数字[^0-9]
\s 空白
\b 单词边界
\w 数字字母下划线--用户名
. 任意字符
\. 代表.本身

101、var oDate= new Date（） 获取当前时间

102、getHours（） 获取小时

103、getMinutes（） 获取分钟

104、getSeconds（） 获取秒

105、getFullYear（） 获取年

106、getDay（） 获取星期

107、getDate（） 获取当前的时间日期

108、setDate（） 设置一个月的某一天

109、var oImg=new Image（） 创建一个image对象

110、什么叫ajax
通过XMLHttpRequest与服务器通信，进行无刷新操作

ajax采用的是异步请求

111、同步与异步的区别

同步就是同一时间做一件事
异步就是同一时间做多件事

112、ajax的交互方式
1）发送数据并返回 （）（注册）
2）只发送不返回 （）========？例子
3）不发送只返回 （股票）

113、post与get的区别
1）发送方式不一样：get加载网址问好后面的
post把数据放在一个传输体中发送上去的

2）安全不一样
post相对安全，get不安全

3）网址长度不一样
ie下get网址超过2048字节将被截断
post没有上限

4）缓存问题
get可以缓存网址，post不会缓存网址

5）用途不一样
get：查询数据，post修改数据

114、发送数据是什么样的？
串联化数据：key1=value1&key2=value2

115、返回数据是什么样的？
返回的是字符串

116、跨域：jsonp？
（利用script标签跨域）
在头部创建个script标签，
改变script标签中src

117、ajax的编写步骤？
1）创建ajax对象（要有手机）
2）链接服务器open（拨号）
3）监听数据返回onreadystatechange（听）
4）发送数据send（说）
5）close（忽略）（挂了）

118、json怎么取？=========？
通过串联化数据

119、什么是对象？
对象是一个整体，对外提供一些操作。||
黑盒子，看不到内部的样子，
能看到表面的按钮

120、什么是面向对象？
使用对象时，只关注对象提供的功能，
不关注其内部细节，比如jQuery ||
使用一个东西的时候，不去管内部是
怎么做的，只用好它的功能

121、引用类型是什么意思？=========？

122、this的本质其实就是这个方法或者函数
属于哪个对象的，this就是谁。函数前面有new
的时候this会失效。

123、原型是什么？ =========？
原型就是给一类对象加东西

124、面向对象怎么写？=========？

125、继承采用什么方式？
采用原型链的方式继承

126、面向对象变成的特点？
封装、继承、多态

 

五、常用技巧：
1、加开关：bBtn
例如：
<script>
window.onload = function(){
var aLi = document.getElementsByTagName(‘li‘);
var aImg = document.getElementsByTagName(‘img‘);

for(var i=0;i<aLi.length;i++){
aLi[i].bBtn = true; // ------设置开关
aLi[i].index = i;

aLi[i].onclick = function(){

if(this.bBtn){
aImg[this.index].src = ‘on‘ + this.index + ‘.png‘;
this.bBtn = false;
}

else{
aImg[this.index].src = ‘off‘ + this.index + ‘.png‘;
this.bBtn = true;
}

};
}
};
</script>

2、加索引：index；
例如：
<script>
window.onload=function()
{
var oBtn=document.getElementById(‘btn‘);
var aBtn=oBtn.getElementsByTagName(‘input‘);

var oText=document.getElementById(‘text‘);
var aDiv=oText.getElementsByTagName(‘div‘);

for(var i=0; i<aBtn.length; i++)
{
aBtn[i].index=i; //先添加索引值
aBtn[i].onclick=fn1;
}
function fn1()
{
alert(this.index); //后获取索引值

aDiv[this.index].style.background=‘yellow‘;
}
};
</script>

 

3、递归===============?

4、枚举================？

5、定时器：
setInterval（）