JQuery学习第一天(笔记)

最近很是对JQuery感兴趣,于是想学习一下.

从网络上找到了一些不错的学习资料,抱着试一试的思想开始学习了.有兴趣的朋友可以看一看:15天学会jQuery 这个系列的文章.

我写的完全是一篇学习笔记,想学习的还是去找一些资料吧.

jQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说，这使得javascript更加有趣。

如果你这样想：“孩子，我需要另外一个javascript库，就好比我I need another hole in my head”那么加入这个俱乐部吧。这正是我第一次遇到的时候所想的。

我已经用过了Moo.fx, Scriptaculous, TW-SACK, 和 Prototype. 我曾参与了RICO, Yahoo YUI和其他一些库的开发。

没有了PHPjavascript和我一点也不亲近了。但是我还是尽全力保持头脑清醒，并尽量保持用AJAX去思考。

所以当我遇到jQuery的时候我想:“还需要另外一个javascript库吗?不了,谢谢…”

引用别人的一段话,他是这么形容JQuery的。我想这一定是一个非常有趣味的库。

认识JQuery我打算从最好玩的事情开始——动画效果。

我们常常在页面上展开或者隐藏一些东西，通常我会设置一个DIV，在它的样式里加入“display:none;”。然后我就可以这样写。

function show()
{
  document.getElementById("ID").display = "";
}

function hide()
{
  document.getElementById("ID").display = "none";
}

这样做基本的功能是实现了,但是太生硬了.显的不够友好,不够COOL.我们总是希望我们的页面受欢迎,所以这样做是不够的.通常大家总是把上面那段代码进行扩展,加入一些小巧但是非常漂亮的效果.于是我们不得不花很多功夫去测试这个动画效果,使它变的流畅,自然.

可是常常这是很难做的,而且需要花费很多时间.那么JQuery也许是个不错的选择.我们先引入JQuery这个库,然后尝试修改一下上面的代码.(强力建议引用JQuery在所有其他JavaScript之前)

function show()
{
  //$("#ID").show();这个是不加入任何效果的显示
  $("#ID").fadeIn("fast");
}

function hide()
{
  //$("#ID").hide();这个是不加入任何效果的隐藏
  $("#ID").fadeOut("fast");
}

尝试一下效果,不错吧.有时候我们希望同一个按键可以同时控制显示和隐藏,那么很简单.

function DivToggle()
{
  $("#ID").toggle("fast");
}

JQuery附带了很多效果,还可以通过下载一些插件来扩展这些效果

我们接下来看一下参数的设置.

以fadeIn为例:

fadeIn(speed, callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

speed (可选)是速度控制参数,他提供了三种预定速度"fast","normal"和"slow".当然,我们也可以给它一个数值,表示动画的时长(单位是毫秒).

callback (可选)回调函数,在动画完成时执行的函数

比较一下下面的2段程序.

function test1(0
{
  $("#ID").fadeIn(10000);//为了显示效果,我设置了一个很长的时间
  alert("动画进行");
}

function test1(0
{
  $("#ID").fadeIn(10000,function(){
    alert("动画完成了");
  });
}

效果很明显区分出来了.

先写到这了,开始吃中午饭了.