Notes on <jQuery in Action> - 1

选择这本的原因很简单，我从来没看过这个系列的书（xxx in Action）。想了解下这个系列的书写的风格是怎样。

Chapter 1:Introducing jQuery

按說這章應該將歷史多些，不過JQuery沒啥發展悠久的歷史，所以這章作者多數是給出一些jQuery的小示例，來闡述jQuery是如何方便開發者的。我不打算複述太多東西，我只摘抄一些我在書上highlight的地方，因為這些是我之前不清楚的知識：

1. 在單純的JS代碼里，我們通常會用 window.onload = function(){} 來告訴瀏覽器當頁面加載之後應該執行的動作，而實際上瀏覽器會在整個頁面的HTML加載，并根據其內容生成DOM樹，并加載所有引用的外部文件（比如圖片視頻）完畢之後，才會執行這個函數體內的動作。這是一個弊端。

2. JQuery的ready()函數解決了上述弊端，它的運行是在DOM樹生成之後，開始加載外部資源文件之前。而且，這個ready方法你可以在一個文檔里使用多次。

Chapter 2: Selecting the elements upon which to act

這章講JQuery的選擇器，它是在CSS選擇器的基礎上進行的擴展，這章的核心內容是幾個介紹選擇器規則的表格。

jQuery支持的最基本的CSS選擇器：

Selector	Description
*	Matches any element.
E	Matches all elements with tag name E.
E F	Matches all elements with tag name F that are descendants of E.
E>F	Matches all elements with tag name F that are direct children of E.
E+F	Matches all elements with tag name F that are immediately preceded by sibling E.
E~F	Matches all elements with tag name F preceded by any sibling E.
E.C	Matches all elements with tag name E with class name C. Omitting E is the same as *.C.
E#I	Matches all elements with tag name E with the id of I. Omitting E is the same as *#I.
E[A]	Matches all elements with tag name E that have attribute A of any value.
E[A=V]	Matches all elements with tag name E that have attribute A whose value is exactly V.
E[A^=V]	Matches all elements with tag name E that have attribute A whose value starts with V.
E[A$=V]	Matches all elements with tag name E that have attribute A whose value ends with V.
E[A!=V]	Matches all elements with tag name E that have attribute A whose value doesn’t match the value V, or that lack attribute A completely.
E[A*=V]	Matches all elements with tag name E that have attribute A whose value contains V.

jQuery支持的相對位置過濾選擇器：

Selector	Description
:first	Matches the first match within the context. li a:first returns the first link that’s a descendant of a list item.
:last	Matches the last match within the context. li a:last returns the last link that’s a descendant of a list item.
:first-child	Matches the first child element within the context. li:first-child returns the first list item of each list.
:last-child	Matches the last child element within the context. li:last-child returns the last list item of each list.
:only-child	Returns all elements that have no siblings.
:nth-child(n)	Matches the nth child element within the context. li:nth-child(2) returns the second list item of each list.
:nth-child(even|odd)	Matches even or odd children within the context. li:nthchild(even) returns the even list items of each list.
:nth-child(Xn+Y)	Matches the nth child element computed by the supplied formula. If Y is 0, it may be omitted. li:nth-child(3n) returns every third list item, whereas li:nth-child(5n+1) returns the item after every fifth element.
:even	Matches even elements within the context. li:even returns every even list item.
:odd	Matches odd elements within the context. li:odd returns every odd list item.
:eq(n)	Matches the nth matching element.
:gt(n)	Matches matching elements after and excluding the nth matching element.
:lt(n)	Matches matching elements before and excluding the nth matching element.

CSS與jQuery特有的過濾選擇器：

Selector	Description	In CSS
:animated	Selects only elements that are currently under animated control.
:button	Selects only button elements (input[type=submit], input[type=reset], input[type=button], or button).
:checkbox	Selects only checkbox elements (input[type=checkbox]).
:checked	Selects only checkboxes or radio elements in checked state.	√
:contains(food)	Selects only elements containing the text food.
:disabled	Selects only elements in disabled state.	√
:enabled	Selects only elements in enabled state.	√
:file	Selects only file input elements (input[type=file]).
:has(selector)	Selects only elements that contain at least one element that matches the specified selector.
:header	Selects only elements that are headers; for example, <h1> through <h6> elements.
:hidden	Selects only elements that are hidden.
:image	Selects only image input elements (input[type=image]).
:input	Selects only form elements (input, select, textarea, button).
:not(selector)	Negates the specified selector.	√
:parent	Selects only elements that have children (including text), but not empty elements.
:password	Selects only password elements (input[type=password]).
:radio	Selects only radio elements (input[type=radio]).
:reset	Selects only reset buttons (input[type=reset] or button[type=reset]).
:selected	Selects only <option> elements that are in selected state.
:submit	Selects only submit buttons (button[type=submit] or input[type=submit]).
:text	Selects only text elements (input[type=text]).
:visible	Selects only elements that are visible.

