Using jquery to manipulate the DOM

Html
Xhtml
Xml

1.DOM operation

Dom operations are divided into three categories:
Dom Core: Any programming language that supports the DOM can use it, such as getElementById ()
Html-dom: For working with HTML documents, such as Document.forms
Css-dom: For manipulating CSS, such as element.style.color= "green"

Tip: JavaScript is used to manipulate the (x) HTML document, which provides support for all three types of DOM operations

Dom operations in 2.jQuery

jquery encapsulates DOM operations in JavaScript

Style actions

Content and value operation
Node operations
Node Property operations
Node traversal
Css-dom operation

Using jquery to manipulate styles
JQUERY.CSS ("Background", "Red");
Jquery.css ({"Background": "Red", "font-size": "25px"});

Append style

$ (selector). AddClass (Class);
or $ (selector). addclass (Class1 class2 ... classn);

Remove Style

$ (selector). Removeclass ("class");
or $ (selector). Removeclass ("Class1 class2 ... classn");

The difference between the 3.html () and the text () methods

4. Form elements
One: <input type= "" >
2 Kinds: Select option
3 Kinds: TextArea
2. $ (selector) $ ("div") jquery object
$ (obj) $ (DOM) Dom converted to jquery
$ ("html") var mydiv=$ ("<div> I Am div</div>") created a node

5. Remove node (backup/Restore) detach (detach) attach (Attach)

Remove (remove)
Empty (empty)
Detach (separation)

Clone (copy)

6. To create an object, there are four ways
1>new level at the lowest level
2> Factory functions

Factory function $ () to get or create a node
$ (selector): Get node through selector
$ (Element): Convert DOM nodes to jquery nodes
$ (HTML): Creating jquery nodes with HTML strings

3> Reflex Person.class
Clone
7.json
Positioning: is a data interchange format

8. Node traversal

1> traversing child elements

The children () method can be used to get all the child elements of an element

var $section =$ ("section"). Children (); alert ($section. length);

　　

2> traversing peer elements

jquery can get all the sibling elements that are immediately behind, immediately before and before and after the element

3> traversal of predecessor elements

You can traverse the predecessor element in jquery
Parent (): Gets the element's parents element
Parents (): ancestor element of element element

$ ("Li:eq (1)"). Parent (). addclass ("orange"); $ ("Li:eq (1)"). Parents (). addclass ("orange");

　　

4> Other traversal methods

Each (): Specifies the function to run for each matching element

$ ("img"). Click (function () {       $ ("Li"). each (function () {           var str=$ (). Text () + "<br>";           $ ("section"). append (str);       })   ;

End (): Ends the most recent filter operation in the current chain and restores the matched element set to its previous state

$ (". Contain:header"). CSS ({"Background": "#2a65ba", "Color": "#ffffff"}), $ (". Gamelist li"). First (). CSS ("Background" , "#b8e7f9"). End (). Last (). CSS ("Background", "#d3f4b5"), $ (". Gamelist li:last"). CSS ("border", "none");

　　

Using jquery to manipulate the DOM