jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

一、选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：

1. $(document)//选择整个文档对象  
2. $('#myId')//选择ID为myId的网页元素    
3. $('div.myClass')//选择class为myClass的div元素      
4. $('input[name=first]')//选择name属性等于first的input元素 

也可以是jQuery特有的表达式：

1. $('a:first')//选择网页中第一个a元素    
2. $('tr:odd')//选择表格的奇数行    
3. $('#myForm :input')//选择表单中的input元素    
4. $('div:visible') //选择可见的div元素    
5. $('div:gt(2)')//选择所有的div元素，除了前三个    
6. $('div:animated')//选择当前处于动画状态的div元素 

二、改变结果集

如果选中多个元素，jQuery提供过滤器，可以缩小结果集：

1. $('div').has('p'); //选择包含p元素的div元素    
2. $('div').not('.myClass'); //选择class不等于myClass的div元素    
3. $('div').filter('.myClass'); //选择class等于myClass的div元素    
4. $('div').first(); //选择第1个div元素    
5. $('div').eq(5); //选择第6个div元素 

有一些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

1. $('div').next('p'); //选择div元素后面的第一个p元素    
2. $('div').parent(); //选择div元素的父元素    
3. $('div').closest('form'); //选择离div最近的那个form父元素    
4. $('div').children(); //选择div的所有子元素    
5. $('div').siblings(); //选择div的同级元素 

三、链式操作

选中网页元素以后，就可以对它进行某种操作。

jQuery允许将所有操作连接在一起，以链条的形式写出来，比如：

1. $('div').find('h3').eq(2).html('Hello');   

我们可以这样拆封开来，就是下面这样：

1. $('div')//找到div元素    
2. .find('h3')//选择其中的h3元素    
3. .eq(2)//选择第3个h3元素    
4. .html('Hello'); //将它的内容改为Hello 

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery还提供了.end()方法，使得结果集可以后退一步：

1. $('div')    
2.  .find('h3')    
3.  .eq(2)    
4.  .html('Hello')    
5.  .end()//退回到选中所有的h3元素的那一步    
6.  .eq(0)//选中第一个h3元素    
7.  .html('World'); //将它的内容改为World 

四、元素的操作：取值和赋值

操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。

jQuery使用同一个函数，来完成取值(getter)和赋值(setter)。到底是取值还是赋值，由函数的参数决定。

取出或设置html内容 取出某个表单元素的值

1. $('h1').html(); //html()没有参数，表示取出h1的值 $('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值    
2. 常见的取值和赋值函数如下：  
3. .html()    
4. .text() 取出或设置text内容    
5. .attr() 取出或设置某个属性的值    
6. .width() 取出或设置某个元素的宽度    
7. .height() 取出或设置某个元素的高度    
8. .val()    
9.    
10. 取出或设置html内容 取出某个表单元素的值 

需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值;取值的时候，则是只取出第一个元素的值(.text()例外，它取出所有元素的text内容)。

五、元素的操作：移动

如果要移动选中的元素，有两种方法：一种是直接移动该元素，另一种是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

1. $('div').insertAfter('p'); 

第二种方法是使用.after()，把p元素加到div元素前面：

1. $('p').after('div'); 

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对

1. .insertAfter()和.after()：在现存元素的外部，从后面插入元素    
2. .insertBefore()和.before()：在现存元素的外部，从前面插入元素    
3. .appendTo()和.append()：在现存元素的内部，从后面插入元素    
4. .prependTo()和.prepend()     
5. ：在现存元素的内部，从前面插入元素 

六、元素的操作：复制、删除和创建

复制元素使用.clone()。

删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

清空元素内容(但是不删除该元素)使用.empty()。

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

1. $('<p>Hello</p>');    
2. $('<li class="new">new list item</li>');    
3. $('ul').append('<li>list item</li>'); 

七、工具方法

除了对选中的元素进行操作以外，jQuery还提供一些工具方法(utility)，不必选中元素，就可以直接使用。

如果你懂得Javascript语言的继承原理，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例(即选中元素)后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。

常用的工具方法有以下几种：

1. $.trim() 去除字符串两端的空格。    
2. $.each() 遍历一个数组或对象。    
3. $.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。    
4. $.grep() 返回数组中符合某种标准的元素。     
5. $.extend() 将多个对象，合并到第一个对象。     
6. $.makeArray() 将对象转化为数组。    
7. $.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。    
8. $.isArray() 判断某个参数是否为数组。    
9. $.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。    
10. $.isFunction() 判断某个参数是否为函数。    
11. $.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。    
12. $.support() 判断浏览器是否支持某个特性。 

 

 八、事件操作

jQuery可以对网页元素绑定事件。根据不同的事件，运行相应的函数。

1. $('p').click(function(){    
2. alert('Hello');    
3. });  

目前，jQuery主要支持以下事件：

1. .blur() 表单元素失去焦点。    
2. .change() 表单元素的值发生变化    
3. .click() 鼠标单击    
4. .dblclick() 鼠标双击    
5. .focus() 表单元素获得焦点    
6. .focusin() 子元素获得焦点    
7. .focusout() 子元素失去焦点    
8. .hover() 同时为mouseenter和mouseleave事件指定处理函数    
9. .keydown() 按下键盘（长时间按键，只返回一个事件）    
10. .keypress() 按下键盘（长时间按键，将返回多个事件）    
11. .keyup() 松开键盘    
12. .load() 元素加载完毕    
13. .mousedown() 按下鼠标    
14. .mouseenter() 鼠标进入（进入子元素不触发）    
15. .mouseleave() 鼠标离开（离开子元素不触发）    
16. .mousemove() 鼠标在元素内部移动    
17. .mouseout() 鼠标离开（离开子元素也触发）    
18. .mouseover() 鼠标进入（进入子元素也触发）    
19. .mouseup() 松开鼠标    
20. .ready() DOM加载完成    
21. .resize() 浏览器窗口的大小发生改变    
22. .scroll() 滚动条的位置发生变化    
23. .select() 用户选中文本框中的内容    
24. .submit() 用户递交表单    
25. .toggle() 根据鼠标点击的次数，依次运行多个函数    
26. .unload()  用户离开页面 

以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：

1. $('input').bind(    
2.  'click change'， //同时绑定click和change事件    
3.  function(){    
4.  alert('Hello');    
5.  }    
6.  ); 

如果你只想让事件运行一次，这时可以使用.one()方法。

1. $("p").one("click"， function(){    
2.  alert("Hello"); //只运行一次，以后的点击不会运行    
3.  }); 

