JiM-W

keep Moving


  • 首页

  • 分类

  • 关于

  • 归档

  • 标签

jQuery核心

发表于 2016-07-10 | 分类于 jQuery

jQuery核心

一 对象访问

1 each(callback)方法:定义 $(“selector”).each(callback),为每一个匹配到的元素作为上下文 执行callback函数;

  • 首先这是一个循环,会给所有匹配到的DOM元素执行callback函数;
  • 每次执行传递进来的callback函数的时候, 函数中的this关键字都指向不同的元素(注意this指的是DOM对象,而不是jquery对象,$(this)可以返回jquery对象)
  • 每次执行函数的时候,都会给函数传递一个当前执行函数的元素在所有匹配到的元素集合中的所处位置作为参数(从0开始的整形)
  • 如果callback中 return:false ,将停止循环;返回 true 将继续执行循环函数

2 get(index)方法,将匹配到的jquery对象作为DOM对象返回:定义 $(“selector”).get(index),可以返回第几个DOM元素

  • 如果不传参数 $(“selector”).get(),那么将返回所有匹配到的DOM元素集合;
  • 如果传递参数 $(“selector”).get(n)那么将返回匹配到的第n个DOM元素;

3 length属性和size()方法 $(“selector”).length ,\$(“selector”).size() 将返回匹配到的所DOM元素的个数;

4 context属性和selector属性 $(“selector”).context 返回DOM元素被选中的上下文 ,\$(“selector”).selector 返回选择器;

5 $(‘selector’).index() :如果不传参数,那么返回匹配元素在其同辈元素中的位置

二 核心函数

1 jQuery(“selector”,[context]) :选择器 在context中查找元素 ,不仅仅可以匹配到页面中的DOM元素,还可以匹配到script等,如下栗子

1
2
3
<script id="jq" src="jquery-1.12.2.js"></script>
<script> code here </script>
$("#jq"):获取唯一id的script (第一个) $("script") :获取页面中所有的script,此语境下可以获取两个;返回的同样是jQuery对象那个,然后也可以用jQuery的方法。

2 jQuery(html) :可以创建元素 $(“

通过jquery动态创建元素

“);

3 jQuery(function(){ }) :文档就绪执行函数

