First glance at JQuery (1) essential knowledge of jquery selector _ jquery

JQuery's powerful selector allows us to operate any element on the page, which is easy to use and readable. The content of this chapter is explained based on the selector that is often used in development as an example. If there are more common simple examples, you can reply to them and participate in the discussion and study together, first, we start with the commonly used CSS selector.

CSS delimiters include wildcard delimiters, ID delimiters, attribute delimiters, and class delimiters. Their basic formats are as follows:

Wildcard character: $ ("# ID *") indicates all elements under the element.

ID selector: $ ("# ID") indicates the element that obtains the specified ID.

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

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

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

Of course, these selection operators can be used together, for example: $ ("# ID input [type = text]"), this statement indicates that the type attribute of the specified ID element is all input elements of text. Some minor changes in JQuery are very interesting, such as $ ("ul li "). addClass ("Class") and $ ("ul> li "). addClass ("Class"), they show different effects, the first is to add a style for all the li elements under ul, the second method is to add the style of the first li element under ul. You can test more methods.

There are not many content covered by the XPath selector (not supported since version 1.3, but you can also understand it). Their basic format is:

$ ("[@ Title]") indicates Selecting All elements whose attributes contain the title.

$ ("[@ Title ^ = t]") indicates that all attribute title values start with t.

$ ("[@ Title $ = t]") indicates that all attribute title values end with t.
$ ("[@ Title * = t]") indicates that all attribute title values are elements that contain t.

The XPath selector is the same as the CSS selector. It can be used together with multiple XPath selector or CSS selector, there are many JQuery methods to meet your requirements.

A user-defined selector is a type of selector that starts with a colon (:). When it comes to user-defined selector, we often use: gt () and: eq () ,: odd,: even. These are the most common ones. For example: odd and: even, we usually use them to create a striped table. The usage is quite simple, for example, $ ("# table tr: odd "). addClass ("odd") and $ ("# table tr: even "). addClass ("even") simply uses two lines of code to create the stripe style we want.

Of course, in actual development, we usually use the selector in combination with the DOM Traversal method for operations, such:

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

This code retrieves the 'window Window 'cell, obtains its parent element, and finds all cells whose numbers are greater than 0 in the element. Of course, some methods can be simplified. Here I just want to express the concatenation Effect of JQuery. This format is not recommended. I write it like this:

$ ("# Table td: contains ('window Windows ')")
. Parent () // obtain the parent level
. Find ("td") // find the td Element
. Not (": contains ('window Windows')") // It is not an element of a Window.
. AddClass ("highlight"); // Add a style

Separate them and mark them later to facilitate readability.

Below I will provide a few of the Code most commonly used in actual development (because it is too late to handle it !) :

$ ("Input [type = 'text']"). val (''); // clear all text boxes
$ ("# Text input: text"). val (''); // clear all text boxes in the text element

// Obtain the values of all selected checkboxes

$ ("Input: checkbox: checked"). each (function (){
Alert ($ (this). val ());
});

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

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

My understanding of the JQuery selector is for reference only. You are welcome to join the discussion. To be continued ........

Demo package download