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