4 $(“button”).click(function () { $(“div”).each(function (index, domEle) { // domEle == this $(domEle).css(“backgroundColor”, “yellow”); if ($(this).is(“#stop”)) { $(“span”).text(“Stopped at div index #” + index); return false; } });});

三 : each(callback) 函数的每次循环都会向函数传入一个index元素位置参数的理解:

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid #000;
height: 50px;
width: 100px;
margin: 0 auto;
}
</style>
</head>
<body>
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
$("button").click(function(){
$("div").each(function(index,DOM){
console.log(arguments);
console.log(index+DOM);
})
});
});
</script>
</body>
</html>

each(callback)中的回调函数中有两个参数,一个是 代表元素当前位置的整形数值,从0开始;一个是当前的DOM元素。(注意不是jQuery对象)

四 $ 或者 jQuery (注意不是jquery) 是顶级对象.

1
console.log($) console.log(jQuery) 结果是一样的;

注意区分 $.each(obj,callbakc)需要传入两个参数,一个对象,一个函数;\$(“selector”).each(callback),只需要传入一个函数即可; callback函数中也会传入两个参数,第一个是当前元素的索引位置(从0开始计),第二个是当前DOM元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
console.log($.each);//结果如下
each: function( obj, callback ) {
var length, i = 0;
if ( isArrayLike( obj ) ) {
length = obj.length;
for ( ; i < length; i++ ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
} else {
for ( i in obj ) {
if ( callback.call( obj[ i ], i, obj[ i ] ) === false ) {
break;
}
}
}
1
2
3
4
console.log($("selector").each) //结果如下
each: function( callback ) {
return jQuery.each( this, callback );
}

HTML5 拖拽

发表于 2016-07-08 | 分类于 HTML5

HTML5的高级API

1,全屏API:DOM元素支持全屏,HTML5的标准写法是 ele.requestFullScreen( ), 即可使DOM元素全屏;但是由于该方法处于不够完善,所以需要写各个浏览器的兼容代码;

1
2
3
4
5
6
7
8
9
10
11
12
if(this.webkitRequestFullScreen){
this.webkitRequestFullScreen();
}else if(this.mozRequestFullScreen){
this.mozRequestFullScreen();
}else if(this.requestFullScreen){
this.requestFullScreen();
}else if(this.msRequestFullscreen){
// ie 比较恶心
// 去 微软的 开发中中心查询 MSDN
// msRequestFullscreen
this.msRequestFullscreen();
}

2,拖拽API:拖拉事件(drag&&drop)

拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里。

拖拉的对象有好几种,包括Element节点、图片、链接、选中的文字等等。在HTML网页中,除了Element节点默认不可以拖拉,其他(图片、链接、选中的文字)都是可以直接拖拉的。为了让Element节点可拖拉,可以将该节点的draggable属性设为true。

draggable属性可用于任何Element节点,但是图片(img元素)和链接(a元素)不加这个属性,就可以拖拉。对于它们,用到这个属性的时候,往往是将其设为false,防止拖拉。

注意,一旦某个Element节点的draggable属性设为true,就无法再用鼠标选中该节点内部的文字或子节点了

首先来看有哪些拖放(drag和drop)的事件,如果要是元素可以拖拽,

首先要给该元素设置 draggable = true 属性,保证该元素可以被拖放.(img标签默认支持拖放,div默认不支持拖放)

拖拽元素的监听事件如下:

  • ondrag 当拖动元素的时候运行脚本被拖动的元素在拖动过程中持续触发
  • ondragstart 当元素拖动操作开始时候运行脚本
  • ondragend 当拖动操作结束的时候运行脚本

目标元素的上的监听事件如下:在默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认处理给关掉 给目标元素设置 e.preventDefault() 阻止默认事件的发生;使得被拖放元素可以放入目标元素里面。

  • ondragover 当元素被拖动至有效拖放目标元素上方时持续执行脚本

  • ondragenter 当元素被拖动至有效拖动目标元素时执行脚本

  • ondragleave 当元素离开至有效拖放目标元素时运行脚本

  • ondrop 当被拖动元素正在被放下的时候运行脚本;注意,如果当前节点不允许drop,即使在该节点上方松开鼠标键,也不会触发该事件。如果用户按下Escape键,取消这个操作,也不会触发该事件。该事件的监听函数负责取出拖拉数据,并进行相关处理。注意:只有鼠标松开才算放下,鼠标松开的时候才会触发该事件

    dragenter和dragover事件的监听函数,用来指定可以放下(drop)拖拉的数据。由于网页的大部分区域不适合作为drop的目标节点,所以这两个事件的默认设置为当前节点不允许drop。如果想要在目标节点上drop拖拉的数据,首先必须阻止这两个事件的默认行为,或者取消这两个事件。

注意如果想要使目标元素可以被放进来拖放的元素,因为默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。此时需要对目标元素进行处理,调用dragover阻止默认事件 的方法:

1
2
3
目标元素.ondragover = function(event){
event.preventDefault() ;
}

3 代码演示

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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
}
div {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.left {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
div>img {
width: 70px;
height: 70px;
margin: 10px;
background-color: ;
}
/* 使用css来修改 定义一个 高亮的颜色 */
.right.active {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="left">
<img src="imgs/lofter_1_noval_icon_ (1).jpg" alt="">
<img src="imgs/lofter_1_noval_icon_ (2).jpg" alt="">
<img src="imgs/lofter_1_noval_icon_ (3).jpg" alt="">
</div>
<div class="right"></div>
</body>
</html>
<script>
// .right 盒子 元素移入 颜色高亮
document.querySelector('.right').ondragenter = function () {
// this.style.background = 'lightgray';
this.classList.add('active');
// $(this).addClass('active');
}
// .right 移出 颜色还原
document.querySelector('.right').ondragleave = function () {
// 颜色 就是 直接设置透明
// this.style.background = 'transparent';
// this.style.background = 'rgba(0,0,0,0)';
this.classList.remove('active');
}
// 为了能够触发drop 必须设置如下代码,给目标元素设置阻止默认处理方式,允许元素可以被放置
document.querySelector('.right').ondragover = function (event) {
event.preventDefault();
}
// drop .right盒子绑定
// img 拖拽开始的 时候 保存为 全局变量
var imgs = document.querySelectorAll('.left>img');
// 当前移动的 img
var moveImg = undefined;
// 循环绑定,给每个拖拽元素设置拖拽事件,每个元素被拖拽时触发该事件
for(var i=0;i<imgs.length;i++){
imgs[i].ondragstart = function(){
// 保存为全局变量
moveImg = this;
// 打印是否保存
console.log(moveImg);
}
}
document.querySelector('.right').ondrop = function () {
// moveImg.ondrop = function () {
console.log('进来了');
// 将 丢进来的 元素 设置为 子元素
// 获取丢进来的元素 在拖拽img的时候 将当前拖拽的img 存起来获取保存的img
// 通过全局变量 moveImg 添加给自己
document.querySelector('.right').appendChild(moveImg);
// 还原 自己的颜色
this.classList.remove('active')
}
</script>

HTML5 文件读取API

发表于 2016-07-08 | 分类于 HTML5

HTML5 文件读取 <input type="file"/> 元素input=file的新增API

fileAPI主要有5个:

FileUpload:当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄

FileList:可以看成一个对象,包含上传文件的相关信息,其中包括了File对象

File:可以看成是FileList的一个属性,它包含了文件的基本信息

FileReader:HTML5新增的API ,可以理解成一个封装好的函数,文件的读取都是由它完成的,如果需要使用需要new操作符创建一个读取对象;

FileError:这个类可以自己生成,主要用来提示文件操作中的错误,

DataTransfer,,Blob,。

首先,从源头来理解:看一下demo我们简单做一个工作中常用的头像上传的功能:

html代码:

1
2
3
4
5
6
7
<body>
<input type="file"/>
<input type="button" value="上传头像"/>
<div style="border: 1px solid #000 ;width:200px;height: 200px;">
<img src="" alt="" width="200px"/>
</div>
</body>

script代码:功能实现是点击input=button上传头像的按钮,可以将input=file里面的选择的文件上传;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
document.querySelector("input[type=button]").onclick = function(e){
var fileDom = document.querySelector("input[type=file]");
console.log(fileDom.files);//FileList
console.log(fileDom.files[0]);//File
// 获取文件
var file = fileDom.files[0];//File
// 创建HTML5文件读取对象
var reader = new FileReader();
console.log(reader);
// 从这个File对象可以获取name、size、lastModifiedDate和type等属性。
//把这个File对象传给FileReader对象的读取方法,就能读取文件了。
//// 调用文件读取对象的方法
reader.onload = function(){
console.log("读取完毕");
console.log(reader.result);
document.querySelector("img").src = reader.result;
}
// reader.readAsText(file);
reader.readAsDataURL(file);
//注意执行顺序,onload之后,会执行 reader.readAsDataURl(file),然后才进入函数体,无阻塞事件
}
</script>

1 当我们没有先选择文件的时候,直接点击button按钮,此时控制台输出如下

因为没有选择文件上传,所以此时FileList的length为0 ;

1
2
FileList {length: 0}//fileDom.files
FileReader {readyState: 0, result: null, error: null, onloadstart: null, onprogress: null…}//

2 如果我们选择一个文件上传之后,此时在点击button,此时控制台输出:(注意fileDom.files[0]中的0 代表什么,注意比较两种情况下FileList对象的属性,第一种没有上传文件的情况下,FileList对象只有一个属性值 length:0;而在第二种首先上传文件的情况下,FileList对象的属性为 0:File, length:1,console.log(fileDom.files[length])也能输出length属性对应的值)

1
2
3
FileList {0: File, length: 1} //fileDom.files
File {name: "04_kiss.jpg", lastModified: 1486178231000, lastModifiedDate: Sat Feb 04 2017 11:17:11 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 47689…} //fileDom.files[0]
FileReader {readyState: 0, result: null, error: null, onloadstart: null, onprogress: null…}

3 文件上传之后——FileList对象——FileList对象包含File对象——File对象里面又包含了以下API:

1
2
3
4
5
lastModified :文件修改
lastModifiedDate
name :文件名
type :文件类型
size :文件大小

4 FileReader 对象的相关API如下:

该对象的 方法将确定如何读取文件的方式,然后将读取到的文件存在其属性reader.result里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
error: null
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
readyState:
result:
DONE: 2
EMPTY: 0
LOADING: 1
abort:
function abort()
function readAsBinaryString:
function readAsBinaryString(File Object)
function readAsDataURL(File Object)
function readAsText(File Object);

5 .FileError这个类可以自己生成,主要用来提示文件操作中的错误,以下基本为常量,可直接使用【类名.属性】

1
2
3
4
5
6
7
8
9
10
11
12
ABORT_ERR: 3
ENCODING_ERR: 5
INVALID_MODIFICATION_ERR: 9
INVALID_STATE_ERR: 7
NOT_FOUND_ERR: 1
NOT_READABLE_ERR: 4
NO_MODIFICATION_ALLOWED_ERR: 6
PATH_EXISTS_ERR: 12
QUOTA_EXCEEDED_ERR: 10
SECURITY_ERR: 2
SYNTAX_ERR: 8
TYPE_MISMATCH_ERR: 11

HTML5 web存储

发表于 2016-07-01 | 分类于 HTML5

HTML5 web存储:

1 window.localStorage.setItem(key[string],data[string]); 可以将数据存储在用户端;

2 window.localStorage.getItem(key[string]);可以将setItem存储的数据取出来;

3 window.localStorage.clear(),会将客户端存储的数据全部清空;

4 window.localStorage.removeItem(key) ; 可以删除客户端指定的已经存储起来的数据;

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
<body>
<h1>请输入你的名字</h1>
姓名<input type="text" value="1"/>
年龄<input type="text" value="2"/>
<input type="button" value="保存"/>
</body>
</html>
<script>
// 用户第一次进来点击保存,将用户输入的内容保存在客户端
// 获取点击保存按钮,将内容保存在客户端
document.querySelector("input[type=button]").onclick = function(){
// 获取输入的内容
var inputValue = document.querySelector("input[type=text]").value ;
console.log(inputValue);
// 如何创建一个HTMl5的WEB存储,将inoutValue 存储在userName中
// window.localStorage.setItem(key[string],data[string]);
window.localStorage.setItem('userName',inputValue);
}
// 用户第二次进入的时候,页面加载完毕之后,将第一次输入的内容保存
window.onload = function(){
window.localStorage.clear()
//可以将所有存储在客户端的数据清除;
//window.localStorage.key(2);
//将之前web存储的内容取出来
// var userName = window.localStorage.getItem(key[string])
var userName = window.localStorage.getItem('userName');
console.log("取出来的userName值为"+userName);
if(userName == undefined && userName !== ""){
document.querySelector("h1").innerHTML = '请输入您的名字';
}else{
// 将取出来的内容添加到欢迎行
document.querySelector("h1").innerHTML = userName +"欢迎您";
}
}
</script>

操作属性节点

发表于 2016-06-22 | 分类于 css

1 DOM里面操作元素的属性节点:

1
2
3
4
5
6
7
8
9
10
11
12
ele.removeAttribute("属性名"),删除属性节点;
ele.setAttribute("属性名","属性值") ,设置属性节点;
ele.getAttribute("属性名"),获得属性节点的值;
设置属性里面的style属性的值:
ele.style.property = "value",设置样式属性值;ele.property = "value"设置元素属性值;
ele.className = "value" ,可以用来修改 类名;也可以用来获取类名
HTML5中新增了classListAPI 可以操作类名
ele.classList.remove("类名");可以用来移除类名 必须有参数
ele.classList.add("类名") ;可以用来增加类名 必须有参数
ele.classList.toggle("类名") ;判断该元素是否有此类名,有的话则加上,没有的话则删除;
ele.classList.length ;可以返回该元素拥有的类名的的个数;
ele.classList.contains("类名") ;返回布尔类型的值,如果包含该类名则返回true,不包含的话,则返回false;

2 jquery中操作元素的属性节点:

1
2
3
4
5
6
7
8
$("selector").css('property'),$("selector").css('property','value'),可以用来*获取*或者*设置*样式(style)属性里面的样式属性值;注意只能获取style样式属性里面的属性值;其底层运作就应用了getComputedStyle以及getPropertyValue方法。
$("selector").attr("property"),$("selector").attr("property","value"),可以*获取*或者*设置*固有属性以及新增属性 ; 新增属性会在DOM树结构中显示。
$("selector").removeAttr("property") 可以移除固有属性以及由attr设置的新增属性,会将属性直接从DOM树上移除;attr设置属性会在DOM树上显示;不能移除由prop设置的属性;
$("selector").prop("property"),$("selector").prop("property","value"),可以*获取*和*设置*固有属性以及新增属性,但是新增属性不会再DOM树上显示
$("selector").removeProp("property") 可以移除固有属性以及由prop设置的属性,但是仅仅是删除属性值值变为undefined;不能移除由attr设置的属性;
$("selector").addClass("class1 class2") 为每一个匹配的元素添加类名,如果添加多个类,则需要用空格分开;
$("selector").removeClass("class1 class2") 为每一匹配的元素删除类名,如果移除多个类名,则需要用空格分开
$("selector").toggleClass("class") 为每一匹配的元素添加或者删除类名,存在则删除,不存在则移除;

3 “ . “操作符只能获取内嵌式的属性值,不能获取内联(style标签里面)式和外联式的属性;通过”.”也可以直接设置属性值,但是只能是固有属性的值,不能新增属性

1
2
3
ele.property 获取属性值(固有属性)
ele.property = "value" 设置固有属性值,不能设置新增属性给元素,如果设置了新增属性,并不能在DOM树上显示;
可以这么理解,DOM元素是一个对象,"."操作符可以为对象添加属性,无论是否是固有属性,都会为这个新增的属性开辟存储空间,只不过固有属性会在DOM树上显示,而新增属性不会再DOM树上显示,但是其设置的值还是存在的。

4 “.” 操作符 和 setAttribute(“property”,”value”)设置属性的区别

  • “.” 设置固有属性 ele.property = “value” ;可以使其在DOM元素中出现 ;
  • “.” 设置新增属性 ele.property = “value” ;可以设置一个属性,但是并不会在DOM元素中出现 ;
  • setAttribute 无论设置新增属性还是固有属性,都会在DOM元素中出现 ;

5 注意用什么方式设置属性,就要用什么方式获取属性,

​ a 比如 “.” 操作符设置的属性无法用getAttribute(“property”)获取到;”.” 获取的未被设置的属性值是 undefined;

​ b 比如setAttribute(“property”,”value”)设置的属性值无法用 “.” 操作符来获取;获取未被设置的属性值是null;

​ c “.”操作符设置属性要通过”.”操作符获取;setAttribute设置的属性值只能通过getAttribute来获取;

6 所有的属性节点里面,最常用的就是style属性节点,如何操作style属性节点,要理清元素属性和元素样式属性的关系,元素属性包括样式属性;

注意:元素的属性–>包括style 属性,id属性 class属性 title属性等—>style属性里面又包含了一些样式属性–>字体,文本,文本装饰,布局,尺寸,定位,颜色,变换(transform),过渡(transition),背景,外补白,内补白等都是属性;

a) JAVAScript( DOM ) 中操作☞ 获取 style的属性值:

1
2
ele.style.getPropertyValue('property');//只能获取内嵌式 style 属性中的CSS属性
window.getComputedStyle("ele","null").getPropertyValue("property");//可以获取包括style属性里面的CSS样式属性以及<style></style>标签里面的CSS样式属性,或者外联式的CSS样式属性;
  • 获取元素内嵌式style属性的值: ele.style.property 等价于 ele.style.getPropertyValue(‘property’) 来获取style样式属性的属性值,注意获取的属性值结果是一个字符串类型 ; 只能获取内嵌式style 的属性值 ; 如果是内联式或者外联式的属性值则获取不到,返回的结果是一个空字符串

    总结来说就是,

    • 只能获取内嵌式style的样式属性值,返回该属性的字符串值;
    • 如果获取的属性内嵌式style里面没有该属性,那么返回空字符串;
    • 这两种获取style样式属性总会返回一个字符串的结果,要么有值,要么是一个空字符串;
  • 获取元素内联style标签里面或者外联式的元素的style样式某个属性值 :

1
2
3
4
ele.currentStyle['property'] //在旧的IE支持该方法
window.getComputedStyle("元素":"伪类").property
window.getComputedStyle("元素","伪类)"[property]
window.getComputedStyle("元素","伪类").getPropertyValue("直接属性名");
  • window.getComputedStyle(“元素”,”伪类)可以获取该元素的所有的最终 使用的CSS属性值

ele.style 也是可以获取该元素的所有的最终使用的CSS属性

  • 二者区别是 第一: window.getComputedStyle(“ele”,”伪类”)是一个只读的属性,而ele.style 是一个可读可写的属性;
    第二:getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而element.style只能获取元素style属性中(注意:内嵌式)的CSS样式。因此对于一个光秃秃的元素`,getComputedStyle方法返回对象中length属性值(如果有)就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0`。
1
2
<div style='width: 100px ;background-color: #000000 ;margin: 0 auto;'></div> 的ele.style.length = 6 ,分别是width background-color 和4个margin值
<div style='width: 100px ;background-color: #000000 ;'></div> 而这个div的ele.style.length = 2 ,分别是width 和 background-color;

封装兼容低版本的获取元素属性值的代码:注意一点就是获取的结果是一个字符串类型的属性值,比如18px red等字符串

1
2
3
function getComputedStyle(ele,attr){
return window.getComputedStyle ? window.getComputedStyle(ele,null)[attr] : ele.currentStyle(attr)
}

b) JAVAScript(DOM)中操作☞ 设置 style的属性值:

  • 设置style属性的值 ele.style.property = “value” 等价于 ele.style.setProperty(‘property’,’value’)来设置元素的style样式属性值

7 对于不是元素的样式属性,比如offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHeight 等,不能通过获取样式属性的方法获取这些值。

  • js中
1
2
3
ele.offsetWidth(包括border) ele.scrollWidth ele.clientWidth(包括padding)
ele.offsetHeight(包括border) ele.scrollHeight ele.clientWidth(包括padding)
ele.offsetLeft ele.offsetTop ele.scrollLeft ele.scrollTop ele.clientLeft ele.clientTop
  • jquery中
1
2
3
4
5
6
$("selector").width() $("selector").innerWidth()[包括padding] $("selector").outerWidth()[包括border,设置为诶true时,包括margin];返回值是一个整形数值类型;如果里面设置数值,可以设置被选中元素的宽度
$("selector").height() $("selector").innerHeight()[包括padding] $("selector").outerHeight()[包括border,设置为true时,包括margin];返回值是一个整形数值类型;如果里面设置数值,可以设置被选中元素的高度
$("selector").offset() 返回当前元素相对视口的**偏移** ;返回值包括两个整形数值的属性,一个代表left一个代表top,始终是相对于视口的距离
$("selector").position() 返回当前元素相对于父元素的**偏移**;返回包括两个整形数值的属性;
$("selector").scrollLeft()返回值是相对于滚动条左部的距离
$("selector").scrollTop() 返回的是相对于滚动条顶部的距离

###8 代码解释:(嗯,乱一点点,不好意思)

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
height: 150px;
padding: 10px;
}
</style>
</head>
<body>
<input type="button" id='btn1' value='1' style="width: 20px;height: 20px;background-color: #003C78;"/>
<input type="button" id='btn2' value='2' style="width: 20px;height: 20px;background-color: #003C78;"/>
<div style='width: 100px ;background-color: #000000 ;'></div>
<script>
console.log('先讲解如何获取内嵌style样式属性值');
document.querySelector('#btn1').onclick = function(){
var dv = document.querySelector('div');
// "."操作符的情况
dv.style.width = "200px";//可以通过"."操作设置元素的style属性值
console.log(dv.style.width);// 200px 可以获取内嵌式style样式属性值
console.log(dv.style.padding);//不可以获取外联式style样式属性值,只能获取到一个空字符串
console.log(typeof dv.style.height);//string
// 通过style的方法API
dv.style.setProperty ("height","200px");//可以通过setProperty设置style 属性的值
console.log(dv.style.getPropertyValue('height'));//200px 可以获取内嵌样式的属性值
console.log(dv.style.getPropertyValue('width'));//200px 可以获取内嵌样式的属性值
console.log(dv.style.getPropertyValue('padding'));//空字符串,不能获取外联style样式表里面的属性值
console.log(typeof dv.style.getPropertyValue('padding'));//string
// 两者一样,
// 1 都是可以获取内嵌的style的属性值,如果获取内联式或者外联式的样式属性值,则获取不到,获取结果为一个空的字符串
// 2 同时可以设置style的样式属性值;
}
console.log('以下讲解如何获取内联或者外联的style样式属性值');
document.querySelector("#btn2").onclick = function(){
var dv = document.querySelector("div");
// console.log(dv.currentStyle['height']);
// console.log(dv.currentStyle['width']);
console.log(window.getComputedStyle(dv,null)['width']);//100px
console.log(window.getComputedStyle(dv,null).width);//100px
console.log(window.getComputedStyle(dv,null)['height']);//150px
console.log(window.getComputedStyle(dv,null).height);//150px
console.log(window.getComputedStyle(dv,null));//获取当前元素的所有的最终使用的CSS属性值,包括内嵌,内联,外联
console.log(dv.style);//建议读者看下控制台的输出结果,代表style属性里面的样式属性值(内嵌)
}
</script>
</body>
</html>

javascriptClosure

发表于 2016-06-19 | 分类于 javascript

Javascript 闭包(closure)

理解闭包之前,以下概念必须清楚

  • 基础数据类型与引用数据类型
  • 内存空间
  • 垃圾回收机制
  • 执行上下文
  • 变量对象与活动对象

1 为什么需要闭包?

我们从变量的作用域来进行考究原因

javascript中变量作用域分为两种,一种是全局作用域,一种是函数作用域(ES6中新增块级作用域)

1.1 函数内部可以访问函数外部的变量,即可以直接读取全局变量

1
2
3
4
var num = 200;
function getNum (){
console.log(num);// 输出 200
}

1.2 函数外部却无法直接访问函数内部用var声明的函数内部变量

1
2
3
4
function getNum(){
var num = 200 ;
}
console.log(num);//Uncaught ReferenceError: num is not defined

2.既然有需求,那么就要解决?什么是闭包?

闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

啰里啰嗦,抽离靶向的,何必相互为难,

  • 闭包就是一个函数; OK了,
  • 再进一步,这个函数可以用来获取另外一个函数内部的变量

2.1闭包的特点:

2.1.1 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。  

2.1.2 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。简单的说,Javascript允许使用内部函数—即函数定义和函数表达式 位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量 、参数 和声明的其他内部函数 。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。

2.1.3 闭包的作用 : 一个是可以读取函数内部的变量;(局部变量) ,另一个就是让这些变量的值始终保持在内存中 。

2.1.3 闭包形成的条件:

  • 在一个函数内部有一个新的函数
  • 这个新的函数访问了外部函数内的变量

2.2 闭包栗子

2.2.1 如下一段代码,getInnerNum 可以访问 getNum 函数内部所有的变量,参数,以及函数的值,getInnerNum被getNum函数包住了

1
2
3
4
5
6
7
function getNum(){
var num = 200 ;
function getInnerNum(){
console.log(num);
}
}
//getInnerNum();直接引用是错误的,getInnerNum是在函数体内声明的,可以理解为是局部变量,外部不能直接调用函数内的嵌套函数

2.2.2 那么如果我们想要getNum内部的变量,该如何访问呢?既然getInnerNum可以访问num变量,不如将这个函数作为返回值

1
2
3
4
5
6
7
8
9
10
function getNum(){
var num = 200 ;
function getInnerNum(){
console.log(num);
}
return getInnerNum;//注意返回的是一个引用地址,改地址存放了函数getInnerNum
}
// console.log(getNum());//可以判断出getNum 函数执行后返回的是getInnerNum 的函数体
getNum()(); //200

注意区分下面这段代码

1
2
3
4
5
6
7
8
9
var num = 300;
function getNum(){
var num = 200 ;
function getInnerNum(){
console.log(this.num);//this在执行的时候指向谁?函数的执行上下文
}
return getInnerNum;//注意返回的是一个引用地址,改地址存放了函数getInnerNum
}
getNum()();// 300

2.2.3 明确垃圾回收机制,函数体执行后,函数内部声明的变量 ,在函数调用完毕之后,被垃圾回收机制(garbage collection) 回收; 如果

situation 1 : 闭包的作用 一个是可以读取函数内部的变量;(局部变量) ,另一个就是让这些变量的值始终保持在内存中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getNum(){
var num = 200 ;
addNum = function(){
console.log("addNum is completed");
num++;
}
function getInnerNum(){
console.log(num);
}
return getInnerNum;//注意返回的是一个引用地址,改地址存放了函数getInnerNum
}
getNum()();//200
addNum();//addNum is completed
getNum()();//200
//getNum()每次执行都会重新声明 var num = 200 ;所以输出 200;
//对于垃圾回收机制,函数执行过程中,为函数内部声明的变量分配栈或者堆内存,在函数执行结束之后,释放占据的内存
1
2
3
4
5
getNum()();//200
//进行了以下动作
getNum() //声明num addNum函数(全局) getInnerNum函数(局部)
//得到返回的getInnerNum 函数,然后运行该函数
getInnerNum();

situation 2 :闭包的作用 一个是可以读取函数内部的变量;(局部变量) ,另一个就是让这些变量的值始终保持在内存中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getNum(){
var num = 200 ;
addNum = function(){
console.log("addNum is completed");
num++;
}
function getInnerNum(){
console.log(num);
}
return getInnerNum;//注意返回的是一个引用地址,改地址存放了函数getInnerNum
}
var result = getNum()
result();//200
addNum();//addNum is completed
result();//201
//getNum() 只执行了一次,所以 var num = 200 也只声明了一次
//因为将内部的函数getInnerNum 赋值给了全局变量result,所以外部函数getNum并不算执行完毕,所以函数内部声明的变量在栈或者堆内存中不会被垃圾回收机制回收

此时,我们将getNum()的返回值getInnerNum函数给到变量result,result被执行了两次,第一次输出了 200 第二次输出201;这是为什么呢?

原因就在于 getNum 是 getInnerNum 的父函数,而 getInnerNum 被赋给了一个全局变量result,这导致 getInnerNum 始终在内存中,而 getInnerNum 的存在依赖于 getNum ,因此 getNum 也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。

因为result引用了getInnerNum.而 getInnerNum又是依赖于getNum,所以result间接引用了外部函数,所以getNum会一直在内存中存在,不会被垃圾回收机制回收;那么其所形成的作用域链也会一直存在;

同时,函数在执行的过程中动态为函数内部变量分配的内存也会一直存在;

1
result = null ;

我们需要了解垃圾回收机制

  • 对于局部变量,只在函数执行的时候存在,函数运行完毕,局部变量 就会被垃圾回收机制回收;
  • 对于全局变量,垃圾回收机制则很难判断什么时候可回收
  • 局部变量只在函数的执行过程中存在,函数执行过程中 会为局部变量在栈或堆 上分配相应的空间,以存储它们的值,然后再函数中使用这些变量,直至函数结束
  • 但是在闭包中,由于内部函数getInnerNum 被赋值给了全局变量result,所以getNum函数并不算结束,所以垃圾回收机制不会将变量回收,所以函数中的变量 n 是一直存在于内存中的,并没有被回收
  • 函数的执行上下文,在执行完毕之后,生命周期结束,那么该函数的执行上下文就会失去引用。其占用的内存空间很快就会被垃圾回收器释放。可是闭包的存在,会阻止这一过程。

这段代码中另一个值得注意的地方,就是

1
2
3
4
addNum = function(){
console.log("addNum is completed");
num++;
}

这一行,首先在addNum前面没有使用var关键字,因此addNum是一个全局变量,而不是局部变量。其次,addNum的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,所以addNum相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

situation3 : 看下立即执行函数如何利用闭包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function getNum(){
var num = 200 ;
addNum = function(){
console.log("addNum is completed");
num++;
}
function getInnerNum(){
console.log(num);
}
window.result = getInnerNum ;//注意这行代码,将内部引用赋值给全局变量result,所以该作用域链会一直存在;jQuery底层源码也是这种实现形式
})() //立即执行函数
result();//200
addNum();//addNum is completed
result();//201

situation 4 数组中的元素引用,形成闭包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr = [];
for(var i = 0 ; i < 3 ; i++){
arr[i] = outFunc(i);
//innerFunc被数组中的每一个元素引用,每次循环都会形成一个闭包,每次传进去的 i 都会作为变量对象
function outFunc(num){
function innerFunc(){
console.log(num);
}
return innerFunc ;
}
}
arr[0]();
arr[1]();
arr[2]();

situation5 setTimeout(fn,time) 定时器函数的执行:按道理来说,既然fn被作为参数传入了setTimeout中,那么fn将会被保存在setTimeout变量对象中,setTimeout执行完毕之后,它的变量对象也就不存在了。可是事实上并不是这样。它仍然是存在的。这正是因为闭包。

很显然,这是在函数的内部实现中,setTimeout通过特殊的方式,保留了fn的引用,让setTimeout的变量对象,并没有在其执行完毕后被垃圾收集器回收。因此setTimeout执行结束后经过time时间后,会自动执行fn函数。

1
2
3
4
5
6
7
8
for(var i = 0 ; i < 5 ; i++){
setTimeout( function fn() {
console.log(i);
}, i*1000 )
}
//由于javascript执行代码单线程,遇到setTimeout会将setTimeout放到事件队列当中
//这个循环创建了5个setTimeout函数,将执行函数fn添加到事件队列中
//作用域链 全局作用域-->setTimeout作用域(也是全局作用域,因为setTimeout内部的this指向的是window)

如何输出1,2,3,4,5呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
for(var i = 0 ;i < 5 ;i++){
function res (num){
var timer = setTimeout(function fn(){
console.log(num)
},i*1000);
}
res(i)
}
//因为res函数执行的时候,创建了res函数作用域,传入的num作为res当前执行上下文中的变量对象中的一员,fn函数执行的时候,会先在fn作用域内找num ,找不到则往上一层一层找;
//作用域链如下:全局作用域--->res函数作用域--->setTimeout---> fn函数作用域(fn在setTimeout内部实现了闭包,所以fn执行的时候,可以获取到当前作用域链上的变量)
//---------------------------------------------
//这两种方法都是可以的,推荐第二种立即执行;
for (var i=1; i<=5; i++) {
(function (i) {setTimeout( function fn() {
console.log(i);
}, i*1000 )})(i);
}
1
2
3
4
5
6
7
8
9
10
11
12
var num = 999;
for(var i = 0 ;i < 5 ;i++){
(function(num){
setTimeout(function fn(){
console.log(this);
console.log(this.num);
var num = 5;
console.log(num)
},i*1000);
})(i)
}
//通过这个案例的验证,可以发现setTimeout内部实现了闭包,fn执行的时候上下文不会被垃圾回收机制回收;

3 如何避免闭包?

闭包的作用:一个是可以读取函数内部的变量;(局部变量) ,另一个就是让这些变量的值始终保持在内存中

第一个作用使我们想要的,但是第二个会使闭包一直占据内存,这个是我们应该尽力去避免的;由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

4 看下面这行代码的输出: this改变了函数执行的上下文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var num = 300;
function getNum(){
var num = 200 ;
addNum = function(){
console.log("addNum is completed---"+num);
num++;
console.log("addNum is completed---"+num);
}
function getInnerNum(){
console.log(this.num);//函数执行的时候,this指向其运行的时候所在的对象
}
return getInnerNum;//注意返回的是一个引用地址,改地址存放了函数getInnerNum
}
var result = getNum()
result();
addNum();
result();
//控制台输出
300
addNum is completed---200
addNum is completed---201
300

5 此时回过头来理解下文章开始的一些基础的定义,以及重新回忆下链式作用域,变量的取值(就近原则),全局作用域,局部作用域

完结

vvv

HTML5 dataset

发表于 2016-06-15 | 分类于 html

属性操作 DOM jQuery 中对比解析:

DOM中操作元素属性的方法:

1 直接在元素内声明:

1
<div id="dv" class="cls" abc = "hello"></div>

声明之后可以对元素的属性进行操作

1
2
3
console.log(document.getElementById("dv").getAttribute("class"));
console.log(document.getElementById("dv").getAttribute("abc"));
console.log(document.getElementById("dv").abc);

输出结果:cls hello undefined ( . 操作符只能操作HTML元素固有的属性,这些个”莫须有”的无法操作)

2 通过setAttribute(“属性名”,”属性值”),可以为元素设置固有属性值或者新的属性

通过 ele.property = “value”,可以为元素设置属性值

1
2
3
4
5
6
7
8
9
10
11
12
document.getElementById("dv").setAttribute("index","9");
document.getElementById("dv").aaaa = "hello again"; //不起作用
document.getElementById("dv").style.height = "200px";
document.getElementById("dv").title = "我是通过固有属性设置的";
上面这行代码执行完毕之后:
<div id="dv" class="cls" abc = "hello" index="9" style="height:200px;" title = "我是通过固有属性设置的"></div>
然后在执行下这段代码的话:
console.log(document.getElementById("dv").index);
console.log(document.getElementById("dv").title);
输出结果:
undefined
我是通过固有属性设置的

注意细节 : “ . “ 运算符 可以直接设置固有属性 比如 class title lang href src 等某些元素特有的一些属性,以及样式属性 style;

但是 “. “ 运算符不能直接设置新增的属性 ,比如 index aaa 等新增的,原来并不存在的属性,obj.index 不会报错,但是不会起作用,如果用”[ ]”运算符,obj[index] 会直接报错,[ ] 运算符不能操作不存在的属性,

总结:

1 “ . ”运算符只能 设置 元素的固有属性和 以及 获取 元素的固有属性值,不能给元素设置新增属性以及获取元素的新增属性值;

2 setAttribute(“property”,”value”),getAttribute(“property”),其中property属性名既可以是固有的属性,也可以是新增属性,可以设置元素的属性值或者获取元素的属性值。

3 jquery中操作元素属性的方法:

  • prop(“property”,”value”),可以设置jquery对象的固有属性,注意仅仅是固有属性,也就是说W3C里面本来就有的属性,prop(“property”),可以获取jquery对象属性值;
  • attr(“property”,”value”),可以设置jquery对象的固有属性,也就是说W3C里面本来就有的属性,也可以新增一些W3C没有规定的属性,比如index aaa 等等符合命名规则的新增属性;attr(“property”),可以获取jquery对象属性值,包括固有属性以及新增属性。

4 HTML全局属性(固有属性)

属性 描述
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名(引用样式表中的类)。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

5 HTML5 新增API dataset

5.1.1 js中 原生js方法对dataset属性的修改会直接在DOM树上表现出来; 先来看下原来的获取和设置属性的方式是否可以起作用 setAttribute getAttribute . 操作符;

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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
[data-color] {
background-color: red;
}
[data-width]{
width: 100px;
}
[data-height]{
height: 100px;
}
</style>
</head>
<body>
<input type="button" value="按钮"/>
<div id="dv" class="box" aaa="nothing" data-color="red" data-position="pos" data-address="china" data-width="w" data-height="h" data-name-first="kobe" data-nameLast = "james"></div>
<script>
window.onload = function(){
document.querySelector("input[type=button]").onclick = function(){
var box = document.querySelector("#dv");
console.log(box.className);//box
console.log(box.id);//dv
console.log(box.aaa);//undefined . 操作符只能操作html元素固有的属性
// console.log(box.data-position);//报错 ,无法操作
console.log(box.getAttribute("data-position"));//pos
box.setAttribute("data-position","poschange");//设置data* 的属性值
console.log(box.getAttribute("data-position"));//poschange
};
};
</script>
</body>
</html>

既然原来的方法可以操作data* 属性,那么 dataset这个新的API还有什么作用呢?好的,如果我想获取所有的属性值,那么该怎么操作呢?这个时候,dataset的威力就显示出来了

5.1.2 dataset是HTML5新增的一个API ,里面存放了所有的使用 data-xx 格式设置的属性集合,是一个对象;我们仅仅改变script标签里面的代码,html代码不变;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
window.onload = function(){
document.querySelector("input[type=button]").onclick = function(){
var box = document.querySelector("#dv");
console.log(box.dataset);//可以获取所有的data-xx 属性值,实际工作中便于解析成字符串
//DOMStringMap {color: "red", position: "pos", address: "china", width: "w", height: "h",nameFirst:"kobe"namelast:"james"}
console.log(typeof box.dataset);//object
console.log(box.dataset.color);//red
console.log(box.dataset.position);//pos
box.dataset.position = "poschange" ;//通过dataset设置属性值
console.log(box.dataset.position);//poschange
//注意 data-xx-yy 以及data-nameLast 命名的方式细节处理
//console.log(box.dataset.name-first);//会报错
console.log(box.dataset.nameFirst);//kobe
console.log(box.dataset.nameLast);//undefined 获取不到
console.log(box.dataset.namelast);//james
};
};
</script>

dataset 接口可以直接操作由data-xx 格式设置的所有data属性,即可以获取值,也可以设置值

  • data-name-first 设置的属性,获取的时候 必须以data.nameFirst
  • data-nameLast 设置的属性,获取的时候 必须以 dataset.namelast

5.2.1 jQuery中 attr prop jquery中dataset属性值的操作不会在DOM树上表现出来;

1
2
3
4
5
6
7
8
9
10
11
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
$("input:button").click(function(){
console.log($("#dv").attr("data-color"));//red
console.log($("#dv").prop("data-color"));//获取不到 undefined 同样prop也无法设置
$("#dv").attr("data-color","green");//DOM 树上会显示改变
console.log($("#dv").attr("data-color"));//green
});
});
</script>

