5) 变量 (将注意力集中在经常使用、有效状况及组合，其它合理语法不过多关注)javascript
- 语句php
javascript语句以换行表示结束。也能够用semicolon ";"显示表示换行结束。但最佳方式是用";"。试想在压缩格式中，若是没有";"会发生什么?css
- 声明而且赋值html
能够直接使用使用变量，无需var声明。fullName = 'Larry Ullman'; 。但最佳的方式是用var显示声明并同时赋值html5
var fullName = 'Larry Ullman';java
同时声明多个变量node
var firstName = 'Larry', lastName = 'Ullman';jquery
- 引用web
javascript的引用具备向后引用的特性。一行语句能够引用在后面申明的简单变量、复杂变量、函数。express
- 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。
0
false
NaN(Not a number)
null
undefined
empty string( ""或'')
- 逻辑运算(比较运算)
在javascript中称为比较运算。包括
>
<
>=
<=
== 相等
!=
=== identical。当两边有相同的值和相同的值类型时，运算结果为真。
!==
&& and
|| or
! not
由于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。若是要准确判断对象的类型还可以使用
instanceof
这种方法只用于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
constructor
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对象。
window.screen.height 分辨率的高度
window.screen.width 分辨率的宽度
window.screen.availHeight 可用高度
window.screen.colorDepth 颜色的深度
使用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关键的属性有
getElementById()， 获取html中的元素
document.getElementsByTagName()
write()和writeln()，向html中写入内容，可是它们应该抛弃，主要是由于它们破坏了DOM结构。可是第三方软件和ads经常使用这个功能将代码加入到page中。
compatMode属性，代表浏览器的工做模式，是在Quirks 或者Standard下。值为BackCompat表示Quirk模式，CSS1Compat表示standard模式。
15) DOM(Document Object Model)
HTML为root element，它有惟一的父节点document, document也只有一个孩子，即HTML.
DOM节点的关系。以附件的文档为例子parentNode表示父节点，只有一个。
childNodes表示孩子节点，若是使用console.log(rootDiv.childNodes+''),观察rootDiv语法含义，获得[object NodeList]。
若是使用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">]
firstChild, 表示childNotes中第一个孩子
lastChild，与firstChild相对
previousSibling 表示前一个兄弟，console.log(childHuQuanDiv.previousSibling)是一个换行符，将输出
<TextNode textContent="\n ">
nextSibling
children，只显示html元素，不包括文本。console.log(rootDiv.children)输出以下，只有三个成员
HTMLCollection[div#childQuestDiv, div#childHuQuanDiv, div#childLiuJC]
观察node信息
nodeName，好比输出DIV
nodeValue, 仿佛不存在?
nodeType, 是一个数字，含义以下表
寻找节点 方法一,从根节点开始，document.documentElement将返回HTML根元素，从html开始，便能遍历到全部的元素。
方法二，使用快捷方式访问DOM元素
document.body 指向body
document.forms 包含全部的form
document.images 包含全部的图片
document.links 包含全部的链接
方法三，任意访问节点
document.getElementById()，若是没有，将返回null。从ie6起，即firefox等均支持，是一个基本的函数。
getElementsByTagName()，查找html元素。该函数能够用于任何对象上(不只仅是document)，它返回的是元素的子孙中(不包括自己)tag符合条件的元素。
var rootDiv = U.$('rootDiv');
console.log(rootDiv.getElementsByTagName('DIV'));
上面两条语句输出
HTMLCollection[div#childQuestDiv, div#childHuQuanDiv, div#duduDiv, div#childLiuJC]
将两个函数和并，由于getElementsByTagName()函数可用于任何对象上，因此能够将它们合并起来，比
document.getElementById('header'). getElementsByTagName('a');
getElementsByClassName() ，ie8支持，在ie7，ie6老版本中不支持。
方法四, 使用css selector
参数是css选择子，好比像 p>a，或则#rootDIV
querySelector(), 返回遇到的第一个元素。便可在document上调用，也可在任何object上调用。ie老版本不支持
querySelectorAll() ，返回全部的元素。便可在document上调用，也可在任何object上调用。ie老版本不支持
修改元素
元素能够修改的属性一般和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支持