jQueryAjax开发

原创 2007年10月10日 18:20:00

jQueryAjax开发

jQuery是一个可以简化 JavaScript™以及AJAXAsynchronous JavaScript +XML,异步JavascriptXML)编程的Javascript库。不同于其他的Javascript库,jQuery有他自己的哲学,使你可以很简单的编写代码。这篇文章就会带领你见识一下jQuery的哲学,探讨一下他的特性以及功能,并且会做一些ajax的示例,以及如何使用plug-in(插件)来扩展jQuery

1.
什么是jQuery

jQuery
是个很优秀的Javascript库,它诞生于2006年,出自JohnResig之手。不管你是一个javascript新手,但是却想尝试一下DOMDocument ObjectModel)以及Ajax的繁杂,抑或你是个javascript专家级人物,但是已经厌倦了反复的重复那无味的DOM以及Ajax脚本,jQuery都将是你的不二选择。

jQuery
会帮助你保持代码的简单和简洁。你不必再去写一大堆重复的循环或者是DOM调用脚本,使用jQuery,你将很快找到关键点,并且可以以最少的代码表达你的思想。

jQuery
的哲学其实很单一:简单、可重用。当你理解并且认同这种思想的时候,你就可以开始体会一下使用jQuery能让你的编程变得多么轻松愉快了!

2.
一些简单概念

这里是个简单的例子,向你展示jQuery如何影响你编写的代码。做的事情其实很简单,比如对页面上某一区域内的所有链接都添加一个click响应事件,你可以使用一般的Javascript以及DOM来写,代码见Listing1

[url=]Listing 1. DOM scripting without jQuery[/url]       
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        return confirm('You are going to visit: ' + this.href);
    };
}

如果使用jQuery的话实现如下:

[url=]Listing 2. DOM scripting with jQuery[/url]
       
$('#external_links a').click(function() {
    return confirm('You are going to visit: ' + this.href);
});


很惊讶,是吧?使用jQuery的话,你可以很快找到关键点,并且只需要表达你需要表达的,
而不需要罗里罗嗦。不需要对这些元素进行循环,click()函数可以处理好这一切。而且你不要谢太多的操作DOM的代码,
你需要的仅仅是使用很少的字符定义你要找的那个元素。

来看一下这段代码是如何工作的,有点小技巧。首先,看到$()函数--jQuery里最有用的最强大的函数.大部分情况下,
你使用这个函数从文档中选择元素.在这个例子中,使用这个函数传递带有一些级联样式表(Cascading Style Sheets,CSS)
语法的字符串,jQuery可以很方便的找到这个元素.

如果你懂一点基本的CSS选择符的只是,我想这个语法应该看起来相当熟悉.Listing2,#external_links用来寻找带有id
external_links
的元素.接下来的空格表示jQuery要找到在#external_links元素内的所有的<a>元素.用口语开表达的话有点费劲--
DOM脚本来写也挺麻烦,不过,CSS,没有比这个更简单的了.$()函数返回一个包含与css选择符匹配的所有元素的一个jQuery对象. jQuery对象的概念就像是数组,但是它可能含有许多jQuery函数. 举例来说,你可以调用click函数来绑定一个click事件响应到jQuery对象中的每个元素上.

你还可以向$()函数传递一个元素或者是元素的数组,它将把所有的元素打包成一个jQuery对象.你可能想要把这一特性应用到象窗口对象上面.举例来说, 你有可能使用此函数来加载事件,像这样:

window.onload = function() {
    // do this stuff when the page is done loading
};
如果使用jQuery的话,你可以这样写:

$(window).load(function() {
    // run this when the whole page has been downloaded
});

如你所知,等待一个窗口的加载是异常痛苦的,因为必须加载整个页面,包括页面上所有的图片. 某些情况下,你需要首先加载图片,
但是大部分时候,你可能只需要看到一下超文本的标记(HTML).jQuery通过在文档上创建一个很特殊的事件ready来解决这个问题,
使用方法如下:

$(document).ready(function() {
    // do this stuff when the HTML is all ready
});
这段代码创建一个document元素的jQuery对象, 然后当html DOM文档准备完毕后调用此实例. 你可以无限次的调用这个函数. 另外,
在真正的jQuery风格代码中,这个函数还有一个缩写形式.简单的传递一个函数给$()函数:

$(function() {
    // run this when the HTML is done downloading
});
到现在位置,我已经向你展示了三种不同的使用$()函数的方法.第四种方式, 你可以使用一个字符串创建一个元素. 结果是一个包含此元素的jQuery对象. Listing3展示了一个增加一段到页面上的例子:

[url=]Listing 3. Creating and appending a simple paragraph[/url]
       
$('<p></p>')
    .html('Hey World!')
    .css('background', 'yellow')
    .appendTo("body");
正如你从上面的例子中看到的一样,jQuery还有一个很强大的功能就是方法链([url=]method chaining[/url]), 每次你对一个jQuery对象调用一个方法,这个方法将同样返回一个jQuery对象. 这就是说如果你需要对一个jQuery对象调用多个方法的话, 你可以不必重复写css选择符,可以像这样:

$('#message').css('background', 'yellow').html('Hello!').show();

3.jQuery
Ajax变得异常简单

使用jQuery,Ajax恐怕不能变得再简单了. jQuery有一系列的函数,可以使简单的事情变得真正简单,让复杂的事情也能变得尽可能
的简单.

Ajax
的一个一般用法就是加载一段html代码到页面上的某一区域. 要实现这个,你只要简单的选中这个元素,然后使用load()函数.
下面是个例子,用来更新一些统计信息.