5.2.2 jquery中 data(“key”)获取属性值 data(“key”,”value”)设置属性值;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="jquery-1.12.2.js"></script>
<script>
$(function(){
$("input:button").click(function(){
console.log($("#dv").data);
console.log($("#dv").data("color"));//red
$("#dv").data("color" , "green");//设置属性,不会在DOM树上表现出来
console.log(document.querySelector("#dv").dataset.color); //js获取还是red 这个需要注意
console.log($("#dv").data("color"));//green
console.log($("#dv").data("nameFirst"));//kobe
console.log($("#dv").data("nameLast"));//undefined
console.log($("#dv").data("namelast"));//james
});
});
</script>

jquery中data(“key”,”value” )方法可以获取元素的属性值,也可以设置元素的属性值

  • data-name-first 设置的属性,获取的时候 必须以data(“nameFirst”)
  • data-nameLast 设置的属性,获取的时候 必须以 dataset(“namelast”)
  • 这点和原生js是一致的。
  • 这个新的属性很方便我们在元素上存取数据而不用进行Ajax请求

5.3.1根据以上总结,我们在给data-xxx 属性命名的时候,尽量不应该包含大写字母,以方便查询

5.3.2 data-xx 属性里面可以存储的页面应用或者应用程序的私有的自定义的数据,不进行Ajax请求调用服务器端的数据查询,增加性能;