.unbind()用来解除事件绑定。

1. $('p').unbind('click');  

所有的事件处理函数，都可以接受一个事件对象(event object)作为参数，比如下面例子中的e：

1. $("p").click(function(e){    
2.  alert(e.type); //"click"    
3.  }); 

这个事件对象有一些很有用的属性和方法：

1. event.pageX 事件发生时，鼠标距离网页左上角的水平距离  
2. event.pageY 事件发生时，鼠标距离网页左上角的垂直距离  
3. event.type 事件的类型(比如click)  
4. event.which 按下了哪一个键  
5. event.data 在事件对象上绑定数据，然后传入事件处理函数  
6. event.target 事件针对的网页元素  
7. event.preventDefault() 阻止事件的默认行为(比如点击链接，会自动打开新页面)  
8. event.stopPropagation() 停止事件向上层元素冒泡 

在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：

1. $('a').click(function(){    
2.  if ($(this).attr('href').match('evil')){//如果确认为有害链接    
3.  e.preventDefault(); //阻止打开    
4.  $(this).addClass('evil'); //加上表示有害的class    
5.  }    
6.  }); 

有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。

1. $('a').click();  
2. $('a').trigger('click'); 

九、特殊效果

jQuery允许对象呈现某些特殊效果。

1. $('h1').show(); //展现一个h1标题  

常用的特殊效果如下：

1. $('h1').show(); //展现一个h1标题   
2. 常用的特殊效果如下：  
3. .fadeIn() 淡入  
4. .fadeOut() 淡出  
5. .fadeTo() 调整透明度  
6. .hide() 隐藏元素  
7. .show() 显示元素  
8. .slideDown() 向下展开  
9. .slideUp() 向上卷起  
10. .slideToggle() 依次展开或卷起某个元素  
11. .toggle() 依次展示或隐藏某个元素 

除了.show()和.hide()，所有其他特效的默认执行时间都是400ms(毫秒)，但是你可以改变这个设置。

1. $('h1').fadeIn(300); // 300毫秒内淡入    
2. $('h1').fadeOut('slow'); //缓慢地淡出 

在特效结束后，可以指定执行某个函数。

1. $('p').fadeOut(300, function(){$(this).remove(); });  

更复杂的特效，可以用.animate()自定义。

1. $('div').animate(    
2.  {    
3.  left : "+=50"，//不断右移    
4.  opacity : 0.25 //指定透明度    
5.  },  
6.  300,// 持续时间    
7.  function(){ alert('done!'); }//回调函数    
8.  ); 

1. .stop()和.delay()用来停止或延缓特效的执行。  
2. $.fx.off如果设置为true，则关闭所有网页特效。 

原文：http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html

本文基于jQuery1.7.1版本，是对官方API的整理和总结，完整的官方API见http://api.jquery.com/browser/

0、总述

jQuery框架提供了很多方法，但大致上可以分为3大类：获取jQuery对象的方法、在jQuery对象间跳转的方法，以及获取jQuery对象后调用的方法

其中第一步是怎样获取jQuery对象。大致来说，是通过最核心的$()方法，将页面上的元素(或者在页面上不存在的html片段)包装成jQuery对象。

