First Glimpse jquery (i) jquery selector prerequisite Knowledge point _jquery

The content of this chapter is based on the selector I used in the development as an example to explain, if there are more commonly used simple examples to provide, participate in discussions, study together, first we start with the common CSS selectors.

CSS selectors include wildcard selectors, ID selectors, property selectors, include selectors, class selectors, and so on, and their basic format is:

Wildcard selector: $ ("#ID *") represents all the elements under that element.

ID Selector: $ ("#ID") represents the element that obtains the specified ID.

Property Selector: $ ("Input[type=text]") represents all input elements with the Type property of text.

Include selector: $ ("ul Li a") represents all the 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 in conjunction with, say, $ ("#ID Input[type=text]"), which means that all input elements with the type attribute under the specified ID element are text. Some subtle changes in jquery are very interesting, such as $ ("ul Li"). AddClass ("Class") and $ ("ul > Li"). AddClass ("class"), they show the effect is different, The first is to be ul under all LI elements to add style, the second is the UL under the first LI element to add style, more specific use of the method can be tested.

The XPath selector (which has not been supported since version 1.3, but is also understood) does not cover much of the content, and their basic format is:

$ ("[@title]") represents the element that selects the attribute with title in all elements.

$ ("[@title ^=t]") means that all property title values are elements that begin with T.

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

XPath selectors, like CSS selectors, can work together, can be used with multiple XPath selectors, and can be used in conjunction with CSS selectors, so there are many ways to achieve the requirements you want with the jquery method.

The custom selector is selected with a colon (: The first selector, when it comes to custom selectors, is not to say that we often use: GT (), EQ (),: odd,: Even, these are the most commonly used, such as: Odd and: Even these two we usually use him as a stripe-style table, which is fairly simple to use, 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 the actual development we usually use the selector with the DOM traversal method to operate, such as:

$ ("#table td:contains (' window ')"). Parent (). Find ("td:gt (0)"). AddClass ("highlight")

This code means to get the ' window window ' cell, then get his parent element, and then find all the cells in the element that contain the number greater than 0. Of course, some of the methods can be simplified, here I just to represent the consonant effect of jquery, this format is not recommended, I usually write this:

$ ("#table td:contains (' window ')")
. Parent ()//Get Parent
. FIND ("TD")//locate TD elements
. Not (": Contains (' window ') ')//is not a window element
. addclass ("highlight"); Add Style

Separate them and then mark them for readability.

Below I provide several of the most commonly used code in the actual development (because it is too late to carry it!) ）：

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

Gets the value of all selected checkbox

$ ("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 selected Drop-down box

My understanding of the jquery selector ends here, for informational purposes only, and is welcome for interested friends to participate in the discussion. To be Continued ...

Demo Package Download