睡觉!

从chorm开发者工具看return 以及闭包的执行

发表于 2016-06-13 | 分类于 javascript

从chorm开发者工具看return 以及闭包的执行

1 函数在执行过程中,如果遇到return,则直接结束当前函数{ } 代码块的执行;

2 闭包的形成,

  • 一个函数(假如是out)内部有一函数(inner)
  • inner函数访问out函数作用域的变量
  • inner函数赋值给out函数作用域外的变量;

3 开发者工具 —>source—> scope local 等可以查看到程序执行的顺序以及闭包的形成;

4 通过开发者工具,我们可以清晰的看到代码执行的过程,然后需要思考这个过程发生了什么:

  • 在函数的执行上下文创建阶段:变量对象被创建
  • 在函数的执行上下文执行阶段:变量对象变为活动对象的过程
  • 函数的this指向是在函数执行的过程中才被确定,并不是其生声明的时候被确认
  • 执行上下文的入栈和出栈
  • 函数执行的返回值
  • return会终止当前函数代码块的执行,直接跳出当前执行函数体
  • ​函数的实参传递,是给当前作用域增加了变量
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
//这个闭包只有foo
function foo() {
var a = 2;
return function bar() {
var b = 9;
return function fn() {
console.log(a);
}
}
}
var bar = foo();
var fn = bar();
fn();
// ---------------------------------------------------
//这个闭包有bar和foo
function foo() {
var a = 2;
return function bar() { //return之后下面的代码不再执行,当前函数执行完毕,当前上下文出栈
var b = 9;
return function fn() {
console.log(a, b);
}
}
}
var bar = foo();
var fn = bar();
fn();
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
//函数立即执行的形式的闭包
(function() {
var a = 10;
var b = 20;
var test = {
m: 20,
add: function(x) {
return a + x;
},
sum: function() {
return a + b + this.m;
},
mark: function(k, j) {
return k + j;
}
}
window.winTest = test;//将函数的内部变量test赋值给window中的属性
})();
winTest.add(100);
winTest.sum();
winTest.mark();
var _mark = test.mark();
console.log(_mark);
//上面的所有调用,最少都访问了自执行函数中的test变量,因此都能形成闭包。即使mark方法没有访问私有变量a,b。
1
2
3
4
5
6
7
8
9
function b (){
function a (){
console.log("func");
}
var a = 5 ;
console.log(a);
}
b();
//变量声明提升,函数function的优先级大于变量var ,在开发者工具可以看下a直接就是函数