$()方法里面支持的语法又包括3大类，分别是表达式(包括类表达式.，id表达式#，元素表达式等)、符号(包括后代符号space，next符号+等)、过滤器(包括:过滤器和[]过滤器)。

通过以上3种的组合，“查询”得到想要操作的元素或者元素集合，作为$()的参数，得到jQuery对象(或者jQuery对象的集合)

第二步是在jQuery对象间的跳转。也就是说，已经得到了一个jQuery对象，但是并不是想要的，那么可以通过一系列的跳转方法，比如parent()、next()、children()、find()等，或者过滤筛选的方法，比如eq()、filter()、not()等，来得到最终想要操作的jQuery对象。

用跳转和过滤方式得到的jQuery结果，往往通过比较复杂的表达式组合，可以达到同样的目的。

比如说$("div").eq(3)，也可以用$("div:eq(3)")达到同样的目的。

又比如说$("div").find("span")，可以用$("div span")取到同样的元素。

方法是很灵活的，要根据具体的情况来选择。一般来说，HTML页面写得越规范，使用jQuery就越简单

还有一种情况，在得到了jQuery()对象之后，想要判断其是否满足条件，那么可以调用is()、hasClass()等方法，返回一个boolean值，进行后续的判断。这类方法也可以归到这类。

第三步是在获取准确的jQuery对象之后，调用其上的各种方法，来进行操作。这一步反而是比较简单的了。

后面就是对jQuery框架各种方法的简要介绍，更详细的内容，还是以官方API为准

1、$(...)

$() 一切的核心，可以跟4种参数

$(expression)，比如$("#id")、$(".class")等，返回jQuery对象，或者jQuery对象的集合

$(html)，比如$("<span>hello world</span>")，返回jQuery对象，或者jQuery对象的集合

$(element)，比如$(document.body)，返回jQuery对象，或者jQuery对象的集合

$(*)，所有元素

2、jQuery Object Accessors

jQuery.index(element)，返回该jQuery对象在集合中的索引

jQuery.each(function)，遍历jQuery对象集合，在每个对象上执行function函数，function callback(index, domElement){this};

jQuery.size()，返回jQuery对象集合的大小

jQuery.length，相当于size()方法

jQuery.get()，获取原生DomElement对象的Array

jQuery.get(index)，获取原生DomElement对象

jQuery.eq(position)，获取jQuery对象集合中的一个jQuery对象

3、Data相关方法

jQuery.data(name)

jQuery.data(name, value)

jQuery.removeData(name)

4、选择符

multiple(selector1, selector2)，可以选择多个元素或者表达式，包装成jQuery对象的集合

例子：$("div,span")

id(id)

例子：$("#id")

class(class)

例子：$(".class")

element(element)

例子：$("div")

all

例子：$("*")

descendant

例子：$("table tr td")

child(parent, child)

例子：$("#id > span")，和上一个descendant的区别在于，descendant只要是后代就会被选中，而child必须是直接子节点，不包括孙子节点

next(prev, next)

例子：$("label + input")，选中的是label标签的下一个input标签，返回jQuery对象的集合

siblings(prev, siblings)

例子：$("#prev ~ div")，选中的是#prev之后的所有div标签，返回jQuery对象的集合，有点像next，但是范围更大

Basic Filters

$(":header")，选中所有header，包括<h1><h2>等

$("tr:odd")，选中所有奇数行

$("tr:even")，选中所有偶数行

$(":animated")，选中所有当前有特效的元素，$("div:animated")，选中当前所有有特效的<div>

$("tr:first")，选中第一行

$("tr:last")，选中最后一行

$("input:not(:checked)")，选中所有没有“checked”的input元素

$("td:gt(4)")，选中所有index是4之后的td

$("td:lt(4)")，选中所有index是4之前的td

$("td:eq(4)")，选中index是4的td，可以用$("td").eq(4)来实现同样的效果

Content Filters

$("div:contains('John')")，选中所有包含"John"字符串的div

$("td:empty")，选中所有内容为空的td

$("div:has(p)")，选中包含有<p>元素的<div>元素，返回jQuery对象集合

$("td:parent")，选中所有包含子节点的元素，包括文本也可以算是子节点

Visibility Filters

$("span:hidden")，选中所有隐藏的<span>

$("span:visible")，选中所有可见的<span>

Attribute Filters

$("div[id]")，选中包含id属性的<div>元素

$("input[name$='letter']")，选中包含某个属性的<input>元素，这个属性名是以'letter'结尾的

$("input[name^='letter']")，选中包含某个属性的<input>元素，这个属性名是以'letter'开头的

$("input[name*='man']")，选中包含某个属性的<input>元素，这个属性的属性名里包含'man'

$("input[name='newsletter']")，选中包含一个属性的<input>元素，这个属性的名字是'newsletter'

$("input[name!='newsletter']")，选中所有不包含'newsletter'属性的<input>元素

$("input[id][name$='man']")，选中包含id属性，和以'man'结尾属性的<input>元素

Child Filters

$("ul li:nth-child(2)")，选中自身是<ul>元素的第二个子节点的<li>元素，注意这个计算是从1开始的，不是从0开始

$("div span:firstChild")，选中自身是<div>元素的第一个子节点的<span>元素

$("div span:lastChild")，选中自身是<div>元素的最后一个子节点的<span>元素

$("div span:onlyChild")，选中自身是<div>元素的唯一子节点的<span>元素

Forms

$(":button")，所有<button>元素，和<input type="button">元素

$("form :checkbox")，选中所有<form>标签下的<input type="checkbox">，不过这样会比较慢，官方建议使用$("input:checkbox")

$(":file")，选中所有<input type="file">

$(":hidden")，选中所有隐藏元素，以及<input type="hidden">

$(":input")，选中所有<input>

$(":text")，选中所有<input type="text">

$(":password")，选中所有<input type="password">

$(":radio")，选中所有<input type="radio">，不过这样会比较慢，建议使用$("input:radio")

$(":image")，选中所有<input type="image">

$(":reset")，选中所有<input type="reset">

$(":submit")，选中所有<input type="submit">

Form Filters

$("input:enabled")，选中所有enabled的<input>元素

$("input:disabled")，选中所有disabled的<input>元素

$("input:checked")，选中所有checked的<input type="checkbox">元素

$("input:selected")，选中所有selected的<option>元素

5、属性相关的方法

jQuery.removeAttr(name)

jQuery.attr(name)，返回属性的值，比如$("img").attr("src")

jQuery.attr(key,value)，这是设置属性的值

jQuery.attr(properties)，也是设置属性的值

例子：

1. $("img").attr({   
2. src: "/images/hat.gif",   
3. title: "jQuery",   
4. alt: "jQuery Logo"   
5. });   

jQuery.attr(key,function)，也是设置属性的值，这个function计算出的结果，赋给key

1. function callback(index) {   
2. // index == position in the jQuery object   
3. // this means DOM Element   
4. }  

6、class相关的方法

jQuery.toggleClass(class)，反复切换class属性，该方法第一次执行，增加class，然后去除该class，循环

jQuery.toggleClass(class,switch)，增加一个switch表达式

jQuery.hasClass(class)，返回boolean

jQuery.removeClass(class)，删除class

jQueyr.addClass(class)，增加class

7、HTML相关的方法

jQuery.html()，返回包含的html文本

jQuery.html(val)，用val替换包含的html文本

8、文本相关的方法

jQuery.text()，返回包含的纯文本，不会包括html标签，比如<span>abcd</span>，调用.text()方法，只会返回abcd，不会返回<span>abcd</span>
jQuery.text(val)，用val替换包含的纯文本，和html(val)方法的区别在于，所有的内容会被看作是纯文本，不会作为html标签进行处理，比如调用.text("<span>abcd</span>")，<span>和</span>不会被认为是html标签

9、值相关的方法

jQuery.val()，返回string或者array

jQuery.val(val)，设置string值

jQuery.val(array)，设置多个值，以上3个方法，主要都是用在表单标签里，如<input type="text">，<input type="checkbox">等

10、在jQuery对象集合中进行过滤

以下几类方法有点像把选择符Filter进行方法化，比如$("label:eq(4)")，取到第4个<label>元素，这个就可以用$("label").eq(4)来替代，达到同样的效果

jQuery.is(expr)，返回boolean，比如$(this).is(":first-child")，判断一个元素，是不是其父节点的第一个子节点

jQuery.eq(index)，$("div").eq(2)，取出第2个<div>元素

jQuery.filter(expr)，比如$("div").filter(".middle")，会从div元素中筛选出属于middle的class的元素；再比如$("p").filter(".selected, :first")，会取出是selected类，或者是第一个元素的<p>元素，这个可以用$("p.class, p:first")来代替这个方法，会从初始的结果集中，筛选保留一部分

jQuery.filter(fn)，类似于上一个函数，可以传进去一个function，用这个function的返回值，进行筛选

1. function callback(index){   
2. // index == position in the jQuery object   
3. // this means DOM Element   
4. return boolean;   
5. }  

jQuery.not(expr)，是和filter(expr)相反的方法，不是和is(expr)相反的方法。该方法把满足expr的元素给排除掉，比如$("div").not(".green, #blue")，把class是green或者id是blue的元素过滤掉

jQuery.slice(start, end)，从jQuery对象集合中选出一段

jQuery.map(callback)，不知道是干嘛的

11、在jQuery对象之间查找

jQuery.parent(expr)，找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr)，类似于jQuery.parent(expr)，但是是查找所有祖先元素，不限于父元素

jQuery.children(expr)，返回所有子节点，和parents()方法不一样的是，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents()，返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next()，返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings()，返回兄弟姐妹节点，不分前后

jQuery.add(expr)，往既有的jQuery对象集合中增加新的jQuery对象，例子：$("div").add("p")

