To the wide variety of CSS selectors, jQuery adds its own custom selectors. These custom selectors enhance the already impressive capabilities of CSS selectors to locate page elements in new ways.
Performance note
When possible, jQuery uses the native DOM selector engine of the browser to find elements. This extremely fast approach is not possible when custom jQuery selectors are used. For this reason, it is recommended to avoid frequent use of custom selectors when a native option is available and performance is very important.
效能提示jquery會儘可能的使用瀏覽器原生的DOM選取器引擎去尋找元素。但是當定製選取器使用的時候,這個相當快速的方法通常是不能使用的。由於這個原因,當一個原生選項可用的時候,我們推薦避免經常使用定製選取器,效能是很重要的。
Most of the custom selectors allow us to pick certain elements out of a line-up, so to speak. Typically used following a CSS selector, this kind of custom selector identifies elements based on their positions within the previously-selected group. The syntax is the same as the CSS pseudo-classsyntax, where the selector starts with a colon (:). For example, to select the second item from a set of <div>elements with a class of horizontal, we write the following code:
$('div.horizontal:eq(1)')
Note that :eq(1)selects the second item in the set because JavaScript array numbering is zero-based, meaning that it starts with 0. In contrast, CSS is one-based, so a CSS selector such as $('div:nth-child(1)')would select all divselectors that are the first child of their parent (in this case, however, we would probably use
$('div:first-child')instead).