JavaScript Framework: jQuery Selector Mastery Tutorial

Although jQuery is easy to get started and easier to learn compared to other libraries, it is not easy to fully master it. Because it involves all aspects of web development, there are thousands of methods and internal variations provided. Beginners often feel that it is easy to get started but difficult to improve. The goal of this article is to systematically sort out the jQuery selector, try to clarify the design ideas of jQuery, and find out the context of learning, so that readers can move from entry to proficiency.
　　What is jQuery

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

　The core design idea of ​​jQuery is to select a web page element and then perform some operation on it. So how to select and position a certain web page element? For JavaScript developers, a common method is document.getElementById(). In jQuery syntax, the dollar sign "$" is used, and the equivalent selection expression is written as:

var someElement = $("#myId");
The main reason why jQuery is called "jQuery" is Because of its powerful selector, which is what Javascript Query means. Below, we introduce the design ideas related to jQuery selectors in detail:

1. jQuery basic selector

As mentioned earlier, selectors are a feature of jQuery. jQuery’s basic selectors are mainly divided into the following five types:

　1. $("#myId") // Select the web page element with the ID myId

　2. $("tag name") // For example $( "div") obtains a collection of jQuery objects of all div elements in the HTML document

　3. $(".myClass") // obtains a collection of all elements with class "myClass" in the HTML document

4. $(“*”) // This gets all the elements in the HTML document

　　5. $(“selector1,selector2,selector3…selectorN “) // This type of selector is called a group selector. For example: $("span,#two")

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

　2. jQuery hierarchical selector

　At any time, the jQuery object obtained through the jQuery selector is a set of elements at any time. jQuery's hierarchical selectors are mainly divided into the following two types:

　1. $("ancestor descendant"): selects all child elements after the parent element. Ancestor means "ancestor" in Chinese, and descendant means "descendant" in Chinese. For example:

　$(“body div”) selects all div elements under the body element.

　 $(“div#test div”) Select all div child elements contained in the div with the id “test”

　 2. $(“parent > child”): Select all the first elements after the parent element child element. For example:

　$(“body > div”) selects all first-level div elements under the body element.

　$(“div#test > div”) Selects all first-level div sub-elements contained in the div with the id “test”
　3. jQuery filter selector

　The most basic jQuery filter selectors include:

　1. :first // Select the first element. $("div:first") selects the first div element among all div elements

　　2. :last // Selects the last element. $("div:last") selects the last div element among all div elements

　　3. :even // Selects all elements whose index is an even number. $("input:even") selects the input element whose index is even.

　4. :odd // Select all elements whose index is odd. $("input:odd") selects the input element whose index is odd.

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

　6. :gt(index) // Select elements with index greater than index. $("input:gt(1)") selects input elements with index greater than 1.

　7. :lt(index) // Select elements with index less than index. $("input:lt(3)") selects input elements with index less than 3.

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

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

　2. :empty // Select empty elements that do not contain child elements and text. $("div:empty") selects empty div elements that do not contain child elements (including text elements).

　3. :parent // Select elements containing child elements or text. $("div:parent") selects div elements that have child elements (including text elements).

　You can see that the filtering rules of jQuery content filtering selector are mainly reflected in the sub-elements or text content it contains.

　The usage of jQuery visibility filter selector is as follows:

　1. :hidden // Select all invisible elements. $(":hidden") selects all invisible elements in the web page.

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

　The filtering rule of jQuery attribute filter selector is to obtain the corresponding element through the attribute of the element.

　1. [attribute] // Select elements with this attribute. $("div[id]") selects elements with attribute id.

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

　3. [attribute!value] // Select elements whose attribute value is not equal to value.

　4.[attribute^=value] //Select the element whose attribute value starts with value.

　 5. [attribute$=value] // Select the element whose attribute value ends with value.

　6. [attribute*=value] // Select elements whose attribute value contains value.

　7. [selector1] [selector2] [selectorN] //Composite attribute selector. $("div[id][name*=test]") selects the div element that has the attribute id and the value of the attribute name contains "test"

　The filtering rules of jQuery sub-element filtering selector are slightly different than other selectors Somewhat complicated.

　1. :nth-child(index/even/odd/equation) // Select the index-th child element or odd-even 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

jQuery form object attribute filter selector It mainly filters the selected form elements, such as selecting unavailable form elements, selected drop-down boxes, multi-select boxes, etc.

　1. :enabled // Select all available form elements. $("#form1 :enabled") selects all available elements in the form with the id "form1".

　2. :disabled // Select all disable 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 (option).

　The form selector was introduced in jQuery, allowing us to easily obtain a certain element or type of element in a form