jQuery.find(expr)，跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$("p").find("span")，是从<p>元素开始找<span>，等同于$("p span")

12、串联方法

jQuery.andSelf()，把最后一次查询前一次的集合，也增加到最终结果集中，比如$("div").find("p").andSelf()，这样结果集中包括所有的<p>和<div>。如果是$("div").find("p")，那就只有<p>，没有<div>

jQuery.end()，把最后一次查询前一次的集合，作为最终结果集，比如$("p").find("span").end()，这样的结果集，是所有的<p>，没有<span>

13、DOM文档操作方法

jQuery.append(content)，这个方法用于追加内容，比如$("div").append("<span>hello</span>");

jQuery.appendTo(selector)，这个方法和上一个方法相反，比如$("<span>hello</span>").appendTo("#div")，这个方法其实还有一个隐藏的move作用，即原来的元素被移动了

jQuery.prepend(content)，跟append()方法相对应，在前面插入

jQuery.prependTo(selector)，跟上一个方法相反

jQuery.after(content)，在外部插入，插入到后面，比如$("#foo").after("<span>hello</span>");

jQuery.insertAfter(selector)，和上一个方法相反，比如$("<span>hello</span>").insertAfter("#foo");

jQuery.before(content)，在外部插入，插入到前面

jQuery.insertBefore(selector)，跟上一个方法相反

jQuery.wrapInner(html)，在内部插入标签，比如$("p").wrapInner("<span></span>");

jQuery.wrap(html)，在外部插入标签，比如$("p").wrap("<div></div>")，这样的话，所有的<p>都会被各自的<div>包裹

jQuery.wrapAll(html)，类似上一个，区别在于，所有的<p>会被同一个<div>包裹

jQuery.replaceWith(content)，比如$(this).replaceWith("<div>"+$(this).text()+"</div>");

jQuery.replaceAll(selector)，比如$("<div>hello</div>").replaceAll("p");

jQuery.empty()，比如$("p").empty()，这样的话，会把<p>下面的所有子节点清空

jQuery.remove(expr)，比如$("p").remove()，这样的话，会把所有<p>移除，可以用表达式做参数，进行过滤

jQuery.clone()，复制一个页面元素

14、CSS相关方法

jQuery.css(name)，获取一个css属性的值，比如$("p").css("color")

jQuery.css(object)，设置css属性的值，比如$("p").css({"color":"red","border":"1px red solid"});

jQuery.css(name,value)，设置css属性的值，比如$("p").css("color","red");

15、位置计算相关方法

jQuery.scrollLeft()，设置滚动条偏移，这个方法对可见元素或不可见元素都生效

jQuery.scrollTop()，设置滚动条偏移，这个方法对可见元素或不可见元素都生效

jQuery.offset()，计算偏移量，返回值有2个属性，分别是top和left

jQuery.position()，计算位置，返回值也有2个属性，top和left

16、宽度和高度计算相关方法

这组方法需要结合CSS的盒子模型来理解，margin始终不参与计算

jQuery.height()，这个方法计算的是content

jQuery.innerHeight()，这个方法计算的是content+padding

jQuery.outerHeight()，这个方法计算的是content+padding+border

jQuery.width();

jQuery.innerWidth();

jQuery.outerWidth();

17、页面加载完成事件

$(document).ready(function(){})，可以简写为$(function(){})

18、事件绑定方法

jQuery.bind(type,data,fn)

bind()方法可以接受3个参数，第1个是事件类型，类型是string，可能的值有blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select,

submit, keydown, keypress, keyup, error

第3个参数是当事件发生时，要执行的函数，函数原型是

1. function callback(eventObject) {   
2. this; // dom element   
3. }  

在这个方法里return false会阻止事件冒泡并中止默认行为，如果在这个方法里调用eventObject.preventDefault()则会中止默认行为，如果在这个方法里调用eventObject.stopPropagation()则只会阻止事件冒泡

第2个参数是可选的，会赋值给e.data，比如

1. function handler(event) {   
2. alert(event.data.foo);   
3. }   
4. $("p").bind("click", {foo: "bar"}, handler)   

jQuery.one(type,data,fn)，这个方法类似于bind()方法，区别在于只会绑定一次

jQuery.unbind(type,fn)，解除绑定

jQuery.trigger(event,data)，触发事件，要注意这个方法，同样会引起浏览器的默认行为，比如submit

另外，这个方法如果和bind()方法里定义的handler配合使用，可以更加灵活地传递参数，比如

1. $("#test").bind("click", {name : "kyfxbl"}, function(e, foo) {   
2. alert(e.data.name);   
3. alert("foo: " + foo);   
4. });  

以上代码，如果直接点击#test，则foo的值是undefined

但是如果通过$("#test").trigger("click",["foo"])来触发，则参数foo会被赋值为"foo"

jQuery.triggerHandler(event,data)，这个方法和trigger()方法十分相像，主要有2点不同，1是这个方法不会触发浏览器的默认行为，2是它只会在jQuery对象集合的第一个元素上触发

jQuery.live(type,fn)，这个方法十分类似jQuery.bind()方法，区别在于这个方法对后来才添加进来的元素同样有效

jQuery.die(type,fn)，这个是jQuery.live()的相反方法

19、事件快捷方法

jQuery.hover(over,out)，这个方法是mouseenter和mouseleave的便捷方法，2个参数的函数原型是：

1. function callback(eventObject) {   
2. this; // dom element   
3. }   

jQuery.toggle(fn,fn2,fn3,...)，这个方法是多次点击的便捷方法，参数的函数原型是：

1. function callback(eventObject) {   
2. this; // dom element   
3. }  

jQuery提供了两类便捷方法：

第一类是类似于click()这种，相当于简化的jQuery.trigger()方法，比如$("p").click()相当于$("p").trigger("click")，不过该方法，无法像完整的jQuery.trigger("click", data)方法一样，传递一个附带的参数

第二类是类似于click(function)这种，相当于简化的jQuery.bind()方法，比如$("p").click(function)相当于$("p").bind("click",function)，不过该方法，无法像完整的jQuery.bind("click", data, func)一样，传递一个额外的参数

20、切换元素显示与否的方法

jQuery.toggle()，原本显示的元素会不显示，原本不显示的会显示出来。这些元素可以是通过show()和hide()切换的，也可以是通过display:none来设置的

jQuery.show()，显示元素

jQuery.hide()，隐藏元素

jQuery.show(speed, callback)，类似于上面的jQuery.show()，不过可以设置速度以及回调函数

