Document element selector in jquery

1. Starting from $
$ Should be familiar with prototype,

Prototype: var element = $ ('eleid ')
Jquery: var element = $ ('# eleId ')
DOM: var element = document. getElementById ('eleid ')
The above three options are equivalent. Compared with prototype, jquery has a # number.
Example:

Certificate ('{j1}}.html ()

<Div id = "j1"> Hello, jQuery! </Content>

2. Use xpath + css to get what you want...
1 ).
The HTML code we need in this example


<Div class = "contentToChange">
<P class = "alert"> warning! Warning! Warning! Warning! </P>
<P class = "firstParagraph"> I am the first paragraph </p>
<P class = "secondParagraph"> the second paragraph, ah, the Rockets lost 0 to 33! On the rocket bench, there was no such thing as shame. <em> Yao Mai </em> there were no more available people around him who made frequent mistakes. The disappearance of Yao Ming's fatal poison bench was the main cause of rocket backwardness. </p>
</Div>
Jquery code:


// Obtain the length of the p-tagged Array under div. contentToChange
Alert ($ ('div. contentToChange p'). size ())

// Adjust the height to display/hide all matching elements. The matching element here is p. firstParagraph.
$ ('Div. contentToChange p. firstParagraph '). slideToggle ('low ');

// Find the p element that matches all div. contentToChange and adds text after it.
$ ('Div. contentToChange p: not (. alert) '). append (' <strong class = "addText"> This is the newly added text </strong> ');

// Locate all elements with strong elements and css as addText, and then delete them.
$ ('Strong. addtext'). remove ();

// Locate the element marked as secondParagraph by P, and then fade away
$ ('Div. contentToChange p. secondParagraph '). hide ('low ');

// Find all em elements under div. contentToChange, and then change their color and font using the css method in jquery.
$ ('Div. contentToChange em'0000.css ({color: "#993300", fontWeight: "bold"});

// Add a css style
$ ('Div. contentToChange p. secondParagraph '). addClass ('new ')

// Delete the css style
$ ('Div. contentToChange p. secondParagraph '). removeClass ('new ');

2 ).

The HTML code we need in this example:
<Div id = "jqdt" style = "width: 400px; padding: 1em; border: 1px solid #000">
<P class = "goofy"> This <em> section </em> contains <strong> text </strong> whose css attribute is "groof, it also has a <a href = "http://www.englishrules.com" class = "external text" title = "http://www.englishrules.com"> external connection </a>, some <code> $ (code) </code>, and a hyperjoin property is <a href = "# dt-link3_same-page_link" title = ""> # hitting the hyperjoin header </a>. </p>
<Ol>
<Li> list item 1 with dummy link to <a href = "/action/edit/Silly.pdf" class = "new" titlepolic”silly.pdf "> silly.pdf </a> </li>
<Li class = "groof"> <em> list <strong> item </strong> 2 </em> with class = "<strong> groof </strong>" </ li>
<Li> list item 3 <span style = "display: none;"> SURPRISE! </Span> </li>
<Li> <strong> list item 4 </strong> with silly link to <a href = "/action/edit/silly.?_silly=" class =" new "title?#silly=silly="> silly=silly # </a> </li>
<Li> <a href = "contains. php"> support for rockets </a> and support for MM! </Li>
</Ol>
</Div>
Jquery code

// Obtain the first list item
$ ('# Jqdt ol li: eq (0 )')
// Equivalent
$ ('# Jqdt'). find ('li: eq (0) ') //

// Obtain the list item of all even rows
$ ('# Jqdt ol li: even ')

// Obtain the list item with the index less than 3
$ ('# Jqdt ol li: lt (3 )')

// Obtain all list items whose css is not groof in li
$ ('# Jqdt ol li: not (. groof )')

// Obtain all the elements whose hyperjoin attribute values start with '#' under the P tag
$ ('P a [@ href * = #] ')

// Obtain the set of all the code elements and the li elements whose css is groof.
$ ('# Jqdt code, li. groof ')

// First obtain A with the css attribute groof under ol, and then find the level-1 subnode strong element under node.
$ ('# Jqdt ol. groof> strong ')

// First, find all the list item elements that use list item as their previous node (so the first list item is not selected, because there is no list item node before it ). then, find the level-1 subnode whose hyperjoin attribute value is 'pdf '.
$ ('# Jqdt ol li + li> a [@ href $ = pdf]')

// Locate all hidden span Elements
$ ('Span: visable ')

// Locate the element containing the rocket in the hyperjoin
$ ('Li a: INS ins ("Rocket") ')


Note:
$ ('# Jqdt ol. groof> strong')> indicates accessing only the elements that contain strong in the subnode of the next level,
If it is changed to $ ('# jqdt ol. groof strong'), access the strong elements in all subnodes, including the subnodes of the subnode.


3 ).
Common Custom Selector
: Eq (0) The index is equal to 0, which is the first element.

: Gt (4) select all elements with an index greater than 4
: Lt (4) select all elements with indexes smaller than 4
: First is equivalent to: eq (0)
: Last select the last element
: Parent Selects all elements (including text) containing subnodes ).
: Contains ('test') Select an element containing the specified text
: Visible: select all visible elements (including: display: block | inline, or the element with visibility being visible, but not the form element (type hidden)
: Hidden: select all hidden elements (including: display: none, or elements with a visibility of hidden, including form elements (type hidden)


Example:

$ ('P: first'0000.css ('fontweight ', 'bold ')
$ ('Div: Den den '). show ();
$ ("Div: contains ('test')"). hide ();

$ ('Input [@ name = bar] '). val () // obtain the value of the input form named bar
$ ('Select [@ name = slt] '). val () // obtain the median value from the slt drop-down menu.
$ ('Input [@ type = radio] [@ checked] ') // obtain all the selected radio forms


Form Selector


: Input Selects all form elements (input, select, textarea, button ).
: Text Selects all text fields (type = "text ").
: Password Selects all password fields (type = "password ").
: Radio Selects all radio fields (type = "radio ").
: Checkbox Selects all checkbox fields (type = "checkbox ").
: Submit Selects all submit buttons (type = "submit ").
: Image Selects all form images (type = "image ").
: Reset Selects all reset buttons (type = "reset ").
: Button Selects all other buttons (type = "button ").


Example:

$ ('Myform: input ')
$ ('Input: radio ', myForm)
//: Radio is equivalent to [@ type = radio]