這一章有兩個主要的部分，以上內容是其中第一部分，即是如何在DOM內選擇一個元素集合，而另一個則是如何操作這些個集合。

这一章有两个很大的贡献（或许这也是这本书的最大贡献），就是作者提供了一些可以用来做实验的小程序，通过这些程序，你可以观察jQuery是如何工作的，而针对不同的话题，作者给出了不同的实验程序，在讲到这里时，作者介绍了第一个程序，它是用来测试jQuery的选择器是如何工作的：

在源代码的chapter2文件夹里可以找到这个文件：lab.selectors.html。

JQuery將這樣的集合稱為“wrapped set”，並提供了很多函數來訪問，操作它們，這個概念有一點像PHP中的array。有如下函數可以用於wrapped set：

size()

Returns the count of elements in the wrapped set.

Parameters

none

Returns

The element count.

get(index)

Obtains one or all of the matched elements in the wrapped set. If no parameter is specified, all elements in the wrapped set are returned in a JavaScript array. If an index parameter is provided, the indexed element is returned.

Parameters

index (Number) The index of the single element to return. If omitted, the entire set is returned in an array.

Returns

A DOM element or an array of DOM elements.

eq(index)

Obtains the indexed element in the wrapped set and returns a new wrapped set containing just that element.

Parameters

index (Number) The index of the single element to return. As with get(), a negative index can be specified to index from the end of the set.

Returns

A wrapped set containing one or zero elements.

first()

Obtains the first element in the wrapped set and returns a new wrapped set containing just that element. If the original set is empty, so is the returned set.

Parameters

none

Returns

A wrapped set containing one or zero elements.

last()

Obtains the last element in the wrapped set and returns a new wrapped set containing just that element. If the original set is empty, so is the returned set.

Parameters

none

Returns

A wrapped set containing one or zero elements.

toArray()

Returns the elements in the wrapped set as an array of DOM elements.

Parameters

none

Returns

A JavaScript array of the DOM elements within the wrapped set.

index(element)

Finds the passed element in the wrapped set and returns its ordinal index within the set, or finds the ordinal index of the first element of the wrapped set within its siblings. If the element isn’t found, the value -1 is returned.

Parameters

element (Element|Selector) A reference to the element whose ordinal value is to be determined, or a selector that identifies the element. If omitted, the first element of the wrapped set is located within its list of siblings.

Returns

The ordinal value of the passed element within the wrapped set or its siblings, or -1 if not found.

add(expression,context)

Creates a copy of the wrapped set and adds elements, specified by the expression parameter, to the new set. The expression can be a selector, an HTML fragment, a DOM element, or an array of DOM elements.

Parameters

expression (Selector|Element|Array) Specifies what is to be added to the matched set. This parameter can be a jQuery selector, in which case any matched elements are added to the set. If the parameter is an HTML fragment, the appropriate elements are created and added to the set. If it is a DOM element or an array of DOM elements, they’re added to the set. context (Selector|Element|Array|jQuery) Specifies a context to limit the search for elements that match the first parameter. This is the same context that can be passed to the jQuery() function. See section 2.1.1 for a description of this parameter.

Returns

A copy of the original wrapped set with the additional elements.

not(expression)

Creates a copy of the wrapped set and removes elements from the new set that match criteria specified by the value of the expression parameter.

Parameters

expression (Selector|Element|Array|Function) Specifies which items are to be removed. If the parameter is a jQuery selector, any matching elements are removed. If an element reference or array of elements is passed, those elements are removed from the set. If a function is passed, the function is invoked for each item in the wrapped set (with this set to the item), and returning true from the invocation causes the item to be removed from the wrapped set.

Returns

A copy of the original wrapped set without the removed elements.

filter(expression)

Returns the elements in the wrapped set as an array of DOM elements.

Parameters