speed可以是"slow"、"normal"、"fast"，也可以是毫秒数

callback函数的原型是：
function callback() {
this; // dom element
}
jQuery.hide(speed, callback)
jQuery.toggle(speed, callback)

21、页面一些特效方法

jQuery.slideDown(speed, callback)，让一个元素下滑，从无到有

jQuery.slideUp(speed, callback)，让一个元素上升，从有到无

jQuery.slideToggle(speed, callback)，切换一个下滑和上升

jQuery.fadeIn(speed, callback)，淡入效果

jQuery.fadeOut(speed, callback)，淡出效果

jQuery.fadeTo(speed, opacity, callback)，变淡效果

22、ajax相关方法

$.ajax(options)，这个是底层方法，上层的$.get()和$.post()都是基于此方法的封装

options:

async：是否异步，默认为true

url：目标地址

type：请求类型，可以是"POST"或者"GET"

data：请求参数，比如"name=kyfxbl&location=shenzhen"

complete(function)：请求结束后的回调函数，函数原型是

1. function (XMLHttpRequest, textStatus) {   
2. this; // the options for this ajax request   
3. }  

success(function)：请求成功后的回调函数，函数原型是

1. function (data, textStatus) {   
2. // data could be xmlDoc, jsonObj, html, text, etc...   
3. this; // the options for this ajax request   
4. }  

例子：

1. $.ajax({   
2. url : "user/ajax",   
3. type : "GET",   
4. data : "name=kyfxbl&location=shenzhen",   
5. success : function(data, textStatus) {   
6. alert(data);   
7. alert(this.success);   
8. }   
9. });  

$.get(url, data, callback, type)，$.ajax()的简易方法，用于发送GET请求

url：请求地址

data：发送到服务端的请求参数

callback：请求成功后的回调函数，函数原型是：

1. function (data, textStatus) {   
2. // data could be xmlDoc, jsonObj, html, text, etc...   
3. this; // the options for this ajax request   
4. }  

$.post(url, data, callback, type)，$.ajax()的简易方法，跟$.get()差不多，用于发送POST请求

23、浏览器及特性检测

$.support，可以检测当前浏览器是否支持下列属性，返回boolean。包括boxModel、cssFloat、opacity、tbody等
$.browser，检测当前浏览器类型，返回一个map，其中可能的值有safari、opera、msie、mozilla

24、数据缓存方法

该类方法是jQuery.data()方法和jQuery.removeData()的另一种形式，增加的elem参数是DOM Element

$.data(elem, name)，取出elem上name的值

$.data(elem, name, value)，设置elem上name的值为value

$.removeData(elem, name)，删除elem上的name

$.removeData(elem)，删除elem上的所有缓存数据

25、工具方法

$.isArray(obj)，检测一个对象是否是数组

$.isFunction(obj)，检测一个对象是否是函数

$.trim(str)，去除string的空格

$.inArray(value, array)，返回value在array中的下标，如果没有找到则返回-1，比如$.inArray(123, ["john",1,123,"f"])将会返回2

$.unique(array)，去除array中的重复元素，该方法只对DOM Element有效，对string和number无效

标签列表　　

按字母顺序排列的标签列表

标签	描述	4: 指在HTML 4.01 中定义了该元素 5: 指在HTML 5 中定义了该元素
<!--...-->	定义注释	4	5
<!DOCTYPE>	定义文档类型	4	5
<a>	定义超链接	4	5
<abbr>	定义缩写	4	5
<acronym>	HTML 5 中不支持	4
<address>	定义地址元素	4	5
<applet>	定义 applet（HTML 5 中不支持）	4
<area>	定义图像映射中的区域	4	5
<article>	定义 article		5
<aside>	定义页面内容之外的内容		5
<audio>	定义声音内容		5
<b>	定义粗体文本	4	5
<base>	定义页面中所有链接的基准URL	4	5
<basefont>	HTML 5 中不支持，请使用CSS 代替	4
<bdo>	定义文本显示的方向	4	5
<big>	定义大号文本（HTML 5 中不支持）	4
<blockquote>	定义长的引用	4	5
<body>	定义 body 元素	4	5
<br>	插入换行符	4	5
<button>	定义按钮	4	5
<canvas>	定义图形		5
<caption>	定义表格标题	4	5
<center>	定义居中的文本（HTML 5 中不支持）	4
<cite>	定义引用	4	5
<code>	定义计算机代码文本	4	5
<col>	定义表格列的属性	4	5
<colgroup>	定义表格列的分组	4	5
<command>	定义命令按钮		5
<datalist>	定义下拉列表		5
<dd>	定义定义的描述	4	5
<del>	定义删除文本	4	5
<details>	定义元素的细节		5
<dfn>	定义定义项目	4	5
<dir>	定义目录列表（HTML 5 中不支持）	4
<div>	定义文档中的一个部分	4	5
<dl>	定义定义列表	4	5
<dt>	定义定义的项目	4	5
<em>	定义强调文本	4	5
<embed>	定义外部交互内容或插件		5
<fieldset>	定义 fieldset	4	5
<figcaption>	定义 figure 元素的标题		5
<figure>	定义媒介内容的分组，以及它们的标题		5
<font>	HTML 5 中不支持	4
<footer>	定义 section 或 page 的页脚		5
<form>	定义表单	4	5
<frame>	定义子窗口（框架）（HTML 5 中不支持）	4
<frameset>	定义框架的集（HTML 5 中不支持）	4
<h1> to <h6>	定义标题1 到标题6	4	5
<head>	定义关于文档的信息	4	5
<header>	定义 section 或 page 的页眉		5
<hgroup>	定义有关文档中的 section 的信息		5
<hgroup>	定义有关文档中的 section 的信息	4	5
<html>	定义 html 文档	4	5
<i>	定义斜体文本	4	5
<iframe>	定义行内的子窗口（框架）	4	5
<img>	定义图像	4	5
<input>	定义输入域	4	5
<ins>	定义插入文本	4	5
<keygen>	定义生成密钥		5
<isindex>	定义单行的输入域（HTML 5 中不支持）	4
<kbd>	定义键盘文本	4	5
<label>	定义表单控件的标注	4	5
<legend>	定义 fieldset 中的标题	4	5
<li>	定义列表的项目	4	5
<link>	定义资源引用	4	5
<map>	定义图像映射	4	5
<mark>	定义有记号的文本	4	5
<menu>	定义菜单列表	4	5
<meta>	定义元信息	4	5
<meter>	定义预定义范围内的度量		5
<nav>	定义导航链接		5
<noframes>	定义 noframe 部分（HTML 5 中不支持）	4
<noscript>	定义 noscript 部分	4	5
<object>	定义嵌入对象	4	5
<ol>	定义有序列表	4	5
<optgroup>	定义选项组	4	5
<option>	定义下拉列表中的选项	4	5
<output>	定义输出的一些类型		5
<p>	定义段落	4	5
<param>	为对象定义参数	4	5
<pre>	定义预格式化文本	4	5
<progress>	定义任何类型的任务的进度		5
<q>	定义短的引用	4	5
<rp>	定义若浏览器不支持 ruby 元素显示的内容		5
<rt>	定义 ruby 注释的解释		5
<ruby>	定义 ruby 注释		5
<s>	定义加删除线的文本（HTML 5 中不支持）	4
<samp>	定义样本计算机代码	4	5
<script>	定义脚本	4	5
<section>	定义 section	4	5
<select>	定义可选列表	4	5
<small>	定义小号文本	4	5
<source>	定义媒介源	4	5
<span>	定义文档中的 section	4	5
<strike>	定义加删除线的文本（HTML 5 中不支持）	4
<strong>	定义强调文本	4	5
<style>	定义样式定义	4	5
<sub>	定义下标文本	4	5
<summary>	定义 details 元素的标题		5
<sup>	定义上标文本	4	5

