Basic usage of jquery DOM operations

Example:
Jquery code:
Copy codeThe Code is as follows:
<Script language = "javascript">
$ (Document). ready (function (){
Alert ($ ("ul li: eq (1)"). text (); // select the second li Value
Alert ($ ("p"). attr ("title"); // select the value of the title attribute of p.
// Append Element
$ ('Ul '). append ("<li title = 'banana '> banana </li> "). append ("<li title = 'sydney '> Sydney </li> ");
// Append
$ ('Ul '). prepend ("<li title = 'unsightly'> prefix </li> ");
// Append
$ ('Ul '). after ("<li title = 'postpa'> postpaid </li> ");
// Add after p
$ ("<B> Hello </B>"). insertAfter ("p ");
// Add before p
$ ("<B> Hello </B>"). insertBefore ("p ");
// Delete a node
$ ("Ul: eq (1)"). remove ();
// Clear the value
$ ("Ul: eq (2)"). empty ();
// Copy a node
$ ("Ul li"). click (function (){
$ (This). clone (true). appendTo ("ul"); // true indicates that the Bound event is also copied during replication.
});
// Replace the node
$ ("P [title = test]"). replaceWith ("<strong> what is your favorite fruit? </Strong> ");
// $ ("<Strong> what is your favorite fruit? </Strong> "). replaceAll (" P ");
// Package event
$ ("Strong"). wrap ("<B> </B> ")
// Attribute operation
$ ("P"). attr ({"title": "test", "name": "pName"}); // Add an attribute
$ ("P"). removeAttr ("title"); // remove attributes
// Style operations
/*
Add style: $ ("p"). addClass ("hight ");
Output style: $ ("p"). removeClass ("highr ");
Switch style: $ ("p"). toggleClass ("another ");
Style: $ ("p"). hasCLass ("higth ");
*/
Alert ($ ("p" ).html (); // obtain the value html () is similar to the innerHTML attribute in javascript.
$ ("P" ).html ("change"); // change the value
Alert ($ ("p"). text (); // obtain the value text () is similar to the innerTEXT attribute in javascript.
$ ("P"). text ("again change"); // change the value
$ ("# Name"). focus (function (){
If ($ ("# name"). val () = "Enter the user name "){
$ (This). val ("");
}
}). Blur (function (){
If ($ ("# name"). val () = ""){
$ (This). val ("Enter the user name ");
}
});
$ ("# Password"). focus (function (){
$ ("# Tip"). hide ();
}). Blur (function (){
If ($ ("# password"). val () = ""){
$ ("# Tip"). show (200 );
}
});
$ ("# Submit"). click (function (){
If ($ ("# name"). val () = "Enter the user name" | $ ("# password"). val () = ""){
$ ("# Name" ).css ("background", "yellow ");
$ ("# Password" ).css ("background", "yellow ");
}
});
$ ("# Single"). val ("select 2 ");
$ ("# Multiple"). val (["select 2", "select 3"]);
$ (": Checkbox"). val (["check2", "check3"]);
$ (": Radio"). val (["radio1"]);
Alert ("careful! ");
$ ("# Single: eq (2)"). attr ("selected", true );
$ ("[Value = radio2]: radio"). attr ("checked", true );
// Traverse node children () method
$ ("# BtnShow"). click (function (){
For (var I = 0; I <$ ("body"). children (). length; I ++ ){
$ ("# Body"). append ($ ("body"). children () [I]. innerHTML );
}
});
// The next () method to obtain all elements of the Peer next to p
Alert ($ ("ul li"). next (). text ());
// Prev () method to obtain an element matching the peer
Alert ($ ("li [title = pineapple]"). prev (). text ());
// Siblings () method to obtain all peer elements of matching elements
For (var I = 0; I <$ ("p"). siblings (). length; I ++ ){
$ ("# Subling"). append ($ ("p"). siblings () [I]. innerHTML );
}
// Closest () method to obtain the latest Matching Element
$ (Document). bind ("click", function (e ){
Certificate (e.tar get). closest ("li" ).css ("color", "red ");
});
// Css operations
$ ("P" ).css ({"fontSize": "40px", "background": "yellow "});
// Offset () method to obtain the relative offset of the element in the current window. The returned object is the top and left attributes.
Alert ("top =" + $ ("P "). offset (). top + ";" + "left =" + $ ("P "). offset (). left );
// Position () method. Set the position style relative to the nearest element to relative or absolute.
// Returns the relative offset of the grandfather node. The top and left attributes are returned.
Alert ("top =" + $ ("P "). position (). top + ";" + "left =" + $ ("P "). position (). left );
// ScrollTop () and scrollLest () return the distance between the scroll bar and the left end.
Alert ("scrolltop =" + $ ("P"). scrollTop () + ";" + "scrollleft =" + $ ("P"). scrollLeft ());
});
</Script>

Html code:
Copy codeThe Code is as follows:
<Body>
<P> test </p>
<P id = "p" title = "test"> which apple do you like? </P>
<Ul>
<Li title = "apple"> Apple </li>
<Li title = "orange"> orange </li>
<Li title = "pineapple"> pineapple </li>
</Ul>
<Input type = "button" id = "show" value = "show"/>
<Br/>
<Form id = "form1" action = "#">
<Div>
<Input type = "text" id = "name" value = "Enter the user name"> <br/>
<Input type = "password" id = "password" value = ""> <br/>
<Div id = "tip" style = "display: none"> <font color = "red"> enter the password </font> </div> <br/>
<Input type = "button" id = "submit" value = "submit"/>
</Div>
</Form>
<Br/>
<Form id = "from2" action = "#">
<Select id = "single">
<Option value = "select 1"> select 1 </option>
<Option value = "select No. 2"> select No. 2 </option>
<Option value = "select No. 2"> select No. 3 </option>
</Select>
<Select id = "multiple" multiple = "multiple" style = "height: 120px">
<Option selected = "selected"> select No. 1 </option>
<Option value = "select No. 2"> select No. 2 </option>
<Option value = "select 3"> select 3 </option>
<Option value = "select 4"> select 4 </option>
<Option selected = "selected"> select number 5 </option>
</Select>
<Input type = "checkbox" value = "check1"/> select one more
<Input type = "checkbox" value = "check2"/> select 2
<Input type = "checkbox" value = "check3"/> select 3
<Input type = "checkbox" value = "check4"/> select 4
<Input type = "radio" name = "radio" value = "radio1"/> single choice 1
<Input type = "radio" name = "radio" value = "radio2"/> single choice 2
<Input type = "radio" name = "radio" value = "radio3"/> single choice 3
<Br/>
<Input type = "button" id = "btnShow" value = "show body"/>
<Br/> <div id = "body"> </div> <div id = "subling"> </div>
</Form>
</Script>
</Body>