Jquery DOM operations

Jquery DOM operations

Title

• 1
• 2
• 3

1 dom node:

Element Node:

Var $ li = $ (". nm_ul li: eq (3)"); // obtain the second element node

Var li_txt = $ li. text (); // obtain the text of the second element.

2 element attribute nodes:

Var p_txt = $ (". nm_p"). attr ('title ');

3. Add nodes:

Var $ li_1 = $ ("

Aaa

");

Var $ li_2 = $ ("

Bbb

");

Var $ app = $ (". nm_ul ");

$ App. appent ($ li_1 );//Add ul

Node


4. Insert nodes:

Hello!

$ ("Hello!"). AppentTo (" p ");

$ ("P"). appent ("Hello!");

$ ("P"). before ("Hello!");

$ ("P"). after ("Hello!");

5. attribute settings of node elements:

$ ("P"). attr ("title": "title", "name": "body content"); // attribute name/value

$ ("P"). removeAttr ("title"); // delete an attribute

6. Style settings, append, remove, and replace:

. Meetings {

Background-color: # FF4400;

Color: # fff;

}
. Another {

Background-color: # f8f8f8;

Color: red;

Text-align: center;

}

$ ("# Btn_1"). click (function (){

$ ("P "). addClass ("another"); // if multiple class values are added to an element, the style is merged. If different classes set the same style attribute, the latter overwrites the former.

$ ("P"). removeClass ("meetings another"); // remove the class style

});

$ (). Toggle (function () {// toogle () method, execute two functions alternately, and switch again

$ ("P"). addClass ("meetings ");

}, Function (){

$ ("P"). addClass ("another"); // $ ("p" ).css ("color", "red ");

});

If ($ ("p "). hasClass ("meetings") {// determines whether a style exists, equivalent to $ ("p "). is (". meetings ");

$ ("P"). addClass ("another ");

}

7. Obtain html content, text, or value

$ ("P" 2.16.html ();

$ ("P" ).html ("aaaaaaaaaaaa .......");

$ ("P"). text ();

$ ("P"). text ("bbbbbbbbbbbbbbb .......");

$ ("Input_1"). val ();

$ ("Input_1"). val ("cccccccccccc ......");

8. Operate style attributes

$ ("P" ).css ("color"); // gets the color Style of the p element.

$ ("P" ).css ("color", "red ");

$ ("P" ).css ({"color": "red", "font-size": "30px", "font-family": "inherit ";}); // set multiple styles

$ ("P" ).css ("height"); // related to style settings

$ ("P"). height (); // The actual height of the element on the page-the corresponding width

Var off = $ ("p"). offset (); // get the offset () of the p element ()

Var left = off. left;

Var top = off. top;