jQuery与AJAX基础教程-优快云博客

http://blog.youkuaiyun.com/yourtommy/article/details/7565758

Basic

jQuery是一个JavaScript函数库，极大地简化了JavaScript编程。

New kind of JavaScript Library

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合

Add Query 引用jQuery库：

jQuery语法

$(selector).action()。例如：

$(this).hide() - 隐藏当前元素。

$("p").hide() - 隐藏所有的p元素。

$("p.test").hide() - 隐藏所有class为test的p元素。

$("#test").hide() - 隐藏id为test的元素。

document.ready()

函数都应放在 document.ready()函数里，防止页面还未载入时调用函数。比如：

CSS operation

$(selector).css(name,value)

---Basic End---

AJAX
jQuery ajax - ajax()

ajax() 方法通过 HTTP 请求加载远程数据。底层实现.

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

jQuery.ajax([settings])

参数	描述
settings	可选。用于配置 Ajax 请求的键值对集合。可以通过 $.ajaxSetup() 设置任何选项的默认值。

参数

描述

settings

可选。用于配置 Ajax 请求的键值对集合。

可以通过 $.ajaxSetup() 设置任何选项的默认值。

>参数

options, async, beforeSend(XHR), cache, complete(XHR, TS), contentType, context, dataObject, dataFilter, dataType, error, global, ifModified, jsonp, jsonpCallback, password, processData, scriptCharset, success, traditional, timeout, type, url, username, xhr

>callback

beforeSend, error, dataFilter, success, complete

>datatype

$.ajax() 函数依赖服务器提供的信息来处理返回的数据, XML, HTML, json, jsonp, script, text...

XMLHttpRequest, responseText or responseHTML will not be transformed, directly pass back to success

>send to server

Get, Post: type, data: processData, contentType, MIME: application/x-www-form-urlencoded

jQuery ajax - get()

$("button").click(function(){  $.get("demo_ajax_load.txt", function(result){    $("div").html(result);  });});

这是一个简单的 GET 请求功能以取代复杂 $.ajax, 使用 $.ajax进行错误处理

$(selector).get(url,data,success(response,status,xhr),dataType)

url, data, success(response, status, xhr), dataType: xml, html, text, script, json, jsonp

detail

>Equal to

$.ajax({  url: url,  data: data,  success: success,  dataType: dataType});

>Ask php

$.get("test.cgi", { name: "John", time: "2pm" },  function(data){    alert("Data Loaded: " + data);  });

Sync and ASync

ture is ASync by default, need use callback to get data

>Example

var getCatalogsImp = function (short, callback) {

var catalog = null;

if (callback == null){

var result = $.ajax({ url: "Catalogs.xml", async:false});

var obj = $.xml2json(result.responseXML);

catalog = obj.catalog;

}

else{

$.get("Catalogs.xml", function(result){

var obj = $.xml2json(result);

catalog = obj.catalog;

callback(catalog);

});

}

return catalog;

};

---AJAX End---

Detail
Callback

$("p").hide(1000,function(){

alert("The paragraph is now hidden");
});

HTML

$("p").html("aa");等同于设置元素的innerHtml，即它的内容。

$(selector).append(content)和$(selector).prepend(content)分别在后面和前面添加HTML的内容。

$(selector).before(content)和$(selector).after(content)分别在所有匹配的元素前面和后面加上HTML内容。

AJAX

load函数：

---Detail End---

JQUERY

jQuery语法

HTML