按字母顺序排列的标签列表

标签	描述	4: 指在HTML 4.01 中定义了该元素 5: 指在HTML 5 中定义了该元素
<table>	定义表格	4	5
<tbody>	定义表格的主体	4	5
<td>	定义表格单元	4	5
<textarea>	定义 textarea	4	5
<tfoot>	定义表格的脚注	4	5
<th>	定义表头	4	5
<thead>	定义表头	4	5
<time>	定义日期/时间		5
<title>	定义文档的标题	4	5
<tr>	定义表格行	4	5
<tt>	定义打字机文本（HTML 5 中不支持）	4
<u>	定义下划线文本（HTML 5 中不支持）	4
<ul>	定义无序列表	4	5
<var>	定义变量	4	5
<video>	定义视频		5
<xmp>	定义预格式文本（HTML 5 中不支持）	4

编辑本段事件属性

　　

事件属性

属性	值	描述	4	5
HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。 HTML 5 中的新事件属性：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
onabort	script	发生 abort 事件时运行脚本。		5
onbeforeonload	script	在元素加载前运行脚本。		5
onblur	script	当元素失去焦点时运行脚本。	4	5
onchange	script	当元素改变时运行脚本。	4	5
onclick	script	在鼠标点击时允许脚本。	4	5
oncontextmenu	script	当菜单被触发时运行脚本。		5
ondblclick	script	当鼠标双击时运行脚本。	4	5
ondrag	script	只要脚本在被拖动就允许脚本。		5
ondragend	script	在拖动操作结束时运行脚本。		5
ondragenter	script	当元素被拖动到一个合法的放置目标时，执行脚本。		5
ondragleave	script	当元素离开合法的放置目标时。		5
ondragover	script	只要元素正在合法的放置目标上拖动时，就执行脚本。		5
ondragstart	script	在拖动操作开始时执行脚本。		5
ondrop	script	当元素正在被拖动时执行脚本。		5
onerror	script	当元素加载的过程中出现错误时执行脚本。		5
onfocus	script	当元素获得焦点时执行脚本。	4	5
onkeydown	script	当按钮按下时执行脚本。	4	5
onkeypress	script	当按键被按下时执行脚本。	4	5
onkeyup	script	当按钮松开时执行脚本。	4	5
onload	script	当文档加载时执行脚本。	4	5
onmessage	script	当 message 事件触发时执行脚本。		5
onmousedown	script	当鼠标按钮按下时执行脚本。	4	5
onmousemove	script	当鼠标指针移动时执行脚本。	4	5
onmouseover	script	当鼠标指针移动到一个元素上时执行脚本。	4	5
onmouseout	script	当鼠标指针移出元素时执行脚本。	4	5
onmouseup	script	当鼠标按钮松开时执行脚本。	4	5
onmousewheel	script	当鼠标滚轮滚动时执行脚本。		5
onreset	script	当表单重置时执行脚本。不支持。	4
onresize	script	当元素调整大小时运行脚本。		5
onscroll	script	当元素滚动条被滚动时执行脚本。		5
onselect	script	当元素被选中时执行脚本。	4	5
onsubmit	script	当表单提交时运行脚本。	4	5
onunload	script	当文档卸载时运行脚本。		5
HTML 5不再支持的 HTML 4.01 属性：onreset。

编辑本段标签属性

　　

标签属性

属性	值	描述	4	5
HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。
acceskey	a character	设置访问一个元素的键盘快捷键。不支持。	4
class	class_rule orstyle_rule	元素的类名。	4	5
contenteditable	true false	设置是否允许用户编辑元素。		5
contentextmenu	id of a menu element	给元素设置一个上下文菜单。		5
dir	ltr rtl	设置文本方向。	4	5
draggable	true false auto	设置是否允许用户拖动元素。		5
id	id_name	元素的唯一 id。	4	5
irrelevant	true false	设置元素是否相关。不显示非相关的元素。		5
lang	language_code	设置语言码。	4	5
ref	url or elementID	引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。		5
registrationmark	registration mark	为元素设置拍照。可规定于任何 <rule> 元素的后代元素，除了 <nest> 元素。		5
style	style_definition	行内的样式定义。	4	5
tabindex	number	设置元素的 tab 顺序。	4	5
template	url or elementID	引用应该应用到该元素的另一个文档或本文档上另一个位置。		5
title	tooltip_text	显示在工具提示中的文本。	4	5
HTML 5 标签中的新属性有：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template HTML 5 中不再支持的属性：accesskey

流程，通俗来讲，就是许多人，在做一系列的事情时，怎样相互协调，安排好这一系列事情的先后顺序，有什么事先的约定，需要达到怎样的预期目标。

在UED里，前端同学需要处理的需求比较多，早些时候，前端这里的开发流程还是比较模糊的，UED以外的同学也不清楚这边的工作具体是怎样进行的，所以难免会有需求插队的情况发生，打乱了大家的计划，因此今年Q3的时候，在与SCM团队同学的共同努力下，形成了一个前端的ASSETS发布流程。

这个流程主要针对ASSETS发布的需求做了一些约定，制定了相关的几个时间点，包括审核需求、提交代码、daily测试、预发测试、正式发布到线上确认的时间。

