JavaScript framework: jQuery selector tutorial

Although jQuery is easy to use, it is easier to learn than other libraries, but it is not easy to fully master. Because it involves all aspects of web development, there are thousands of methods and internal changes. Beginners often find it easy to get started and difficult to improve. The goal of this article is to set... SyntaxHighlighter. all ();

Although jQuery is easy to use, it is easier to learn than other libraries, but it is not easy to fully master. Because it involves all aspects of web development, there are thousands of methods and internal changes. Beginners often find it easy to get started and difficult to improve. The goal of this article is to organize the jQuery selector systematically, and try to clarify jQuery's design ideas, find out the learning context, so that readers can get started to master.
What is jQuery?

To put it simply, jQuery is a JavaScript framework whose purpose is to write less code and do more things. For Web developers, jQuery is a powerful JavaScript library that can develop related applications more quickly, such as AJAX interaction and JavaScript animation effects. For Web designers, jQuery encapsulates the Javascript source code details and achieves effective separation from HTML tags, so that designers can focus more on the Web page design results. Based on this, the user experience of web pages is greatly enhanced, including webpage interaction and visual effects.

JQuery's core design philosophy is to select a webpage element and then perform some operations on it. So how to select and locate a webpage element? A common method for JavaScript developers is document. getElementById (). In jQuery syntax, the dollar sign "$" is used, and the equivalent selection expression is written as follows:

Var someElement = $ ("# myId ");
JQuery is called "jQuery" mainly because of its powerful selector, that is, the meaning of Javascript Query. The following describes the design concepts related to jQuery selector:

I. jQuery basic Selector

As mentioned above, selector is a special feature of jQuery. The basic selector of jQuery is divided into five types: tb:

1. $ ("# myId") // select the webpage element whose ID is myId

2. $ ("tag name") // For example, $ ("div") obtains the jQuery object set of all div elements in the HTML document.

3. $ (". myClass") // obtain the element set of all classes in the HTML document as "myClass ".

4. $ ("*") // obtain all elements in the HTML document.

5. $ ("selector1, selector2, selector3... SelectorN ") // This selector is called a group selector. Example: $ ("span, # two ")

// Select all span tag elements and id = two elements.

Ii. jQuery hierarchical Selector

JQuery objects obtained using the jQuery selector are a group of elements at any time. The hierarchical selector of jQuery is divided into the following two types:

1. $ ("ancestor descendant"): select the child element after the parent element. The Chinese meaning of ancestor is "ancestor", and the Chinese meaning of descendant is "descendant ". For example:

$ ("Body div") Select All div elements under the body element.

$ ("Div # test div") Select All div child elements contained in the div whose id is "test ".

2. $ ("parent> child"): select the first child element after the parent element. For example:

$ ("Body> div") select all the first-level div elements under the body element.

$ ("Div # test> div") select all the first-level div sub-elements contained in the div whose id is "test ".
Iii. jQuery filter Selector

JQuery's most basic filter selector includes:

1.: first // select the first element. $ ("Div: first") Select the first div element from all div elements

2.: last // select the last element. $ ("Div: last") Select the last div element from all div elements

3.: even // select all elements with an even index. $ ("Input: even") Select an input element whose index is an even number.

4.: odd // select all elements with an odd index. $ ("Input: odd") Select an input element whose index is an odd number.

5.: eq (index) // select the element whose index is equal to index. $ ("Input: eq (1)") Select the input element whose index is equal to 1.

6.: gt (index) // select the element whose index is greater than the index. $ ("Input: gt (1)") Select the input element whose index is greater than 1.

7.: lt (index) // select the element whose index is smaller than the index. $ ("Input: lt (3)") Select the input element whose index is less than 3.

The jQuery content filtering selector can easily filter the text content in the DOM document, so as to accurately select the elements we need.

1.: contains (text) // select the "text" element containing the text content. $ ("Div: contains ('you')") Select the div element containing the text "you.

2.: empty // select an empty element that does not contain child elements and text. $ ("Div: empty") selects a div empty element that does not contain child elements (including text elements.

3.: parent // select an element that contains child elements or text. $ ("Div: parent") Select the div element with child elements (including text elements.

As you can see, the filtering rules of the jQuery content filtering selector are mainly reflected in the child elements or text content it contains.

The usage of the jQuery visibility filter selector is as follows:

1.: hidden // select all invisible elements. $ (": Den den") selects all invisible elements on the webpage.

2.: visible // select all visible elements. $ ("Div: visible") selects all visible div elements.

The filter rule of the jQuery attribute filter selector obtains the corresponding elements through the element attributes.

1. [attribute] // select the element with this attribute. $ ("Div [id]") selects the element with the property id.

2. [attribute = value] // select the element whose property value is value. $ ("Div [name = test]") Select the div element whose property name value is "test.

3. [attribute! Value] // select an element whose property value is not equal to value.

4. [attribute ^ = value] // select an element whose attribute value starts with value.

5. [attribute $ = value] // select an element whose attribute value ends with value.

6. [attribute * = value] // select an element whose attribute value contains value.

7. [selector1] [selector2] [selectorN] // composite attribute selector. $ ("Div [id] [name * = test]") Select the div element with the property id and the value of the property name contains "test ".

The filtering rules of jQuery child element filter selectors are slightly more complex than those of other selectors.

1. nth-child (index/even/odd/equation) // select the index sub-element or parity element under each parent element.

2.: first-child // select the first child element of each parent element.

3.: last-child // select the last child element of each parent Element

The jQuery form object attribute filtering selector mainly filters selected form elements, such as selecting unavailable form elements, selected drop-down boxes, and multiple selection boxes.

1.: enabled // select all available form elements. $ ("# Form1: enabled") select all available elements in the form with the id of "form1.

2.: disabled // select all unavailable form elements.

3.: checked // select all selected elements. $ ("Input: checked") selects all selected elements.

4.: selected // select all selected option elements. $ ("Select: selected") selects all selected option elements ).

The form selector is introduced in jQuery, which allows us to easily obtain a certain type of element in a form.

Author: tbwshc