for循环

发表于 2016-06-09 | 分类于 javascript

1 for-in循环用来获取对象或者数组的 键名 (包括ES6的Map和Set数据结构)

1
2
3
4
5
6
7
let arr = ['bar',,'foo']
console.log(arr.length)
for(let a in arr ){
console.log(Object.prototype.hasOwnProperty.call(arr,a))
console.log(a) // 0 2
}
如果arr是不是可遍历的结构,那么该循环则不会执行。

2 for-of 循环用来遍历获取对象或者数组的 键值 (包括ES6的Map和Set数据结构)

1
2
3
4
for (let a of arr){
console.log(a) //bar undefined foo
}
//for-of 循环会将数组中定义或者未定义的键值都遍历

javascript常用API总结

发表于 2016-06-08 | 分类于 javascript

javascript 常用API总结:

一、节点

1.1 节点属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Node.nodeName //返回节点名称,只读
Node.nodeType //返回节点类型的常数值,只读
Node.nodeValue //返回Text或Comment节点的文本值,只读
Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写
Node.baseURI //返回当前网页的绝对路径
Node.ownerDocument //返回当前节点所在的顶层文档对象,即document
Node.nextSibling //返回紧跟在当前节点后面的第一个兄弟节点
Node.previousSibling //返回当前节点前面的、距离最近的一个兄弟节点
Node.parentNode //返回当前节点的父节点
Node.parentElement //返回当前节点的父Element节点
Node.childNodes //返回当前节点的所有子节点
Node.firstChild //返回当前节点的第一个子节点
Node.lastChild //返回当前节点的最后一个子节点
//parentNode接口
Node.children //返回指定节点的所有Element子节点
Node.firstElementChild //返回当前节点的第一个Element子节点
Node.lastElementChild //返回当前节点的最后一个Element子节点
Node.childElementCount //返回当前节点所有Element子节点的数目。

