To fully explain Dom operations, you must first build a webpage. Because each webpage can be represented by Dom, and each Dom can be regarded as a DOM tree.
HTML:
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Dom </title>
</Head>
<Body>
<P Title = "select your favorite fruit."> what is your favorite fruit? </P>
<Ul>
<Li Title = 'apple'> Apple </LI>
<Li Title = 'orange'> oranges </LI>
<Li Title = 'pineapple '> pineapple </LI>
</Ul>
</Body>
</Html>
1. Search for nodes
A. Search for element nodes.
VaR $ li = $ ("Ul Li: eq (1)"); // obtain the second <li> element node
VaR li_txt = $ Li. Text (); // obtain the text of the second <li> element.
B. Search for Attribute nodes.
VaR $ para = $ ("p"); // get the P Node
VaR p_txt = $ para. ATTR ("title"); // outputs the title value of the <p> element node attribute.
2. Create a node
A. Create an element node.
VaR $ li_1 = $ ("<li> </LI> ");
VaR $ li_2 =$ ("<li> </LI> ");
Then Insert the new element to the page using the jquery append () method.
B. Create a text node
VaR $ li_1 = $ ("<li> banana </LI> ");
VaR $ li_2 = $ ("<li> Sydney </LI> ");
VaR $ parent = $ ("Ul ");
$ ("Ul"). append ($ li_1 );
$ ("Ul"). append ($ li_2 );
C. Create an attribute node
VaR $ li = $ ("<li Title =" banana "> </LI> ");
VaR $ parent = $ ("Ul ");
$ Parent. append ($ Li );
3. Insert nodes
There are not only one method to insert a document into a newly created node, but also other methods to insert a node in IQUERY.
A, append (): Append content to each Matching Element
HTML: <p> I want to say: </P>
Jquery: $ ("p"). append ("<B> Hello </B> ");
Result: <p> I want to say: <B> Hello </B> </P>
B, appendto (): append all matched elements to the specified element.
HTML: <p> I want to say: </P>
Jquery: $ ("<B> Hello </B>"). appendto ("p ");
Result: <p> I want to say: <B> Hello </B> </P>
C, prepend (): Pre-content to each Matching Element
HTML: <p> what I want to say </P>
Jquery: $ ("p"). prepend ("<B> Hello </B> ");
Result: <p> <B> Hello </B> I want to say: </P>
D, prependto (): Place all matched elements in the specified element.
E, after (): insert content after each matching metadata
F, insertafter (): inserts all matching elements to the end of the specified element.
G, before (): insert content before each Matching Element
H, insertbefore (): inserts all matching elements in front of the specified element.
4. delete a node
A, remove (): removes all matching elements from the Dom. The input parameters are used to filter elements based on jquery expressions.
B, empty (): clears all child nodes in the element.
5. Copy nodes
$ ("Ul li"). Click (function (){
$ (This). Clone (). appendto ("Ul ");
})
6. replacewith () and replaceall ()
$ ("P"). replacewith ("<strong> replace </strong> ");
The following code implements the same function:
$ ("<Strong> replace </strong>"). replaceall ("p ");
7. Wrap nodes wrap (), wrapall (), wrapinner ()
$ ("Strong"). Wrap ("<B> </B>"); // wrap the <strong> element with <B>.
8. Attribute operations
A. Get and set attributes
VaR $ para = $ ("p ");
VaR p_txt = $ para. ATTR ("title"); // get attributes
$ ("P"). ATTR ("title": "Your title", "name": "Your name"); // set attributes.
B. Delete attributes.
$ ("P"). removeattr ("title ");
9. style operations
A. Get and set styles
HTML: <P class = "myclass" Title = "select your favorite fruit"> what kind of fruit do you like? </P>
VaR p_class = $ ("p"). ATTR ("class"); // gets the class attribute of the <p> element.
$ ("P"). ATTR ("class", "high"); // set the class of the <p> element to high
B. append a style
<Style type = "text/CSS">
. High {
Font-weight: bold;
Color: red;
}
. Another {
Font-weight: italic;
Color: blue;
}
</Style>
$ ("Input: eq (2)"). Click (function (){
$ ("P"). addclass ("another ");
});
C. Remove a style.
$ ("P"). removeclass ("high ");
D. Switch the style.
Togglebtn. Toggle (function (){
// Element display 1
}, Function (){
// Element hiding 2
})
The toggle () method is used to execute functions ③ and ④ alternately. If an element is displayed, hide it. If the element is hidden, it is displayed. In this case, the toggle () method controls repeated switching of behavior.
$ ("P"). toggleclass ("another"); // repeated switching class name "another"
E. Determine whether a style exists.
Hasclass () can be used to determine whether the element contains a class. If yes, true is returned; otherwise, false is returned.
For example, you can use the following code to determine whether the <p> element contains the "another" class:
$ ("P"). hasclass ("another ");
10. Set and obtain HTML, text, and values
A, HTML () method
This method is similar to the innerhtml attribute in JavaScript and can be used to read or set the HTML content in an element.
$ ("P" 2.16.html ("<strong> what is your favorite fruit? </Strong> ");
B, text () method
This method is similar to the innertext attribute in Javascript. It can be used to read or leave the text content in an element empty.
VaR p_text = $ ("p"). Text ();
C, Val () method
This method is similar to the value attribute in Javascript, and can be used to set and obtain the value of the meta-cable. Whether the element is a text box,
The drop-down list also has a single limit, which can return the value of the element. If multiple elements are selected,
Returns an array containing all selected values.
Example: HTML: <input type = "text" id = "Address" value = "Enter the email address"/> <br/>
<Input type = "text" id = "password" value = "Enter your email password"/> <br/>
<Input type = "button" value = "login"/>
When the address box gets the mouse focus, if the value of the address box is "enter email address", the value in the address box is cleared. You can use the following jquery code:
$ ("# Address"). Focus (function (){
VaR txt_value = $ (this). Val ();
If (txt. value = "Enter the email address "){
$ (This). Val ("");
}
});
Note: The focus () method is equivalent to the onfocus () method in Javascript. It is used to process events that obtain the focus. The Blur () method is equivalent to the onblur () method in JavaScript and serves to handle events that lose focus.
11. Traverse nodes
A, children () method
This method is used to obtain the child element set of matching elements.
B, next () method
This method is used to obtain the peer element next to the matching element.
C, Prev () method
This method is used to obtain the peer element adjacent to the matching element.
D, siblings () method
This method is used to obtain all peer elements before and after matching elements.
E, closest () method
It is used to obtain the latest Matching Element. First, check whether the current element matches. If yes, the element itself is returned. If no match exists, the parent element is searched up until the element matching the selector is found. If nothing is found, an empty jquery object is returned.
12, CSS-DOM operation
For example, $ ("p" ).css ("color"); // obtain the style color of the <p> element.
$ ("P" ).css ("color", "Red"); // set the style color of the <p> element to red.
A, offset () method
It is used to obtain the relative offset of an element in the current window. The returned object contains two attributes: Top and left, which are only valid for visible elements.
VaR offset = $ ("p"). offset (); // obtain the offset () of the <p> element ()
VaR left = offset. Left; // obtain the left offset.
VaR Top = offset. Top; // get the right offset
B, position () method
Get the relative offset of an element relative to the last position style attribute set to relative or absolute's grandfather node. Like offset (), the returned object also includes two attributes: Top and left.
C, scrolltop () and scrollleft () Methods
The two methods are used to obtain the distance between the element's scroll bar from the top and the left.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