$('#stats').load('stats.html');
通常,你可能需要向服务器端的页面传递一些参数. 你可能猜到了, 使用jQuery来实现的话会十分简单.你可以选择使用$.post()或者$.get(), 当然要根据你的具体需要. 如果需要, 你可以传递一个可选的数据对象和一个回调函数.Listing4是一个发送数据以及使用回调函数的简单例子:

[url=]Listing 4. Sending data to a page with Ajax[/url]
       
$.post('save.cgi', {
    text: 'my string',
    number: 23
}, function() {
    alert('Your data has been saved.');
});
如果你真的想要一些复杂的Ajax代码,那就是用$.ajax()函数. 你可以指定数据类型为xml, html, script或者json, jQuery 会为你自动准备好结果一遍你的回调函数能够立即使用这些数据. 你还可以设定 beforeSend,                        error, success, 以及                        complete 回调函数来给用户一些ajax体验的更多提示信息. 另外,还有一些参数,可以让你设置ajax请求的超时时间,或者一个页面的"最后更改"状态. Listing5展示了一个获取xml文档并使用我上面提到的一些参数的简单例子:

[url=]Listing 5. Complex Ajax made simple with $.ajax()[/url]
       
$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});
当你成功的获得xml反馈的时候, 你可以使用jQuery来遍历xml文档,就像你操作html的方式一样.这使操作一个xml文件以及整合内容到页面上变得十分的简单. Listing6 扩展了success函数,根据xml文档里的每个<item>在页面上增加一个了list(列表)条目.

[url=]Listing 6. Working with XML using jQuery[/url]
       
success: function(xml){
    $(xml).find('item').each(function(){
        var item_text = $(this).text();

        $('<li></li>')
            .html(item_text)
            .appendTo('ol');
    });
}

 

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展示了一个例子,你将找到一个登录表单,
并对其上的元素进行 一些操作.

[url=]Listing 7. Traversing and manipulating the DOM with ease[/url]
       
$('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 选择符的详细心意, 包括CSS3XPath, 可以参考文后的资源链接.

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
也有一些cssXPath里都没有的额外的选择符, 比如,为了增加一个表格的可读性, 你可能需要设定奇数行和偶数行
使用不同的类名, 这就是斑马条. 使用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, 一个处理排序,拖动效果,各种复杂特效以及其他有趣的复杂的用户界面效果的动画
插件. InterfacejQuery就像ScriptaculousPrototype来说一样.

同样流行并且有用的插件是Form插件,允许你简单的使用ajax在后台提交一个表单. 这个插件用在这种情况下:当你需要劫持表单
提交事件,然后找到所有不同的文本输出字段,并使用他们来构建ajax调用.

8. jQuery
之后
我只是讲述了关于jQuery的一些皮毛罢了. jQuery用起来很有意思, 因为你学的这些新特性新方法看起来都十分的自然十分顺理成章.你一旦使用jQuery,就会体会到它可以简化你的Javascript以及Ajax开发, 你每学一点东西, 就会使代码变得更简单一点.

学习jQuery之后, 我在Javascript编程里找到了许多乐趣, 所有无聊的东西都被很好的处理, 所以我只需要关注最核心的部分.使用jQuery之后, 我几乎记不得我上一次使用for 循环是什么时候. 我甚至害怕使用其他Javascript.jQuery彻底的改变了我对Javascript编程的看法.

资源列表
[
]

 

 

JQuery、JSON、Ajax在Servlet中的应用

1、在Java中正确得到JSONObject,需要导入JSON的JAVA支持包“json-lib-2.3-jdk15.jar”,同时需导入 JSON依赖包“commons-logging-1.0.4....
  • nefetaria
  • nefetaria
  • 2013年05月19日 22:33
  • 12411

jQuery.ajax()方法中参数详细解析

在项目开发中,为了实现异步向服务端发起请求,最经常使用的就是jQuery.ajax方法了。刚开始需求比较简单,调用jQuery.ajax方法时要传的参数也就那几个常见的参数:url/data/data...
  • ruoyiqing
  • ruoyiqing
  • 2015年08月06日 18:31
  • 1190

jQuery Handsontable【jQuery插件-一个非常酷的可编辑表格】

jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格,它的描述是:a minimalistic Excel-like data grid editor for HTML...
  • sunyingyuan
  • sunyingyuan
  • 2013年12月27日 10:56
  • 4930

ajax开发:jqueryajax+php的登录与退出功能实现

用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度。本文将使用PHP和jQuery来实现登录和退出功能。 准备数据...
  • Generon
  • Generon
  • 2017年07月13日 10:01
  • 409

jqueryajax使用jQuery简化Ajax开发—Ajax开发入门[1]

  • 2009年10月19日 14:53
  • 158KB
  • 下载

JQueryAjax在asp.net中的应用实例

  • 2015年09月29日 17:34
  • 167KB
  • 下载

JqueryAjax简单实例

  • 2009年10月17日 17:34
  • 32KB
  • 下载

jqueryAjax

  • 2013年10月29日 18:51
  • 288KB
  • 下载

Jqueryajax简单模拟股票涨跌

采用json数据格式和xml和服务端进行交互 :进入这个页面不用刷新,就可以每个一定时间看到最新的股票指数,另外当把鼠标移动到股票上去,还可以看到这个股票的更详细的信息,比如昨天的收盘价,今天的开盘价...
  • erhei0317
  • erhei0317
  • 2016年09月13日 23:55
  • 226

一个简单jqueryAjax前端页面展示

"> lattice
  • gezi2015129
  • gezi2015129
  • 2017年03月16日 16:38
  • 305
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQueryAjax开发
举报原因:
原因补充:

(最多只允许输入30个字)