1.2 操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Node.appendChild(node) //向节点添加最后一个子节点
Node.hasChildNodes() //返回布尔值,表示当前节点是否有子节点
Node.cloneNode(true); // 默认为false(克隆节点), true(克隆节点及其属性,以及后代)
Node.insertBefore(newNode,oldNode) // 在指定子节点之前插入新的子节点
Node.removeChild(node) //删除节点,在要删除节点的父节点上操作
Node.replaceChild(newChild,oldChild) //替换节点
Node.contains(node) //返回一个布尔值,表示参数节点是否为当前节点的后代节点。
Node.compareDocumentPosition(node) //返回一个7个比特位的二进制值,表示参数节点和当前节点的关系
Node.isEqualNode(noe) //返回布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。
Node.normalize() //用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。
//ChildNode接口
Node.remove() //用于删除当前节点
Node.before() //
Node.after()
Node.replaceWith()

1.3 Document节点

1.3.1 Document节点的属性

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
document.doctype //
document.documentElement //返回当前文档的根节点
document.defaultView //返回document对象所在的window对象
document.body //返回当前文档的<body>节点
document.head //返回当前文档的<head>节点
document.activeElement //返回当前文档中获得焦点的那个元素。
//节点集合属性
document.links //返回当前文档的所有a元素
document.forms //返回页面中所有表单元素
document.images //返回页面中所有图片元素
document.embeds //返回网页中所有嵌入对象
document.scripts //返回当前文档的所有脚本
document.styleSheets //返回当前网页的所有样式表
//文档信息属性
document.documentURI //表示当前文档的网址
document.URL //返回当前文档的网址
document.domain //返回当前文档的域名
document.lastModified //返回当前文档最后修改的时间戳
document.location //返回location对象,提供当前文档的URL信息
document.referrer //返回当前文档的访问来源
document.title //返回当前文档的标题
document.characterSet属性返回渲染当前文档的字符集,比如UTF-8、ISO-8859-1。
document.readyState //返回当前文档的状态
document.designMode //控制当前文档是否可编辑,可读写
document.compatMode //返回浏览器处理文档的模式
document.cookie //用来操作Cookie

1.3.2 Document节点的方法

(1)读写方法

1
2
3
4
document.open() //用于新建并打开一个文档
document.close() //不安比open方法所新建的文档
document.write() //用于向当前文档写入内容
document.writeIn() //用于向当前文档写入内容,尾部添加换行符。

(2)查找节点

1
2
3
4
5
6
7
document.querySelector(selectors) //接受一个CSS选择器作为参数,返回第一个匹配该选择器的元素节点。
document.querySelectorAll(selectors) //接受一个CSS选择器作为参数,返回所有匹配该选择器的元素节点。
document.getElementsByTagName(tagName) //返回所有指定HTML标签的元素
document.getElementsByClassName(className) //返回包括了所有class名字符合指定条件的元素
document.getElementsByName(name) //用于选择拥有name属性的HTML元素(比如<form>、<radio>、<img>、<frame>、<embed>和<object>等)
document.getElementById(id) //返回匹配指定id属性的元素节点。
document.elementFromPoint(x,y) //返回位于页面指定位置最上层的Element子节点。

(3)生成节点

1
2
3
4
document.createElement(tagName) //用来生成HTML元素节点。
document.createTextNode(text) //用来生成文本节点
document.createAttribute(name) //生成一个新的属性对象节点,并返回它。
document.createDocumentFragment() //生成一个DocumentFragment对象

(4)事件方法

1
2
3
4
document.createEvent(type) //生成一个事件对象,该对象能被element.dispatchEvent()方法使用
document.addEventListener(type,listener,capture) //注册事件
document.removeEventListener(type,listener,capture) //注销事件
document.dispatchEvent(event) //触发事件

