A first look at JQuery (1) jquery selector essential knowledge points_jquery

The content of this chapter is explained based on the selectors that I commonly use in development as examples. If you have more commonly used simple examples, please reply and provide them, participate in the discussion, and study and study together. First, we start with the commonly used CSS selectors.

CSS selectors include wildcard selectors, ID selectors, attribute selectors, inclusion selectors, class selectors, etc. Their basic format is:

Wildcard selectors: $ ("#ID *") means all elements under this element.

ID selector: $("#ID") means to get the element with the specified ID.

Attribute selector: $("input[type=text]") indicates all input elements whose type attribute is text.

Contains the selector: $("ul li a") represents all a elements in all li elements under the ul element.

Class selector: $(".Class") represents all elements that reference the Class style.

Of course, these selectors can be used together, for example: $("#ID input[type=text]"). This way of writing represents all input elements whose type attribute under the specified ID element is text. Some subtle changes in JQuery are very interesting, such as $("ul li").addClass("Class") and $("ul > li").addClass("Class"), and the effects they show are different. The first one is to add styles to all li elements under ul, and the second one is to add styles to the first li element under ul. You can test it yourself for more specific usage methods.

") means to select all elements with the title attribute in the element.

　$("[@title^=t]") means that all attribute title values ​​are elements starting with t.

　$("[@title$=t]") means that all attribute title values ​​are elements ending with t.
　 $("[@title*=t]") means that all attribute title values ​​are elements containing t.

XPath selectors are the same as CSS selectors and can also be used together. You can use multiple XPath selectors together or use them with CSS selectors, so if you want to achieve the requirements you want, use the JQuery method There are many kinds.

A custom selector is a selector that starts with a colon (:). When it comes to custom selectors, we don’t mention the frequently used ones: gt(), :eq() , :odd, :even, these are the most commonly used ones, such as :odd and :even. We usually use them to make tables with striped styles. The usage method is quite simple, such as $("#table tr:odd ").addClass("odd") and $("#table tr:even").addClass("even") simply use two lines of code to create the stripe style we want.

Of course, in actual development, we usually use selectors and DOM traversal methods to operate, such as:

$("#table td:contains('Window window')"). parent().find("td:gt(0)").addClass("highlight")

This code means to get the 'Window window' cell, then get its parent element, and then find This element contains all cells with numbers greater than 0. Of course, some methods can be simplified. Here I just want to show the concatenation effect of JQuery. This format is not recommended. I usually write it like this:

　$("#table td:contains( 'Window window')")
.parent()　　 // Get the parent
.find("td")　 // Find the td element
.not(":contains('Window window')" ) //Elements that are not windows
.addClass("highlight"); //Add styles

to separate them and mark them later to enhance readability.

Below I provide a few codes that are most commonly used in actual development (because it is too late to carry on!):

　 $("input[type='text']") .val(''); //Clear all text boxes
$("#text input:text").val('');//Clear all text boxes under the text element

　 // Get the values ​​of all selected CheckBoxes

　 $("input:checkbox:checked").each(function() {
alert($(this).val());
}) ;

　 $("select option:selected").val()//Get the value of the selected drop-down box

$("select option:selected").text()// Get the text of the selected drop-down box

My understanding of JQuery selectors ends here and is for reference only. Interested friends are welcome to participate in the discussion. To be continued...


Demo package download