难点总结：Jquery动态加载数据库中的数据（解答人：郭哲 方式：讲述jquery原理及一些函数的使用方法,学会看帮助文档）

1.jQuery(html)

根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。

你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")

---

Create DOM elements on-the-fly from the provided String of raw HTML.

You can pass in plain HTML Strings written by hand, create them using some template engine or plugin, or load them via AJAX. There are limitations when creating input elements, see the second example. Also when passing strings that may include slashes (such as an image path), escape the slashes. When creating single elements use the closing tag or XHTML format. For example, to create a span use $("<span/>") or $("<span></span>") instead of without the closing slash/tag.

返回值

jQuery

参数

html (String) : 用于动态创建DOM元素的HTML标记字符串

示例

动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。

jQuery 代码:

$("<div><p>Hello</p></div>").appendTo("body");

---

创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。

jQuery 代码:

// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");

2.jQuery(elements)

将一个或多个DOM元素转化为jQuery对象。

这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。

---

Wrap jQuery functionality around a single or multiple DOM Element(s).

This function also accepts XML Documents and Window objects as valid arguments (even though they are not DOM Elements).

返回值

jQuery

参数

elements (Element, Array<Element>) : 用于封装成jQuery对象的DOM元素

示例

设置页面背景色。

jQuery 代码:

$(document.body).css( "background", "black" );

2.jQuery选择器

2.1#id

根据给定的ID匹配一个元素。

---

Matches a single element with the given id attribute.

---

示例

查找 ID 为"myDiv"的元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

 

隐藏一个表单中所有元素。

jQuery 代码:

$(myForm.elements).hide()

2.2element

根据给定的元素名匹配所有元素

 

示例

查找一个 DIV 元素。

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

2.3 .class

根据给定的类匹配元素。

示例

查找所有类是 "myClass" 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

2.4 *

匹配所有元素

示例

找到每一个元素

HTML 代码:

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:

$("*")

2.5 selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

---

Matches the combined results of all the specified selectors.

You can specify any number of selectors to combine into a single result.

返回值

Array<Element>

参数

selector1 (Selector) : 一个有效的选择器

selector2 (Selector) : 另一个有效的选择器

selectorN (Selector) : (可选) 任意多个有效选择器

示例

找到匹配任意一个类的元素。

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

3.属性

3.1html()

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

---

Get the html contents of the first matched element. This property is not available on XML documents (although it will work for XHTML documents).

返回值

String

示例

HTML 代码:

<div><p>Hello</p></div>

jQuery 代码:

$("div").html();

结果:

Hello

4.值

4.1val()

获得第一个匹配元素的当前值。

返回值

String,Array

示例

获得单个select的值和多选select的值。

HTML 代码:

<p></p><br/>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>

jQuery 代码:

$("p").append(
  "<b>Single:</b> "   + $("#single").val() +
  " <b>Multiple:</b> " + $("#multiple").val().join(", ")
);

结果:

[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

---

获取文本框中的值

HTML 代码:

<input type="text" value="some text"/>

jQuery 代码:

$("input").val();

4.2

val(val)

设置每一个匹配元素的值。

在 jQuery 1.2, 这也可以为select元件赋值

---

Set the value attribute of every matched element.

In jQuery 1.2, this is also able to set the value of select elements, but selecting the appropriate options.

返回值

jQuery

参数

val (String) : 要设置的值。

示例

设定文本框的值

HTML 代码:

<input type="text"/>

jQuery 代码:

$("input").val("hello world!");

5.Ajax事件

jQuery.ajax(options)

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

注意： 如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。

$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。

jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。

---

Load a remote page using an HTTP request.

This is jQuery's low-level AJAX implementation. See $.get, $.post etc. for higher-level abstractions that are often easier to understand and use, but don't offer as much functionality (such as error callbacks).

$.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually.

Note: If you specify the dataType option described below, make sure the server sends the correct MIME type in the response (eg. xml as "text/xml"). Sending the wrong MIME type can lead to unexpected problems in your script. See Specifying the Data Type for AJAX Requests for more information.

$.ajax() takes one argument, an object of key/value pairs, that are used to initialize and handle the request. See below for a full list of the key/values that can be used.

As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSONP callback, which can be done like so: "myurl?callback=?". jQuery automatically replaces the ? with the correct method name to call, calling your specified callback. Or, if you set the dataType to "jsonp" a callback will be automatically added to your Ajax request.

返回值

XMLHttpRequest

参数

options (可选) : AJAX 请求设置。所有选项都是可选的。

选项

async (Boolean) : (默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

beforeSend (Function) : 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。 Ajax Event.

cache (Boolean) : (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。

complete (Function) : 请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。 Ajax 事件。

contentType (String) : (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

data (Object,String) : 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataType (String) : 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

 

error (Function) : (默认: 自动判断 (xml 或 html)) 请求失败时调用时间。参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。Ajax 事件。

global (Boolean) : (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified (Boolean) : (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

processData (Boolean) : (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

success (Function) : 请求成功后回调函数。参数：服务器返回数据，数据格式。 Ajax 事件。

timeout (Number) : 设置请求超时时间（毫秒）。此设置将覆盖全局设置。

type (String) : (默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url (String) : (默认: 当前页地址) 发送请求的地址。

示例

加载并执行一个 JS 文件。

jQuery 代码:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

---

保存数据到服务器，成功时显示信息。

jQuery 代码:

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

---

装入一个 HTML 网页最新版本。

jQuery 代码:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

---

同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。

jQuery 代码:

 var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

---

发送 XML 数据至服务器。设置 processData 选项为 false，防止自动转换数据格式。

jQuery 代码:

 var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
 });

---

Matches all elements with the given class.