(5)其他

1
2
3
document.hasFocus() //返回一个布尔值,表示当前文档之中是否有元素被激活或获得焦点。
document.adoptNode(externalNode) //将某个节点,从其原来所在的文档移除,插入当前文档,并返回插入后的新节点。
document.importNode(externalNode, deep) //从外部文档拷贝指定节点,插入当前文档。

1.4 Element节点

1.4.1 Element节点的属性

(1)特性属性

1
2
3
4
5
6
7
8
Element.attributes //返回当前元素节点的所有属性节点
Element.id //返回指定元素的id属性,可读写
Element.tagName //返回指定元素的大写标签名
Element.innerHTML //返回该元素包含的HTML代码,可读写
Element.outerHTML //返回指定元素节点的所有HTML代码,包括它自身和包含的的所有子元素,可读写
Element.className //返回当前元素的class属性,可读写
Element.classList //返回当前元素节点的所有class集合
Element.dataset //返回元素节点中所有的data-*属性。

(2)尺寸属性

1
2
3
4
5
6
7
8
9
10
11
12
13
Element.clientHeight //返回元素节点可见部分的高度
Element.clientWidth //返回元素节点可见部分的宽度
Element.clientLeft //返回元素节点左边框的宽度
Element.clientTop //返回元素节点顶部边框的宽度
Element.scrollHeight //返回元素节点的总高度
Element.scrollWidth //返回元素节点的总宽度
Element.scrollLeft //返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
Element.scrollTop //返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight //返回元素的垂直高度(包含border,padding)
Element.offsetWidth //返回元素的水平宽度(包含border,padding)
Element.offsetLeft //返回当前元素左上角相对于Element.offsetParent节点的垂直偏移
Element.offsetTop //返回水平位移
Element.style //返回元素节点的行内样式

(3)节点相关属性

1
2
3
4
5
6
7
Element.children //包括当前元素节点的所有子元素
Element.childElementCount //返回当前元素节点包含的子HTML元素节点的个数
Element.firstElementChild //返回当前节点的第一个Element子节点
Element.lastElementChild //返回当前节点的最后一个Element子节点
Element.nextElementSibling //返回当前元素节点的下一个兄弟HTML元素节点
Element.previousElementSibling //返回当前元素节点的前一个兄弟HTML节点
Element.offsetParent //返回当前元素节点的最靠近的、并且CSS的position属性不等于static的父元素。

1.4.2 Element节点的方法

(1)位置方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
getBoundingClientRect()
// getBoundingClientRect返回一个对象,包含top,left,right,bottom,width,height // width、height 元素自身宽高
// top 元素上外边界距窗口最上面的距离
// right 元素右外边界距窗口最上面的距离
// bottom 元素下外边界距窗口最上面的距离
// left 元素左外边界距窗口最上面的距离
// width 元素自身宽(包含border,padding)
// height 元素自身高(包含border,padding)
getClientRects() //返回当前元素在页面上形参的所有矩形。
// 元素在页面上的偏移量
var rect = el.getBoundingClientRect()
return {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
}

(2)属性方法

1
2
3
4
Element.getAttribute():读取指定属性
Element.setAttribute():设置指定属性
Element.hasAttribute():返回一个布尔值,表示当前元素节点是否有指定的属性
Element.removeAttribute():移除指定属性

(3)查找方法

1
2
3
4
Element.querySelector()
Element.querySelectorAll()
Element.getElementsByTagName()
Element.getElementsByClassName()

(4)事件方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Element.addEventListener():添加事件的回调函数
Element.removeEventListener():移除事件监听函数
Element.dispatchEvent():触发事件
//ie8
Element.attachEvent(oneventName,listener)
Element.detachEvent(oneventName,listener)
// event对象
var event = window.event||event;
// 事件的目标节点
var target = event.target || event.srcElement;
// 事件代理
ul.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
console.log(event.target.innerHTML)
}
});

(5)其他

1
2
3
4
5
6
7
8
9
10
11
Element.scrollIntoView() //滚动当前元素,进入浏览器的可见区域
//解析HTML字符串,然后将生成的节点插入DOM树的指定位置。
Element.insertAdjacentHTML(where, htmlString);
Element.insertAdjacentHTML('beforeBegin', htmlString); // 在该元素前插入
Element.insertAdjacentHTML('afterBegin', htmlString); // 在该元素第一个子元素前插入
Element.insertAdjacentHTML('beforeEnd', htmlString); // 在该元素最后一个子元素后面插入
Element.insertAdjacentHTML('afterEnd', htmlString); // 在该元素后插入
Element.remove() //用于将当前元素节点从DOM中移除
Element.focus() //用于将当前页面的焦点,转移到指定元素上

二、CSS操作

(1)类名操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//ie8以下
Element.className //获取元素节点的类名
Element.className += ' ' + newClassName //新增一个类名
//判断是否有某个类名
function hasClass(element,className){
return new RegExp(className,'gi').test(element.className);
}
//移除class
function removeClass(element,className){
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),'');
}
//ie10
element.classList.add(className) //新增
element.classList.remove(className) //删除
element.classList.contains(className) //是否包含
element.classList.toggle(className) //toggle class

(2)style操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
element.setAttribute('style','')
element.style.backgroundColor = 'red'
element.style.cssText //用来读写或删除整个style属性
element.style.setProperty(propertyName,value) //设置css属性
element.style.getPropertyValue(property) //获取css属性
element.style.removeProperty(property) //删除css属性
操作非内联样式
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName]
window.getComputedStyle(el,null).getPropertyValue(attrName)
//伪类
window.getComputedStyle(el,':after')[attrName]

三、对象

3.1 Object对象

(1)生成实例对象

1
var o = new Object()

(2)属性

1
Object.prototype //返回原型对象

(3)方法

1
2
Object.keys(o) //遍历对象的可枚举属性
Object.getOwnPropertyName(o) //遍历对象不可枚举的属性

对象实例的方法

1
2
3
4
5
6
valueOf():返回当前对象对应的值。
toString():返回当前对象对应的字符串形式。
toLocaleString():返回当前对象对应的本地字符串形式。
hasOwnProperty():判断某个属性是否为当前对象自身的属性,还是继承自原型对象的属性。
isPrototypeOf():判断当前对象是否为另一个对象的原型。
propertyIsEnumerable():判断某个属性是否可枚举。

3.2 Array对象

(1)生成实例对象

1
var a = new Array()

(2)属性

1
a.length //长度

(3)Array.isArray()

1
Array.isArray(a) //用来判断一个值是否为数组

(4)Array实例的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
a.valueof() //返回数组本身
a.toString() //返回数组的字符串形式
a.push(value,vlaue....) //用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。
pop() //用于删除数组的最后一个元素,并返回该元素
join() //以参数作为分隔符,将所有数组成员组成一个字符串返回。如果不提供参数,默认用逗号分隔。
concat() //用于多个数组的合并。它将新数组的成员,添加到原数组的尾部,然后返回一个新数组,原数组不变。
shift() //用于删除数组的第一个元素,并返回该元素。
unshift(value) //用于在数组的第一个位置添加元素,并返回添加新元素后的数组长度。
reverse() //用于颠倒数组中元素的顺序,返回改变后的数组
slice(start_index, upto_index); //用于提取原数组的一部分,返回一个新数组,原数组不变。第一个参数为起始位置(从0开始),第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数,则一直返回到原数组的最后一个成员。负数表示倒数第几个。
splice(index, count_to_remove, addElement1, addElement2, ...); //用于删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员,返回值是被删除的元素。第一个参数是删除的起始位置,第二个参数是被删除的元素个数。如果后面还有更多的参数,则表示这些就是要被插入数组的新元素。
sort() //对数组成员进行排序,默认是按照字典顺序排序。排序后,原数组将被改变。如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数,表示按照自定义方法进行排序。该函数本身又接受两个参数,表示进行比较的两个元素。如果返回值大于0,表示第一个元素排在第二个元素后面;其他情况下,都是第一个元素排在第二个元素前面。
map() //对数组的所有成员依次调用一个函数,根据函数结果返回一个新数组。
map(elem,index,arr) //map方法接受一个函数作为参数。该函数调用时,map方法会将其传入三个参数,分别是当前成员、当前位置和数组本身。
forEach() //遍历数组的所有成员,执行某种操作,参数是一个函数。它接受三个参数,分别是当前位置的值、当前位置的编号和整个数组。
filter() //参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
some() //用来判断数组成员是否符合某种条件。接受一个函数作为参数,所有数组成员依次执行该函数,返回一个布尔值。该函数接受三个参数,依次是当前位置的成员、当前位置的序号和整个数组。只要有一个数组成员的返回值是true,则整个some方法的返回值就是true,否则false。
every() //用来判断数组成员是否符合某种条件。接受一个函数作为参数,所有数组成员依次执行该函数,返回一个布尔值。该函数接受三个参数,依次是当前位置的成员、当前位置的序号和整个数组。所有数组成员的返回值都是true,才返回true,否则false。
reduce() //依次处理数组的每个成员,最终累计为一个值。从左到右处理(从第一个成员到最后一个成员)
reduceRight() //依次处理数组的每个成员,最终累计为一个值。从右到左(从最后一个成员到第一个成员)
indexOf(s) //返回给定元素在数组中第一次出现的位置,如果没有出现则返回-1。可以接受第二个参数,表示搜索的开始位置
lastIndexOf() //返回给定元素在数组中最后一次出现的位置,如果没有出现则返回-1。