ASSETS流程简述

需求审核

在提需求之前，需求方一般都会先找PM或者相应产品线的前端咨询一下，如果可行的话就会在周四之前将需求提到平台上，到了周四的时候，前端会结合自身的工作情况，将平台上的需求接收并纳入自己的日程中，预估完成时间、发布时间以及相关的发布简述。

编码开发

周四需求评估完以后，就会按计划开始处理需求，将涉及ASSETS发布的需求优先处理，不涉及ASSETS的放在靠后的时间处理，一般这段时间是从周四到下一周的周二。SCM会在每周四开一个新的ASSETS分枝供前端在下一周开发使用。

 

提交代码，合并到daily测试以及预发测试

如果有涉及到与后台开发相关的需求，前端的同学会在周一就把代码提交，这一天会有一次合并代码，方便后台开发来测试。其他的同学一般最晚会在周二下班之前把代码提交，在周二，会有多次合并代码到daily的操作，每次操作完后，SCM的同学会在前端的群里通知到大家，方便大家测试。

周三早上，SCM的同学会将代码发布到预发环境，此时就可以在HOST中绑定IP，换用线上的地址来测试。

正式发布

周四上午，SCM的同学确认后，将没有问题的代码发布上线。

流程的作用

在团队不断成长的过程中，处理的需求数量也在增长，需要考虑到开发的效率、产品的质量以及团队协作间的配合等因素，这个流程能为我们解决很多相关的问题：

督促需求方做好相关的规划

有些时候，一些需求的细节还没完全确定，但需求方总希望能将他想到的各种细节都实现出来，然后再挑选其中一种做为他的方案，所以需求的变更会有些频繁，然而这样的成本有些高，一切应该在计划后再去实现，而非反其道而行。现在需求方会在提需求之前，会花时间地去考虑他们的需求，将尽可能多的情况都想清楚，做好必要的沟通工作，权衡各种利弊之后，再给出一个比较成形的方案。

保证需求安排的有序性

在一个大的团队中，不同部门的同学在一起合作，因为沟通及一些特殊情况，效率或多或少会受到一些影响，良好的规划能有助于提高开发的效率。

通过每周的需求审核，安排好下一周的日程，由于需求的优先级和先后顺序都已排定，工作的条理性会更加清晰，需求插队的现象也有明显减少。当然我们也有紧急流程，但是它仅限于处理线上bug以及一些经过多方确认的紧急需求，有其自己的适用范围。

统一测试，归避风险

之前的日常处理中，可能会遇到这样的情况：甲、乙两个同学分别需要处理两个日常需求，他们的需要改动到的代码会有重合的部分，如果他们并不知道这个情况，那么在他们本地的单独测试中，一切都是OK的，然而当发布到线上去时，发现出了bug或者一方的改动没有同步到线上，查原因后发现是提交的代码相互覆盖了。

现在要处理的需求数量越来越多，为了避免上述情况，新流程实行以后，大家会统一来做多次测试，这样就更容易发现bug，可以大大降低协作开发而产生的风险。

流程本身就是一把双刃剑，有利有弊。一方面，它使我们的需求变得有序，使前端能够在处理一个需求时，不会频繁被其他插队的需求打断。并且因为发布有时间点的设定，所以测试工作会更加严谨，这有助于提升代码的质量。因此对于我们来讲，流程带来的好处是显而易见的；但另一方面，它额外地增加了做事的成本，涉及ASSETS发布的需求，就像赶某班火车一样，错过了就只能等下一班，所以也给需求方带来了许多不便，有待改进，不过这可以通过长期的合作而慢慢被弱化，双方达成了一种默契以后，情况会好很多，现在这样的情况已经比较少了。

尽管在流程使用之初，会带来诸多不便，但是从长远来看，流程有助于使一个团队形成统一的工作方式和态度，将繁杂的事情化整为零，有条理地去处理它们。因为流程，每一个人的责任感都会增强，对风险考虑得会更多一些，这一切都会使产品有质的提升。而我们所有与这个流程有关的人，都会不断地去推动流程改进的工作，这其中还有很多需要思考的：

• 如何将我们的流程推广到整个公司，让大家都能了解我们的流程，这样在未来需要合作时，需求方需要注意些什么，相关的时间点以及开周时间的预估等，他们就会心中有数。
• ASSETS的发布还不够灵活，如果把和应用相关的ASSETS独立划分出去与应用一起发布，这样剩下的需要发布的东西就会少很多。或者是按产品线来设计发布流程，根据实际情况来发布。
• 如何来简化流程上的一些细节，在保持效率的同时，降低实际操作中的成本。
• 每周二是一个特别的时间点，为了赶在这最后时间提交代码，之前的开发会有些紧张，这种情况也有待改善，比如未来可以一周有两次发布。

流程不是生来就完美，但从现在它带给我们的好处来看，遵循并使用它，对我们的开发会起到很大的帮助作用。我们对待它的态度，决定了它对我们会有怎样的反馈，如果觉得它不合适了，就发出自己的声音，想办法去改进它，不要只是被动地等待。

ued.taobao.com

 

http://ued.taobao.com/blog/category/%e5%89%8d%e7%ab%af%e6%8a%80%e6%9c%af/  前端技术

JavaScript 是属于网络的脚本语言！

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

JavaScript 是因特网上最流行的脚本语言。

 

　　1、运算符 

　　运算符就是完成操和的一系列符号，它有七类： 

　　赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算、位操作运算符和字符串运算符。

　　2、表达式 

　　运算符和操作数的组合称为表达式，通常分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。

　　3、语句 

　　Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句，它们是： 

　　赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环中止语句和continue循环中断语句。

　　4、函数 

　　函数是命名的语句段，这个语句段可以被当作一个整体来引用不着和执行。使用函数要注意以下几点： 

　　1）函数由关键字function定义； 

　　2）函数必须先定义后使用，否则将出错； 

　　3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名； 

　　4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量； 

　　5）return语句用于返回表达式的值，也可以没有。

　　5、对象 

　　Javascript的一个重要功能就是基于对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。 

　　一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。

　　6、事件 

　　用户与网页交互时产生的操作，称为事件。绝大部分事都由用户的动作所引发，如：用户按鼠标的按钮，就产生onclick事件，若鼠标的指针在链接上移动，就产生onmouseover事件等等。在Javascript中，事件往往与事件处理程序配套使用。 

