【www.zhuodaoren.com--电脑网络】
js学习网站篇一:JavaScript教程：为什么要学习Javascript
Javascript网权威发布JavaScript教程：为什么要学习Javascript，更多JavaScript教程相关信息请访问Javascript网。
很长时间以来，JavaScript在我眼里都是编程语言中的二等公民。早先，它经常是很多安全问题的发源地，就像是胶水一样，它能把HTML应用与样式粘到一块，可没有人拿它来正正规规地编写程序；这样的情形太普遍了。而Java、Ruby、Python，这些才是真正能用来编写程序的语言。
过去几年间，我对JavaScript的态度有了彻底的改变。JavaScript已经“长大成人”了。我敢保证很多JavaScript开发人员都不会认同我前面的说法，他们会说JavaScript一直都是一个十分强大、成熟，深得人心的语言。或许他们说得没错，事实上只要是一门完整的编程语言，就能拿来编写程序，也包括BASIC这种滥东西。而一门语言真正有用，必须一方面自身具备很强的表达能力，另一方面还要有众多的库和开发工具。显然，JavaScript的表达能力早就没有问题了，即便是创建对象的方式有点不好让人接受，其实问题也不大。直到最近，一些极其重要的扭转局面的技术出现了：jQuery、JSON、Node.js和HTML5。或许JavaScript以前就是一门完善的语言了，但却是这些重要的相关技术（以及其他一些没有在这里提及的），让JavaScript成为了每一个开发人员都知道的语言。如果明年你要学一门新语言的话，那一定就是JavaScript。
潜力无限的Node.js
说Node.js潜力无限的意思，就是它有可能引发Web开发的革命。Node.js是一个框架，用于构建高性能Web应用——即使是巨量的请求也能够迅速而有效地响应。虽然Node本身作为一个底层框架，能够用于构建任何应用，但它还是最适合构建Web服务器。它的异步事件驱动模式与传统的请求-响应模式相比，无疑更适合Web应用。
有两方面因素更让Node显得前途无量。首先，Google在提升JavaScript性能方面掀起了一场革命。这句话的意思并不是说你随时随地都可以用上最好的JavaScript引擎（尽管这也是我们一个美好的期望）。但可以肯定的是，Google在其他竞争对手还没有上心的情况下，真的把JavaScript性能当成了一回事儿。如此一来，就把Mozilla、Apple、Microsoft、Opera，还有其他浏览器开发商逼到了性能竞赛的跑道上。结果导致我们现在使用的JavaScript引擎较之几年前快了不知道有多少倍，完全有能力运行复杂的大型Web应用。
其次，Node有着庞大的开发人员基础。不管大家在服务器端使用的是什么语言，但在客户端却鲜有不使用JavaScript的。有的人可能是“剪刀加浆糊”式的东拼西凑，有的人则可能用JavaScript做出了高超的Ajax应用，而有的人甚至实现了全功能的应用程序，像Twitter或 Gmail。可不管怎么说，JavaScript开发人员的数量无疑是非常庞大的。而Doug Crockford等作者更是极力宣传所有人都应该把JavaScript当成一门严肃正经的编程语言来看待——尽管它还有不少缺点。
当时当下，编写Node应用相对还是个“粗”活儿，毕竟它只是一个底层库。想象一下单纯使用JavaScript写代码，对，就是这种感觉，Node当前还是一个beta版的格局，与Rails或Django这样成熟的Web开发框架还没法比。这种状况无疑会改变。一些轻量级的框架，比如Express，已经出现了；我坚信更多基于Node的全功能框架也将不断涌现。
前面提到过一些几乎完全在浏览器中运行的高级Web应用。那些都已经不算什么新鲜事儿了，Gmail多大了？Google Maps贵庚了？不过，用JavaScript编写在浏览器中运行的应用的客户端无疑是越来越有吸引力了。HTML5则继续推高了人们对这一趋势的预期。
HTML5其实就是JavaScript
我不知道已经说过多少次了，HTML5实际上并没有多少与HTML有关，它其实就是JavaScript。HTML本身有什么变化？不过一些新标签而已，况且也都很好理解。HTML5的威力在于让你能用JavaScript来创建这些标签。假如没有后台代码通过Canvas来创建动画、游戏，或者通过它来实现一些数据的可视化，这个标签也没有大用处。从浏览器开始支持Canvas开始，我已经看到了Asteroids（行星游戏）的上百个实现，那都是开发人员为熟悉这个新特性所做的练习。有的比较粗糙一些，而有的则极其精美。这些完全都要归功于JavaScript。
由此可见，HTML5并不是在以尖括号为特征的标签语言的一次大的改进，其实质是赋予了JavaScript更强大的能力。WebGL库（当前还羽翼未丰）支持在HTML5的画布中绘制实时的3D图形。HTML5的地理位置支持在浏览器中实现LBS（Location Based Service）应用——手机的基本配置。而持久存储以及离线功能则为开发能与桌面应用媲美，但却在浏览器中运行的全功能应用奠定了基础。目前，就连增加多点触摸事件的实验性的库也已经出现了。凡此种种，无一不是实实在在的JavaScript特性。HTML5只是为这些高级功能的发挥提供了舞台。
退一步讲，不依赖于HTML5的浏览器库开发库也取得了长足的进步。长久以来，JavaScript一直都是在HTML中实现动态效果的不二之选。可两个问题迟迟得不到解决：一是浏览器兼容性问题，二是直接操作DOM太麻烦。jQuery让这两个问题霎那间消失得无影无踪，这个库已经成为现代基于浏览器的客户端开发的基本配置。不过，并非只有jQuery。Protovis、D3，都可以让你直接在浏览器中创建复杂的交互性数据可视化效果，有史以来第一次让浏览器成为了展示数据的一个重要工具。
JavaScript与数据库，编译器与语言
就连数据库里都开始广泛使用JavaScript了！当前如火如荼的NoSQL运行的三只领头羊：CouchDB、MongoDB和Riak，都是“文档数据库”。它们保存的不是表，而是文档。这几个数据库所谓的“文档”，其实就是JSON文档，而不是Word或Excel。（Riak除了JSON文档，还支持XML和纯文本。）JSON已经成为一种被广泛采用的数据交换格式（所有现代的编程语言几乎全都有解析JSON的库），不过请注意，JSON实际上不就是一种序列化JavaScript对象的格式嘛！因此，虽然你可以在任何语言中使用JSON，但在JavaScript开发中使用它则是再自然不过的事了。况且，JSON这个格式成为一种跨语言的标准，而不是Python、Ruby或Java等语言的序列化格式，这个事实本身足以说明JavaScript将在更加广阔的舞台上大显身手。还不仅仅如此，上述三个数据库都内置了支持JavaScript查询的能力。未来几年，更多的人都将会惊讶地发现，JavaScript和JSON已经内置到了其他应用程序里啦！
JavaScript时代的序幕才刚刚拉开。在今年的JSConf上，一个核心主题就是“JavaScript到JavaScript的编译器”，也被人们看成是未来的一个主要趋势。Google在“编译生成JavaScript代码”方面是首开先河者。据我所知，GWT（Google Web Toolkit）应该是通过编译（从Java代码）生成JavaScript代码的第一个框架。以前我对GWT并没有太重视，只是觉得它是一个致力于拯救那些Java程序员的框架，好让他们不必因为（学习）编写JavaScript而浪费时间。可是，GWT在编译过程中对JavaScript做了那么多的优化，简直是太神了。Closure就是一个“JavaScript到JavaScript的编译器”，能够实现同样级别的优化。Traceur，这是几个星期前才冒出来的一个框架，通过它能够试验JavaScript的新特性，换句话说，它可以把带有实验性语言特性的JavaScript代码编译成可以在所有现代平台中运行的JavaScript代码。
最后，我们也开始看到了当初Java大旗下JVM语言的蓬勃景象：各种语言都在致力于编译成JavaScript！其中有一些语言比较有意思，像Coffeescript和Kaffeine，它们在风格上酷似JavaScript，但更关注弥补JavaScript的一些不够完善的地方。是不是觉得JavaScript的对象模型特有意思，可怎么看怎么有点笨笨滴，有木有？是不是一想到基于原型创建一个实际的对象都需要反反复复地定义这定义那，就望而却步了？Coffeescript对此作了明显的改进。除了完善对象模型，Coffeescript还添加了类似列表解析（comprehensions）的新特性，去掉了大部分花括号。就像在Python中一样，要使用缩进来区分代码块。
未来的Web服务器、取之不尽的客户端库、HTML5、数据库，乃至基于JavaScript的语言——我一睁眼就能看到JavaScript！假如你曾经对JavaScript敬而远之，今年就该学习它了。没有理由，真的，再不学，恐怕你再也没机会赶超别人了！
js学习网站篇二:JavaScript教程：jQuery 学习下CSS选择器
Javascript网权威发布JavaScript教程：jQuery 学习下CSS选择器，更多JavaScript教程相关信息请访问Javascript网。
今天学习jQuery,看到nth-child(even)用法，特意找了下这个选择器的用法,在CSS3标准中，用法很强大。对此，我把CSS3标准中nth-child()用法大致介绍下：
CSS3伪类选择器：nth-child()
简单的归纳下nth-child()的几种用法。
第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。
(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
第二：nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。(EG) li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/第三：nth-child(an+b) 与 :nth-child(an-b) 先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如 3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）(EG)li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/li:nth-child(3n±0){background:orange;}/*相当于(3n)*/li:nth-child(±0n+3){background:orange;}/*相当于(3)*/第四：nth-child(-an+b) 此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。(EG) li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/
第五：nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
jQuery中用此方法可以实现条纹效果：
$("table tr:nth-child(even)").addClass("striped");
even 可以换成别的参数，上面介绍的五种情况都可以。
后面的addClass("striped") striped 是个CSS class名称。
学习jquery顺便学习了 CSS中的一些选择器。希望能坚持下来。
js学习网站篇三:JavaScript教程：快速上手学习Ajax
Javascript网权威发布JavaScript教程：快速上手学习Ajax，更多JavaScript教程相关信息请访问Javascript网。
在开始学习之前像我们学习其他语言一样，我们首先了解一下基本的知识点，什么是Ajax？
Ajax 由 HTML、JavaScript™ 技术、DHTML 和DOM 组成，这一杰出的方法可以将笨拙的 Web界面转化成交互性的 Ajax 应用程序。对于Ajax，最核心的一个对象是XMLHttpRequest，所有的Ajax操作都离不开对这个对象的操作。
首先我们来了解怎么在javascript中创建这个对象：
varxmlHttp=newXMLHttpRequest();这行简单的代码在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中，创建了XMLHttpRequest对象。但是对于市场占有率达到70%的IE来说，这种方法是不行的，而不同的IE版本还有不同的创建方法，所以我们需要在IE下面使用下面两种创建对象的办法：
try{xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//针对较新的浏览器}catch(err){try{xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//针对较老的浏览器}catch(err2){xmlHttp=false;}}即使这样，我们也无法预料有些浏览器可能无法创建这个对象，所以在创建不成功的情况下，我们还要加上一句：
if(!xmlHttp){alert("无法创建 XMLHttpRequest 对象！");}结合起来就是：
varxmlHttp=false;try{xmlHttp=newXMLHttpRequest();}catch(trymicrosoft){try{xmlHttp=newActiveXObject("Msxml2.XMLHTTP");}catch(othermicrosoft){try{xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}catch(failed){xmlHttp=false;}}}if(!xmlHttp){alert("无法创建 XMLHttpRequest 对象！");}然后，让我们建立一个函数getInfo()，打开异步请求：
functiongetInfo(){varnum=document.getElementById("num").value;//获得表单的数据varurl="/ajax/1.php?n="+escape(num);xmlHttp.open("GET",url,true);//这里的true代表是异步请求}一旦用open()配置好之后，就可以发送请求了。虽然可以使用send()发送数据，但也能通过 URL 本身发送数据。事实上，在大部分GET请求中，用 URL 发送数据要容易得多，所以这里用null作为send()的参数就可以了。url地址里面的php文件是被请求来处理所需要数据的php文件，就像我们平时用PHP的时候一样，后面的参数可以加多个，并用&分隔开来。xmlHttp.send(null);在发送了数据之后，我们需要用回调方法来获得服务器的状态，所以就用到了onreadystatechange属性。xmlHttp.onreadystatechange=updatePage;此语句已经要放在send()语句前面，这样才会有效，后面的updatePage是处理返回信息的一个函数。完整的getInfo()如下：functiongetInfo(){varnum=document.getElementById("num").value;//获得表单的数据varurl="/ajax/1.php?n="+escape(num);xmlHttp.open("GET",url,true);//这里的true代表是异步请求xmlHttp.onreadystatechange=updatePage;xmlHttp.send(null);}我们还需要在html里面来触发这个函数：<inputname="num"id="num"onblur="getInfo()"type="text"/>下面我们需要来编写updatePage()这个函数：
functionupdatePage(){if(xmlhttp.readyState==4){varresponse=xmlhttp.responseText;document.getElementById("city").value=response;}}
前面那段代码里面的readyState是服务器返回的一个状态，4这个状态表示请求已经发送，并处理完毕。responseText是获得服务器返回的信息，然后通过javascript赋给ID为city的表单。到此，一个简单的Ajax程序就完成了，完整的javascript代码如下：
varxmlHttp=false;try{xmlHttp=newXMLHttpRequest();}catch(trymicrosoft){try{xmlHttp=newActiveXObject("Msxml2.XMLHTTP");}catch(othermicrosoft){try{xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}catch(failed){xmlHttp=false;}}}if(!xmlHttp){alert("无法创建 XMLHttpRequest 对象！");}
functiongetInfo(){varnum=document.getElementById("num").value;//获得表单的数据varurl="/ajax/1.php?n="+escape(num);xmlHttp.open("GET",url,true);//这里的true代表是异步请求xmlHttp.onreadystatechange=updatePage;xmlHttp.send(null);}
functionupdatePage(){if(xmlhttp.readyState==4){varresponse=xmlhttp.responseText;document.getElementById("city").value=response;}}这里还缺一个php文件，由于处理的方式不一样，写法也不一样，而且这不是Ajax的主要部分，所以这里就不放代码了。只要记住php是输出并返回所需要的数据就可以了