3.3 Number对象

(1)生成对象

1
var n = new Number()

(2)Number对象的属性

1
2
3
4
5
6
7
Number.POSITIVE_INFINITY:正的无限,指向Infinity。
Number.NEGATIVE_INFINITY:负的无限,指向-Infinity。
Number.NaN:表示非数值,指向NaN。
Number.MAX_VALUE:表示最大的正数,相应的,最小的负数为-Number.MAX_VALUE。
Number.MIN_VALUE:表示最小的正数(即最接近0的正数,在64位浮点数体系中为5e-324),相应的,最接近0的负数为-Number.MIN_VALUE。
Number.MAX_SAFE_INTEGER:表示能够精确表示的最大整数,即9007199254740991。
Number.MIN_SAFE_INTEGER:表示能够精确表示的最小整数,即-9007199254740991。

(4)Number对象实例的方法

1
2
3
4
toString() //用来将一个数值转为字符串形式.可以接受一个参数,表示输出的进制。如果省略这个参数,默认将数值先转为十进制,再输出字符串;否则,就根据参数指定的进制,将一个数字转化成某个进制的字符串。
toFixed() //用于将一个数转为指定位数的小数,返回这个小数对应的字符串。
toExponential() //用于将一个数转为科学计数法形式。可传入一个参数,参数表示小数点后有效数字的位数,范围为0到20,超出这个范围,会抛出一个RangeError。
toPrecision() //用于将一个数转为指定位数的有效数字。

3.4 String 对象

(1)生成实例对象

1
var s = new String()

(2)String对象的属性

1
s.length //返回字符串的长度

(3)方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
s.chatAt(index) //返回指定位置的字符
s.fromCharCode() //该方法的参数是一系列Unicode码点,返回对应的字符串。
s.charCodeAt(index) //返回给定位置字符的Unicode码点(十进制表示)
s.concat(s2) //用于连接两个字符串
s.slice(start,end) //用于从原字符串取出子字符串并返回,不改变原字符串。第一个参数是子字符串的开始位置,第二个参数是子字符串的结束位置(不含该位置)。如果参数是负值,表示从结尾开始倒数计算的位置,即该负值加上字符串长度。
s.substring(start,end) //用于从原字符串取出子字符串并返回,不改变原字符串.第一个参数表示子字符串的开始位置,第二个位置表示结束位置。
s.substr(start,length) //用于从原字符串取出子字符串并返回,不改变原字符串。第一个参数是子字符串的开始位置,第二个参数是子字符串的长度。如果第一个参数是负数,表示倒数计算的字符位置。如果第二个参数是负数,将被自动转为0,因此会返回空字符串。
s.indexOf(s) //返回给定元素在字符串中第一次出现的位置,如果没有出现则返回-1。可以接受第二个参数,表示搜索的开始位置
s.lastIndexOf() //返回给定元素在字符串中最后一次出现的位置,如果没有出现则返回-1。
s.trim() //用于去除字符串两端的空格,返回一个新字符串
s.toLowerCase() //用于将一个字符串全部转为小写,返回一个新字符串,不改变原字符串。
s.toUpperCase() //全部转为大写
s.localeCompare(s2) //用于比较两个字符串。它返回一个整数,如果小于0,表示第一个字符串小于第二个字符串;如果等于0,表示两者相等;如果大于0,表示第一个字符串大于第二个字符串。
s.match(regexp) //用于确定原字符串是否匹配某个子字符串,返回一个数组,成员为匹配的第一个字符串。如果没有找到匹配,则返回null。
s.search() //返回值为匹配的第一个位置。如果没有找到匹配,则返回-1。
s.replace(oldValue,newValue) //用于替换匹配的子字符串,一般情况下只替换第一个匹配(除非使用带有g修饰符的正则表达式)。
s.split() //按照给定规则分割字符串,返回一个由分割出来的子字符串组成的数组。还可传入第二个参数,决定了返回数组的成员数。

3.5 Math对象

(1)属性

1
2
3
4
5
6
7
8
Math.E:常数e。
Math.LN2:2的自然对数。
Math.LN10:10的自然对数。
Math.LOG2E:以2为底的e的对数。
Math.LOG10E:以10为底的e的对数。
Math.PI:常数Pi。
Math.SQRT1_2:0.5的平方根。
Math.SQRT2:2的平方根。

(2)数学方法

1
2
3
4
5
6
7
8
9
10
11
Math.abs():返回参数的绝对值
Math.ceil():向上取整,接受一个参数,返回大于该参数的最小整数。
Math.floor():向下取整
Math.max(n,n1,...):可接受多个参数,返回最大值
Math.min(n,n1,..):可接受多个参数,返回最小值
Math.pow(n,e):指数运算, 返回以第一个参数为底数、第二个参数为幂的指数值。
Math.sqrt():返回参数值的平方根。如果参数是一个负值,则返回NaN。
Math.log():返回以e为底的自然对数值。
Math.exp():返回e的指数,也就是常数e的参数次方。
Math.round():四舍五入
Math.random():返回0到1之间的一个伪随机数,可能等于0,但是一定小于1。

(3)三角函数方法

1
2
3
4
5
6
Math.sin():返回参数的正弦
Math.cos():返回参数的余弦
Math.tan():返回参数的正切
Math.asin():返回参数的反正弦(弧度值)
Math.acos():返回参数的反余弦(弧度值)
Math.atan():返回参数的反正切(弧度值)

3.6 JSON对象

(1)方法

1
2
3
4
5
6
JSON.stringify()
//用于将一个值转为字符串。该字符串应该符合JSON格式,并且可以被JSON.parse方法还原。
//(JSON.stringify(obj, selectedProperties))还可以接受一个数组,作为第二个参数,指定需要转成字符串的属性。
//还可以接受第三个参数,用于增加返回的JSON字符串的可读性。如果是数字,表示每个属性前面添加的空格(最多不超过10个);如果是字符串(不超过10个字符),则该字符串会添加在每行前面。
JSON.parse() //用于将JSON字符串转化成对象。

3.7 console对象

(1)方法

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
console.log(text,text2,...) //用于在console窗口输出信息。它可以接受多个参数,将它们的结果连接起来输出。如果第一个参数是格式字符串(使用了格式占位符),console.log方法将依次用后面的参数替换占位符,然后再进行输出。
console.info() //在console窗口输出信息,同时,会在输出信息的前面,加上一个蓝色图标。
console.debug() //在console窗口输出信息,同时,会在输出信息的前面,加上一个蓝色图标。
console.warn() //输出信息时,在最前面加一个黄色三角,表示警告;
console.error() //输出信息时,在最前面加一个红色的叉,表示出错,同时会显示错误发生的堆栈
console.table() //可以将复合类型的数据转为表格显示。
console.count() //用于计数,输出它被调用了多少次。
console.dir() //用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。
console.dirxml() //用于以目录树的形式,显示DOM节点。
console.assert() //接受两个参数,第一个参数是表达式,第二个参数是字符串。只有当第一个参数为false,才会输出第二个参数,否则不会有任何结果。
//这两个方法用于计时,可以算出一个操作所花费的准确时间。
console.time()
console.timeEnd()
//time方法表示计时开始,timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后,console窗口会显示“计时器名称: 所耗费的时间”。
console.profile() //用来新建一个性能测试器(profile),它的参数是性能测试器的名字。
console.profileEnd() //用来结束正在运行的性能测试器。
console.group()
console.groupend()
//上面这两个方法用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。
console.groupCollapsed() //用于将显示的信息分组,该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。
console.trace() //显示当前执行的代码在堆栈中的调用路径。
console.clear() //用于清除当前控制台的所有输出,将光标回置到第一行。
1…141516…20
JiM-W

JiM-W

keep fighting!

195 日志
52 分类
90 标签
© 2017 JiM-W
由 Hexo 强力驱动
主题 - NexT.Pisces