Using jquery to manipulate the DOM

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.