Creates a copy of the wrapped set and removes elements from the new set that don’t match criteria specified by the value of the expression parameter. Parameters expression (Selector|Element|Array|Function) Specifies which items are to be removed. If the parameter is a jQuery selector, any elements that don’t match are removed. If an element reference or array of elements is passed, all but those elements are removed from the set. If a function is passed, the function is invoked for each element in the wrapped set (with this referencing the element), and returning false from the invocation causes the element to be removed from the wrapped set.

Returns

A copy of the original wrapped set without the filtered elements.

slice(begin,end)

Creates and returns a new wrapped set containing a contiguous portion of the matched set.

Parameters

begin (Number) The zero-based position of the first element to be included in the returned slice. end (Number) The optional zero-based index of the first element not to be included in the returned slice, or one position beyond the last element to be included. If omitted, the slice extends to the end of the set.

Returns

The newly created wrapped set.

has(test)

Creates and returns a new wrapped set containing only elements from the original wrapped set that contain descendents that match the passed test expression.

Parameters

test (Selector|Element) A selector to be applied to all descendents of the wrapped elements, or an element to be tested. Only elements possessing an element that matches the selector, or the passed element, are included in the returned wrapped set.

Returns

The resulting wrapped set.

map(callback)

Invokes the callback function for each element in the wrapped set, and collects the returned values into a jQuery object instance.

Parameters

callback (Function) A callback function that’s invoked for each element in the wrapped set. Two parameters are passed to this function: the zero-based index of the element within the set, and the element itself. The element is also established as the function context (the this keyword).

Returns

The wrapped set of translated values.

each(iterator)

Traverses all elements in the matched set, invoking the passed iterator function for each.

Parameters

iterator (Function) A function called for each element in the matched set. Two parameters are passed to this function: the zero-based index of the element within the set, and the element itself. The element is also established as the function context (the this reference).

Returns

The wrapped set.

Method	Description
children([selector])	Returns a wrapped set consisting of all unique children of the wrapped elements.
closest([selector])	Returns a wrapped set containing the single nearest ancestor that matches the passed expression, if any.
contents()	Returns a wrapped set of the contents of the elements, which may include text nodes, in the wrapped set. (This is frequently used to obtain the contents of <iframe> elements.)
next([selector])	Returns a wrapped set consisting of all unique next siblings of the wrapped elements.
nextAll([selector])	Returns a wrapped set containing all the following siblings of the wrapped elements.
nextUntil([selector])	Returns a wrapped set of all the following siblings of the elements of the wrapped elements until, but not including, the element matched by the selector. If no matches are made to the selector, or if the selector is omitted, all following siblings are selected.
offsetParent()	Returns a wrapped set containing the closest relatively or absolutely positioned parent of the first element in the wrapped set.
parent([selector])	Returns a wrapped set consisting of the unique direct parents of all wrapped elements.
parents([selector])	Returns a wrapped set consisting of the unique ancestors of all wrapped elements. This includes the direct parents as well as the remaining ancestors all the way up to, but not including, the document root.
parentsUntil([selector])	Returns a wrapped set of all ancestors of the elements of the wrapped elements up until, but not including, the element matched by the selector. If no matches are made to the selector, or if the selector is omitted, all ancestors are selected.
prev([selector])	Returns a wrapped set consisting of all unique previous siblings of the wrapped elements.
prevAll([selector])	Returns a wrapped set containing all the previous siblings of the wrapped elements.
prevUntil([selector])	Returns a wrapped set of all preceding siblings of the elements of the wrapped elements until, but not including, the element matched by the selector. If no matches are made to the selector, or if the selector is omitted, all previous siblings are selected.
siblings([selector])	Returns a wrapped set consisting of all unique siblings of the wrapped elements.

find(selector)

Returns a new wrapped set containing all elements that are descendants of the elements of the original set that match the passed selector expression.

Parameters

selector (String) A jQuery selector that elements must match to become part of the returned set.

Returns

The newly created wrapped set.

is(selector)

Determines if any element in the wrapped set matches the passed selector expression.

Parameters

selector (String) The selector expression to test against the elements of the wrapped set.

Returns

true if at least one element matches the passed selector; false if not.

end()

Used within a chain of jQuery methods to back up the current wrapped set to a previously returned set.

Parameters

none

Returns

The previous wrapped set.

andSelf()

Merges the two previous wrapped sets in a method chain.

Parameters

none

Returns

The merged wrapped set.