jQuery是一个可以简化 JavaScript?以及AJAX(Asynchronous JavaScript +
XML,异步Javascript和XML)编程的Javascript库。不同于其他的Javascript库,jQuery有他自己的哲学,使你可以
很简单的编写代码。这篇文章就会带领你见识一下jQuery的哲学,探讨一下他的特性以及功能,并且会做一些ajax的示例,以及如何使用plug-in
(插件)来扩展jQuery。 1. 什么是jQuery? jQuery 是个很优秀的Javascript库,它诞生于2006年,出自John Resig之手。不管你是一个javascript新手,但是却想尝试一下DOM(Document Object Model)以及Ajax的繁杂,抑或你是个javascript专家级人物,但是已经厌倦了反复的重复那无味的DOM以及Ajax脚本,jQuery都 将是你的不二选择。 jQuery会帮助你保持代码的简单和简洁。你不必再去写一大堆重复的循环或者是DOM调用脚本,使用jQuery,你将很快找到关键点,并且可以以最少的代码表达你的思想。 jQuery的哲学其实很单一:简单、可重用。当你理解并且认同这种思想的时候,你就可以开始体会一下使用jQuery能让你的编程变得多么轻松愉快了! 2. 一些简单概念 这里是个简单的例子,向你展示jQuery如何影响你编写的代码。做的事情其实很简单,比如对页面上某一区域内的所有链接都添加一个click响应事件,你可以使用一般的Javascript以及DOM来写,代码见Listing1: Listing 1. DOM scripting without jQuery var external_links = document.getElementById(‘external_links‘);$()函数返回一个包含与css选择符匹配的所有元素的一个jQuery对象. jQuery对象的概念就像是数组,但是它可能含有许多jQuery函数. 举例来说,你可以调用click函数来绑定一个click事件响应到jQuery对象中的每个元素上. 你还可以向$()函数传递一个元素或者是元素的数组,它将把所有的元素打包成一个jQuery对象.你可能想要把这一特性应用到象窗口对象上面.举例来说, 你有可能使用此函数来加载事件,像这样: window.onload = function() {如果使用jQuery的话,你可以这样写: $(window).load(function() {这段代码创建一个document元素的jQuery对象, 然后当html DOM文档准备完毕后调用此实例. 你可以无限次的调用这个函数. 另外, 在真正的jQuery风格代码中,这个函数还有一个缩写形式.简单的传递一个函数给$()函数: $(function() {到现在位置,我已经向你展示了三种不同的使用$()函数的方法.第四种方式, 你可以使用一个字符串创建一个元素. 结果是一个包含此元素的jQuery对象. Listing3展示了一个增加一段到页面上的例子: Listing 3. Creating and appending a simple paragraph 正如你从上面的例子中看到的一样,jQuery还有一个很强大的功能就是方法链(method chaining), 每次你对一个jQuery对象调用一个方法,这个方法将同样返回一个jQuery对象. 这就是说如果你需要对一个jQuery对象调用多个方法的话, 你可以不必重复写css选择符,可以像这样: $(‘#message‘).css(‘background‘, ‘yellow‘).html(‘Hello!‘).show();通 常,你可能需要向服务器端的页面传递一些参数. 你可能猜到了, 使用jQuery来实现的话会十分简单. 你可以选择使用$.post()或者$.get(), 当然要根据你的具体需要. 如果需要, 你可以传递一个可选的数据对象和一个回调函数. Listing4是一个发送数据以及使用回调函数的简单例子: Listing 4. Sending data to a page with Ajax 如果你真的想要一些复杂的Ajax代码,那就是用$.ajax()函数. 你可以指定数据类型为xml, html, script或者json, jQuery 会为你自动准备好结果一遍你的回调函数能够立即使用这些数据. 你还可以设定 beforeSend ,
error , success , 以及
complete 回调函数来给用户一些ajax体验的更多提示信息. 另外,还有一些参数,可以让你设置ajax请求的超时时间,或者一个页面的"最后更改"状态. Listing5展示了一个获取xml文档并使用我上面提到的一些参数的简单例子:Listing 5. Complex Ajax made simple with $.ajax() 当 你成功的获得xml反馈的时候, 你可以使用jQuery来遍历xml文档,就像你操作html的方式一样. 这使操作一个xml文件以及整合内容到页面上变得十分的简单. Listing6 扩展了success函数, 根据xml文档里的每个<item>在页面上增加一个了list(列表)条目. Listing 6. Working with XML using jQuery
|
|