Shulou(Shulou.com)06/03 Report--

This article mainly shows you "what are the basic knowledge points of jQuery selector", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn "what are the basic knowledge points of jQuery selector".

In fact, the selector of jQuery mainly makes use of the ability of CSS and XPath selector, of course, it also includes the custom selector of jQuery, so that we can easily and flexibly get all kinds of elements or element groups in the DOM tree.

The three selector types mentioned above (CSS,XPath, custom) are all started and represented in jQuery with the $() function, which is called a factory function.

Any element placed in $() automatically performs a loop traversal and is saved to a jQuery object. The common parameters that can be used by the $() function are:

+ sign, such as $('p'), to get all the paragraphs in the document

+ ID, such as: $('# some-id'), get an element in the document with the corresponding some-id ID. If you use the same some-id multiple times, you will only get the first element that uses id= "some-id"

+ class, such as: $('.some-class'), to get all the elements in the document with some-class

The following is a summary of the use of several types of selectors (mainly posting some examples).

1line CSS selector

/ / add a style horizontal to the first-level list element under the ul element where id is selected-ul

$('# selected-ul > li'). AddClass ('horizontal')

Here:

+ > is a child element combiner with syntax format of $('parent > child'). Only the first generation child elements of parent are selected. Note that $(' parent child') is a child element that contains all descendants under parent, as follows

/ / assign all levels to the ul element in which id is selected-ul

/ / list element li that does not contain class=horizontal add style sub-level

$('# selected-ul li:not (.customers)') .addClass ('sub-level')

-there is also a negative pseudo-class selector: not (selector), which is used to select all elements that do not match the given selector, such as not (div a) or not (div, a). Other similar ones are:

+ has (selector), select the element that contains at least one element that selector matches, such as:

/ / matches a div if the child element of any level (not just direct child elements) in its descendants is p

$('div:has (p)')

+ addClass is used to add a specified class name to each matching element, which is usually used in conjunction with removeClass (), as follows:

$('p'). RemoveClass ('myClass noClass'). AddClass (' yourClass')

Starting with jQuery 1.4, addClass supports setting style names through function, as shown in the following example:

/ / given a list-free ul with 5 li elements, add the item-4 style to the last li element

$('ul li:last') .addClass (function () {

Return 'item-' + $(this). Index ()

});

2Selector of the type of XPath

XPath is the full name XML Path Language,XML path language. Is a language that identifies different elements or element values in an XML document. The description on Wiki is as follows (http://zh.wikipedia.org/zh-hans/XPath):

XPath is the XML path language (XML Path Language), which is a language used to locate a part of an XML document.

XPath is based on the tree structure of XML and provides the ability to find nodes in the data structure tree. At first, the original intention of XPath is to regard it as a general grammar model between XPointer and XSL. But XPath was quickly adopted by developers as a small query language.

The jQuery library supports a basic set of XPath selectors.

+ attribute selector (attribute selector), which still follows the convention in XPath, using @ to identify the attribute, as follows:

/ / Select all links with title attribute

$('a [@ title]')

Property selectors can also use ^, $, and * to identify the beginning, end, and anywhere in the string, respectively. Examples are as follows:

/ / add class = mailto to all links whose href values start with mailto:

$('a [@ href ^ = "mailto:"]') .addClass ('mailto')

/ / add class = pdflink to all links whose href values end with .pdf

$('a [@ href$= ".pdf"]') .addClass ('pdflink')

/ / add class = mysite to all links with mysite.com in the href value of the attribute

$('a [@ href*= "mysite.com"]') .addClass ('mysite')

3, custom selector

The custom selector starts with a colon (:). Take a look at the following example:

/ / from the matching div collection with horizontal class, select the second item

$('div.horizontal:eq (1)')

/ / another notation CSS selector

$('div:nth-child (2)')

The first is a custom selector, which is based on the syntax rules of JavaScript, while the index of arrays starts at 0 in JavaScript and 1 in the CSS specification. At first, I thought they were custom selectors. After reading the API document, I knew that nth-child () is strictly from the CSS specification: (

Other custom selectors related to indexes similar to: eq are: lt (),: gt (),: even (),: odd ().

These are all the contents of this article entitled "what are the basic knowledge points of jQuery selectors?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.