-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjs_note
974 lines (804 loc) · 26.7 KB
/
js_note
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
调试工具
debugger
在代码中加上 chrome执行的时候会在该行停下来
会以表格的形式展示对象
console.table
在控制台快速访问元素
$('css-selector')就可以返回第一个匹配的元素
$$('css-selector')会返回所有匹配的元素
快速找到对应的DOM元素
$0 最后一次
$1 倒数第二次
会记录5个 DOM元素
记录代码执行的时间
console.time('time') console.timeEnd('time')
获取某个函数的Stacktrace
console.trace('trace car')
个性化console.log信息
console.todo = function(msg) {
console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);
}
console.important = function(msg) {
console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);
}
console.todo(“This is something that’ s need to be fixed”);
console.important(‘This is an important message’);
查看某个函数调用和其参数值
monitor(function)
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift + F11 步出,跳出当前自定义函数
var i = 1
function(){
var i = 2
}
i 2
jother编码
//0,1,2,3,4,5没有什么技巧
+[] //0
+!![] //1
!![]+!![] //2
//6 = 2 * 3
[!![]+!![]]*[!![]+!![]+!![]] //6
//7 = 10 - 3 8 = 10 - 2,9 = 10 - 1
[+!![]]+[+[]]-[+!![]+!![]+!![]] //7
加法不需要加[] cost=1
<input file="file" accept="image/*;capture=camera">这样应该能进行相册的访问或是拍照
return confirm('确定要删除吗?');
this.parentNode.parentNode.submit();
location.href ="http://www.baidu.com";
window.location = "http://www.baidu.com"
php
hreder('Location:http://www.baidu.com')
hreder('refresh:2;url=http:///www.baidu.com')
'use strict';
开启static模式 变量没用 var 则会报错
JavaScript把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true
JavaScript是网景(Netscape)公司开发的一种基于客户端浏览,面向(基于)对象,事件驱动式的网页脚本语言
一种轻量级的编程语言
可插入html页面的编程代码
插入html页面后,可由所有的现代浏览器执行
面向(基于)对象
js是一种弱类型语言,本身是没有类class和对象这个概念,但是我可以通过js代码去模拟实现这个过程,所以我们说js也可以说是面向对象的
内部使用javascript
<script language='javascript'></script>
<script type="text/javascript"></script>
<script></script>
javascript是所有现代浏览器以及html5中默认脚本语言
外部调用javascript
<script src='文件路径'></script>
外部脚本不能包含<script>标签
数据类型
字符串
Number 数字
NaN not a Number NaN === NaN //false isNaN
Infinity 无穷大 除数为0时 1/0
布尔
数组
对象
null
undefined
运算符
算术运算符
+ - * / % ++ --
比较运算符
> < >= <= == != === !==
逻辑运算符
&& || !
赋值运算符
= += -= *= /= %=
字符串运算符
+
如果把数字与字符串相加,结果将成为字符串
浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值:
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
流程结构
顺序结构
分支结构
?: 三元
if else if else
switch(变量){
case 值1:
代码1;
break;
default:
如果以上条件都不满足,则执行该代码;
}
循环结构
for
while
do while
for(var i in arr){}
break 结束整个循环
continue 结束当前循环
函数
系统函数
自定义函数
function 函数名(参数,参数){
return 表达式;
arguments[] 实参的集合
}
ES6
function foo (a, b, ...rest) {
console.log(rest);
}
foo(1,2,3,4,5); //Array[3,4,5] 无值时 为 Array[] 不是 undefined
匿名函数
var i = function(){
return 表达式;
}
i();
自调匿名函数
(functino(){return 表达式;})();
JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里
addEventListener(type, function, bool)
removeEventListener(type, function)
event.stopPropagation();
事件 event
事件绑定
行内绑定
<标签 元素属性列表 事件=''></标签>
动态绑定
dom对象.事件 = 事件处理程序
事件监听
增加
IE dom对象.attachEvent(事件,事件处理程序)
W3C dom对象.addEventListener(事件,事件处理程序,capture)
w3c浏览器,事件是不需要写on的
capture
ture 冒泡模型(IE只支持此模型 )
false 捕捉模型
阻止冒泡
IE window.cancelBubble=true
W3C event.stopPropagation()
IE事件监听倒序执行事件程序 W3C正序
删除
IE dom对象.detachEvent(type,callback)
W3C dom对象.removeEventListener(type,callback)
阻止标签默认行为
IE window.event.returnValue = false
W3C event.preventDefault()
谁调用函数this指针就指向谁 行内绑定this指向window
事件对象
在事件触发过程中,会自动生成一个事件对象,该对象保存了触发对象的相关信息
鼠标单击事件:会保存x,y信息
键盘按下事件:会保存键盘ascll码
IE window.event
W3C function(event){event.}
return flase
阻止 右键,文本输入,表单提交
onload 网页加载完成
onunload 页面关闭
onresize 当页面重定大小的时候
onscroll 当移动滚动条时
onclick 单击事件
ondbclick 双击事件
onmouseover 当鼠标放上时
onmouseout 当鼠标移开时
onmousedown 当鼠标按下
onmouseup 当鼠标抬起
onmousemove 鼠标移动
onkeypress 键盘按下
onkeydown 当按键按下
onkeyup 当按键抬起
onpress 当键盘按键
oncontextmenu 当右键点击
onchange 当内容发生改变的时候
onselect 文本元素被选中时
onblur 当文本框失去焦点
onfocus 当文本框获得焦点
onsubmit 当单击"提交按钮"时
onreset 当单击"重置按钮"时
BOM对象
window对象 在BOM模型中 window是处于最顶端的
window.alert() 弹出提示框
window.confirm() 确认框
window.prompt() 弹出一个输入框
window.open() 打开一个窗口
window.close() 关闭窗口
window.blur() 失去焦点
window.focus() 获得焦点
window.print() 打印当前网页
var winObj = window.open(url,name,options)
moveBy(x,y) 相对移动
moveTo(x,y) 绝对移动
resizeBy(x,y) 相对大小
resizeTo(x,y) 绝对大小
scrollBy(x,y) 相对滚动
scrollTo(x,y) 绝对滚动
setInterval(表达式,毫秒) 间隔型
setTimeout(表达式,毫秒) 延时型
clearInterval(定时器对象)
clearTimeout(定时器对象)
window.navigator浏览器软件对象
userAgent 当前浏览器的版本 浏览器的用户代理字符串
platform 操作系统
appCodeName 浏览器内核名称
appName 浏览器名称
appVersion 浏览器版本(内核)
onLine 在线(对应就是脱机工作)
cookieEnabled cookie是否可用
systemLanguage 系统语言
userLanguage 用户语言
window.location地址栏对象 当前地址栏
host 主机名称
port 端口号
href 是指完整的url地址
assign(url) 加载新文档
pathname 路径和文件名
protocol 访问协议
search 从问号开始的URL部分
hash 锚点名称
reload([true]) 重载网页,相当与"刷新"按钮 参数为true时 不使用缓存
window.history浏览历史对象
length 有多少条历史记录
back() 相当于"返回"按钮
forward() 相当于"前进"按钮
go() 跳到指定的历史记录,-1上一页,1下一页
html 5
pushState() 修改referrer 修改当前页面在 history 中的记录 改变当前url地址
replaceState 不会在window.history里新增历史记录点
window.screen屏幕对象
width 指屏幕的宽度
height 指屏幕的高度,屏幕分辨率
availWidth 有效宽度,不含任务栏
availHeight 有效高度,不含任务栏
colorDepth 颜色
window.document对象
对象集合
all[] 提供对文档中所有HTML元素的访问
anchors[] 返回对文档中所有Anchor对象的引用
applets 返回对文档中所有Applet对象的引用
forms[] 返回对文档中所有Form对象引用
imges[] 返回对文档中所有Area和Link 对象引用
table对象
rows[] 返回表格行
cells[] 返回表格列
deleteRow() 删除一行
insertRow() 插入一个新行
select对象
options[] 返回所有option组成的一个数组
id 设置或返回下拉列表的id
length 返回下拉列表中的选项数目
name 设置或返回下拉列表的名称
selectedIndex 当前选中的option的索引号
size 设置或返回下拉列表中的可见行数
add() 向下拉列表添加一个选项
blur() 从下拉列表移开焦点
focus() 在下拉列表上设置焦点
remove() 从下拉列表中删除一个选项
option对象
var op = new Option('文本','值')
创建一个option对象
text 指<option></option>中的文本
value 指option对象的value值
index 指每个option对象的索引号
selected 当前option是否选中
length 长度
对象属性
documentElement 文档根节点
body 对body元素的直接访问,对于定义了框架集的文档,该属性引用最外层<frameset>
cookie 设置或返回与当前文档有关的所有cookie
domain 当前文档的域名
lastModified 文档被最后修改的日期和时间
referrer 载入当前文档的文档的URL
title 当前文档的标题
URL 当前文档的URL
linkColor 超链接颜色
alinkColor 作用中的超链接颜色
vlinkColor 作用后的超链接颜色
bgColor 背景颜色
fgColor 字体颜色
对象方法
write() 向文档写HTML表达式或JavaScript代码
writeln() 等同于write()方法,不同的是在每个表达式之后写一个换行符
open() 打开一个流,以收集来自任何write()或writeln()方法的输出
close() 关闭用document.open()方法打开的输出流,并显示选定的数据
节点 element
document.getElementById() 获取id元素
getElementsByTagName() 获取一组标签元素
getElementsByName() 获取一组name元素
getElementsByClassName() 获取一组class元素 (ie 5~8中无效)
querySelector() 用class获取第一个元素 css选择器 选一个
querySelectorAll() 用class获取一组元素 css选择器 集合
createElement(tagname) 创建元素节点
TextNode(text) 创建文本节点
Attribute(name) 创建属性节点
Comment(text) 创建文本text的注释节点
DocumentFragment()创建文档碎片节点
父.appendChild(node) 把一个节点插入到另一个节点里面去
父.insertBefore(子节点,谁之前)
父.removeChild(child) 删除节点
父.replaceChild(para,child) 替换节点
element.accessKey 设置或返回元素的快捷键
tagName 返回元素的标签名 始终是大写
className 元素的class
parentNode 节点(元素)的父节点
获取 注释,文字
childNodes 子节点列表
firstChild 元素的首个子元素(ie)
lastChild 元素的最后一个子元素(ie)
previousSibling 元素的上一元素(ie)
nextSibling 元素的下一元素(ie)
不获取 注释,文字 ie9及其他浏览器
children 子节点列表 非标准属性,但兼容很好,不包括空白节点(ie包含注释)
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
childElementCount 子节点数量
innerHTML 节点(元素)的文本值
attributes 节点(元素)的属性节点
nodeName 返回节点名称 (只读)
nodeValue 规定节点的值
nodeType 返回节点的类型 (只读)
1 Element 类型 元素
2 属性
3 Text类型 文本
8 注释
9 Document 类型 文档
11 documentFragment
getAttribute(name) 获取一个节点属性的值
setAttribute(name,valur) 给一个节点增加属性,name是属性名,value是属性值
removeAttribute(name) 删除节点的属性
系统类
object类 所有类的基类,可以无需定义构造函数
hasOwnProperty(property) 判断对象是否有某个特定的属性.必须用字符串指定该属性
isPrototypeOf(object) 判断该对象是否为另一个对象的原型
propertylsEnumerable(property) 判断给定的属性是否可以用for...in语句进行枚举
toString() 返回对象的原始字符串表示.对于object类,ECMA-262没有定义这个值,所以不同的ECMAScript实现具有不同的值.
valueOf() 返回最适合该对象的原值.对于许多类,该方法返回的值与toString()的返回值相同
数学类 Math里都是静态的方法属性不用new
Math.abs(x) 取绝对值
Math.ceil(x) 进行上舍入
Math.floor(x) 进行下舍入
Math.round(x) 四舍五入为最接近的整数
Math.max(x,y) 返回x和y中的最高值
Math.min(x,y) 返回x和y中的最低值
Math.pow(x,y) x的y次方
sqrt(x) x的平方根
random() 返回0~1之间的随机数
Math.floor(Math.random()*11)
Math.floor(Math.random()*(max-min+1)+min);
返回一个介于0和10之间的随机数数
字符串类
length 获取字符串中字符的长度
indexOf() 从左到右查找一个字符 没有找到返回-1
substr() 获取区域字符(包含结束位置)
substring() 获取区域字符(负数为0)
toLowerCase() 小写
toUpperCase() 大写
replace('old',new) 查找替换
slice() 获取区域字符(负数为倒数)
charAt() 指定的字符
charCodeAt() 指定字符的编码
fromCharCode() 编码转换字符
lastIndexOf() 从右到左查找一个字符
search() 查找字符(正则)
match() (正则)
.sort(function(a,b){return a.localeCompare(b)})
按照本地语言方式排列
tirm() 去除空格 // 注意:IE9以下的版本没有trim()方法
日期时间
getYear() 获取年份(会有兼容问题)
getFullYear() 取得四位的年份
getMonth() 取得当前的月份(0-11)
getDate() 取得今天是几号(1-31)
getDay() 获取星期
getHours() 取得小时数
getMinutes() 取得分钟数
getSeconds() 取得秒数
getMilliSeconds() 取得毫秒数
getTime() 取得1970年1月1日到现在的毫秒数
toLocaleString() 用本地字符串来显示日期时间信息
toLocaleDateString()用本地字符串来显示日期信息
数组
var arr = new array() 创建数组
arr.length 数组长度
添加
arr.push() 从数组结尾增加一个元素
arr.unshift() 从数组头部增加一个元素
arr.splice(index,howmany,element) 在指定位置,插入指定数量的元素
删除
arr.pop() 从数组结尾删除一个元素
arr.shift() 从数组头部删除一个元素
arr.arr.splice(index,howmany) 删除指定位置中的指定数量元素
截取
arr.slice(start[,end]) 截取指定位置的元素
arr.splice(start, length) 截取指定长度的元素 改变原来的数组
合并
arr.concat(arr1,arr..) 把数组合并起来
数组与字符串的转换
arr.join('|') 把数组转换为字符串
str.split('', howmany) 把字符串转换为数组
排序
arr.sort([sortNumber]) 数组排列顺序 可选参数为按照数值大小排序
reverse() 反转数组
every 检测组数中的元素是否都合法
bool array.every(function(item, index){
return item > 20;
})
some() 和every差不多 只要数组中有任何一个元素满足条件就为true
includes() 方法用来判断当前数组是否包含某指定的值
map //使用与改变数组每个元素
function fun(x, index, array){
return x+1;
}
arr.map(fun);
reduce //适用于 求数组合计的操作
function fun(count, value, index, array){ //最少要有两个参数
return x + y;
}
reduce(fun)
filter //适用于删除数组不要的元素
function fun(x){
reutrn x && x.trim(); //判断字符串是否为空
//返回false时会删除该元素
}
array.filter(fun);
arr.filter(function (element, index, self) {
return self.indexOf(element) === index; //去重
});
sort 默认以字符串排序 sort直接改变当前的数组
arr.sort(function(x, y){
if(x < y){
return 1;
}
if(x > y){
return -1;
}
return 0;
}); //从大到小排序
RegExp对象 正则表达式
自定义类
定义构造函数
function Class(){}
实例化
var c1 = new Class();
var obj = new Object();
添加属性 对象名.name 对象名.[name]
删除属性 delete 对象名.属性
静态属性 类名.属性名
静态方法 类名.方法名
检测属性是否存在 '属性' in 对象 有可能是继承来的
检测自身是否拥有 对象.hasOwnProperty('属性')
共有属性 this指针定义的属性
私有属性 var定义的属性
call|apply 改变内部的this指向 执行函数
call(thisObj[,par1[,parn]])
apply(thisObj[,parArray])
thisObj:要引用的对象
par:要引用的参数
类的继承
object原型继承方式
object.prototype.ext=function(parObject){
for(var i in parObject){
this[i]=parObject[i];
}
}
此方法主要是遍历父类对象,并把父类中的属性和方法循环赋值给子类对象
call模拟继承方式
子类中 parClass.call(this[,param])
子类中包含父类
通过原型对象的方式
sonObj.prototype=new perClass
建议采用第三种 因为前两种会增加子类的内存占用空间
json 属性的无序集合 用{}来表示这个集合
同一json对象可有多个属性,属性之间用逗号隔开
属性名与属性值之间是通过冒号分割
json对象主要用来保存大数据或复杂数据
JSON.parse(text);
原型链
每个类都存在一个原型对象
在类构造中,存在一个prototype属性,该属性指向类的原型对象
在原型对象中,也存在一个属性constructor,指向类构造器
调用对象的某一个属性时,其首先在对象内部寻找该属性,如果寻找不到,那么将到该构造器的原型对象中去寻找.
添加属性 及 方法
类名.prototype.属性名=''
类名.prototype.方法名=function(){}
原型对象是基于 Object基类创建的实例化对象
类名.prototype = new Object
var cat = {}
//显示
Object.getPrototypeOf(cat).name //获取cat原型链上一层
cat.__proto__.name
//隐士
cat.name
闭包
所谓"闭包",值的 是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分
理解
闭包就是函数内部定义的函数,并作为返回值
该函数可能引用外部的变量
作用
可以调用局部变量
闭包会一直驻留在内存中
注:由于闭包会导致变量以及函数一直驻留在内存中,所以可能会一起内存泄漏,所以不用时,请值空:null
获取css样式
getComputedStyle(obj,null).attr (IE 678不兼容)
null 伪类
(obj).currentStyle.attr (FF不兼容)
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr]; //兼容IE
}else{
return getComputedStyle(obj,false)[attr];
//兼容FF (元素,伪元素(没有可以null))
}
}
function getStyle(obj,attr){return obj.currenStyle?obj.currentStyle[attr]:getComputedStyle(obj)[arrt];}
异常捕获
try{
alert(2/0)
}catch(e){
throw new Error(e)
}
${name}
Map 是一组键值对的结构, 具有极快的查找速度
var m = new Map([['a',1],['b',2]]);
m.set('Adam',67); //添加新的 键值对
m.has('Adam'); //是否存在 键值对 Adam
m.delete('Adam'); //删除键值对
Set 是一组key的集合, 不存储value. 由于key不能重复, 所以, 在Set中, 没有重复的key
var s = new Set([1,2,3,"3"]);
s.add(4); //添加新的元素
delete(4); //删除
ES6中 array map set 都属于 iterable
具有 iterable 类型的集合可以用 for ... of 循环来遍历
iterable内置的 forEach 方法, 它接收一个函数, 每次迭代就自动毁掉该函数.
var a = ['a', 'b', 'c'];
a.forEach(function (element[, index, array]) {
//element: 当前元素的值
//index: 当前索引
//array: Array对象本身
});
//forEach() 方法是ES5.1 标准引入的, 你需要测试浏览器是否支持
//Set与Array 类似, 但Set没有索引, 因此回调函数的前两个函数都是元素本身
let代替var 可以申明一个块级作用域的变量
const 定义常量 也具有块级作用域
apply() 指定函数this指向那个对象
fun.apply(obj,['param'=>1]);
call() 同上 传递的参数不用数组, 按照顺序
fun.call(obj,2,3,4,5);
对普通函数调用,我们通常把this绑定为null
装饰器
var count = 0;
var oldParseInt = parseInt; // 保存原函数
window.parseInt = function () {
count += 1;
return oldParseInt.apply(null, arguments); // 调用原函数
};
// 测试:
parseInt('10');
parseInt('20');
parseInt('30');
count; // 3
var 声明变量
typeof(i) 判断一个变量的类型
对象 instanceof 类 对象是否属于类
obj.constructor 调用对象的结构器
eval(str) 计算某个字符串,并执行其中的代码 (转换类型)
cssText 添加行间样式
styleFloat(IE) cssFloat(非IE)
.后面的值无法修改 []里面的值可以随便改
一个未定义的变量:报错
一个未定义的属性:un
toFixed()
Number() 转换为数值
parseInt 提取整数值
parseFloat 提取浮点数
isNaN 判断数字
浏览器计算后样式的宽
offsetWidth 实际的宽度
offsetHeight 实际的高度
offsetLeft 实际的左边距
offsetTop 实际的上边距
screenLeft 屏幕的总宽
screenTop 屏幕的总高
document.body.scrollTop(竖)
document.body.scrollLeft(横)
document.documentElement.scrollTop(竖)
document.documentElement.scrollLeft(横)
滚动距离
document.documentElement.clientWidth
document.documentElement.clientHeight
innerWidth
innerHeight
可视区尺寸
outerWidth()
outerHeight()
火狐支持 IE不支持
var oEvent=ev||event; 兼容方法
event.clientX event.clientY
返回鼠标水平 垂直坐标(ie)
function(ev){oEvent.clientX oEvent.clientY}
返回鼠标水平 垂直坐标(ff)
oEvent.keyCode 键值
ctrlKey shiftKey altKey 按下时返回true
clientX clientY 窗口坐标
pageX pageY 网页坐标
screenX sxeeenY 屏幕坐标
type 事件类型
Ajax
Ajax可以通过 img iframe 实现 但限制于get方式
Asynchronous 异步
javascript
and
xml
就是利用javascript与xml实现异步传输数据的功能
//创建ajax对象(兼容)
var oAjax = null;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest();
}else{
//兼容IE
oAjax=new ActiveXObject("Microsoft.XMLHTTP")
}
//连接服务器
//open(请求方式,请求地址,是否异步默认true)
oAjax.open('GET',url,true)
//设置请求头信息
//setRequestHeader(header,value) post时必须设置
oAjax.setRequestHeader("content-type","application/x-www-form-urlencoded")
//发送请求
oAjax.send(content)
get请求可为null
readyState 状态码
Ajax对象从创建到初始化到发送请求道接受数据时,他的状态码会发生改变
0(未出始化)还没有调用open()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法完成,已收到全部响应内容
3(解析)正在解析响应内容
4(完成)响应内容解析完成,可以在客户端调用了
onreadystechange 当Ajax对象的状态码发生改变时所触发的回调函数
status http的相应状态码
200 成功
404 未找到文件
statusText http的相应状态文本
responseText 服务端返回的数据(字符串形式)
responseXML 服务器端返回的数据(xml形式)
//接收返回
onreadystatechange事件
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
fnSucc(oAjax.responseText)
}else{
if(fnFaild){
fnFaild()
}
}
}
}
get请求缓存问题
在IE浏览器,ajax发送get请求时,第一次请求结果会缓存起来,如果下次请求的url与之前的相同,浏览器会将之前的缓存结果输出
1 随机数
url='1.php?...&_'+Math.random();
2 时间戳
url='1.php?...&_'+new Date().getTime();
3 设置请求头
setRequestHeader("If-Modified-Since","0")
4 禁止缓存 (响应头设置 php)
header("Cache-Control:no-cache,must-revalidate")
设置响应头信息
header('Content-Type:text/xml);
将返回的json字符串转换成js对象
var json=eval('('+oAjax.responseText+')');
function unMove(obj,attr,speed,target,endFn){
distance = parseInt(getStyle(obj,attr))<target?speed:-speed;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var distance = parseInt(getStyle(obj,attr))+speed;
if(distance > target && speed > 0 || speed<target && speed < 0){
distance = target;
}
obj.style[attr] == speed + 'px';
if(distance == target){
clearInterval(obj.timer);
endFn && endFn();
}
},30);
}
cookie
function setCookie(name,value,iDay){
var oDate=new Date();
oDate.setDate(oDate.getDate()+iDay);
document.cookie= name+'='+value+';expires='+oDate;
}
function getCookie(name){
var arr=document.cookie.split(';');
var i=0;
for(i=0;i<arr.kength;i++){
var arr2=arr[i].split('=');
if(arr2[0]==name){
return arr2[1];
}
}
return '';
}
function removeCookie(name){
setCookie(name,'1',-1);
}
格式:名字=值
document.cookie= "A=1"
不会覆盖
过期时间:expires=时间
var reader = new FileReader();
reader.onload = function(e) {
htmlImage = '<img src="'+ e.target.result +'" />'; // 这里e.target.result就是base64编码
}
reader.readAsDataURL(file);
es6
// 初始化 使用默认值
npm init -y
// 转义工具
npm install -g babel-cli
npm install --save-dev babel-breset-es2015 babel-cli
.babelrc
{
"presets": [
"es2015"
],
"plugins": []
}
var
let
const
关键字
bareak
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with
保留字
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
fimal
float
goto
implements
import
int
interface
long
mative
package
private
protcted
public
short
static
super
synchronuzed
throws
transient
volatile