使用 jQuery 简化 Ajax 开发:看看 Ajax 和 DOM 脚本编程究竟有多简单
2010-03-09 00:00:00 来源:WEB开发网$('#grow').animate({ height: 500, width: 500 }, "slow", function(){
alert('The element is done growing!');
});
jQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素,立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut(),或者 slideDown() 和 slideUp() 显示和隐藏元素,这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。
$('#nav').slideDown('slow');
DOM 脚本和事件处理
或许 jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单,同时附加、移除和调用事件也十分容易,且不像手动操作那样容易出错。
从本质上说,jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 append() 函数把它们与其它的一些元素链接到一起,使用 clone() 复制元素,使用 html() 设置内容,使用 empty() 函数删除内容,使用 remove() 函数删除所有的元素,即便是使用 wrap() 函数,用其他元素将这些元素包装起来。
通过遍历 DOM,一些函数可以用于更改 jQuery 对象本身的内容。可以获得元素所有的 siblings()、parents() 和 children()。还可以选择 next() 和 prev() 兄弟元素。find() 函数或许是功能最强大的函数,它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。
如果结合使用 end() 函数,那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数,用于返回到调用 find() 或 parents() 函数(或者其它遍历函数)之前的 jQuery 对象。
如果配合方法链接(method chaining)一起使用,这些函数可以使复杂的操作看上去非常简单。清单 7 显示了一个示例,其中包含有一个登录表单并处理了一些与之有关的元素。
更多精彩
赞助商链接