使用jQuery简化Ajax开发——Ajax开发入门[2][完]

使用jQuery简化Ajax开发——Ajax开发入门[2][完]2010-06-30 yeeyan 翻译:令狐葱4. 让你的html动起来

你可以使用jQuery做一些基本的动画和效果。动画效果的核心就是函数animate（）, 它可以随时改变指定的css样式. 举例来说, 你可以改变高度, 宽度, 透明度或者位置. 你还可以指定动画的速度, 改变速度的时候你可以使用毫秒（milliseconds）,或者你也可以使用预定的速度值: 慢速, 正常或者快速（slow, normal, or fast）.

下面是个同时改变元素宽和高的动画示例. 注意, 没有初始值,只有最终的值. 初始值可以直接从现有元素取到. 同时, 我还添加了一个回调函数:

$（"#grow"）.animate（{ height: 500, width: 500 }, "slow", function（）{
  alert（"The element is done growing！"）;
}）;

使用jQuery 的这些内建函数, 使动画效果做起来也相当容易了. 你可以使用show（）函数以及hide（）函数来显示和隐藏元素, 可以设定立即执行或者指定速度. 你还可以使用fadeIn（）函数和fadeOut（）函数或者slideDown（）和slideUp（）函数来显示或者隐藏一个元素, 这要看你想要哪种效果了. 下面是个简单的例子, 展示导航条的幻灯片效果（slide down）:

$（"#nav"）.slideDown（"slow"）;

5. DOM脚本以及事件处理

jQuery最擅长的可能就是操作DOM以及进行事件处理了. 遍历以及操作DOM其实很容易, 绑定移除以及调用事件用起来也很自然顺手,

并且和手动写这些代码相比,可以大大的减少错误.

事实上, jQuery简化了DOM的各种操作. 你可以创建一个元素并且使用append（）函数把它链接到其他元素上, 可以使用clone（）

复制元素, 可以使用html（）设置内容,可以使用empty（）函数删除内容,使用remove（）函数删除元素以及内容, 甚至,可以使用wrap（）

函数来使用另一个元素包装此元素.

有一些函数,可以靠遍历DOM来改变jQuery对象本身的内容. 又可以得到一个元素的siblings（）,parents（）, 或者children（）.你还

可以使用next（）和prev（）来寻找兄弟元素. find（）也许是这些函数中最强大的一个了. 它允许你使用一个jQuery选择符来在你的jQuery

对象以及其子孙节点中进行搜索.

如果配合end（）函数,这些函数将变得更加强大. end（）函数就像执行撤销一样, 会让你的jQuery对象回退到你调用find（）或者parents（）

或者其他任一个遍历函数之前的状态.

如果使用上面我们讲到的方法链接,那就可以让很复杂的功能以简介的代码来实现. Listing7展示了一个例子,你将找到一个登录表单,

并对其上的元素进行一些操作.

Listing 7. Traversing and manipulating the DOM with ease

$（"form#login"）
  // hide all the labels inside the form with the "optional" class
  .find（"label.optional"）.hide（）.end（）
  // add a red border to any password fields in the form
  .find（"input:password"）.css（"border", "1px solid red"）.end（）
  // add a submit handler to the form
  .submit（function（）{
    return confirm（"Are you sure you want to submit？"）;
  }）;

信不信由你,这个例子其实只有单一个链接起来的一行代码,中间加了一些空格而已. 首先,我选中了登录表单. 然后,我找到里边可选的label,

隐藏他们,然后调用end（）回到表单. 我找到密码输入框, 把边框变成红色,然后再次调用end（）返回到表单. 最后,我给这个表单增加了一个

提交时间处理函数. 特别有趣的是,除了代码格外简洁以外, jQuery还自己优化了所有的操作,以保证当一切都很好的链接起来的时候,你不需

要两次寻找一个元素.

处理一般的事件也很简单,就像调用函数click（）,submit（）,或者 mouseover（）,然后传给一个事件监听函数一样. 另外,你还可以使用

bind（"eventname", function（）{}）来指定事件处理函数, 你可以使用unbind（"eventname"）解除绑定某事件,或者使用unbind（）解除

所有事件. 更多关于这一系列函数的信息以及使用方法,请查阅的应用程序接口文档（API）.