原文作者:Jesse Skinner
原文链接:Simplify Ajax development with jQuery
译者:令狐葱
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()解除
所有事件. 更多关于这一系列函数的信息以及使用方法,请查阅jQuery的应用程序接口文档(API).
6. 揭秘jQuery选择符的威力通常, 你使用ID选择元素, 比如
#myid; 或者使用类名来选择,比如
div.myclass. 然而,jQuery有一套相当复杂而且完备的选择符语法,可以让你使用单一的选择符就可以
找到任意组合的元素.
jQuery 的选择符语法很大程度上基于CSS3以及XPath. 你对CSS3以及XPath 了解的越多, 你越能更好的使用jQuery. 关于jQuery 选择符的详细心意, 包括CSS3和XPath, 可以参考文后的资源链接.
CSS3包含一些并不是所有浏览器都支持的语法, 所以你有可能不怎么会经常见到它. 但是, 你仍然在jQuery里可以使用它来选择元素, 因为, jQuery有他自己定制的选择符解析引擎. 举例来说, 要给表格中的每一空列增加一个短横线, 则可以使用:empty 伪操作符:
$('td:empty').html('-');
如何找到每个不包含特定类名的元素呢? CSS3有个针对这种情况的特定语法,使用:not伪操作符. 下面的代码将隐藏所有不含有
required类名的文本输入框元素.
$('input:not(.required)').hide();
你还可以使用逗号把多个选择符连到一起,就像在css里处理的一样. 下面的代码将同时隐藏页面上各种不同类型的列表元素.
$('ul, ol, dl').hide();
XPath是在一个文档中找元素的强大工具. 他和CSS有些不同,可以让你找到使用CSS无法找到的许多东西. 比如,想要给所有的
复选框的父元素增加一个边框,可以这样做:
$("input:checkbox/..").css('border', '1px solid #777');
jQuery 也有一些css和XPath里都没有的额外的选择符, 比如,为了增加一个表格的可读性, 你可能需要设定奇数行和偶数行
使用不同的类名, 这就是斑马条. 使用jQuery做这个就是小菜一碟,这多亏了:odd为选择符. 下面代码演示使用striped类
改变表格中奇数行的背景色:
$('table.striped > tr:odd').css('background', '#999999');
看到了吧,jQuery强大的选择符能够简化你的代码. 无论你想要影响什么元素,也无论它多么清晰或者模糊,你总可以找到
一个方法使用一个简单的jQuery选择符定位到它.
7. 使用插件扩展jQuey
不像其他的软件那样, 给jQuery写插件绝不是对着一堆复杂的API的一个痛苦的煎熬. 事实上,给jQuery写插件是如此的简单,
以至于你等下都有可能想写个插件来使你的代码更加简练.下面就是你要写的插件最基本的部分:
$.fn.donothing = function(){
return this;
};
尽管十分简单, 但是还需要稍微解释一下. 首先,要为每个jQuery对象增加一个函数,你必须把它指定到$.fn上, 其次, 这个
函数必须返回this(jQuery对象)来保证不会破坏上面提到的方法链接规则.
你可以很容易的在上面代码基础上扩展. 要写一个改变背景色的插件来代替使用 css('background'),你可以这样:
$.fn.background = function(bg){
return this.css('background', bg);
};
注意我可以直接返回css()函数的结果,因为它本身已经是一个jQuey对象了,因此,方法链接可以很好的工作.
我建议当你发现你在不断的重复代码的时候使用jQuery插件. 比如, 当你使用each()函数来一遍又一遍的处理某个相同的事情的
时候,你可以考虑使用插件[译注:不是很明白.].
由于jQuery的插件十分容易开发,因此已经有成千上万个插件可以供你使用. jQuery 有针对表格,圆角,幻灯效果,提示,日期选择
以及任何你能想到的应用方面的插件.你可以在文后的资源列表中找到完整的插件列表.
最复杂并且使用最广泛的插件是Interface, 一个处理排序,拖动效果,各种复杂特效以及其他有趣的复杂的用户界面效果的动画
插件. Interface对jQuery就像Scriptaculous对Prototype来说一样.
同样流行并且有用的插件是Form插件,允许你简单的使用ajax在后台提交一个表单. 这个插件用在这种情况下:当你需要劫持表单
提交事件,然后找到所有不同的文本输出字段,并使用他们来构建ajax调用.
8. jQuery之后
我只是讲述了关于jQuery的一些皮毛罢了. jQuery用起来很有意思, 因为你学的这些新特性新方法看起来都十分的自然十分顺理成章. 你一旦使用jQuery,就会体会到它可以简化你的Javascript以及Ajax开发, 你每学一点东西, 就会使代码变得更简单一点.
学习jQuery之后, 我在Javascript编程里找到了许多乐趣, 所有无聊的东西都被很好的处理, 所以我只需要关注最核心的部分. 使用jQuery之后, 我几乎记不得我上一次使用for 循环是什么时候. 我甚至害怕使用其他Javascript库. jQuery彻底的改变了我对Javascript编程的看法.
资源列表学习产品和技术讨论[完]
添加评论
相关文章:
Top 100 web2.0网站 最热门的100个网站
VC新年新展望
Ajax 的六个误区
分享到:
相关推荐
本篇文章将详细介绍如何使用jQuery来简化Ajax开发,帮助初学者快速入门。 1. **DOM操作的简化** 在jQuery中,通过选择器可以非常方便地定位到DOM元素。例如,`$('#stats')`会选择ID为'stats'的元素,而`$('td:...
**Ajax学习——DWR的参考书和实用案例学习总结** DWR(Direct Web Remoting)是一种优秀的开源框架,专门用于简化Web应用程序中的Ajax(Asynchronous JavaScript and XML)开发。Ajax技术允许网页在不刷新整个页面...
10. **AJAX库和框架**:虽然可以直接使用原生的XMLHttpRequest,但使用jQuery、axios或fetch等库可以简化代码,提高开发效率。 11. **Promise和async/await**:随着JavaScript的发展,现在推荐使用Promise和async/...
8. **Ajax与AJAX库**:介绍jQuery、Prototype等流行的Ajax库,简化Ajax开发过程。 9. **Ajax性能优化**:讨论Ajax请求的性能问题,提供优化策略,如减少HTTP请求、缓存利用等。 10. **跨域问题与解决方案**:解释...
《jQuery JavaScript与CSS开发入门经典》是一本专为初学者设计的编程指南,旨在帮助读者快速掌握前端开发的核心技术——jQuery、JavaScript和CSS。通过学习这本书的源码,你可以深入理解这三个关键技术的工作原理,...
本教程"JavaWeb开发教程——入门与提高篇"旨在为初学者提供一个全面的学习路径,同时也为有一定基础的开发者提供进阶知识。教程包含了PDF课件和源码,使学习者能够理论结合实践,更深入地理解JavaWeb开发的核心概念...
在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本篇将通过介绍jQuery的基础概念、核心功能以及提供的丰富示例,帮助读者从入门到精通,深入理解并...
**Ajax 入门经典——掌握Ajax核心技术** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,极大地...
在正式环境中,通常使用经过压缩的版本(如`jquery-1.3.2.min.js`),而在开发过程中,可能需要使用带有智能感知支持的版本(如`jquery-1.3.2-vsdoc2.js`)。以下是一个简单的例子,展示了如何在HTML页面中引入...
最后,教程可能还会讲解一些高级主题,如使用jQuery、axios或fetch等库简化Ajax调用,或者介绍Ajax的其他变种,如WebSockets和Server-Sent Events(SSE),这些技术用于实现更实时的双向通信。 总的来说,"Ajax入门...
jQuery简化了事件处理。使用`on()`方法可以绑定事件,如`$("button").on("click", function() {...})`表示当按钮被点击时执行函数。同时,`off()`用于移除事件绑定,`trigger()`可以手动触发事件。 ## 4. 动画效果 ...
jQuery简化了AJAX的使用过程,提供了多种方法来实现异步请求: - **$.ajax()**:提供了强大的AJAX编程接口,但使用相对复杂。 - **load/get/post**:简化了请求的发送过程,适用于常见的GET和POST请求。 - **...
在IT行业中,jQuery是一个非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本文将围绕“用jQuery自己写的一个表格”这一主题,深入讲解如何利用jQuery来创建自定义的表格,并以此作为...
**jQuery入门实例——深入理解AJAX应用** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本实例将聚焦于jQuery中的AJAX功能,帮助初学者理解如何...
jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本篇中,我们将深入探讨两个关键文件——"JQuery.html"和"jquery-1.3.2.min.js",它们是初学者了解...
- 如何使用jQuery简化常见的JavaScript任务。 - jQuery选择器详解。 2. **核心功能讲解**: - DOM操作技巧,包括添加、删除和修改元素。 - CSS类操作方法。 - 动画效果和jQuery UI的使用。 3. **AJAX集成**: ...
**AJAX快速入门教程——AjaxFastLane** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了...
总的来说,这个项目涵盖了前端开发中的多个核心技能:jQuery的DOM操作、事件处理、Ajax交互,以及Bootstrap的使用。通过实践这个项目,不仅可以提升jQuery和Bootstrap的运用能力,还能对Web开发的前后端协作有更深入...
2. **选择器**:jQuery入门[2]-选择器 .doc详细讲解了jQuery如何简化CSS选择器的使用。jQuery支持基本选择器(如ID、类、标签)、层次选择器(如后代、子元素、相邻兄弟等)、属性选择器以及表单选择器,使得选取...
jQuery简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务,使得JavaScript编程更为简单和高效。它提供了统一的API,使得跨浏览器的兼容性不再是开发中的难题。 二、jQuery选择器 jQuery的选择器是其强大功能...