IntroductionThe DOM is the abbreviation for document Object Modeule, in general, the DOM operation is divided into 3 aspects.
1. DOM CoreDom core is not specific to JavaScript, and any kind of DOM-enabled programming language can be used, much more than web pages, or any document written in markup language, such as XML. For example: Document,getelementsbytagname ("form");//Use DOM core to get Form object methods.
2, Html-domWhen scripting HTML files with JavaScript and DOM, there are many properties that belong to Html-dom, Html-dom even earlier than Dom core, and he provides some more concise notation to describe the attributes of various HTML elements. For example: Document.forms//html-dom provides a forms object. PS: It can be seen that the acquisition of objects, properties can be achieved by using the DOM core to achieve the people, can also be implemented with Html-dom.
3, Css-domCss-dom is a CSS-based operation, in JavaScript, the main function of Css-dom is to get and set the various properties of the style object, thus reaching the Web page to render a variety of effects. For example: element.style.color= "red";//the method of setting the font color of an element.
Common Methods
1. Find ELEMENT Nodesvar $li = $ ("ul li:eq (0)");//Get the first Li under the UL Mark, can also be written as $ ("#ulID li:eq (0)");
2. Find element PropertiesUsing the attr () method of jquery to get the values of the various attributes of an element, the parameters of the attr () method can be either one or two. When the parameter is one, it is the name of the property to query. When the parameter is two, you can set the value of the property. Alert ($ ("#id"). attr ("title")); The title property of the output element. A parameter of $ ("#id"). attr ("title", "Change title value"); Change the value of the title property of an element. Two parameters
3. Adding ELEMENT Nodes$ (HTML) simply explains that the $ (HTML) method creates a DOM object based on the incoming HTML tag string and wraps the DOM object as a jquery object, in short, putting all the markup HTML code into the $ () factory! Example: var $htmlLi = $ ("<li title= ' banana ' > Banana </li>"); Create Dom object var $ul = $ ("ul"); Get UL object $ul. Append ($htmlLi); Append $htmlli to the Li list of the $ul element below to list some methods for inserting nodes
| Method |
Describe |
Example |
| Append () |
Append content to each matching element |
HTML code <ul></ul> jquery Code $ ("ul"). Append ("<li>AA</li>"); Results <ul> <li>AA</li> </ul> |
AppendTo () Pay attention to the case, I did not pass the test when appendto. |
In contrast to Append (), A.append (b) appends B to a, while Appendto () is pursuing B to a |
HTML code <ul></ul> jquery Code $ ("<li>AA</li>"). AppendTo ("ul").; Results <ul> <li>AA</li> </ul> |
| Prepend () |
Internal front content to each matched element |
HTML code <p> haha </p> jquery Code $ ("P"). Prepend ("<b>ABC</b>"); Results <p><b>ABC</b> haha </p> |
| Prependto () |
The method is opposite to prepend (), A. Prepend (b) is to place B in front of a, and prependto () is to place B forward to a |
HTML code <p> haha </p> jquery Code $ ("<b>ABC</b>"). Prependto. ("P"); Results <p><b>ABC</b> haha </p> |
| After () |
Insert content after each matched element, Yes |
HTML code <p>AAA</p> jquery Code $ ("P"). After ("<b>cc</b>"); Results <p>AAA</p><b>cc</b> |
| InsertAfter () |
And after () opposite |
HTML code <p>AAA</p> jquery Code $ ("<b>cc</b>"). After ("P"); Results <p>AAA</p><b>cc</b> |
| Before () |
Insert content before each matching element |
HTML code <p>AAA</p> jquery Code $ ("P"). Before ("<b>cc</b>"); Results <b>cc</b><p>AAA</p> |
| InsertBefore () |
And before () opposite |
HTML code <p>AAA</p> jquery Code $ ("<b>cc</b>"). InsertBefore ("P"); Results <b>cc</b><p>AAA</p> |
Well, don't be a vegetarian, try it yourself:)
4. Delete ELEMENT nodes since we need to constantly dynamically change DOM elements, jquery provides two ways to remove nodes, namely remove () and empty (); 4.1 Remove () method $ ("P"). Remove ();// We can get to the element to be deleted and then call the Remove () method $ ("ul li:eq (0)"). Remove (). AppendTo ("ul");//Remove the first Li tag under UL, and then add the deleted Li tag back to the UL, remove () method returns a reference to the deleted element, at which point you can continue to use the $ ("ul Li" ). Remove ("li[title!=abc]");//remove can accept parameters to selectively delete qualifying elements; 4.2 empty () method Strictly speaking, empty () method is not to delete the element, but to clear example: html code <ul> <li title= "AAA" >AAA</li> </ul> jquery Code $ ("ul li:eq (0)"). Empty (); results <ul> <li title= "AAA" ></li> & nbsp </ul>
Remember, the content will only be emptied and no empty attributes will be requested;Original from: Http://blog.163.com/[email protected]/blog/static/1218198712010118115844618/
jquery element Append and delete
