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-dom when 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 Nodes var $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 Properties using 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. One parameter$ ("#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>"); Creating DOM Objectsvar $ul = $ ("ul"); Get UL Object$ul. Append ($htmlLi);//Append $htmlli to the Li List of $ul elementsHere are some ways to insert a node
| Method |
Describe |
Example |
| append () |
|
html code <UL></UL> jquery Code $ ("ul"). Append ("<li>AA</li>"); results <UL> <LI>AA</LI> </UL> &NBSP; |
| appendto () pay attention to the case, I did not pass the test appendto. |
|
html Code Span style= "FONT-SIZE:18PX;" > <UL></UL> jquery Code $ ("<li>AA</li>"). AppendTo ("ul").; results <UL> <LI>AA</LI> </UL> &NBSP; |
| prepend () |
forward content to each matched element |
html code &NBSP; <p> haha </p> jquery code $ ( "P"). Prepend ("<b>ABC</b>"); results <p><b>abc</b> haha </p> |
| prependto () |
|
html code jquery Code $ ("<b>ABC</b>"). Prependto. (" P "); results <p><b>abc</b> haha </p> |
| after () |
is after |
html code <P>AAA</P> jquery Code $ ("P"). After ("<b>cc</b>"); results <P>AAA</P><B>CC</B> |
| insertafter () |
|
html code &NBSP; <P>AAA</P> jquery Code $ ("<b>cc</b>"). After ("P"); results <P>AAA</P><B>CC</B> |
| before () |
|
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 nodessince we need to constantly dynamically change DOM elements, jquery provides two ways to delete nodes, remove () and empty ();4.1 Remove () method$ ("P"). Remove ();//We can get to the element to be deleted and 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, the Remove () method returns a reference to the deleted element, and you can continue to use $ ("ul Li"). Remove ("li[title!=abc]");//remove can accept the option to delete the eligible element by the parameter;4.2 Empty () methodstrictly speaking, the empty () method does not delete the element, but empties theExample:HTML code<ul><li title= "AAA" >AAA</li></ul>jquery Code$ ("ul li:eq (0)"). empty ();Results<ul><li title= "AAA" ></li></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
