中文字幕亚洲免费无线观看日本,亚洲GV天堂无码男同在线观看,中文字幕第13亚洲另类

AJAX基础与实�?�?

忆风 — Mon, 25 Aug 2008 18:57:00 GMT

AJAX�?/span> JSON 发送请求数�?/span>

Ø 使用XML 向服务器发送复杂的数据�l�构�Q?/span>

Ø 通过串连接来创徏XML 串�ƈ不好�Q?/span>

Ø �q�也不是用来生成或修�?/span>XML 数据�l�构的健壮技术�?/span>

Ø JSQN 概述

*　JSON �?/span> XML 的一个替代方法，可以�?/span>www.Json.org 扑ֈ��?/span>

*　JSON 是一�U�文本格式，它独立于具体语言�Q?/span>

*　使用了与C �p�d��语言(�?/span>C �?/span>C# �?/span>JavaScript �{?/span>)�c�M��的约定�?/span>

*　JSON建立在以�?/span> 两种数据�l�构基础上，当前几乎所有编�E�语�a�都支持这两种数据�l�构�?/span>

两种数据�l�构

Ø �?/span>/值对集合�?/span>

*　不同的语�a�中，它被理解为对象（object�Q�，�U�录 �Q?/span>record�Q�，�l�构�Q?/span>struct�Q�，字典�Q?/span>dictionary�Q�，哈希表（hash table�Q�，有键列表�Q?/span>keyed list�Q�，或者关联数�l?/span> �Q?/span>associative array�Q��?/span>

Ø 　值的有序表�?/span>

*　�q�通常实现��Z��个数�l��?/span>

JSON的数据结�?/span>

Ø JSON对象

*　对象是一个无序的“‘名称/�?#8217;�?#8221;集合。一个对象以“{”�Q�左括号�Q�开始，“}”�Q�右括号�Q�结束。每�?#8220;名称”后跟一�?#8220;:”�Q�冒��P��Q?#8220;‘名称/�?#8217; �?#8221;之间使用“,”�Q�逗号�Q�分隔�?/span>

Ø JSON数组

* 数组是��|��value�Q�的有序集合。一个数�l�以“[”�Q�左中括��P��开始，“]”�Q�右中括��P��l�束。��g��间��?#8220;,”�Q�逗号�Q�分隔�?/span>

Ø �?/span>

* ��|��value�Q�可以是双引��h��h��的字�W�串�Q?/span>string�Q�、数�?/span>(number)�?/span>true�?/span>false�?/span> null、对象（object�Q�或者数�l�（array�Q�。这些结构可以嵌套�?/span>

Ø 字符�Ԍ��string�Q?/span>

* 字符�Ԍ��string�Q�是由双引号包围的�Q意数�?/span>Unicode字符的集合，使用反斜�U��{义。一个字�W�（character�Q�即一个单独的字符�Ԍ��character string�Q��?/span>

* 字符�Ԍ��string�Q�与C或�?/span>Java的字�W�串非常�怼��?/span>

Ø 数��|��number�Q?/span>

* 数��|��number�Q�也�?/span>C或�?/span>Java的数值非常相伹{��除��L��曾��用的八进制与十六�q�制格式。除��M��些编码细节�?/span>

Ø �I�白可以加入��C�Q何符号之间�?/span> 以下描述了完整的语言�?/span>

Ø �?/span>http://www.json.org/能得�?/span>JSON�?/span>

DEMO JSON对象

Ø 我们可以�?/span>Employee对象的简单的例子展开�q�行�?/span>

Ø Employee对象可能包含姓、名、员工号和职位等数据�?/span>

Ø 使用JSON�Q�可以如下表�C?/span>Employee对象实例�Q?/span>

var employee = {

“firstName”:”Zhou”,

“lastName”:”DaQing”,

“employeeNumber”:517,

“title”:”Accountant”

}

Ø 然后可以使用标准点记法��用对象的属性，如下所�C�：

n var lastName = employee.lastName;

n var title = employee.title;

n employee.employee = 517;

JSON�?/span>XML

Ø JSON 是一个轻量��的数据互换格式�?/span>

Ø 如果�?/span> XML 来描�q�同��L��employee对象�Q�可能如下所�C�：

Zhou

DaQing

517

Accountant

Ø 昄��Q?/span>JSON�~�码�?/span>XML �~�码��短�?/span>

Ø 如果在网�l�上发送大量数据，可能会带来显著的性能差异�?/span>

Ø www.Json.org �|�站列出了至��与其他�~�程语言�?/span>14�U�绑�?/span> �?/span>

Ø �q�说明，不论在服务器端��用何�U�技术，都能通过JSON与浏览器通信�?/span>

JSON

Ø 因�ؓ�q�些�l�构得到了如此众多编�E�语�a�的支持，所�?/span>JSON 可以作�ؓ异构�pȝ��之间的一�U�数据互换格式�?/span>

Ø 另外�Q�由�?/span>JSON 是基于标�?/span>JavaScript 的子集，所以在所有当�?/span>Web ��览器上都应该是兼容的�?/span>

DEMO AJAX�?/span> JSON 发送请求数�?/span>

Ø DEMO

*　使用JSON ��?/span>JavaScript 对象转换��Z��格式�Q?/span>

*　Ajax ��这个串发送到服务器，

*　服务器根据这个串创徏一个对�?/span>.

Ø 撰写“jsonExample.html”�Q�如下：

"http://www.w3.org/TR/html4/loose.dtd">

JSON Example

Server Response:

DEMO 服务器端接收JSON数据

Ø 然后撰写“JSONExample.java”文�g�Q�内容如下：

package org.yifeng.webapp.servlet;

import org.json.JSONObject;

import org.json.JSONException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import java.io.IOException;

import java.io.BufferedReader;

import java.text.ParseException;

/**

* Copyright: 晟��Y�U�技

* WebSit: http://www.shengruan.com

* Author: 忆风

* QQ: 583305005

* MSN: YiFengs@msn.com

* Email: zhdqCN@gmail.com

* CreationTime: 2008-8-26 0:49:12

* Description:

public class JSONExample extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String json = readJSONStringFromRequestBody(request);

//�q�回输出�l�果

String responseText = null;

//使用JSON�l�字Ajax对象

JSONObject jsonObject = null;

try {

jsonObject = new JSONObject(json);

responseText = "You have a " + jsonObject.getInt("year") + " "

+ jsonObject.getString("make") + " " + jsonObject.getString("model")

+ " " + " that is " + jsonObject.getString("color") + " in color.";

} catch (JSONException e) {

e.printStackTrace();

}

response.setContentType("text/xml");

response.getWriter().print(responseText);

}

private String readJSONStringFromRequestBody(HttpServletRequest request) {

StringBuilder json = new StringBuilder();

String line = null;

try {

BufferedReader reader = request.getReader();

while ((line = reader.readLine()) != null) {

json.append(line);

}

} catch (IOException e) {

System.out.println("Error reading JSON stirng: " + e.toString());

}

return json.toString();

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

Ø 点击按钮�Q�显�C�如下：

OK,看看�Q�数据都昄��出来了吧�Q�呵呵！�Q�！

作者：周大庆（zhoudaqing�Q?
�|�址�Q?strong>http://m.tkk7.com/yifeng
>>>转蝲��h��明出处！<<<

忆风 2008-08-26 02:57 发表评论

AJAX基础与实�?�?

忆风 — Mon, 25 Aug 2008 18:47:00 GMT

发送请求参�?/span>

Ø 目前我们已经讲了

1�?nbsp;使用Ajax技术向服务器发送请�?/span>

2�?nbsp;也知道了可以采用多种�Ҏ��解析服务器的响应�?/span>

Ø 只缺��一个内容，��是未将��M��数据作�ؓ��h��的一部分发送给服务器�?/span>

GET�Ҏ��发送请求参�?/span>

Ø GET�Ҏ��Q�作为名/值对攑֜��h��URL 中传递�?/span>

*　资源URL 的问号后面就是名/值对�?/span>

*　�?/span>/值对�?/span> name=value 的�Ş式，

* 用与�?/span>(&)分隔�?/span>

Ø 例如�Q?/span>

http://localhost:8080/projectName?name=yifeng&password=hello

POST �Ҏ��发送请求参�?/span>

Ø POST �Ҏ��Q�将参数串放在请求体中发送�?/span>

*　参数�~�码为名/值对�Q��Ş式�ؓname=value�Q?/span>

*　用与�?/span>(&)分隔�?/span>

使用GET�?/span>POST的徏�?/span>

Ø 获取数据时应当��?/span>GET �Ҏ��?/span>

*　数据处理不改变数据模型的状态�?/span>

Ø 存储、更新数据，使用POST �Ҏ��?/span>

*　操作改变了数据模型的状态�?/span>

Ø 特点�?/span>

*　GET ��h��的参数编码到��h��URL 中，可以��URL 建立书签。（不过�Q�如果是异步��h��没有什么用。）

*　GET ��h��发送的数据量通常是固定的�Q��?/span>POST �Ҏ��可以发送�Q意量的数据�?/span>

DEMO AJAX以名/值对发送请求参�?/span>

Ø 使用GET��h��?/span>POST��h��Q�创建查询字�W�串技术是一��L��?/span>

Ø 唯一的区别是�Q?/span>GET发送请求时�Q�查询字�W�串�q�加到请�?/span>URL中，

Ø POST�Ҏ��Ӟ��?/span>XHR对象�?/span>send()�Ҏ��时发送查询串�?/span>

Ø DEMO

n getAndPostExample.html文�g

"http://www.w3.org/TR/html4/loose.dtd">

Dynamically Editing Page Content

Entery your first name, middle name, and birthday:

First name:
Middle name:
Birthday:

Server Response:

n GetAndPostExample.java文�g

package org.yifeng.webapp.servlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import java.io.IOException;

import java.io.PrintWriter;

/**

* Copyright: 晟��Y�U�技

* WebSit: http://www.shengruan.com

* Author: 忆风

* QQ: 583305005

* MSN: YiFengs@msn.com

* Email: zhdqCN@gmail.com

* CreationTime: 2008-8-25 22:44:44

* Description:

public class GetAndPostExample extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/xml");

String firstName = request.getParameter("firstName");

String middleName = request.getParameter("middleName");

String birthday = request.getParameter("birthday");

StringBuilder responseText = new StringBuilder();

responseText.append("Hello, ").append(firstName).append(" " + middleName)

.append(". Your birthday is " + birthday + ".")

.append("[Method: " + request.getMethod() + "]");

PrintWriter out = response.getWriter();

out.println(responseText);

out.flush();

out.close();

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

n Web.xml配置

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

version="2.5">

GetAndPostExample

org.yifeng.webapp.servlet.GetAndPostExample

GetAndPostExample

/GetAndPostExample

getAndPostExample.html

n 如果以点�?#8220;Send parameters using GET”按钮�Q�如下图�Q?br />

n 如果以点�?#8220;Send parameters using POST”按钮�Q�如下图�Q?br />

n 也许你会疑问�Q��ؓ什么要�?/span>URL后面�q�加旉��呢？

* 有时��览器会把多�?/span>XMLHttpRequest ��h��的结果缓存在同一�?/span>URL.

* 如果�Ҏ��个请求的响应不同�Q�这��׃��带来不好的结�?/span>.

* 把当前时间戳�q�加�?/span> URL的最后，��p��保URL 的唯一性，从而避免浏览器�~�存�l�果.

* IE有这�U�缓存问题，但是Firefox没有。你可以去试试，哈哈�?/span>

AJAX�?/span> XML 发送请求数�?/span>

Ø 只是使用一个包含名/值对的简单查询串�Q�这可能不够健壮�Q?/span>

Ø 不��以向服务器传递大量复杂的模型变化.

Ø 可以应用XML

Ø 如何向服务器发�?/span>XML �?/span>?

Ø 可以�?/span>XML 作�ؓ��h��体的一部分发送到服务器，

Ø �q�与POST ��h��中将查询串作��求体的一部分�q�行发送异曲同�?/span>.

Ø 服务器可以从��h��体读�?/span>XM L�Q��ƈ加以处理�?/span>

Ø DEMO

Ø postingXML.html

DEMO AJAX�?/span> XML 发送请求数�?/span>

Ø 撰写“postingXML.html”文�g�Q�如下：

"http://www.w3.org/TR/html4/loose.dtd">

Sending and XML Request

Select the types of pets in your home:

Server Response:

Ø 撰写“PostingXMLExample.java”文�g�Q�如下：

package org.yifeng.webapp.servlet;

import org.w3c.dom.Document;

import org.w3c.dom.NodeList;

import org.xml.sax.SAXException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.ServletException;

import javax.xml.parsers.DocumentBuilderFactory;

import javax.xml.parsers.ParserConfigurationException;

import java.io.IOException;

import java.io.BufferedReader;

import java.io.ByteArrayInputStream;

/**

* Copyright: 晟��Y�U�技

* WebSit: http://www.shengruan.com

* Author: 忆风

* QQ: 583305005

* MSN: YiFengs@msn.com

* Email: zhdqCN@gmail.com

* CreationTime: 2008-8-25 23:30:41

* Description:

public class PostingXMLExample extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String xml = readXMLFromRequestBody(request);//获得XML字符�?/span>

Document xmlDoc = null;

try {

xmlDoc = DocumentBuilderFactory.newInstance().newDocumentBuilder().parse(new ByteArrayInputStream(xml.getBytes()));

} catch (SAXException e) {

System.out.println("SAXException: " + e);

} catch (ParserConfigurationException e) {

System.out.println("ParserConfigurationException: " + e);

}

/**

* Java�?/span>JavaScript均有W3C DOM的实玎ͼ�比如getElementByTagName�?/span>getNodeValue�Ҏ��

NodeList selectedPetTypes = xmlDoc.getElementsByTagName("type");

String type = null;

String responseText = "Selected Pets: ";

for (int i = 0; i < selectedPetTypes.getLength(); i++) {

type = selectedPetTypes.item(i).getFirstChild().getNodeValue();

responseText = responseText + " " + type;

}

response.setContentType("text/xml");

response.getWriter().print(responseText);

}

private String readXMLFromRequestBody(HttpServletRequest request) {

StringBuilder xml = new StringBuilder();

String line = null;

try {

BufferedReader reader = request.getReader();

while ((line = reader.readLine()) != null) {

xml.append(line);

}

} catch (Exception e) {

System.out.println("Error reading XML: " + e.toString());

}

return xml.toString();

}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

doPost(request, response);

}

Ø �q�行�Q�显�C�如下：

作者：周大庆（zhoudaqing�Q?
�|�址�Q?strong>http://m.tkk7.com/yifeng
>>>转蝲��h��明出处！<<<

忆风 2008-08-26 02:47 发表评论

AJAX基础与实�?�?

忆风 — Mon, 25 Aug 2008 18:42:00 GMT

摘要: responseXML　��响应解析�ؓXML Ø ��览器把XML　看作是遵循W3C　DOM　的XML文档�?Ø W3C　DOM　指定了一�l�很丰富的API　�Q�可用于搜烦和处理XML　文挡�? W3C　DOM Ø W3C　提供的定义：文��对象模型(DOM)　是与�q�_��和语�a�无关的接口，允许�E�序和脚本动态地... 阅读全文

忆风 2008-08-26 02:42 发表评论

AJAX基础与实�?�?

忆风 — Mon, 25 Aug 2008 18:39:00 GMT

创徏XHR发送请�?/span>

Ø 如下�Q?/span>

　type="text/javascript">

var　xmlHttp;

//创徏一�?/span>XMLHttpRequest对象　

function　createXMLHttpRequest()　{

//　For　Internet　Explorer　5.5,　6,　7　

　　　　if　(window.ActiveXObject)　{

　　　　　　　　xmlHttp　=　new　ActiveXObject("Microsoft.XMLHTTP");

　　　　}　

//　For　Mozilla,　Firefox,　Safari,　Netscape

　　　　else　if　(window.XMLHttpRequest)　{

　　　　　　　　xmlHttp　=　new　XMLHttpRequest();

　　　　}

AJAX发送请�?/span>

Ø 如下�Q?/span>

function　startRequest()　{

　　　　createXMLHttpRequest();

//注册回调事�g处理器　

　　　　xmlHttp.onreadystatechange　=　handleStateChange;

//使用Open()�Ҏ��初始�?/span>XMLHttpRequest对象-指定HTTP�Ҏ��

//和要使用的服务器URL　

　　　　xmlHttp.open("GET",　"innerHTML.xml",　true);

//send()�Ҏ��发送该��h��　

　　　　xmlHttp.send(null);

}

应用GET　POST发送请�?/span>

Ø �Ҏ��如下�Q?/span>

�Ҏ��?/span>	描述
getElementById(id) (document)	获取有指定唯一ID属性值文档中的元�?/span>
getElementsByTagName(name)	�q�回当前元素中有指定标记名的子元素的数组
hasChildNodes()	�q�回一个布��\|��指示元素是否有子元素
getAttribute(name)	�q�回元素的属性��\|��属性由name指定

处理服务器晌�?/span>

XMLHttpRequest　提供了两个可以用来访问服务器响应的属�?/span>.

Ø responseText　�Q�将响应提供��Z��个串�?/span>

Ø responseXML�Q�将响应提供��Z��?/span>XML　对象�?/span>

使用innerHTML　属性创建动态内�?/span>

Ø responseText　�Q�　innerHtml�Q?/span>

服务器　"生��"或生�?/span>HTML　内容�Q?/span>

��览器��用　innerHTML�?/span>"消费"或处理�?/span>

DEMO　responseText　�Q�　innerHtml

Ø innerHTM.html

　html　PUBLIC　"-//W3C//DTD　XHTML　1.0　Strict//EN"

　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Using responseText with innerHTML

Ø innerHTML.txt

误��入内容！�Q�！

Ø 输出�l�果�Q?/span>

作者：周大庆（zhoudaqing�Q?
�|�址�Q?strong>http://m.tkk7.com/yifeng
>>>转蝲��h��明出处！<<<

忆风 2008-08-26 02:39 发表评论

AJAX基础与实�?�?

忆风 — Mon, 25 Aug 2008 18:31:00 GMT

摘要: XMLHttpRequest(XHR) Ø ��览器可以直接从JavaScript中初始化��h��q�获取结果�?Ø 本质上是��d��了额外的用于发送和接收XML代码功能的普通HTTP��h��?Ø 像一个　ServletRequest XMLHttpRequest对象的属性和事�g Ø XML... 阅读全文

忆风 2008-08-26 02:31 发表评论

AJAX基础与实�?一)

忆风 — Mon, 25 Aug 2008 18:29:00 GMT

AJAX历史

Ø 2005�q?/span>2�?/span>,　Adaptive　Path　�?/span>Jesse　James　Garrett　最早创造了�q�个词�?/span>

Ø Ajax:A　New　Approach　to　Web　Applications　(Ajax:　Web　应用的一�U�新�Ҏ��)中，Garrett讨论�?/span> 如何消除胖客�?/span>(或桌�?/span>)应用与瘦客户(�?/span>Web)　应用之间的界�?/span>.

Ø 以前认�ؓ是　"Asynchronous　JavaScript　+　XML"　的羃�?/span>.

Ø 目前认�ؓ�?/span>:允许��览器与服务器通信而无需��h��当前��面的技�?/span>.

Ø Famous　examples　:　Google　Maps　,　Google　Suggest　,　GMail　,Outlook　Web　Access

Ø New　bottle　of　old　wine

Ø The　next　generation　browser　will　have　built-in　UI　Component(XUL　etc),IE7�?/span>XMLHttpRequest实现��Z��个窗口对象属�?/span>.

什么是AJAX

Ø AJAX技术是Asynchronous　JavaScript　XML(异步JavaScript　�?/span>XML)的简�U�ͼ�Ajax提供与服务器异步通信的能力，一个无需��h��整个��面而在�|�页中更��C��部分数据的应用。　

AJAX是一门新技术？

Ø AJAX不是一个新技术。它包含�Q?/span>

1. ��Z��标准的展�C�Z��用　　XHTML�?/span>CSS;

2. 动态显�C�和交互使用　　文��对象模型DOM;

3. 数据交换和操�U��用　　XML�?/span>XSLT�?/span>JSON;

4. 异步数据��索方法��?/span> XMLHttpRequest(XHR);

5. �_�胶剂��?/span> JavaScript�?/span>

Web　1.0　&　Web　2.0

Ø Web　1.0　–　同步(Synchronous)

Ø Web　2.0　非同�?/span>(Asynchronous)

AJAX原理�?/span>

作者：周大庆（zhoudaqing�Q?
�|�址�Q?strong>http://m.tkk7.com/yifeng
>>>转蝲��h��明出处！<<<

忆风 2008-08-26 02:29 发表评论

忆风 — Mon, 25 Aug 2008 17:43:00 GMT

jQuery中文入门指南�Q�翻译加实例�Q�jQuery的�v�Ҏ��E?/h1>

中文版译者：Keel

此文以实例�ؓ基础一步步说明了jQuery的工作方式。现以中文翻译（��d��我的补充说明�Q�如下。如有相��x��见或��请麻烦到我的 BLOG 写个回复或�?EMAIL 告知�?/p>

英文原版�Q?a >http://jquery.bassistance.de/jquery-getting-started.html �Q�感谢原文作�?Jörn Zaefferer

本文发布已征求原作者同意�?/strong>

另外我认为在学习�q�程�?有两个API文档你要打开随时查看:

http://jquery.com/api/
http://visualjquery.com/

以下部分为原文翻�?

jQuery入门指南教程

�q�个指南是一个对jQuery库的说明�Q�要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事�g基础�Q�AJAX、FX的用法，以及如何制作jQuery的插件�?�q�个指南包括了很多代码，你可以copy它们�Q��ƈ试着修改它们�Q�看看��生的效果�?

内容提要

安装
Hello jQuery
Find me:使用选择器和事�g
Rate me:使用AJAX
Animate me(让我生动��h��):使用FX
Sort me(��我有序�?:使用tablesorter插�g(表格排序)
Plug me:制作您自��q��插�g
Next steps(下一�?

安装

一开�?我们需要一个jQuery的库,最新的下蝲可以�?a >�q�里扑ֈ�。这个指南提供一个基本包含实例的包供下蝲.

下蝲�Q?a class="download" >jQuery Starterkit

(译者Keel�?一定要下蝲�q�个包，光看文章不实践肯定是不行的�?

下蝲后解压羃�Q�然后用你最喜欢的文本编辑器打开starterkit.html和custom.js�q�两个文件�?span class="log">(译者Keel�?�q�两个就是例子文�?所有的例子都用�q�两个例子作�?custom.js写jQuery代码,starterkit.html观察效果.��用editPlus打开)

现在,我们��已�l�做好了一切准备来�q�行�q�个著名�?Hello world"例子.

本章的相关链�?

Starterkit
jQuery Downloads

Hello jQuery

在做所有事情之�?我们要让jQuery��d��和处理文��的DOM,必须��可能快地在DOM载入后开始执行事�?所�?我们用一个ready事�g作�ؓ处理HTML文��的开�?看看我们打开的custom.js�q�个文�g,里面已经准备好了:

$(document).ready(function() {
// do stuff when DOM is ready
});

放一个简单的alert事�g在需要等DOM完成载入,所以我们把��d��E�稍变复杂一�?在点��M�Q何一个链接时昄��一个alert.

$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

�q�样在你点击��面的一个链接时都会触发�q�个"Hello world"的提�C��?/p>
(译者Keel�?��L��此代码修改custom.js�q�保�?然后用浏览器打开starterkit.html观察效果�?

让我们看一下这些修�Ҏ��什么含义�?("a") 是一个jQuery选择�?selector),在这里，它选择所有的a标签�Q�译者Keel注：�?lt;a>�Q?/span>�Q? ��h�� jQuery “�c?#8221;(jQuery "class")的一个别�U�ͼ�因此$()构造了一个新的jQuery 对象(jQuery object)。函�?click() 是这个jQuery对象的一个方法，它绑定了一个单��M��件到所有选中的标�{?�q�里是所有的a标签),�q�在事�g触发时执行了它所提供的alert�Ҏ��.

�q�里有一个拟行相似功能的代码:

Link

不同之处很明�?用jQuery不需要在每个a标签上写onclick事�g,所以我们拥有了一个整�z�的�l�构文��(HTML)和一个行为文�?JS),辑ֈ�了将�l�构与行为分开的目�?��像我们使用CSS�q�求的一�?

下面我们会更多地了解到选择器与事�g.

本章的相关链�?

jQuery Base
jQuery Expressions
jQuery Basic Events

Find me:使用选择器和事�g

jQuery提供两种方式来选择html�?elements�Q�第一�U�是用CSS和Xpath选择器联合�v来�Ş成一个字�W�串来传送到jQuery的构造器�Q�如�Q?("div > ul a")�Q�；�W�二�U�是用jQuery对象的几个methods(�Ҏ��)。这两种方式�q�可以联合�v来�؜合��用�?/p>
��Z��试一下这些选择器，我们来试着在我们starterkit.html中选择�q�修改第一个ordered list.

一开始，我们需要选择�q�个list本��n�Q�这个list有一个ID�?#8220;orderedlist”�Q�通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们�q�样做：

$(document).ready(function() {
$("#orderedlist").addClass("red");
});

�q�里��starterkit中的一个CSS样式red附加��C��orderedlist�?span class="log">(译者Keel注：参考测试包中的css目录下的core.css�Q�其中定义了red样式)。因此，在你��h��了starterkit.html后，你将会看到第一个有序列�?ordered list )背景色变成了�U�色�Q�而第二个有序列表没有变化.

现在�Q�让我们��d��一些新的样式到list的子节点.

$(document).ready(function() {
$("#orderedlist > li").addClass("blue");
});

�q�样�Q�所有orderedlist中的li都附加了样式"blue"�?/p>
现在我们再做个复杂一点的�Q�当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效�?/p>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
}, function() {
$(this).removeClass("green");
});
});

�q�有大量的类似的CSS�?a class="doc" title="Documentation for XPath selectors" >XPath例子�Q�更多的例子和列表可以在�q�里扑ֈ��?span class="log">�Q�译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多�Q�所以这�D�话的几个链接迟早是要必看的�Q�不会又要翻译吧...^_^!�Q?/span>

每一个onXXX事�g都有效，如onclick,onchange,onsubmit�{�，都有jQuery�{��h表示�Ҏ��Q�译者Keel注：jQuery不喜�ƢonXXX�Q�所以都�Ҏ��了XXX�Q�去掉了on�Q?/span>�?a class="doc" title="Documentation for advanced events" >其他的一些事�?/a>�Q�如ready和hover,也提供了相应的方法�?/p>
你可以在Visual jQuery扑ֈ�全部的事件列表，在Events栏目�?

用这些选择器和事�g你已�l�可以做很多的事情了�Q�但�q�里有一个更强的好东东！

$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});

find() 让你在已�l�选择的element中作条�g查找,因此 $("#orderedlist).find("li") ��像 $("#orderedlist li"). each()一栯��P代了所有的li�Q��ƈ可以在此基础上作更多的处理�?大部分的�Ҏ��,如addClass(), 都可以用它们自己�?each() 。在�q�个例子�? html()用来获取每个li的html文本, �q�加一些文字，�q�将之设�|��ؓli的html文本�?span class="log">�Q�译者Keel注：从这个例子可以看�?html()�Ҏ��是获取对象的html代码�Q��?html('xxx')是设�|?xxx'为对象的html代码�Q?/span>

另一个经常碰到的��d��是在没有被jQuery覆盖的DOM元素上call一些方法，惛_��一个在你用AJAX方式成功提交后的reset�Q?/p>
$(document).ready(function() {
// use this to reset a single form
$("#reset").click(function() {
$("#form")[0].reset();
});
});

�Q�译者Keel注：�q�里作者将form的id也写成了form�Q�源文�g�?lt;form id="form">�Q�这是非�怸�好的写法�Q�你可以��这个ID�Ҏ��form1或者testForm�Q�然后用$("#form1")或�? ("#testForm")来表�C�它�Q�再�q�行��试。）

�q�个代码选择了所有ID�?form"的元素，�q�在其第一个上call了一个reset()。如果你有一个以上的form�Q�你可以�q�样做：

$(document).ready(function() {
// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
});

�Q�译者Keel注：��h��意一定要亲自��这些代码写在custom.js中�ƈ在starterkit.html上测试效果才能有所体会�Q�必要时要观察starterkit.html的html代码�Q?/p>
�q�样你在点击Reset链接后，��选择了文��中所有的form元素�Q��ƈ对它们都执行了一�ơreset()�?/p>
�q?有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() �Ҏ��来解册��个问题�?filter()以过滤表辑ּ�来减��不�W�合的被选择��? not()则用来取消所有符合过滤表辑ּ�的被选择��? 考虑一个无序的list�Q�你惌��选择所有的没有ul子元素的li元素�?/p>
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});

�q�个代码选择了所有的li元素�Q�然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外�?/p>
�Q�译者Keel注：��h��意体会方便之极的css()�Ҏ��Q��ƈ再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这��P��$ ("li").not("[ul]").css("border", "1px solid black").css("color","red");�Q?/p>
上面代码中的[expression] 语法是从XPath而来�Q�可以在子元素和属�?elements and attributes)上用作过滤器�Q�比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() {
$("a[@name]").background("#eee");
});

�q�个代码�l�所有带有name属性的链接加了一个背景色�?span class="log">�Q�译者Keel注：�q�个颜色太不明显了，��写成$("a[@name]").background("red");�Q?/span>

更常见的情况是以name来选择链接�Q�你可能需要选择一个有特点href属性的链接�Q�这在不同的��览器下对href的理解可能会不一��_��所以我们的部分匚w��("*=")的方式来代替完全匚w��("=")�Q?/p>
$(document).ready(function() {
$("a[@href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});
});

到现在�ؓ止，选择器都用来选择子元素或者是�q��o元素。另外还有一�U�情冉|��选择上一个或者下一个元素，比如一个FAQ的页面，�{�案首先会隐藏，当问题点��L��Q�答案显�C�出来，jQuery代码如下�Q?/p>
$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});

�q?里我们用了一些链式表达法来减��代码量�Q�而且看上��L��直观更容易理解。像'#faq' 只选择了一�ơ，利用end()�Ҏ��Q�第一�ơfind()�Ҏ��会结�?undone)�Q�所以我们可以接着在后面��l�find('dt')�Q�而不需要再�? ('#faq').find('dt')�?/p>
在点��M��件中的，我们�?$(this).next() 来找到dt下面紧接的一个dd元素�Q�这让我们可以快速地选择在被点击问题下面的答案�?/p>
�Q�译者Keel注：�q�个例子真是太酷了，FAQ中的�{�案可以收羃�Q�从利用next()的思�\到实现这些效果都有很多地斚w��要我们消化，注意 if (answer.is(':visible'))用法�Q�注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档�Q?/p>
除了选择同��别的元素外，你也可以选择父��的元素。可能你惛_��用户鼠标�U�d��文章某段的某个链接时�Q�它的父�U�元�?-也就是文章的�q�一�D늪�出显�C�，试试�q�个�Q?/p>
$(document).ready(function() {
$("a").hover(function() {
$(this).parents("p").addClass("highlight");
}, function() {
$(this).parents("p").removeClass("highlight");
});
});

��试效果可以看到�Q�移到文章某�D늚�链接�Ӟ��它所在的�D�全用上highlight样式�Q�移��C��后又恢复原样�?/p> �Q�译者Keel注：highlight是core.css中定义的样式�Q�你也可以改变它�Q�注意这里有�W�二个function()�q�是hover�Ҏ��的特点，请在API文��中查阅hover�Q�上面也有例子说明）
在我们��l�之前我们先来看看这一步： jQuery会让代码变得更短从而更�Ҏ��理解和维护，下面�?(document).ready(callback)的羃写法�Q?/p>
$(function() {
// code to execute when the DOM is ready
});

应用到我们的Hello world例子中，可以�q�样:

$(function() {
$("a").click(function() {
alert("Hello world!");
});
});

现在�Q�我们手上有了这些基��的知识，我们可以更进一步的探烦其它斚w��的东西，��׃��AJAX开始！

本章的相关链�?

jQuery API documentation
Visual jQuery - A categorized browsable API documentation
jQuery Expressions: CSS
jQuery Expressions: XPath
jQuery Expressions: Custom
jQuery Special Events
jQuery DOM Traversing

Rate me:使用AJAX

在这一部分我们写了一个小��的AJAX应用�Q�它能够rate一些东�?span class="log">�Q�译Keel注：��是�Ҏ��些东西投��）�Q�就像在youtube.com上面看到的一栗��?/p>
首先我们需要一些服务器端代码，�q�个例子中用��C��一个PHP文�g�Q�读取rating参数然后�q�回rating��L��和��^均数。看一�?a >rate.php代码.

虽然�q�些例子也可以不使用AJAX来实玎ͼ�但显�C�我们不会那么做�Q�我们用jQuery生成一个DIV容器�Q�ID�?rating".

$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "" + i + " ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
});

�q�段代码生成�?个链接，�q�将它们�q�加到id�?rating"容器中，当其中一个链接被点击�Ӟ��该链接标明的分数��׃��以rating参数形式发送到rate.php�Q�然后，�l�果��以XML形式会从服务器端传回来，��d��到容器中�Q�替代这些链接�?/p>
如果你没有一个安装过PHP的webserver�Q�你可以看看�q�个在线的例�?/a>.

不��用javascript实现的例子可以访�?softonic.de 点击 "Kurz bewerten!"

更多的AJAX�Ҏ��可以�?a class="doc" title="Documentation for AJAX methods" >�q�里扑ֈ��Q�或者看�?a >API文档下面的AJAX filed under AJAX.

�Q�译者Keel注：�q�个在线实例从国内访问还是比较慢的，点击后要�{�一会儿才能看到�l�果�Q�可以考虑对它�q�行修改�Q�比如加上loading�Q�投��后加上再投��的�q�回链接�{�。此外，�q�个例子中还是有很多需要进一步消化的地方�Q�看不懂的地方请参考API文��。）

一个在使用AJAX载入内容时经常发生的问题是：当蝲入一个事件句柄到一个HTML文档�Ӟ��q�需要在载入内容上应用这些事�Ӟ��你不得不在内容加载完成后应用�q�些事�g句柄�Q��ؓ了防止代码重复执行，你可能用到如下一个function:

// lets use the shortcut
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});

现在�Q�addClickHandlers只在DOM载入完成后执行一�ơ，�q�是在用��h��ơ点��d��有clickMeToLoadContent �q�个样式的链接�ƈ且内容加载完成后.

��h��意addClickHandlers函数是作��Z��个局部变量定义的�Q�而不是全局变量(如：function addClickHandlers() {...})�Q�这样做是�ؓ了防止与其他的全局变量或者函数相冲突.

另一个常见的问题是关于回�?callback)的参数。你可以通过一个额外的参数指定回调的方法，��单的办法是将�q�个回调�Ҏ��包含在一个其它的function�?

// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );

用到��单的AJAX后，我们可以认�ؓ已经非常�?#8220;web2.0”了，但是到现在�ؓ止，我们�q�缺��一些酷炫的效果。下一节将会谈到这些效�?

本章的相关链�?

jQuery AJAX Module
jQuery API: Contains description and examples for append and all other jQuery methods
ThickBox: A jQuery plugin that uses jQuery to enhance the famous lightbox

Animate me(让我生动��h��):使用FX

一些动态的效果可以使用 show() �?hide()来表�?

$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});

你可以与 animate()联合��h��创徏一些效�?如一个带渐显的滑动效�?

$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});

很多不错的效果可以访�?a >interface plugin collection. �q�个站点提供了很多demos和文�?/p>
�q�些效果插�g是位于jQuery插�g列表的前面的�Q�当然也有很多其他的插�g�Q�比如我们下一章讲到的表格排序插�g�?/p>
本章的相关链�?

jQuery FX Module
Interface plugin

Sort me(��我有序�?:使用tablesorter插�g(表格排序)

�q�个表格排序插�g能让我们在客��L��按某一列进行排序，引入jQuery和这个插件的js文�g�Q�然后告诉插件你惌��哪个表格拥有排序功能�?/p>
要测试这个例子，先在starterkit.html中加上像下面�q�一行的代码�Q?/p>

然后可以�q�样调用不着:

$(document).ready(function() {
$("#large").tableSorter();
});

现在点击表格的第一行head区域�Q�你可以看到排序的效果，再次点击会按倒过来的��序�q�行排列�?/p>
�q�个表格�q�可以加一些突出显�C�的效果�Q�我们可以做�q�样一个隔行背景色�Q�斑马线�Q�效�?

$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});

关于�q�个插�g的更多例子和文��可以�?tablesorter首页扑ֈ�.

几乎所有的特�g都是�q�样用的:先include插�g的js文�g,然后在某些元素上使用插�g定义的方�?当然也有一些参数选项是可以配�|�的

�l�常更新的插件列表可以从jQuery官方�?on the jQuery site扑ֈ�.

当你更经常地使用jQuery�?你会发现��你自己的代码打包成插�g是很有用处的,它能方便地让你的公司或者其他�h�q�行重用.下一章我们将谈到如何构徏一个自��q��插�g.

本章的相关链�?

Plugins for jQuery
Tablesorter Plugin

Plug me:制作自己的插�?/h2>
写一个自��q��jQuery插�g是非常容易的,如果你按照下面的原则来做,可以让其他�h也容易地�l�合使用你的插�g.

��Z��的插件取一个名�?在这个例子里面我们叫�?foobar".
创徏一个像�q�样的文�?jquery.[yourpluginname].js,比如我们创徏一个jquery.foobar.js
创徏一个或更多的插件方�?使用�l�承jQuery对象的方�?�?
jQuery.fn.foobar = function() {
// do something
};

可选的:创徏一个用于帮助说明的函数,�?
jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};

你现在可以在你的插�g中��用这些帮助函��C��:

jQuery.fn.foobar = function() {
// do something
jQuery.foobar.checkDependencies(value);
// do something else
};

可选的l:创徏一个默认的初始参数配置,�q�些配置也可以由用户自行讑֮�,�?
jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};

现在可以无需做�Q何配�|�地使用插�g�?默认的参数在此时生效:

$("...").foobar();

或者加入这些参数定�?

$("...").foobar({
value: 123,
bar: 9
});

如果你release你的插�g, 你还应该提供一些例子和文档,大部分的插�g都具备这些良好的参考文�?

现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自��q��插�g.

很多��着控制所有的radio或者checkbox是否被选中,比如:

$("input[@type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});

无论何时候，当你的代码出现each�Ӟ��你应该重写上面的代码来构造一个插�?很直接地:

$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};

�q�个插�g现在可以�q�样�?

$("input[@type='checkbox']").check();

现在你应该还可以写出uncheck()和toggleCheck()�?但是先停一�?让我们的插�g接收一些参�?

$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};

�q�里我们讄��了默认的参数,所以将"on"参数省略也是可以�?当然也可以加�?on","off", �?"toggle",�?

$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

如果有多于一个的参数讄��会稍�E�有点复�?在��用时如果只想讄��W�二个参�?则要在第一个参��C��|�写入null.

从上一章的tablesorter插�g用法我们可以看到,既可以省略所有参数来使用或者通过一�?key/value �Ҏ��重新讄��每个参数.

作�ؓ一个练�?你可以试着��?�W�四�?/a> 的功能重写�ؓ一个插�?�q�个插�g的骨架应该是像这��L��:

$.fn.rateMe = function(options) {
var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context

var settings = {
url: "rate.php"
// put more defaults here
// remember to put a comma (",") after each pair, but not after the last one!
};

if(options) { // check if options are present before extending the settings
$.extend(settings, options);
}

// ...
// rest of the code
// ...

return this; // if possible, return "this" to not break the chain
});

Next steps(下一�?

如果你想做更好的javascript开�?��你��用一个叫 FireBug的firefox插�g. 它提供了断点调试(比alert强多�?、观察DOM变化�{�很多漂亮的功能

如果你还有未解决的问题，或者新的想法与��Q�你可以使用jQuery的邮件列�?jQuery mailing list.

关于�q�个指南的�Q何事情，你可以写mail�l�作者或者发表评论在他的日志�Q?a >blog.

关于�q�个指南的翻译�Q何事情，你可以写mail�l�我或者发表评论在我的日志�Q?a >blog.

�q�有什�?..

大大感谢John Resig创造了�q�么好的library! 感谢jQuery community 为John提供了如此多的咖啡和其他的一�?

© 2006, Jörn Zaefferer - last update: 2006-09-12

中文版翻�?Keel - 最后更�? 2006-12-13

忆风 2008-08-26 01:43 发表评论

中文字幕亚洲免费无线观看日本,亚洲GV天堂无码男同在线观看,中文字幕第13亚洲另类

AJAX基础与实�?�?

Server Response:

AJAX基础与实�?�?

Entery your first name, middle name, and birthday:

Server Response:

Select the types of pets in your home:

Server Response:

AJAX基础与实�?�?

AJAX基础与实�?�?

AJAX基础与实�?�?

AJAX基础与实�?一)

中文版译者：Keel

以下部分为原文翻�?

jQuery入门指南教程

内容提要

安装

本章的相关链�?

Hello jQuery

本章的相关链�?

Find me:使用选择器和事�g

本章的相关链�?

Rate me:使用AJAX

本章的相关链�?

Animate me(让我生动��h��):使用FX

本章的相关链�?

Sort me(���我有序�?:使用tablesorter插�g(表格排序)

本章的相关链�?

Next steps(下一�?

�q�有什�?..

© 2006, Jörn Zaefferer - last update: 2006-09-12

中文版翻�?Keel - 最后更�? 2006-12-13

Sort me(��我有序�?:使用tablesorter插�g(表格排序)