JQuery selector Summary: jquery Selector

JQuery selector Summary: jquery Selector

Next week's project should have something to do at the front-end. query and summarize the JQuery selector to help you better understand your impression and use it for future queries.

1. Common selector:

$ ("# Idchoose") Select an element whose id is idchoose.

$ (". Class") Select an element whose class style is class.

$ ("Input [name = 'person ']") Select an input box with name "person.

$ ("H4: contains ('john')") Select an h4 title element containing "John.

$ ("*") Select all elements in the document

In general, to prevent selector errors due to incorrect thinking, the simplest and most direct method is to insert an id on the element of the html page and use the id selector for selection. although the class selector can also be used as a unique choice, the artists who consider it may modify the class. Therefore, the id selector is more reliable.

However, the id selector of a page is unique. When you have two or more IDs with the same name, only the first element with this id is selected by default, therefore, the id selector cannot be used for batch selection. Therefore, when batch selection is required (for example, all input boxes on the page are set to readonly ), you need to use the filter element selector $ ("input [type = 'text. of course, clss can also be used for batch selection. Similarly, we should not use the class selector when considering the active status of the front-end artists, in case of accidental deletion or style name change, it will be very sad.

The following is a summary of JQuery selector categories:

For more information, see the blog post of happy langYa and the JQuery tutorial of W3C.

Element selector:

$ ("P") select all <p> Elements

In general, the element selector is used together with the filter selector, for example, $ ("p: [type = 'hidd']"), select all <p> elements whose tpye attribute is hidden.Note

 Cascade selector:

$ ("Form input") Select the input element from all form elements

$ ("# Main> *") select all child elements whose id is main.

// This selector corresponds to $ ("# main "). children () achieves the same effect. Therefore, you do not have to use selector to select elements. You can use the same functions as ancestor traversal.Note

 

/* $ ("Label + input") Select the next input element node of all label elements, the test selector returns all input tag elements directly following the label with an input tag */

Simulate this selector and write a demo, but there is no pre-expected result (it seems that nothing has been selected). The time relationship is not studied for the moment, and you can verify it later.Note

$ ("# Prev ~ Div ") compatriot selector, which returns all div tags of the Tag Element with id as prev that belongs to the same parent element.

// Similarly, we can use compatriot traversal to complete this function: $ ("# prev "). siblings ("div"); although I don't know which of the two methods has better performance, I just provide one more choice.Note

 Basic filter selector:

$ ("Tr: first") Select the first element of all tr

$ ("Tr: last") Select the last one of all tr Elements

$ ("Input: not (: checked) + span") filter out all input elements of the checked selector. // I don't know much about this. What is this scenario?

$ ("Tr: even") Select the 0, 2, 4 ...... (Note: Because the selected multiple elements are arrays, the serial number starts from 0)

$ ("Tr: odd") select elements 1, 3, 5... of all tr elements.

$ ("Td: eq (2)") Select the td element whose Sn is 2 from all td elements.

$ ("Td: gt (4)") Select All td elements whose serial number is greater than 4 in the td Element

$ ("Td: lt (4)") Select All td elements whose serial number is less than 4 in the td Element

$ (": Header") Select h1, h2, h3, etc.

$ ("Div: animated") Select the element that is executing the animation effect

Content Filter selector:

$ ("Div: contains ('john')") select all elements whose div contains John text.

This is just an example. contains (text) is a commonly used filter selector. However, in actual application, we should try to avoid using element selectors directly with contain (text ), for example, there is a piece of code:

<Div id = "form"> <p> Primary div </p> <div id = "second"> <p> Layer 2 <p> <div id =" goal "> <p> I am the target to be found </p> </div>

If we want to select the div whose id is goal and $ ("div: contains ('target')") is used, all three div layers will be selected, think that the outer div is also nested with the id of the goal div and its content, so the outer two divs also contain the text "target", they will also be selected, therefore, in this case, it is best to use a unique selector to complete the conditional filtering with contains (text //

$ ("Td: empty") Select an array of all td elements that are empty (or contain text nodes)

$ ("Div: has (p)") Select All div elements containing the p tag

$ ("Td: parent") Select All element arrays with td as the parent node

Visual filter Selector:

$ ("Div: hidden") select all the div elements to be hidden.

$ ("Div: visible") Select All visualized div elements

Attribute filter selector:

$ ("Div [id]") Select All div elements containing the id attribute

$ ("Input [name = 'newsletter ']") Select the input element whose name attribute is equal to 'newsletter'.

// In daily work, because input is a very common label, its name attribute is usually unique in comparison with the background, therefore, $ ("input [name = 'newsletter ']") is often used as a unique choice. use the type attribute of input, $ ("input [type = 'text']") for batch selection.Note

$ ("Input [name! = 'Newsletter'] ") Select the input element whose name attribute is not equal to 'newsletter '.

$ ("Input [name ^ = 'News']") select all input elements whose name attributes start with 'News '.

$ ("Input [name $ = 'News']") select all input elements whose name attributes end with 'News '.

$ ("Input [name * = 'man']") select all input elements whose name attribute contains 'new '.

$ ("Input [id] [name $ = 'man']") multiple attributes can be used for joint selection, this selector is used to obtain all elements that contain the id attribute and end with man;

Child element filter selector:

$ ("Ul li: nth-child (2)"), $ ("ul li: nth-child (odd)"), $ ("ul li: nth-child (3n + 1 )")

$ ("Div span: first-child") returns the array of the first subnode of all div elements.

$ ("Div span") is used here "). first () is concise. in addition, the selection of the child element selector is only limited to the child element, but when the child element needs to be operated, the use of the child element filter will generate an incorrect choice, the error example is not mentioned at the moment. The correct format is $ ("div "). find ("span "). first ()

 

$ ("Div span: last-child") returns the array of the last node of all div elements // The same, $ (div span). last ()

$ ("Div button: only-child") returns an array of all child nodes with only one subnode in all Divs.

Form element selector:

$ (": Input") select all form input elements, including input, textarea, select, And button

$ (": Text") select all text input Elements

$ (": Password") select all password input Elements

$ (": Radio") select all radio input Elements

$ (": Checkbox") select all the checkbox input Elements

$ (": Submit") select all submit input Elements

$ (": Image") select all image input Elements

$ (": Reset") select all reset input Elements

$ (": Button") select all button input Elements

$ (": File") select all file input Elements

$ (": Hidden") Select the hidden fields of all input elements or forms of the hidden type.

Form element filter selector:

$ (": Enabled") Select All operable form elements

$ (": Disabled") Select All unoperable form elements

$ (": Checked") select all checked form elements

$ ("Select option: selected") select the selected element from all select sub-elements.

 

JQuery selector Daquan original address: http://www.cnblogs.com/hulang/archive/2011/01/12/1933771.html