Conversion between jQuery objects and dom objects

Conversion between jQuery objects and dom objects
IntroductionDOM is the abbreviation of Document Object Modeule. Generally, DOM operations are divided into three aspects.1. DOM CoreDOM Core is not specialized in javascript, and can be used by any programming language that supports DOM. Its purpose is far more than just webpage, it can also be used to process any document written in a markup language, such as XML. For example, document, getElementsByTagName ("form"); // use DOM Core to obtain form objects. A front-end UI framework that can improve development efficiency by 500%!2. HTML-DOMWhen writing scripts for HTML files using Javascript and DOM, there are many properties that belong to the HTML-DOM that appear even earlier than DOM Core, it provides some more concise marks to describe the attributes of various HTML elements. For example: document. forms // The HTML-DOM provides a forms object. PS: we can see that the get object, attributes can be achieved with DOM Core, can also be achieved by HTML-DOM.3. CSS-DOMCSS-DOM is for CSS operations, in javascript, the main role of CSS-DOM is to obtain and set the style object of various attributes, thus achieve the web page presents a variety of effects. for example, element. style. color = "red"; // you can specify the font color of an element.Common Methods1. Search for element nodesVar $ li = $ ("ul li: eq (0)"); // obtain the first li under the ul mark. You can also write it as $ ("# ulID li: eq (0 )");2. Search for element attributesThe attr () method of jquery is used to obtain the values of various attributes of an element. The attr () method can be either a parameter or two. A front-end UI framework that can improve development efficiency by 500%! When a parameter is set, it is the name of the property to be queried. If the parameter is set to two, you can set the attribute value. Alert ($ ("# id "). attr ("title"); // The title attribute of the output element. A parameter $ ("# id "). attr ("title", "Change title value"); // change the title attribute value of an element. two Parameters3. Add element nodes$ (Html): The $ (html) method creates a dom object based on the input html Tag string and packs the dom object into a jquery object, in short, you just need to put all the html code marked in the $ () factory! For example, var $ htmlLi = $ ("

Bananas

"); // Create the DOM object var $ ul = $ (" ul "); // obtain the UL object $ ul. append ($ htmlLi); // append $ htmlLi to the li list of $ ul Elements

The following describes how to insert some nodes.

Method	Description	Example
Append ()	Append content to each Matching Element	HTML code JQuery code $ ("Ul"). append (" AA "); Result AA
AppendTo () Note that the appendto fails during the test.	This method is opposite to Append (). a. Append (B) appends B to a, while appendTo () appends B to.	HTML code JQuery code $ (" AA "). AppendTo (" ul ").; Result AA
Prepend ()	Forward content to each Matching Element	HTML code can improve development efficiency by 500%! Haha JQuery code $ ("P"). prepend ("ABC"); Result ABCHaha
PrependTo ()	This method is opposite to Prepend (). a. Prepend (B) is to forward B to a, while prependTo () is to forward B to.	HTML code Haha JQuery code $ ("ABC"). PrependTo. (" p "); Result ABCHaha
After ()	Insert content after each matching element,Yes	HTML code AAA JQuery code $ ("P"). After ("Cc"); Result AAA Cc
InsertAfter ()	Opposite to After ()	HTML code AAA JQuery code $ ("Cc"). After (" p "); Result AAA Cc
Before ()	Insert content before each Matching Element	HTML code AAA JQuery code $ ("P"). Before ("Cc"); Result Cc AAA
InsertBefore ()	Opposite to Before ()	HTML code AAA JQuery code $ ("Cc"). InsertBefore (" p "); Result Cc AAA

4. Delete element nodesBecause we often need to dynamically change DOM elements, Jquery provides two methods to delete nodes: remove () and empty (); a front-end UI framework that can improve development efficiency by 500%! 4.1 remove () method $ ("p "). remove (); // we can get the element to be deleted, and then call the remove () method $ ("ul li: eq (0 )"). remove (). appendTo ("ul"); // Delete the first li mark under ul, and then add the deleted li mark to ul. The remove () method returns the reference of the deleted element, then you can continue to use $ ("ul li "). remove ("li [title! = ABC] "); // remove can selectively Delete elements that meet the conditions through parameters. 4.2 The empty () method is not a delete element strictly, but empty the example: HTML code. code

1. • AAA
2. JQuery code
3. $ ("Ul li: eq (0)"). empty ();
   Result: the front-end UI framework can improve development efficiency by 500%! . Code
   1. Remember, only the content is cleared, and the attribute is not empty;