序章

 

 

操作中引出的一些思考

 

我们经常在写JS代码的时候出现一些这样或者那样的情况，比如：

选择一些元素；

对选择的元素修改其HTML；

修改元素的响应事件；

隐藏或者显示元素；

给元素增加CSS类；

给元素增加一个动画；

或者将元素的内容传递到服务器。

 

我们先想一下这些问题该怎么分而治之？

选择元素我们可以使用选择器；

修改HTML，响应事件以及CSS等操作可以使用JS的DOM对象操作；

动画呢？我们应该使用Timeout配合CSS进行；

Ajax就是XMLHTTPRequest。

 

然而，这些问题存在：

选择器如果想选择奇数/偶数元素（比如制作斑马图怎么办？

DOM对象经常要使用一系列很长的控制字串来解决；

动画对于位移的还好说，如果是存在浏览器兼容性怎么办？

Ajax也存在浏览器兼容性，而且难以理解。

 

我们该怎么办？

 

什么是jQuery

 

jQuery就是为了解决这些问题而生。

例如我们想为下面的Table做一个斑马图：

 

测试		测试		测试
		测试	测试
				测试
测试	测试	测试	测试	测试
测试	测试	测试	测试

 

我们只需要一行：

$("table tr:nth-child(even) ").css("background-color","aqua");‘

偶数行的背景颜色就被替换了，如果想使用更复杂的CSS，我们还可以增加一个Class，比如：

$("table tr:nth-child(even) ").addClass("test");

这样我们就可以对于class为test的元素使用CSS规则了。

在比如我想让这个测试的table淡出隐藏，那就更简单了：

 

Test Test

 

我们仅仅使用了两行代码：

$("#firsttest").fadeOut();
$("#firsttest").fadeIn();

<button onclick="fadeout()";>Test</button>
<button onclick="fadein()";>Test</button>

 

就完成了要克服一系列浏览器兼容性，而且还要手工写很多脚本的问题的解决。

当然还有更多，我们会在后面稍微详细的讲解。

 

如何使用jQuery

 

很简单，只要在head标签中加入：

<script src="js/jquery.js" type="text/javascript"></script>

这样的引用就可以了。

 

选择器

 

我们之前是怎么做的

 

ol, ul

p#ljsabc a

a:hover

还有……

 

我们可以怎么做？

 

li:nth-child(2n)

a:nth-child(even)

 

p > a （必须是直系儿子才有效

ul.mylist >li >a

 