　　学习Javascript比较快速有效的方法是先熟悉一些基本概念，然后找几个别人设计好的程序认真仔细地分析一遍，再稍作改动，再看看能否达到预期目的，不断地举一反三，既可以加深对一些参数、设计方法的理解，又可以快速地提高自己的水平。另外，再提醒一下：Javascript对大小写是敏感的，特别是一些对象、方法、属性的大小写一定要一致，所以在编程时要养成一种良好的习惯，否则在调试程序时可要累死你了。

　　7、变量 

　　如 var myVariable = "some value";

  数组概述

C# 数组从零开始建立索引，即数组索引从零开始。C# 中数组的工作方式与在大多数其他流行语言中的工作方式类似。但还有一些差异应引起注意。

声明数组时，方括号 ([]) 必须跟在类型后面，而不是标识符后面。在 C# 中，将方括号放在标识符后是不合法的语法。

int[] table; // not int table[]; 

另一细节是，数组的大小不是其类型的一部分，而在 C 语言中它却是数组类型的一部分。这使您可以声明一个数组并向它分配 int 对象的任意数组，而不管数组长度如何。

int[] numbers; // declare numbers as an int array of any size

numbers = new int[10];  // numbers is a 10-element array

numbers = new int[20];  // now it's a 20-element array

 声明数组

C# 支持一维数组、多维数组（矩形数组）和数组的数组（交错的数组）。下面的示例展示如何声明不同类型的数组：

一维数组：

int[] numbers;

多维数组：

string[,] names;

数组的数组（交错的）：

byte[][] scores;

声明数组（如上所示）并不实际创建它们。在 C# 中，数组是对象（本教程稍后讨论），必须进行实例化。下面的示例展示如何创建数组：

一维数组：

int[] numbers = new int[5];

多维数组：

string[,] names = new string[5,4];

数组的数组（交错的）：

byte[][] scores = new byte[5][];

for (int x = 0; x < scores.Length; x++) 

{

   scores[x] = new byte[4];

}

还可以有更大的数组。例如，可以有三维的矩形数组：

int[,,] buttons = new int[4,5,3];

甚至可以将矩形数组和交错数组混合使用。例如，下面的代码声明了类型为 int的二维数组的三维数组的一维数组。

int[][,,][,] numbers;

 初始化数组

C# 通过将初始值括在大括号 ({}) 内为在声明时初始化数组提供了简单而直接了当的方法。下面的示例展示初始化不同类型的数组的各种方法。

注意   如果在声明时没有初始化数组，则数组成员将自动初始化为该数组类型的默认初始值。另外，如果将数组声明为某类型的字段，则当实例化该类型时它将被设置为默认值 null。

 一维数组

int[] numbers = new int[5] {1, 2, 3, 4, 5};

string[] names = new string[3] {"Matt", "Joanne", "Robert"};

可省略数组的大小，如下所示：

int[] numbers = new int[] {1, 2, 3, 4, 5};

string[] names = new string[] {"Matt", "Joanne", "Robert"};

如果提供了初始值设定项，则还可以省略 new运算符，如下所示：

int[] numbers = {1, 2, 3, 4, 5};

string[] names = {"Matt", "Joanne", "Robert"};

多维数组

int[,] numbers = new int[3, 2] { {1, 2}, {3, 4}, {5, 6} };

string[,] siblings = new string[2, 2] { {"Mike","Amy"}, {"Mary","Albert"} };

可省略数组的大小，如下所示：

int[,] numbers = new int[,] { {1, 2}, {3, 4}, {5, 6} };

string[,] siblings = new string[,] { {"Mike","Amy"}, {"Mary","Albert"} };

如果提供了初始值设定项，则还可以省略 new运算符，如下所示：

int[,] numbers = { {1, 2}, {3, 4}, {5, 6} };

string[,] siblings = { {"Mike", "Amy"}, {"Mary", "Albert"} };

交错的数组（数组的数组）

可以像下例所示那样初始化交错的数组：

int[][] numbers = new int[2][] { new int[] {2,3,4}, new int[] {5,6,7,8,9} };

可省略第一个数组的大小，如下所示：

int[][] numbers = new int[][] { new int[] {2,3,4}, new int[] {5,6,7,8,9} };

－或－

int[][] numbers = { new int[] {2,3,4}, new int[] {5,6,7,8,9} };

请注意，对于交错数组的元素没有初始化语法。

访问数组成员

访问数组成员可以直接进行，类似于在 C/C++ 中访问数组成员。例如，下面的代码创建一个名为 numbers的数组，然后向该数组的第五个元素赋以 5：

int[] numbers = {10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0};

numbers[4] = 5;

下面的代码声明一个多维数组，并向位于 [1, 1]的成员赋以 5：

int[,] numbers = { {1, 2}, {3, 4}, {5, 6}, {7, 8}, {9, 10} };

numbers[1, 1] = 5;

下面声明一个一维交错数组，它包含两个元素。第一个元素是两个整数的数组，第二个元素是三个整数的数组：

int[][] numbers = new int[][] { new int[] {1, 2}, new int[] {3, 4, 5}

};

下面的语句向第一个数组的第一个元素赋以 58，向第二个数组的第二个元素赋以 667：

numbers[0][0] = 58;

numbers[1][1] = 667;

数组是对象

在 C# 中，数组实际上是对象。System.Array是所有数组类型的抽象基类型。可以使用 System.Array具有的属性以及其他类成员。这种用法的一个示例是使用“长度”(Length) 属性获取数组的长度。下面的代码将 numbers数组的长度（为 5）赋给名为 LengthOfNumbers的变量：

int[] numbers = {1, 2, 3, 4, 5};

int LengthOfNumbers = numbers.Length;

System.Array类提供许多有用的其他方法/属性，如用于排序、搜索和复制数组的方法。

对数组使用 foreach

C# 还提供 foreach语句。该语句提供一种简单、明了的方法来循环访问数组的元素。例如，下面的代码创建一个名为 numbers的数组，并用 foreach语句循环访问该数组：

int[] numbers = {4, 5, 6, 1, 2, 3, -2, -1, 0};

foreach (int i in numbers)

{

   System.Console.WriteLine(i);

}

由于有了多维数组，可以使用相同方法来循环访问元素，例如：

int[,] numbers = new int[3, 2] {{9, 99}, {3, 33}, {5, 55}};

foreach(int i in numbers)

{

   Console.Write("{0} ", i);

}

该示例的输出为：

9 99 3 33 5 55

不过，由于有了多维数组，使用嵌套 for循环将使您可以更好地控制数组元素。