JavaScript常用的基础知识点手册

JavaScript 中==与===的区别

首先,== equality 等同,=== identity 恒等。
==, 两边值类型不同的时候,要先进行类型转换,再比较。
===,不做类型转换,类型不同的一定不等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
> '1'==1
true
> '1'===1
false

> 0 == false // OK
true
> 1 == true // OK
true
> 2 == true // not OK
false

> '' == false // OK
true
> '1' == true // OK
true
> '2' == true // not OK
false

> '' == 0
true
> '\n 123 \t' == 123
true

下面分别说明:
先说 ===,这个比较简单。下面的规则用来判断两个值是否===相等:

  1. 如果类型不同,就[不相等]
  2. 如果两个都是数值,并且是同一个值,那么[相等];(!例外)但是,如果其中至少一个是NaN,那么[不相等]。(判断一个值是否是NaN,只能用isNaN()来判断)
  3. 如果两个都是字符串,每个位置的字符都一样,那么[相等];否则[不相等]。
  4. 如果两个值都是true,或者都是false,那么[相等]。
  5. 如果两个值都引用同一个对象或函数,那么[相等];否则[不相等]。
  6. 如果两个值都是null,或者都是undefined,那么[相等]。

再说 ==,根据以下规则:

  1. 如果两个值类型相同,进行 === 比较。
  2. 如果两个值类型不同,他们可能相等。根据下面规则进行类型转换再比较:
    a. 如果一个是null、一个是undefined,那么[相等]。
    b. 如果一个是字符串,一个是数值,把字符串转换成数值再进行比较。
    c. 如果任一值是 true,把它转换成 1 再比较;如果任一值是 false,把它转换成 0 再比较。
    d. 如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较。对象转换成基础类型,利用它的toString或者valueOf方法。js核心内置类,会尝试valueOf先于toString;例外的是Date,Date利用的是toString转换。非js核心的对象,令说(比较麻烦,我也不大懂)
    e、任何其他组合,都[不相等]。

举例:
“1” == true
类型不等,true会先转换成数值 1,现在变成 “1” == 1,再把”1”转换成 1,比较 1 == 1, 相等。

= 赋值运算符
== 等于
=== 严格等于
例:
var a = 3;
var b = “3”;
a==b 返回 true
a===b 返回 false
因为a,b的类型不一样
===用来进行严格的比较判断

参数类型1 参数类型2 强制转换
null undefined 不转换,总是返回true
null或者undefined 其他任何非null或undefined的类型 不转换,总是返回false
原始类型:string,number,boolean Date对象 将原始类型转换为数字;将Date对象转换为原始类型(优先尝试toString方法,再尝试valueOf方法)
原始类型:string,number,boolean 非Date对象 将原始类型转换为数字;将Date对象转换为原始类型(优先尝试toString方法,再尝试valueOf方法)
原始类型:string,number,boolean 原始类型:string,number,boolean 将原始类型转换为数字
最后的建议就是避免对混合类型使用 == 运算符
当参数类型不同时,== 运算符应用了一套难以理解的隐式强制转换规则。
使用 === 运算符,使读者不需要涉及任何的隐式强制转换就能明白你的比较运算。
当比较不同类型的值时,使用你自己的显示强制转换使程序的行为更清晰。

阻止冒泡事件和默认事件

  当一个容器上面绑定了点击事件,容器中的容器或者元素绑定了点击事件,点击最里面的元素时,它会不断向上冒泡响应事件,那么外面的容器的事件也会响应.
  比如body上绑定了点击事件1,里面div绑定了事件2,点击div会依次响应事件2,再事件1,怎么阻止这个传递过程呢,看下面代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//功能:停止事件冒泡 
function stopBubble(e) {
// 如果提供了事件对象,则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
// 因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
// 否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
// 功能:阻止事件默认行为
function stopDefault( e ) {
// 阻止默认浏览器动作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
} else {
// IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}

// 事件注意点
event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;
event对象只在事件发生的过程中才有效。
firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。
在IE/Opera中是window.event,在Firefox中是event;而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。

页面DOM结构加载完毕后再执行js

1
2
3
4
5
6
7
8
9
10
window.onload = function(){//等待页面内DOM、图片资源加载完毕后触发执行 //TO DO}
jquery写法

$(document).ready(function(){
});
或者
$(function(){
var userName="xiaoming";
alert(userName);
});

小技巧

Chrome 控制台console的用法

更多参考 :http://www.open-open.com/lib/view/open1421131601390.html

true和false字符串转bool类型

1
eval('true')

说明
eval()该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 EvalError 异常。
抛出
如果参数中没有合法的表达式和语句,则抛出 SyntaxError 异常。
如果非法调用 eval(),则抛出 EvalError 异常。
如果传递给 eval() 的 Javascript 代码生成了一个异常,eval() 将把该异常传递给调用者。

可以使用下面这段代码来检测 eval() 的参数是否合法:

1
2
3
4
5
6
try{
alert("Result:" + eval(prompt("Enter an expression:","")));
}
catch(exception) {
alert(exception);
}

一行jQuery代码搞定checkbox 全选和全不选

JavaScript部分:

1
2
3
function checkAll(obj){
$("#box input[type='checkbox']").prop('checked', $(obj).prop('checked'));
}

html部分:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="box">
<input type="checkbox" onclick="checkAll(this)">全选<br><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
</div>
0%