标签：
5) 变量 (将注意力集中在常用、有效情况及组合，其它合理语法不过多关注)
- 语句
javascript语句以换行表示结束。也可以用semicolon ";"显示表示换行结束。但最佳方式是用";"。试想在压缩格式中，如果没有";"会发生什么?
- 声明并且赋值
可以直接使用使用变量，无需var声明。fullName = ‘Larry Ullman‘; 。但最佳的方式是用var显示声明并同时赋值
var fullName = ‘Larry Ullman‘;
同时声明多个变量
var firstName = ‘Larry‘, lastName = ‘Ullman‘;
- 引用
javascript的引用具有向后引用的特性。一行语句可以引用在后面申明的简单变量、复杂变量、函数。
- var是无类型的
var没有类型，javascript隐式转换
var fullName = ‘Larry Ullman‘;
fullName = 2;
- var值类型
简单的值类型分成三种。更复杂的是array和object
number类型: 不能用引号括起。可以使数字、"."、"e"、"+"、"-"，但不能包含千位分隔符号"," 。
string: 可以使空""。即可以用单引号括起，也可以用双引号括起。如果单双引号相互包含，最佳的方式是使用反斜杠转义。比如
"I‘ve got an idea." 正确
‘I\‘ve got an idea.‘ 正确
"Chapter 4, \"Simple Variable Types\"" 正确
boolean: 其值为true 、false 。在控制结构中null、undefined、0、empty string均被看做false。 null、undefined不能用引号括起，而是
直接使用。
特殊的值: null和undefined。undefined表示变量声明但未被赋值，此外如果函数没有显示返回值，其返回值为undefined。
null表示操作没有结果。
- 值操作
number类型: + - * / %。%表示取余数 7%2=1 。
可以和=组合。
可以自增减 ++、--, 有前置和后置两种属性。
- 变量作用域
全局变量
在函数外声明变量，即成为全局变量，可以从其他的js文件访问。全局变量的隐含意义是它们自动成为window的属性或方法，所以自定义的全局变量或者函数均可以用
window.globalVariable，window.myFunction()来访问。所以window.print()可以简写为print()。
在函数内部声明为局部变量，只能在同一函数内才能访问。即是从同一文件的其它函数体中也无法访问这个局部变量。
避免与browser变量服务冲突的方法是使用骆驼法命名变量，至少有一个驼峰。
此外浏览器提供的对象也是全局。
-closure(闭包)
如果函数局部变量被函数域内其它自定义函数访问，顶层函数中的局部变量生命期将扩大，可能是到整个浏览器窗口关闭，但作用域不变。同时顶层函数被访问的是其运行值
，而不是定义值。
(function(){
var i=1;
window.onload=function(){
alert(i);
};
i = 300;
})()
将输出300
6) 流向控制
- if
if(true){}else if(true){} else{}
- switch
switch (expression) {
case value1:
// Execute these statements.
break;
case value2:
// Execute these statements instead.
break;
default:
// No, execute these statements.
break;
}
相等的判断为identical，而非equal。其express为任何值类型，比如string。
尤其注意break，如果忘记break，所有的语句都将被执行一遍。
常用的情况有case联合，如下
switch (weekday) {
case ‘Monday’:
case ‘Wednesday’:
case ‘Friday’:
// Execute these statements.
break;
case ‘Tuesday’:
case ‘Thursday’:
// Execute these statements instead.
break;
default:
// The default statements.
break;
}
- CrYPtiC Conditionals
格式
(condition) ? return_if_true : return_if_false;
- 循环控制
for (initial expression; condition; after expression) {
// Execute these statements.
}
initial expression仅仅执行一次。当condition为true时候，进入循环体。当循环体执行完毕后，将执行after expression。
一个比较复杂的循环例子。
for (var i = 1, var j = 0; (i + j) <= 10; i++, j += i) {
// Do something.
}
while (condition) {
// Statements to be executed.
}
condition满足才进入循环体。
do {
// Statements to be executed.
} while (condition);
先执行循环体。退出时判断condition，为true，进入下一轮循环体。
break
退出整个循环。
continue
退出本轮循环，进入下一轮循环体。
7) 注释
//
/*
*
*/
8) 流控制中逻辑运算及真值判断
- 真值判断
非假为真值。
假值的情况包括, 所以-1将等价于true。
- 逻辑运算(比较运算)
在javascript中称为比较运算。包括
因为javascript会进行隐含的转换，0，empty string等都被转换为假值。但是他们的类型并不一样，如果用==比较，
结果为真，用===比较，结果为假，因为他们的类型不一样。
当要精确地与0、false、empty string、null、undefined进行比较时候，使用===。
9) number运算精度及number比较
小数0.321可以表示为.321，这样 1 - 0.321可以表示为 1- .321。
number算术运算的精度和有效位数规则不知。如果进行下列运算将会有下列结果。
1-.8=0.19999999999999996
.3-.1=0.19999999999999998
1-.3=0.7
所以，比较 1-.8==.3-.1, 结果将为false。减少影响的方法是使用toFixed(width)将裁剪结果后的小数位。
var v=1-.8;
v.toFixed(1); //结果将为0.2
NaN是javascript中有效的保留字，表示这不是一个数字。但是它不能用在比较运算中。下列返回false
if( NaN==NaN)
所以将NaN用在比较运算中没有意思。如果要判断一个变量是否为一个数字(意思是能全部转化为数字)，使用isNaN函数
比如if(isNaN(n))。可以用isFinite()来代替判断变量是否为数字，isFinite表示是否为有限的数字。
11) 字符串比较运算及字符串分行
字符串运算时大小写敏感的，如果要进行大小写不敏感的比较，先调用toLowerCase() 或 toUpperCase()。
if (email.toLowerCase() == storedEmail.toLowerCase())
判断字符串包含关系
if (comments.indexOf(‘spam’) != -1) { // Contains spam!
字符串分行
使用反斜杠"\"分行, 经常和换行符组合起来，"\n\"。并且通常用单引号将包括字符串，这样就可以直接将双引号作为普通的字符包含在字符串之中
。比如下列语句创建一个新的div
c = document.createElement(‘div‘);
c.id = ‘promptWindowArea‘;
c.innerHTML =
‘\n\
<div id="promptWindow" style="width:300px; height:150px;
background-color: #00CCFF; padding: 5px; margin: 10px;"> \n\
<p style="height:40px;width:100px;">hardware
info</p> \n\
<div style="overflow:auto;"> \n\
<button id="okbutton" style="position:left">ok</button>
\n\
<button id="cancelbutton"
style="position:left">cancel</button> \n\
</div> \n\
</div> \n\ ‘;
alert(‘hello \
word‘);
12) 类型判断(typeof操作符)
if (typeof myVar == ‘number’)
常用类型返回值对应表。注意NaN返回number。
typeof可以准确判断一个变量不属于undefined。如果要准确判断对象的类型还可使用
这种方法只用于new创建的对象上
var Rectangle = function(x,y,size){ };
var myRec = new Rectangle(100,100,30);
if( myRec instanceof Rectangle )
{
console.log(‘true‘);
}else{
console.log(‘false‘);
}
将返回true
if( myRec.constructor == Rectangle )
{
console.log(‘true‘);
}else{
console.log(‘false‘);
}
将输出true。注意比较运算的两边均不是简单对象，所以它们在比较运算之前，先隐式的进行其它运算。
11 ) 复杂对象(高级对象)
- Date
创建日期对象
var today = new Date();
- array
创建数组
var myList = new Array(1, 2, 3);
var people = new Array(‘Fred‘,‘Daphne‘, ‘Velma‘, ‘Shaggy‘);
var options = new Array(true, false);
var myVar = [];
var myList = [1, 2, 3];
var people = new Array(‘Fred‘,‘Daphne‘, ‘Velma‘, ‘Shaggy‘);
可以创建混合数组，但是这种情况比较少
var collection = [1, ‘Fred’, ‘Daphne’, 2, false];
访问数组长度
people.length得到数组长度，其中空隙占位undefined也被计算在内。
访问数组内容
直接访问数组变量将得到它所有结果，console.log(people)将输出"Fred Daphne Velma Shaggy"。
使用[]访问单个元素,console.log(people[0])将输出"Fred"。
为数组做赋值运算
使用[]为数组中的元素赋值。
可以向数组任意位置赋值，空隙将用undefined值填充。向数组末尾添加元素的方法是people[people.length]
多个数组值合在一起，使用concat，但是有些浏览器不支持。
var primes = [];
primes.concat(1, [3, 5, 7]); // [1, 3, 5, 7]
任意操作数组中的连续块splice()
splice可以插入、删除、替换连续的数据块。splice会返回移除的number_to_operate个元素。且r的类型为object。如果插入、替换、删除、取移除值被写入一个表达中，
先执行取值，再执行其它操作。
var ng=[0,1,2,3,4,5];
r = ng.splice(2,3,91,92,93,94);
console.log(ng);
console.log(r);
结果输出
[0, 1, 91, 92, 93, 94, 5]
[2, 3, 4]
r=splice(base_index, number_to_operate, new value, new value)。base_index是操作的基准点，number是数据块的长度。后面是新值。
number_to_operate通常0，表示是插入操作。
var ng=[0,1,2,3,4,5];
ng.splice(2,0,91,92,93,94);
console.log(ng);
输出
[0, 1, 91, 92, 93, 94, 2, 3, 4, 5]
如果没有new value, 表示是删除操作
var ng=[0,1,2,3,4,5];
ng.splice(2,3);
console.log(ng);
输出
[0, 1, 5]
如果number_to_operate非0，且存在new value，则是替换操作。number_to_operate是删除的个数，后面的新值可以是任意个数
var ng=[0,1,2,3,4,5];
ng.splice(2,3,99,92);
console.log(ng);
输出
[0, 1, 99, 92, 5]
splice可以用于方向操作，如果base_index为负数，则从数组末尾开始定位。-1定位在index=length-1处。但是number_to_operate的操作方向仍然是向右。
var ng=[0,1,2,3,4,5];
ng.splice(-2,3,99,92,93);
console.log(ng);
输出 [0, 1, 2, 3, 99, 92, 93]
取出数组中任意连续位置的值slice()
var r = slice(start_index_point, end_index_point)。如果end_index_point不存在将直接取到数组结束。注意取出的数据不包括end_index_point指向
的元素!!!
var primes = [1, 3, 5, 7]; //
var aPrime = primes.slice(0); // [1, 3, 5, 7]
var bPrime = primes.slice(1,2); // [3]
console.log(aPrime);
console.log(bPrime);
参数也可以为负数，这样从后开始计算，但是连续的方向仍是从左到右。
var primes = [1, 3, 5, 7]; // [1, 3, 5, 7]
var bPrime = primes.slice(-2,-1);
console.log(bPrime);
得到结果 [5]
搜索数组内容
var people = new Array(‘Fred‘,‘Daphne‘, ‘Velma‘, ‘Shaggy‘);
people.indexOf(‘Velma‘)将得到2。
数组空洞
最好使用undefined显示定义。
var myList = [1, , 3, , 5];不推荐，最好使用
var myList = [1, undefined, 3, undefined, 5];
在循环中通常要空洞是否存在，使用
if (myList[i] !== undefined) { // Exists!
或者if (i in myList) { // Exists!
i表示索引号。
删除数组，使用delete方法，数组中将留下一个空洞 delete people[0];
数组元素的结构化操作。
向末尾加入元素，意思即是元素被加在了index=length处。使用函数push()
var primes = [];
primes.push(1); // [1]
primes.push(3, 5, 7); // [1, 3, 5, 7]
相反的操作是unshift()，它将元素加入了队列的开头。但是unshift的速度执行慢，所以慎用。
弹出数组最后一个元素, 意思是index=length-1处的元素，使用pop()。
var primes = [1, 3, 5, 7]; // [1, 3, 5, 7]
primes.pop(); // [7]
弹出数组中第一个元素shift()。它比pop慢，慎用。
多维数组
var grid = [[2, 4, 6, 8], [1, 3, 5]];
grid.length; // 2
grid[0].length; // 4
grid[1].length; // 3
grid[0][0]; // 2, first item in the first subarray
有用的且常用函数
array_var.join(‘+‘) 将数组每个元素用“+”连接起来，最后得到一个字符串。
array_var.split(‘+‘) 将字符串中每个元素用 "+"分割开来。
- Object
Object是所有的基类。注意object中的属性出现顺序是不固定的，并不依赖于书写顺序。
对象可看做是无序的一组属性集合，而array是有序的。
声明对象
var myObj = new Object();
或者
var myObj = {};
为对象赋值(指属性和操作)
var chapter = {
num: 6,
title: ‘Complex Variable Types‘,
};
或
var chapter = new Object({num: 6, title: ‘Complex Variable Types‘});
属性值可以是更复杂的数组或对象
var me = {
name: ‘Larry Ullman‘,
age: 42,
car: {
make:‘Honda‘,
model: ‘Fit‘,
year: 2008
},
favoriteColors: [‘Black‘, ‘Blue‘, ‘Gray‘],
tired: true
};
向对象中动态加入属性
如果对象中没有该属性，赋值操作将自动增加该属性
chapter.startPage = 256; 该语句将会增加startPage属性。
判断属性是否存在使用undefined, if(undefined===object.property)表示不存在。
使用if(object.property)不能准确判断属性是否存在，因为num为0时候，比较运算返回false。
使用in操作也可, if( ‘property_name‘ in object)，当存在这个元素时候，返回真。
var myObj={
num:false,
name:‘bicycle‘,
};
if( ‘numd‘ in myObj)
console.log("exist");
else
console.log("not exist");
在知道属性的值类型时，使用typeof也可准确判断属性是否存在if( ‘value type‘==typeof(object.property_name))
访问对象属性
使用chaining object notation方法访问对象属性，object.property_name.property_name。
me.car.model; // Fit
me.favoriteColors[0]; // Black
使用array notation书写方法访问对象属性，这时对象被看做是一维数组，属性被看做了位置属性。前面两句等价于
me[‘car‘][‘model‘]; //Fit
me[‘favoriteColors‘][0]; //Black
在某种情况下，只能使用array notation书写方式访问对象属性，见<<moder javascript develop and design>> Page210
现在举例。
var car = {
brand:‘sony‘,
price:150000,
engine:4,
}
for(p in car)
{
console.log(car[p]);
}
将输出sony 150000 4
遍历对象所有成员
使用for in遍历。这种方法注意一者元素的出现顺序不固定，二者会看见父类的属性，三者速度较慢
for (var p in myObj) {
// Use myObj[p]. property_name
}
删除对象一个属性
使用delete obj.property_name
函数是一个对象
函数也是一个对象，如果使用toString, 将得到函数的代码。使用typeof，将返字符串function。如果console.log(function_name)，将得到
function_name()。
this
在对象的函数成员中访问自己的属性，使用this.property的方式。
对象之间赋值
对象之间可以相互赋值
var car = {
color:‘green‘,
startToRun:function(){console.log(‘running‘)},
};
var toshibaCar = car;
console.log(‘toshiba car COLOR is:‘+toshibaCar.color);
toshibaCar.startToRun();
console.log(typeof(toshibaCar));
将输出
toshiba car COLOR is:green
running
object
12) 函数
- 基本
定义函数
函数也是对象，所以它定义的书写方式和其它变量的书写方式一样。
function fname(arg_name, arg_name){}。参数列表中不需要像C语言那样定义类型，因为javascript是没有变量类型的，只有值类型。
参数前面的不需var关键字。
调用函数
除了使用常规的方式外。
如果传入的参数不够，不足的部分被定义为undefined。如果传入的参数过多，多出的部分将被自动截断。这两种情况均视为合理状况。
通过这种方法，可以知道用户忘记传递那个参数。
function theBuy(bookName)
{
if(undefined === bookName)
console.log("please input para bookName");
else
console.log("have bought "+bookName+" book");
}
theBuy();
输出 please input para bookName
如果想为函数设置缺省值，利用下列方法
function functionName(someVar) {
if (typeof someVar == ‘undefined’) {
someVar = ‘default value’;
}
}
如果想跳过中间的参数，使用undefined。
function functionName(a, b, c) {
}
functionName(true, undefined, false);
还可以将参数值组成obj传递进去。这种方法可能更容易阅读。
var drawRectangle = function(obj){
console.log( obj.x+‘ ‘+obj.y+‘ ‘+obj.size );
}
drawRectangle({x:50,y:50,size:300});
将输出
50 50 300
返回值
不能显示去声明返回的变量。如果函数没有return语句，或者return语句后没有数据，等价于函数返回undefined。
如果想返回多个值，使用数组。 return [‘h‘,‘o‘];
当然也可返回对象 return {x: 1, y: 2};
- 函数体内内置对象arguments
arguments只在函数体有效，它是array-like的一种变量，但是不能向其中插入元素。arguments容纳实际的输入值，与函数定义中参数的
名称和个数没有关系，即arguments只是与实参有关系，与形参没有关系。arguments.length表示传入参数的个数，如果定义了两个参数，
但是只传入了一个，那么arguments.length的值
仍为1。
function drawcar(size,color)
{
console.log(arguments);
console.log(arguments.length);
};
drawcar(100);
输出[100] 1
用于可变长参数
使用arguments.length设计可变长函数。?
function myJoin()
{
var tol = ‘‘;
for(var i=0,len = arguments.length;i<len;i++)
{
tol += arguments[i] + ‘ ‘;
}
console.log(tol);
}
myJoin(‘quest‘,‘helen‘,‘nana‘)
输出quest helen nana
- 使用object构造可变长函数
除了使用arguments外，还可使用object，好处在于向函数内部传递数据时候是reference。
function showCar(myObj)
{
for(var p in myObj)
console.log(myObj[p]);
}
showCar({
size:‘500m‘,
color:‘red‘
});
输出 500 red
- 函数入口数据传递
有两种方法，值传递和引用传递。简单值类型string,number,boolean是值传递。object和array是引用传递。
- 使用符号作为函数名
最灵活的是使用符号作为函数名，典型的例子是$。
- 匿名函数(没有名字)
可以创建一个匿名函数，再将它赋给一个变量。这种方法的用处是书写灵活。下例子等价于function getTwo(){}
var getTwo = function() {
return 2;
}
匿名函数也是一个对象，只是没有名字。所以需要将它赋给一个变量，或者作为其它函数的参数值。最重要的用处
是为对象的属性赋予一个匿名函数，显然在这里不能用显示的函数命名。
另一个优美的用法是立刻自我调用，注意，一定要跟着分号。
(function() {
// Function body goes here.
})();
这种方法的好处是变量可以从全局变量中分离开来。可以直接传递参数。
(function(str){
alert(str);
})(‘hello‘);
- 函数嵌套
这时向函数传递的是一个动作。
- chain 函数
function().function().function(), 函数的返回值在函数之间从左到右传递，形同chain。为了取得chain书写效果，每个函数必须要返回
一个合适的对象。
- 判断browser中的对象是否提供某种功能支持
if(obj.function_name)，如果不存在function_name，将返回undefined.
- 函数嵌套
一个函数可以在另一个函数体中定义，并定义。有何用处？将(function(){})()作为程序主体可以很有用，其它有用的场景
未知。
- 递归
递归是最重要的和常用的函数用法，一个递归函数包括入口、出口、循环体。循环体就是它自身。出口在函数开始处，入口在函数的末尾或循环体中，通过调用自己来
实现。
任何一个重复工作都可以使用递归实现，和循环体比较起来，可能的不利之处是递归依赖堆栈，可能会让堆栈崩溃。
比如计算字符串长度用递归来实现。
function countLength(str)
{
// 出口
if(str == ‘‘)
{
return 0;
}
// 循环体和入口
return 1+countLength(str.substring(1));
}
countLength(‘abcde‘);
输出
5
- 函数是一个对象
更加高级的话题是函数是一个对象。采用下面书写方式，明显的表明了函数是一个对象。
var Rectangle= function(x,y,size){};
左边var Rectangle的书写方式表明了函数与普通的变量声明一样，它也是一个对象。右边的匿名方式表明这是函数的值，形式上是一个函数体。
为函数对象添加成员
和普通的对象一样，可以向函数中添加属性成员和函数成员。和普通的对象一样，如果不存在这个属性，赋值运算后，它自动被加入函数对象之中
Rectangle.xis = 100;
Rectangle.yis = 200;
Rectangle.draw = function(){
console.log(‘rectangle drawed‘);
}
console.log(Rectangle.xis);
console.log(Rectangle.yis);
Rectangle.draw();
将输出
100 200 rectangle drawed
函数对象之间可以相互赋值
yourRec = Rectangle;
console.log(‘yourRec type is:‘ + typeof(yourRec));
yourRec.draw();
将输出
yourRec type is:function
rectangle drawed
对函数执行new操作
函数和普通对象的不同在于可以对函数对象执行new操作。这时候，除了返回一个对象外，函数体本身的代码会被执行。
var Rectangle= function(x,y,size){
console.log(‘in body‘);
}
var rectinstance = new Rectangle();
输出
in body
上条语句可以直接写new Rectangle(), 它也将输出in body。
当使用new时候，函数名体现了一种共同的特性，可以用于构造类系统。
13) event
- 位置
起初的方法是在html文档中直接嵌入时间处理函数，但这种方法书写凌乱，不便于阅读，已被抛弃。
<input type=‘button‘ value=‘clickme‘ onclick=‘alert("hello");alert("world");‘/>
另一种方式是传统的方式，这种方法已经使用了10多年，在所有的浏览器上都能工作。下面是将一个匿名函数
赋给了window对象的onload事件。
window.onload = function() {
// Do whatever.
}
第三种是w3c推荐的addEventListener()，比如window.addEventListener(‘load’, init, false)。这里注意第一个参数是事件的
名称，它不是window的属性。第二参数表示时间的处理函数。
- 事件传统书写方式详解
在传统方式中如果想取消一个事件的处理函数，使用null。
window.onload=null;
新的事件处理函数将会覆盖掉以前处理函数。下面代码calculate处理函数将会取代process处理函数。所以这种方式无法添加多个
事件处理函数。
document.getElementById(‘theForm’).onsubmit = process;
document.getElementById(‘theForm’).onsubmit = calculate; // Oops!
- w3c addEventListener详解
添加多个事件处理函数addEventListener，但最不幸的是ie9以前的版本不支持该函数！。这个函数不会覆盖以前的事件处理函数，
也不会覆盖使用传统书写方式添加的事件处理函数。下例子中load事件拥有两个事件处理函数
window.addEventListener(‘load’, process, false);
window.addEventListener(‘load’, calculate, false);
删除事件处理函数removeEventListener。不方便，删除时候参数填写必须和添加时完全一致。
window.removeEventListener(‘load’, process, false);
在ie9以前使用attachEvent()和detachEvent()添加和删除函数，比如下例。但是要注意使用的onload，这个应该是window的属性。
同时attachEvent也能添加多个处理函数。
window.attachEvent(‘onload’, init);
- ie事件添加函数兼容性检查
ie是在9中遵守w3c标准，老版本中使用的是attachEvent。需要判断浏览器版本。依据的方法是如果对象不存在函数，obj.func将
返回undefined, 如果存在，obj.func将返回function()。
if (window.addEventListener) { // W3C
window.addEventListener(‘load’, init, false);
} else if (window.attachEvent) { // Older IE
window.attachEvent(‘onload’, init);
}
- 已存事件快速浏览
按照这个分类方法认识所有的事件input device, browser,keyboard,form。
input device event
input device是光标驱动的设备。常见的事件有mousedown、click、mouseup、mouseout、mousemove(会降低性能，尽量少用，当鼠标移动时候激发。只有在
目标元素上才会激发，出了目标元素的区域，失效) 、mouseover(光标进入元素区域)
keyboard常见的事件是keydown、keypress、keyup
browser常见的事件有load、unloaded(当其它资源从browser中释放时候触发)、resize(调整window大小)、scroll(滚动窗口时候触发)、focus(当浏览器得到焦点时)、
blur(当浏览器失去焦点时候)。
form常见event有reset(当点击form的reset按钮)、change(当form中的元素被修改时发生，对于复选框等改变时候即发出该事件，对于文本输入框，当它失去焦点
时候发出change事件)、select(当选中文本输入框时候)
- 访问事件环境和自身信息
浏览器通过参数向事件处理函数传递环境信息。e表示处理函数对应的事件。在ie9及其它浏览器上，这个名字可以任意命名，通常使用最简洁的方式e。
function someEventHandler(e) {
// Use e.
}
在ie8及老版本中，事件对象放在了window.event之中。所以用这种格式访问。
function someEventHandler() {
// Use window.event.
}
但是如果使用inline event方式处理，处理函数的参数必须命名为event。像这样。
<a href=”somepage.html” onclick=”doSomething(event);”>Some Link</a>
事件处理函数跨浏览器访问事件的方法是使用下列方式
function someEventHandler(e) {
if (typeof e == ‘undefined’) e = window.event;
// Use e.
}
或
e = e || window.event; //所以javascript逻辑运算与c语言逻辑运算有差别。c逻辑运算最后只有真假。但javascript逻辑运算它可以
返回一个有意义的值。
或
e = e || window.event;
访问对应元素的方法，在ie8及老版本中是使用target属性，在ie9及其它浏览器中是使用srcElement，统一这两种方式跨浏览器的方法是
var target = e.target || e.srcElement;
this变量
在ie9及其它浏览器中，this代表的正是我们所期望的html元素。但是在ie8及老版本中，它代表的window对象。所以如果在事件处理函数中
使用this变量，需要发明兼容性的书写方式。
获取按下键值及key pressed事件
键盘一个按键有character和keyCode两种值。按键的keyCode唯一，它对应的character可能有多个，最常见的是大小写。举例子来说‘a‘
按键的keyCode是65, 它的character有两个‘A‘和‘a‘。‘A‘的unicode编码是65 ，‘a‘的unicode是97。
要获取按下键的键值，在ie中使用keyCode，在其它浏览器使用which。但实际ie的情况更为复杂。
在ie中，当keypress事件发生时候，keyCode存放的是character code，当keydown和keyup发生时候, keyCode存放是按键值。
跨浏览器的书写方式是
var charCode = e.which || e.keyCode;
或更加精确的方式
var charCode = (typeof e.which == ‘number’) ? e.which : e.keyCode;
这里经常用到方法是将数字装换为字符，使用String库函数
var ch = String.fromCharCode(97) //得到a
存在一些特殊的key。alt, shift,ctrl在event对象中有自己对应的布尔属性，表示是否按下，它们是shiftKey, ctrlKey, altKey。同时单独按下这三个键时候
也不会激发keypress事件。
- 替换事件缺省行为
事件处理函数返回false即可阻止缺省的处理动作。比如<a href=‘http://www.bing.com‘>，返回false，将不会网页跳转。但是不同元素，不同事件，其
缺省行为含义定义不一样。
- event bubble
当事件穿越父子元素时候，按bubble原则处理。举例如下，假设有下列元素
<div><h1>This is a Title</h1>
<p>This is a paragraph.
<a href=”#” id=”link”>This is a link.</a></p>
</div>
拥有的父子关系是
div -
- h1
- p
- a
事件的路径如下图
当将鼠标移动到a上时，将发生mouseover事件。mouseover事件的产生经过两个阶段。首先capture，此阶段，硬件事件将被从上到下一直比较到最末的孩子，所有注册了
mouseover处理函数的元素都将被着色。第二个阶段浏览器从底部向上浮升，所有被着色的元素将被依次调用mouseover的处理函数(当然是从下到上依次调用)。
附件
bubble的意义是当注意力转移到子元素(注意不是z轴上面的元素)上时候，虽然焦点已经转移到子元素上，但是父元素仍然能够收到事件通知。附件显示了bubble效果，当点击
button(用div模拟)，它的父div将受到click事件，输出
button click
dv click
在capture phase与event交互 ？(具体使用场合未知)
传统的书写方式只能用在bubble phase阶段。ie8及ie老版本不能用于capture phase阶段。ie9及其其它版本可以将addEventListener第三个参数设置为true，
在capture phase阶段关注事件，比如addEventListener(someDiv, ‘mouseover’, true)。在capture phase阶段关注事件的意义在于它可以截断事件，或者在
事件发生之前(应该是指事件处理函数被调用之前)做准备工作。
注意focus, blur, change, scroll, and submit这几个事件没有bubble phase。
阻止bubble phase
有时当子元素捕获到事件时，并不希望事件bubble到父元素(即不向上传递到父元素，因而父元素的事件处理函数将不会被激发)。在ie老版本中使用
e.cancelBubble = true， 在ie9及其它浏览器中使用e.stopPropogation()。统一的方式使用下列代码。
if (e.stopPropogation) { // W3C/addEventListener()
e.stopPropogation();
} else { // Older IE.
e.cancelBubble = true;
}
附件显示了bubble canncel的效果，当在button(用一个div模拟)上点击时候，只显示button click。
event delegation(事件委托)
因为所有的事件都会bubble到父元素，且事件参数的源属性为最底层的元素，所以可将事件处理函数统一移动到父元素中处理。下列在父元素dv中处理所有的点击事件
14) window
常见的dialog有alert、confirmation、prompt。分别用函数alert、confirm、prompt创建。, 它们没有html和css，不能修改风格，所以将被更好的方法取代。
因为window为顶级元素，所以所有定义的函数自动成为window的属性，可以使用window.yourFunc()形式来调用，当然我们更愿意使用直接的方式yourFunc()。
对于函数外定义变量也同样适用，可以使用window.yourVariable来访问
浏览器版本sniffing
可以使用window.navigator.userAgent来判断浏览器的种类和版本，但使用object detection的方法更好。
浏览器窗口位置
使用window的screenX和screenY。它们表示的是浏览器的左上角相对于显示屏幕的绝对位置。但是ie使用的是screenLeft，screenTop。
浏览器窗口大小
注意，有些浏览器可能不能在高分辨率下工作，比如火狐，虽然os的分辨率设为1600*900, 但它只能在一个小的分辨率下工作，可能是1200*600.
innerHeight和innerWidth显示了客户区的大小。
outerHeight和outerWidth显示了整体的大小。
对于老版本ie(ie8)，使用document.body.clientHeight和document.body.clientWidth。
移动浏览器
使用moveTo()或者moveBy()，但是很少有必要移动浏览器。(实验，这两个方法仿佛无效)
moveTo,以显示屏幕左上角为坐标点。
获取物理显示屏信息
使用window.screen对象。
使用javascript打开一个新的窗口
window.open(‘somefile.html‘)，它导致浏览器打开一个新的标签页，显示somefile.html的内容。注意需要将返回值赋给一个变量，否则在某些浏览器中会
产生问题。
var popup = window.open(‘somefile.html’);
open方法通常被用来打广告，所以浏览器常常会屏蔽这一个功能，这时open返回null。
open的第二个参数可以为新建窗口取一个名字，第三个参数可以控制窗口的外观，注意这些属性之间不能有空格！下面是一个例子
var popup = window.open(‘somepage.html‘, ‘myWindowName‘,
‘height=200,width=200,location=no,resizable=yes,scrollbars=yes‘);
但是不同的浏览器对第三个参数的处理方式不同，在Firefox中，上面的语句会弹出一个完全新的窗口，而maxthon仍然是在新标签中打开。
下面是可以在第三个参数中设置的window属性。
open创建窗口的焦点控制
使用popup.focus()函数激活一个窗口。未实验，不知道实际的含义。
关闭open创建的窗口
window.close用来关闭open打开的窗口，但实验中关闭了父窗口，不知为何?
查看使用open打开窗口的状态，使用下列语句。
if ((popup !== null) && !popup.closed) { // Still open.
标准的打开窗口方式
使用javascript方法创建新的窗口难于控制外观，应该使用html a 的方式打开，就像下列方式一样。
<a href="popupB.html" id="link" target="PopUp">B Link</a>
在窗口之前传递数据(未实验)
使用history浏览历史(未实验)
back()
forward()
go()
frame
传统的frameset方式已经过时。现在通常使用的是iframe。
iframe常用的场景是，判断一个窗口是否是iframe, iframe和父窗口交互，获取窗口所拥有的frame。未实验。
if (window.parent != window.self) { // This is a child! In the parent
window.frames[0]
访问iframe的属性和方法
var frame = document.getElementById(‘theFrame’);
var frameWindow = frame.contentWindow || frame.contentDocument;
// Access frameWindow.property and frameWindow.function()
重定向窗口
直接改变location属性，可以立刻重定向窗口。
window.location =‘http://www.example.com/otherpage.html‘;
同样的效果的另一种书写方式
window.location.href = ‘http://www.example.com/otherpage.html‘;
这两种方法的前一个页面均留在history中，可以用后退再次访问。
使用location.replace()函数，前一个网页不会进入history，因而无法用后退访问。
window.location.replace(‘http://www.example.com/otherpage.html‘);
还可以直接进入home中，home()仿佛无效？
invoking window.home()
location有两个常用的工具search和hash。search表示?, 用来传递数值，之间通常使用&分开，下面是一个例子。
http://www.example.com/page.php?s=10&np=7&sort=name
使用search运算，下面的语句返回?s=10&np=7&sort=name
var search = window.location.search;
hash的一个作用是，它可以通过<a>将页面视线移动到一个元素之中，比如下面语句
<a href=‘#bb‘>move eye to button that has id bb</a>
hash的另一个用途是记录页面的状态，比如说在有tab的页面中，记录当前是在那个tab之上，这种技术也称为deep linking。同时这种视线的改变也会加入history之中，
因而可以back后退。
当search和hash组合在一起的时候，正常的顺序应该是？...#，并且#后只有一个值。
打印页面
使用window.print(), 当然在某些设备上可能不支持该功能。
window的document属性
document属性代表加载了的html。document关键的属性有
15) DOM(Document Object Model)
HTML为root element，它有唯一的父节点document, document也只有一个孩子，即HTML.
DOM节点的关系。以附件的文档为例子
如果使用console.log(rootDiv.childNodes)观察运行值，得到下面输出。文本和div都被平行当做了rootDiv的孩子，共7个。
NodeList[<TextNode textContent="\n parent\n ">, div#childQuestDiv, <TextNode textContent="\n ">, div#childHuQuanDiv, <TextNode textContent=" \n ">, div#childLiuJC, <TextNode textContent="\n\n">]
<TextNode textContent="\n ">
HTMLCollection[div#childQuestDiv, div#childHuQuanDiv, div#childLiuJC]
观察node信息
寻找节点
方法一,从根节点开始，document.documentElement将返回HTML根元素，从html开始，便能遍历到所有的元素。
方法二，使用快捷方式访问DOM元素
方法三，任意访问节点
var rootDiv = U.$(‘rootDiv‘);
console.log(rootDiv.getElementsByTagName(‘DIV‘));
上面两条语句输出
HTMLCollection[div#childQuestDiv, div#childHuQuanDiv, div#duduDiv, div#childLiuJC]
document.getElementById(‘header‘). getElementsByTagName(‘a‘);
方法四, 使用css selector
参数是css选择子，比如像 p>a，或则#rootDIV
修改元素
元素可以修改的属性通常和html元素的属性对应(?)。
- class、for
class 、for是javascript的关键字，所以要访问html element的class、for属性使用className和htmlFor。
childLiuJC.className=‘hightschool‘;
- innerText ，textContent
将元素内容用纯文本替换，文本内容没有意义。需要做object detection
- innerHTML
将元素内容用html元素替换
创建元素
- document.createElement() 创建一个元素
创建一个html 元素 <arg></arg>, arg可以使任何字符串，document.createElement(‘myNewTag‘)将创建<myNewTag></myNewTag>元素。
var p = document.createElement(‘p‘);
p.innerText = ‘This is some text‘;
p.className = ‘enhanced‘;
- 将新建元素插入html中。insertBefore(), appendChild(), or replaceChild()
rootDiv.appendChild(p) 将把p(This is some text)插入到rootDiv的尾部
rootDiv.insertBefore(p, childHuQuanDiv);
将把p(This is some text)插入到childHuQuanDiv之前
rootDiv.replaceChild(p, childHuQuanDiv);
将替换掉childHuQuanDiv
如果仅仅添加文本，使用document.createTextNode()
var p = document.createTextNode(‘hello world‘);
rootDiv.appendChild(p);
克隆元素
- document.cloneNode()
这个函数不会拷贝内容和事件，但是会拷贝风格
var p = duduDiv.cloneNode();
rootDiv.appendChild(p);
输出
-removeChild删除元素
运用在父元素之上
rootDiv.removeChild(childHuQuanDiv);
寻找父元素的方法是使用parentNode属性。
16) javascrip和css
元素的css风格均放在style成员之中，style的属性均用骆驼法命名。style的值均被转换为inline style。反过来，从style属性中读出的值均是inline style。使用
console.log(duduDiv.style);
将会看到下列输出
蓝色数字是什么意思呢？猜想可能是枚举变量的对应值。
- 获取元素所有的style(可能还包括inline style风格以外)
需做跨平台检测，ie用currentStyle.yourSpecificStyle, 其它使用window.getComputedStyle(yourElem)。注意只能有用读，不能写。
- 隐藏和显示元素
duduDiv.style.visibility = ‘hidden‘;
duduDiv.style.visibility = ‘visible‘;
- 查看外部css的style
document.styleSheets，书上说是列出page用到的所有style，但实验结果为空，不知为何? P356
如果外部css文件拥有id，还可以使用getElementById取得它的引用
<!-- HTML -->
<link rel=‘stylesheet‘ id=‘mainStyleSheet‘ href=‘style.css‘>
// JavaScript:
var mainCSS = document.getElementById(‘mainStyleSheet‘);
mainCSS的成员只能，但是能失效整个css文件，如同下面语句。
mainCSS.disabled = ‘disabled‘;
使用insertRule()函数可以插入一条规则，但是下面语句实验失败，不知为何？50表示规则索引号
mainCSS.insertRule(‘.child: {visibility: none;}‘, 50);
mainCSS.deleteRule(5)表示删除索引号为5的规则，也是实验不能通过。
- 创建一个内置的style
可以使用createElement创建一个内置的style风格。比如下列代码
var s = document.createElement(‘style‘);
s.textContent = ‘div {border:2px solid green;}‘;
document.body.appendChild(s);
将会把div便为绿框
17) 文法摘要，运行值观察，typeof类型观察(理论创建)
console.log(), object.toString(),typeof(),比较运算中，javascript自动转换object，为用户输出有意义的值。对象包括number, boolean, string, array,object。
javascript的转换方式影响object detection。
- number
var nbr = 93;
console.log(‘run value: ‘+nbr);
console.log(‘tostring: ‘+nbr.toString());
console.log(‘typeof: ‘+typeof(nbr));
if(93 === nbr)
console.log(‘=== true‘);
这段代码将输出
run value: 93
tostring: 93
typeof: number
=== true
- string
var str = ‘abc‘;
console.log(‘run value: ‘+str);
console.log(‘tostring: ‘+str.toString());
console.log(‘typeof: ‘+typeof(str));
if(‘abc‘ === str)
console.log(‘=== true‘);
这段代码输出
run value: abc
tostring: abc
typeof: string
=== true
- boolean
var bl = true;
console.log(‘run value: ‘+bl);
console.log(‘tostring: ‘+bl.toString());
console.log(‘typeof: ‘+typeof(bl));
if(true === bl)
console.log(‘=== true‘);
这段代码输出
run value: true
tostring: true
typeof: boolean
=== true
- array
var ary = [12,56,910];
console.log(‘run value: ‘+ary);
console.log(‘tostring: ‘+ary.toString()+ ‘ the of toString: ‘+ ary.toString().length);
console.log(‘typeof: ‘+typeof(ary));
if(‘12,56,910‘ == ary)
console.log(‘== true‘);
else
console.log(‘== false‘);
这段代码输出如下，在比较运算中，javascript将ary转换成了字符串‘12,56,910‘
run value: 12,56,910
tostring: 12,56,910 the of toString: 9
typeof: object
== true
如果将比较运算改为
if(‘12,56,910‘ === ary)
console.log(‘=== true‘);
else
console.log(‘=== false‘);
将输出
=== false
因为等式两边虽然值等，但是类型并不相等。
同时将console.log(‘run value: ‘+ary)改为console.log(ary), 将得到下面输出
[12,56,910]
- obj
比如页面上有一个div元素，id号为rootDiv ，页面布局如附件
var rootDiv = U.$(‘rootDiv‘);
console.log(‘div element run value: ‘+rootDiv);
console.log(‘div element tostring: ‘+rootDiv.toString() + ‘ length: ‘+rootDiv.toString().length);
console.log(typeof(rootDiv));
if( ‘[object HTMLDivElement]‘ == rootDiv)
console.log(‘== true‘);
else
console.log(‘== false‘);
将输出
div element run value: [object HTMLDivElement]
div element tostring: [object HTMLDivElement] length: 23
object
== true
toString表示的是rootDiv的语法摘要。在比较运算中javascript转换为了语法意义。
将‘div element run value: ‘+rootDiv进行加法运算时候，javascript会隐含调用rootDiv的toString, 所以要观察rootDiv的运行值，应该
这样写
console.log(rootDiv);
它将输出如下运行值，让我们观察到rootDiv元素的内容
<div id="rootDiv" style="border:1px solid gray;width:300px;height:300px;margin:10px;">
所以如果想观察对象的文法意义，使用下面方式更加快捷
console.log(rootDiv+‘‘);
- 观察对象的文法含义
对于高级对象，如果想要观察对象的文法摘要，使用
console.log(obj.toString());
更加快捷的书写方式是
console.log(obj+‘‘);
18) 定时器
javascript定时器精度为1毫秒。同时javascript是单线程，所以无法保证精确的时间间隔。
设置一次性定时器
setTimeout(function(){ alert(‘3 seconds passed‘);}, 3000);
3秒钟后，将弹出对话框‘3 seconds passed‘
设置重复定时器
setInterval(function(){alert(‘5 s‘);},5000)
每隔5秒，均会弹出对话框，显示‘5 s‘
终止重复定时器的执行
使用clearInterval函数，参数为setInterval返回的定时器标识符号。可以从外部终止重复定时器，也可以从定时器内部终止定时器。从内部终止定时器即是
在定时器处理函数中写入终止条件，这样的好处是什么？可能是提高可读性，在创建时候，就明确指明退出条件，避免终止命令分散在工程各处，难以寻找。
19) 函数内变量、匿名函数变量作用域研究
- 全局域中定义的函数自动成为window的属性
- 全局域中定义的变量自动成为window的属性
- 函数体中定义变量为局部变量，当函数退出时，它们的值不会被保存，当再次进入时候，它们的值被恢复为初始值
- 创建自定义对象
函数本身也是对象。就像普通的对象一样，如果使用标号方式(即object.property) 向对象赋值，即是property不存在，但是经过赋值操作后property自动加入
object的属性。所以如果在函数内使用this.property=value的方式，将自动为函数对象加入一个属性property。下面的代码运行将输出‘swan‘。
function drawStar()
{
this.startName= ‘swan‘;
this.stopDraw = function(){};
}
var doIt = new drawStar();
console.log(doIt.startName);
因为javascript是基于prototype-type的oo编程语言，默认声明的都是对象。可以使用function 来加入新的自定义类，使得它像String, Number, Boolean,
Array, Object一样使用。
20) 类的构建(javascript称为自定义对象)
- 使用function构建自定义对象
javascript是prototype-type型的oo语言，不能创建类。使用函数，可以创建类系统，或者说为javascript加入自定义类，而不仅仅是系统的
定义的String，Number, Boolean, Array。
使用function的new特性，这时函数体的内容应该只放构造内容，加入成员函数，而不要放入其它东西。下面代码创建了新类Rectangle,可以向String一样
用new操作符创建Rectangle对象。
var Rectangle = function(x,y,size){
this.xis = x;
this.yis = y;
this.size = size;
this.draw = function(){
console.log(‘rectangle drawed: (x,y)size:‘+x+ ‘ ‘+y+‘ ‘+size);
}
};
var myRec = new Rectangle(100,100,30);
myRec.draw();
输出
rectangle drawed: (x,y)size:100 100 30
通常还可以加入自定义toString()和valueOf。toString反映语义摘要，valueOf反映值。
- 原型链(prototype chain)
myRec是基于Rectangle原型，而Rectangle又是基于Object，这成为原型链。为了区分一个方法是原型链中的还是对象自定义的，使用hasOwnProperty方法。它返回
boolean值。
- 向原型添加方法
如果向系统已有原型如String、Array等添加要谨慎。向自定义原型添加属性是很常见的。注意直接向函数对象赋值并不能加入原型之中，原因暂时将其理解为是因为它仅仅是
加入到函数对象之中。比如
Rectangle.disable = function(){console.log(‘disabled‘);}
Rectangle.disable();
将输出
disabled
下列代码试图从Rectangle的对象myRec中调用disable, 将出错，因为上面的方法不能将disable方法加入原型Rectangle之中。
Rectangle.disable = function(){console.log(‘disabled‘);}
myRec.disable();
想要修改Rectangle原型，应该使用prototype属性
Rectangle.prototype.disable = function(){console.log(‘disabled added into prototype‘);}
var myRec = new Rectangle(100,100,30);
myRec.disable();
上面代码将输出
disabled added into prototype
21) 高级话题
- 危险代码
eval(commandstring)
eval将commandstring当做命令来执行，会为黑客开放大门，应该尽量少用。eval("alert(‘hello‘)");会执行javascript代码alert(‘hello‘)
- 命名空间，快捷方式
使用对象实现。
经常使用的技巧是使用$快速引用命名空间。
window.$=mynamespace;
$.mymember;
- 文件操作
为了防范黑客，在javascript不能进行文件操作。FileSystemObject是ie提供的ActiveX控件，只能运行于ie浏览器下。
22) DOCTYPE
指明page使用的HTML版本。过去的HTML 2.0不支持table，HTML 3.2仅仅支持基本的css功能。
近来HTML最常用的版本是HTML 4.01和XHTML 1.0。HTML4.01和XHTML1.0均包括三种标签
Strict、Transitional、Frameset。Strict最严格，是最小集合。transitional是strict加上一些过时
的元素。frameset是transitional加上frame支持。几个常用的格式
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
如果html page指明了正确的DOCTYPE，则browser的工作模式成为standards-compliant。如果没有指明版本或者DOCTYPE有错，则浏览器进入
Quirks mode， 浏览器将老版本的浏览器行为来绘制page。比如ie8在Quirks mode下，使用ie5.5的方式绘制page。
火狐浏览器显示了browser的工作模式。被称为Render Mode。tool->page info
不幸的是，在有些浏览器中，甚至是有效的DOCTYPE或者无效的元素也会激发浏览器进入Quirk mode。
所以对于跨浏览器，DOCTYPE和render mode很重要。
简洁方法是使用<!DOCTYPE html>, 浏览器将自动选择standard mode。但html5好像不支持这种书写方式。
23) 启动(启用)javascript(downloads and load web page)
浏览器从服务端下载html page内容和执行javascript代码应该是异步进行。所以需要保证整个html page下载完后才能启动javascript。
标准的方法是将window onload做为javascript的入口点。
window.onload = init; //init是入口函数
24) javascript strict 模式
使用strict模式告诉javascript进行更加严格的语法检查。比如检查潜在错误的代码，提出错误报告。提高安全和性能。警告用户未来不再
支持的代码。
‘use strict‘;
可以在脚本顶部书写一次，也可在需要的函数体中开始处书写。比如
function init() {
‘use strict‘;
alert(‘hello‘);
}
.9 jQuery
0) 代码入口
$(document).ready(function(){
alert(‘put code here‘);
}); //ie6 support
更加简洁方式
$(function(){
alert(‘put code here‘);
}); //ie6 support
1) 定位DOM
无论id还是class或是tag，jquery返回的总是array-like对象。对于复杂的selector，jquery执行的顺序是从右向左。
选择子功能至少支持到ie6。
$("#maincontent"); //id
$(".column"); //class
$("div"); //tag
$("p").length; //元素个数
$("p").addClass("paragraph"); //addClass将在set上操作，自动loop，为set上所有元素执行addClass操作。
$("div.main p>li a"); //复杂的selector
2) jQury对ie支持
jqury支持ie8的最后系列为1.X.X, 从jquery 2.0.0，不再支持ie旧版本。在html中使用宏注释包含正确的版本。
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"><</script>
<!--<![endif]-->
3) evet support
4) 修改元素风格
$(‘selector‘)返回的是一个array-like对象。
使用css()函数可以取值和设置值。
- 取值，只获得array-like中第一个对象的值。
alert($(‘div‘).css(‘width‘)); //ie6
- 设置，array-like中所有的对象都将被设置
$(‘div‘).css(‘background-color‘,‘blue‘) //至少支持ie6
，可以使用这种更加可是化效果
$(‘div‘).css({
"background-color":"red",
"color":"black"
}) //至少支持ie6
5) 修改元素属性
6) 替换元素文本
使用$(‘selector‘).text()，和css()有相同的语义。当取数据时候，只能得到第一个元素的值，当设置值时候，所有对象的值都将被设置。
text()操作的是元素中的文本属性，如果要操作html内容，使用
$(‘Div‘).text(‘me‘) //至少支持ie6
7) 替换div中html内容
$(‘div‘).html(‘<div style="border:1px solid green">me</div>‘) //至少支持ie6
8) 事件处理
jquery中有两种方式支持事件注册，这两种方式均支持ie6。在jquery1.7+版本中使用的是on方式，之前老版本使用的是click()方式。
on方式更新。和css()函数一样，它们均作用在arry-like中的所有object之上。
$("div").on(‘click‘,function(){
alert(‘new event mode on‘)
}); //on，更新的方式jquery 1.7+支持方式。
$("div").click(function(){
alert(‘handler click()‘)
}); //,老的事件处理方式。
元素的hover经常使用，使用下列方法。
$("div").on("mouseenter", function() {
alert("hovered over");
}).on("mouseleave", function() {
alert("hovered out")
}); //ie6支持
如果相同的处理代码，更快捷的方式是
$("#commandButton").on("mouseenter mouseleave", function() {
alert("hovered on or out");
}); //ie6支持
取消掉注册的事件处理函数，使用off()。
$("div").off(); //取消掉div上所有的事件处理函数。ie6支持。
$("div").off(‘click‘); //仅仅取消掉click事件处理函数。ie6支持。
9) 事件函数处理细节
- 在事件处理函数中获取事件源元素信息。this
在事件处理函数有预留变量this，它是javascript对象，但是在ie不同版本中，它有不同含义。
$(this)，将把this转变为jquery对象。
在ie6中也支持的方法是从事件处理函数中的传入参数中读取event信息。在
$("div").on("click",function(myevent){
alert(myevent.target.id);
}); // ie6支持
标签：
原文地址：http://www.cnblogs.com/wenhuan/p/4304731.html
