Skip to content

jQuery

jQuery是最最能够体现JavaScript特性的library,它就像spring之于Java。

Wikipedia jQuery

NOTE: 这篇文章对jQuery的总结是非常好的,其中所总结的jQuery的设计思想是非常值得学习的。

jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.

NOTE: jQuery在这方面是非常成功的:

1) 它的Ajax programming model可以作为asynchronous的典范,很多其他高级programming language的API都借鉴了Ajax的programming model。

The set of jQuery core features—DOM element selections, traversal and manipulation—enabled by its selector engine (named "Sizzle" from v1.3), created a new "programming style", fusing(融合) algorithms and DOM data structures.

NOTE: 在前面我们已经介绍了DOM,通过上述内容,我们需要总结的是: algorithm + DS,各种高级programming language的standard library都提供了algorithm + DS。

Usage

Chaining

Each jQuery command returns a jQuery object, so commands can be chained:

$("div.test").add("p.quote").addClass("blue").slideDown("slow");

This line finds the union of all div tags with class attribute test and all p tags with class attribute quote, adds the class attribute blue to each matched element, and then increases their height with an animation. The $ and add functions affect the matched set, while the addClass and slideDown affect the referenced nodes.

NOTE: jQuery的这种风格类似于fluent API,参见Theory\Programming-paradigm\Object-oriented-programming\Design-pattern\Fluent-API章节

AJAX

It is possible to perform browser-independent Ajax queries using $.ajax and associated methods to load and manipulate remote data.

$.ajax({
  type: "POST",
  url: "example.php",
  data: "name=John&location=Boston"
}).done( function(msg) {
  alert( "Data Saved: " + msg );
}).fail( function( xmlHttpRequest, statusText, errorThrown ) {
  alert(
    "Your form submission failed.\n\n"
      + "XML Http Request: " + JSON.stringify( xmlHttpRequest )
      + ",\nStatus Text: " + statusText
      + ",\nError Thrown: " + errorThrown );
});

This example posts the data name=John and location=Boston to example.php on the server. When this request finishes the success function is called to alert the user. If the request fails it will alert the user to the failure, the status of the request, and the specific error.

Asynchronous

Note that the above example uses the deferred nature of $.ajax() to handle its asynchronous nature: .done() and .fail() create callbacks that run only when the asynchronous process is complete.