Document element selector in jquery _ jquery

Tips for using jquery element selector 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 ()

Hello, jQuery!

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

Warning! Warning! Warning! Warning!

I am the first

The second paragraph, ah, the Rockets lost 0 to 33! Shame on rocket substitutesYao MaiNo more available people around him often make mistakes. The disappearance of Yao Ming's fatal poison bench is the main cause of rocket backwardness.

Jquery code:


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

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

// Locate the p elements that match all p. contentToChange and add text after the p elements whose css is not alert
$ ('P. contentToChange p: not (. alert) '). append (' This is the newly added text.');

// 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
$ ('P. contentToChange p. secondParagraph '). hide ('low ');

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

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

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

2 ).

The HTML code we need in this example:

ThisSectionIncluding some css attributes "groof"Text, It also has a http://www.englishrules.com "class =" external text "title =" http://www.englishrules.com "> external connection, some$ (CODE), And a hyper-connection property is a #-hitting hyper-connection.

1. List item 1 with dummy link to silly.pdf


2. ListItem2With class ="Groof"


3. List item 3 SURPRISE!


4. List item 4With silly link to silly?silly=


5. Supports rockets and MM!

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 ')
$ ('P: Den den '). show ();
$ ("P: 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]