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

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');
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的话实现如下:

Listing 2. DOM scripting with jQuery

$('#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
};

时间: 2024-12-25 21:17:24

使用jQuery简化Ajax开发——Ajax开发入门[1]的相关文章

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

4. 让你的html动起来 你可以使用jQuery做一些基本的动画和效果. 动画效果的核心就是函数animate(), 它可以随时改变指定的css样式. 举例来说, 你可以改变高度, 宽度, 透明度或者位置. 你还可以指定动画的速度, 改变速度的时候你可以使用毫秒(milliseconds),或者你也可以使用预定的速度值: 慢速, 正常或者快速(slow, normal, or fast). 下面是个同时改变元素宽和高的动画示例. 注意, 没有初始值,只有最终的值. 初始值可以直接从现有元素取到

使用jQuery简化Ajax开发_AJAX相关

学习 jQuery 基本原理,探索其特性和功能,执行一些常见的 Ajax 任务并掌握如何使用插件扩展 jQuery. jQuery 是什么? jQuery 由 John Resig 创建于 2006 年初,对于任何使用 JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库.无论您是刚刚接触 JavaScript 语言,并且希望获得一个能解决文档对象模型(Document Object Model,DOM)脚本和 Ajax 开发中一些复杂问题的库,还是作为一个厌倦了

使用 jQuery 简化 Ajax 开发

使用 jQuery 简化 Ajax 开发 看看 Ajax 和 DOM 脚本编程究竟有多简单

用jQuery简化Ajax开发实现方法第1/2页_jquery

一些简单的代码简化 下面是一个简单示例,它说明了 jQuery 对代码的影响.要执行一些真正简单和常见的任务,比方说为页面的某一区域中的每个链接附加一个单击(click)事件,您可以使用纯 JavaScript 代码和 DOM 脚本来实现,如 清单 1 所示.  清单 1 :没有使用 jQuery 的 DOM 脚本 复制代码 代码如下: var external_links = document.getElementById('external_links'); var links = exte

结合AJAX进行PHP开发之入门_AJAX相关

异步 JavaScript 和 XML(Asynchronous JavaScript and XML,Ajax)无疑是最流行的新 Web 技术.本文中我们将完全使用 PHP 和 Simple Ajax Toolkit (Sajax) 创建一个简单的相册作为在线 Web 应用程序.我们首先用标准的 PHP 开发方法编写简单的相册,然后再用 Sajax 将其变成活动的 Web 应用程序. 创建一个简单的相册 本文将使用两种方法创建一个简单的相册:传统的 Web 应用程序和基于 Sajax 的应用程

面向 Java 开发人员的 Ajax: Google Web Toolkit 入门

简介: Ajax 被用于创建更加动态和交互性更好的 Web 应用程序.Google Web Toolkit (简称GWT) 是 Google 推出的 Ajax 应用开发包,GWT 支持开发者使用Java 语言开发 Ajax 应用.本文中作者将介绍如何使用 GWT 开发 Ajax 应用的基本方法和步骤. ## Ajax简介 ## Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写,由XHTML.CSS.JavaScript.XMLHttpReq

面向Java开发人员的Ajax:Google Web Toolkit入门

Ajax简介 Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写,由XHTML.CSS.JavaScript.XMLHttpRequest.XML等技术组合而成,是当前Web应用开发领域的热门技术,用于创建更加动态和交互性更好的Web应用程序,提升用户的浏览体验. Ajax的核心是JavaScript对象XmlHttpRequest.XmlHttpRequest处理所有服务器通信的对象,是一种支持异步请求的技术.简而言之,XmlHttpReq

ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧

使用AJAXRequest进行AJAX应用程序开发(1) - 初识AJAXRequest 前言 在发布了AJAXRequest类的几个版本之后,渐渐地有许多朋友用上了它,也有许多朋友问我有没有更详细的说明和示例.不过因为时间的问题以及我能想到的示例有限,一直没有多写几个示例.考虑了一下,决定写一个关于AJAXRequest的教程,希望对使用AJAXRequest类的朋友们有所帮助. 准备 在使用AJAXRequest进行AJAX开发之前,你需要做以下准备: 准备知识:JavaScript基本语法

使用Ajax Toolkit Framework开发Dojo应用

引言 AJAX Toolkit Framework(下面简称ATF)为 Eclipse 提供 Ajax 支持,其绑定当下最流行的 AJAX 框架(Dojo, Zimbra, Rico, etc),为 Eclipse 提供整合的模块.Eclipse 用户可以使用 AJAX Toolkit Framework 来编写 AJAX 应用程序.就像在 Eclipse 中开发平常的Java 程序一样,非常方便. 我们现在就以开发 Dojo 应用为例,从快速开发 Dojo 应用,以及使用 DOM Inspec