a[href^=http://] （以特定值开头

a[href$=.txt] （以特定值结尾

 

li:has(a)

div:has(img)

 

自定义选择器

 

div p:not(:hidden)

input(:checked)

 

div.children().not(p.list)

到最后我们可以写很长的一串选择器链

 

管理这些元素

 

test

$("#somediv").append("There are"+$("a").size();+"links");

div.children().not(p.list)

ul>li:has(a).slice(2,3);

 

还有更多的用法，大家可以去网站上查看API手册。

这里暂且用实例的方式告诉大家，jQuery的选择器有多强大。

 

 

DOM

 

获得一个元素的属性

 

比如我们想获得logo元素的src属性：

alert($("#logo").attr("src"));

即可

test

 

如果我们不满足的话，还可以使用另一的attr的使用方式进行修改操作，比如：

$("#logo").attr("src","img/logo2.png");

即可

test

 

另外还有额外的removeAttr等等函数。

 

 

修改一个元素的样式

 

比如最简单的操作，刚才替换的Logo大小不太合适，我们可以修改一下：

$("#logo").width(160);

$("#logo").height(70);

test

 

自然的，这两个函数如果不加参数就使用的话：

比如alert($("#logo").height());

test

 

接下来尝试更高级的控制方式：

我们想完整的控制一个元素的CSS，比如下面一个小方块的背景图片：

left+=5;
$("#cssbox").css("background-position",left+'px 0px');

test

 

还有一种方法，就是我们刚才提到了AddClass函数，通过使用这个函数添加一个类，然后再执行CSS规则。

 

 

修改一个元素的内容

 

最简单的，我们想替换上一个div中的文字，那么只需要这样：

$("#cssbox").html("Hello World!");

test

 

如果我们想追加元素到这个div中，比如：

$("#cssbox").append("Hello World!");

test

 

当然我们也可以插入一个对象，比如：

$("#cssbox").append($("#firsttest"));

test

 

当然还有一些更好的方法，在此由于时间有限，就不再赘述了。

 

事件

 

jQuery事件模型

 

我不准备在这里讲什么JS的第0级，第1级和第2级事件模型，如果你真想知道，我也不知道。这种情况，还是上w3.org比较靠谱。

这里只有两个函数，不过可以抵挡千军万马。

 

$.bind()

用法：bind(eventType,data,Listener)

eventType为事件名称，data为提供的数据（不过很少用到），Listener为事件处理程序，例如：

$('#logo').bind('click',function(event){fde()});

test

 

我们可以使用的事件名称有很多，比如click，比如blur，比如focus，比如onmousemove，等等。这个由于学习HTML的时候就学习过了，不再列举了。

Event这个参数，有着很多属性，列举一下：

altkey,ctrlKey,KeyCode,metKey,pageX,pageY,RelatedTarget,ScreenX,screenY,shiftKey,target,type,which

 

$.unbind()

 

删除事件处理程序，如果之前建立了一个click处理程序，我们只要：

$("#something").unbind('click');

即可。

 

$.toggle()

 

处理一对元素的点击

例如：

$("#logo").toggle(

function(event){

$(event.target).css('opacity','0.4');

},

function(event){

$(event.target).css('opacity','1.0');

});

test

 

 

动画

 

显示或者隐藏一个元素

 

我们只是想隐藏一个logo，如果我们只是让一个元素消失，那么这样就好了：

$("#logo").hide();

test

 

再让它显示：

$("#logo").show();

test

 

如果我们加上个延时呢：

$("#logo").hide(1500);

test

 

再让它显示：

$("#logo").show(1500);

test

 

如果我们需要切换显示隐藏怎么办？

$("#logo").toggle(1500);

test

 

回传函数

 

上面这些函数都是只有一个参数（时间），或者没有参数，

我们可以为这些函数增加第二个参数，叫做Callback。

它的意思是，当动画结束之后，会执行什么命令。

 

例如：

$("#logo").toggle(1500,'alert(0)');

test

 

其他动画

 

比如向上卷动

$("#leftbar").slideUp(1500);

test

 

比如向下卷动

$("#leftbar").slideDown(1500);

test

 

淡入淡出，其中第一个参数是消散时间，第二个参数是透明度，第三个参数是回传函数，

例如： $("#leftbar").fadeTo(1500,0.2);

test

 

例如： $("#leftbar").fadeTo(1500,1.0);

test

 

 

自定义高级动画

jQuery的内置函数已经提供了一系列很强力的动画函数，如果还不满足的话，还可以对更多的CSS属性施以动画，例如：

$("#leftbar").animate({

opacity:0.5;

left:1200;

font-size:30px;

},5000);

test

 

这些渐变效果基本上是基于大小和位置的，如果想对颜色进行渐变操作的话，可以使用一个Color Animation Plugin进行扩展。

 

Ajax

 

什么是Ajax

Ajax就是所谓异步的Javascript和XML（Asynchronous Javascript and XML），一种无需刷新就可以和服务器进行交互的方式。

我们首先要了解一下同步和异步的概念。

同步：上完厕所要洗手，当然不能同时做。在上厕所时，你是阻塞的。也就是这件事做不完，下一件事是不能昨晚的。

异步：我可以一边煮着饭，一边炒菜。这是自然的。

 

如果说只有向服务器提交页面然后刷新才能提交的话，就像是前者。不刷新无法完成登陆（或者其他步骤），如果我想不刷新就登陆的话，可以这样：

我给服务器打一个电话，说我是李喵喵，我的密码是****，我要登陆。

然后我做一些其他的事情，但是记得等服务器的电话。

过一会儿服务器回电话，告诉我，登陆成功了，你的凭据是“信春哥不挂科”（假定），只要说这句话，就可以做你喜欢的事情了。

然而我并没有离开家门。

 

如果我采取同步的方式，那就没有电话的存在了。我必须要走到服务器所在的地方，然后手工把我的用户名密码告诉它才可以。

说了这么多就是为了了解Ajax的工作原理。

 

如何实现？

我们需要一个对象，叫做XMLHTTPRequest……

说实话用纯JS实现XHR请求是痛苦的，因为要创建一个互不兼容的对象，然后在这个对象的基础上进行操作，实在恼人。

那么，用jQuery就能很快的实现了？是的，比如：

$("ajaxbox").load("lib/getquery.php?id=2");

test Clear

 

仅仅使用了1行，就将一个外部的PHP页面送入了HTML中。

设想一下，我有个twitterupdates.php是提供最近的推文的，那么只需一个load函数，就能做出一个“我最近的推文”的功能。

 

那么更高级的使用呢？

 

$.get和$.post

 

一眼就应该能明白，这分别是提供get请求和post请求的。

比如

jQuery.post("http://localhost/shuo/lib/addquery.php",{id:lastid+1,updates:shout},"text",function(result){
alert(result);
});

这是干什么的？

 

GET请求与之类似，没有任何区别。

 

JSON

 

JSON是什么，请参见Wikipedia。（因为我忘了）

为什么使用JSON，主要是XML太复杂了。

那么我们用JSON干什么？还记得之前load的那个内容吗？我们该如何处理之？

success: function(json){
alert(json[0].updates);
document.getElementById("shoutbox").value=json[0].updates;
}

 

完全控制Ajax：$.ajax

 

我们会发现一个Ajax请求可能会有更多的参数，比如对象类型，超时，甚至是404的处理方案，这个时候我们就需要$.ajax函数了，比如：

jQuery.ajax({
type: "get",
url: "http://localhost/shuo/lib/getid.php",
dataType: 'text',
async: false,
contentType: 'application/json; charset=utf8',
success: function(text){
lastid=Number(text);
alert(lastid);
}
});

再比如：

$.ajax({
type:'POST',
url:"http://localhost/shuo/lib/addquery.php",
data:{id:lastid+1,updates:shout},
success:function(data){
alert(data);
getid()
}
});

 

还有更多的地方可以使用Ajax，何不多多尝试呢？

但是请注意串行和并行的问题，如果在短时间有两个线程对一个数据进行操作，那么很容易出现冲突（有点像操作系统一样，解决的办法就是阻塞一个线程）。