相关博客:
this
在 JavaScript 中主要有以下五种使用场景this
绑定全局对象,浏览器环境全局对象为 window
。this
绑定到该对象。this
也绑定全局对象,应该绑定到方法b对应的对象a上。这是 JavaScript的缺陷,解决方法:用that
捕捉。this
绑定到新创建的对象。apply
或call
调用函数, this
将会被显式设置为传入的的第一个参数。// 三段有意思的代码
window.test = 'test'
var obj = {
test: 'objtest',
getAge: function () {
var obj2 = {
test: 'obj2test',
getAge2: function () {
console.log(this.test)
}
}
return obj2;
}
};
obj.getAge().getAge2() // 'obj2test'
// ==============
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
// ==============
var a = 1;
f1 = function () {
var a = 2;
console.log(this.a);
};
f1(); // 1
encodeURIComponent()
函数定义和用法
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
语法
encodeURIComponent(URIstring)
返回值
URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。
说明
该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。 其他字符(比如 :;/?😡&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。
例子
document.write(encodeURIComponent("http://www.w3school.com.cn"));
document.write("<br />");
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/"));
document.write("<br />");
document.write(encodeURIComponent(",/?:@&=+$#"));
输出:
http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23
requestAnimationFrame
函数和cancelAnimationFrame
函数初始化:
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
使用:
var id;
function draw() {
// Do whatever...
id = requestAnimationFrame(draw);
}
draw();
取消重绘:
window.cancelAnimationFrame(id);
——《JavaScript高级程序设计》(第3版)7.5
使用闭包主要是为了:设计私有的方法和变量。
function foo() {
var i = 0;
return (function bar() {
i++;
console.log(i);
setTimeout(bar, 1000);
})();
}
foo();
foo();
有时需要将网页中的一些数据保存在浏览器端,这样做的好处是,当下次访问页面时,不需要再次向服务器请求数据,直接就可以从本地读取数据。目前常用的有以下几种方法:
cookie会随着每次HTTP请求头信息一起发送,无形中增加了网络流量,另外,cookie能存储的数据容量有限,根据浏览器类型不同而不同,IE6大约只能存储2K。
缺点:需要安装Flash插件。
Google开发出的一种本地存储技术。 缺点:需要安装Gear组件。
IE浏览器可以使用userData来存储数据,容量可达到640K,这种方案是很可靠的,不需要安装额外的插件。缺点:它仅在IE下有效。
使用于Firefox2+的火狐浏览器,用这种方式存储的数据仅窗口级别有效,同一个窗口(或者Tab)页面刷新或者跳转,都能获取到本地存储的数据,当新开窗口或者页面时,原来的数据就失效了。 缺点:IE不支持、不能实现数据的持久保存。
使用于Firefox2+的火狐浏览器,类似于IE的userData。 缺点:IE不支持。
localStorage是Web Storage互联网存储规范中的一部分,现在在Firefox 3.5、Safari 4和IE8中得到支持。 缺点:低版本浏览器不支持。
可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。
<style>
a:link, a:visited {
display: block;
text-align: center;
text-decoration:none;
width: 120px;
background-color: #98bf21;
/* not important: */
color: #FFFFFF;
font-weight: bold;
padding: 4px;
}
/* not important: */
a:hover, a:active {background-color:#7A991A;}
</style>
display:none
和 visibility:hidden
的区别display: none;
隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,
就当他从来不存在。visibility: hidden;
隐藏对应的元素,但是在文档布局中仍保留原来的空间。link
和 @import
的区别link
属于HTML标签,而@import
是CSS提供的;link
会同时被加载,而@import
引用的CSS会等到页面被加载完再加载;@import
只在IE5以上才能识别,而link
是HTML标签,无兼容问题;link
方式的样式的权重 高于@import
的权重.position: absolute
与position: fixed
共同点与不同点p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled , :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
color:blue !important;
权重的规则:标签的权重为1,class的权重为10,id的权重为100。以下例子是演示各种定义的权重值:
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现。
浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。
function PrimaryStudent() {
this.grade = 1;
}
PrimaryStudent.prototype.sayHi = function(){
alert('hi');
}
var p = new PrimaryStudent();
相当于
var p = {};
p.__proto__ = PrimaryStudent.prototype; // p.sayHi()
PrimaryStudent.call(p); // p.grade
JavaScript原有的for...in
循环,只能获得对象的键名
,不能直接获取键值
。ES6提供for...of
循环,允许遍历获得键值
:
var arr = ['a', 'b', 'c', 'd'];
for (let a in arr) {
console.log(a); // '0' '1' '2' '3'
}
for (let a of arr) {
console.log(a); // a b c d
}
上面代码表明,for...in循环读取键名,for...of循环读取键值。
for...of
循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。这一点跟for...in
循环也不一样:
let arr = [3, 5, 7];
arr.foo = 'hello';
for (let i in arr) {
console.log(i); // "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // "3", "5", "7"
}
上面代码中,for...of循环不会返回数组arr的foo属性。
XMLHttpRequest这个对象的属性:
它的属性有:
当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态,直到请求被处理,然后才接收一个回应。readyState就是XHR请求的状态属性,它本身有5个属性值:
/*方法一:*/
.clearfix {
overflow: auto;
}
/*方法二:*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
var selectedTxt = window.getSelection().toString();