[Sharp jQuery] learning notes 03. jquery learning notes

[Sharp jQuery] learning notes 03. jquery learning notes
Chapter 3 DOM operations in jQuery I. Classification of DOM operations

DOM (document object model) is an interface unrelated to browsers, platforms, and languages. You can use this interface to access all components on the page. DOM operations can be divided into DOM Core, HTML-DOM and CSS-DOM.

Ii. jQueryDOM operations-node operations

• Search nodes

You can directly use the selector for search.

1 var $ li = $ ("ul li: eq (1)"); // obtain the second li node in ul 2 var li_text = $ li. text (); // get the text content of the second li Element Node 3 alert (li_text); // print the text content

2. Search for Attribute nodes

After finding the element node, use the attr () method to obtain the attribute of the element. When the attr () method is passed in as a parameter, the value of this attribute is obtained, and two parameters are passed in to set the value for this attribute.

1 var $ para = $ ("p"); // get p Node 2 var pra_ti = $ para. attr ("class"); // get the class attribute value of the p element node 3 $ para. attr ("class", "para"); // set the class attribute value of the p element node to para

• Create a node

Two steps are required to create an element node: 1) create a new element node 2) insert the node into the document. The $ (html) method creates a DOM object based on the input HTML Tag string, encapsulates the DOM object into a jQuery object, and returns the result.

PS: dynamically created new element nodes are stored in the memory by default and will not be automatically added to the document. You need to use other methods to insert them into the document.

1 var $ li = $ ("<li> I am a newly added li node </li>"); // create a new element node 2 $ ("ul "). append ($ li); // Add it to ul to display it on the webpage

2. Create a text node

The $ (html) method is used to create a text node. You only need to write the text content to be added to the html string. (The $ (html) method can be used regardless of the complexity of html code)

3. Create an attribute node

Attribute nodes are also created when an element node is created.

Var $ li = $ ("<li class = 'new _ li'> I am a newly added li node </li> "); // create a new li element, including the element node, text node, and attribute node $ ("ul "). append ($ li); // Add it to ul to display it on the webpage

• Insert Node

Method	Description	Instance
Append ()	Append content to the element	HTML code: <P> I want to say: </p> JQuery code: $ ("P"). apppend ("<B> Hello </B> "); Result: <P> I want to say: <B> Hello </B> </p>
AppendTo ()	Add an element to the specified element. $ (A). sppendTo (B) appends A to B.	HTML code: <P> I want to say: </p> JQuery code: $ ("<B> Hello </B>"). apppendTo ("p "); Result: <P> I want to say: <B> Hello </B> </p>
Prepend ()	Add content to the front of an element	HTML code: <P> I want to say: </p> JQuery code: $ ("P"). prepend ("<B> Hello </B> "); Result: <P> <B> Hello </B> I want to say: </p>
PrependTo ()	Add the element to the front of the specified element. $ (A). prependTo (B) is to insert A to the front of B.	HTML code: <P> I want to say: </p> JQuery code: $ ("<B> Hello </B>"). prependTo ("p "); Result: <P> <B> Hello </B> I want to say: </p>
After ()	Append content to the element	HTML code: <P> I want to say: </p> JQuery code: $ ("P"). after ("<B> Hello </B> "); Result: <P> I want to say: </p> <B> Hello </B>
InsertAfter ()	After an element is appended to A specified element, $ (A). insertAfter (B) appends A to B.	HTML code: <P> I want to say: </p> JQuery code: $ ("<B> Hello </B>"). insertAfter ("p "); Result: <P> I want to say: </p> <B> Hello </B>
Before ()	Append content to element	HTML code: <P> I want to say: </p> JQuery code: $ ("P"). before ("<B> Hello </B> "); Result: <B> Hello </B> <p> I want to say: </p>
InsertBefore ()	Add the element to the front of the specified element. $ (A). insertBefore (B) is to insert A to the front of B.	HTML code: <P> I want to say: </p> JQuery code: $ ("<B> Hello </B>"). insertBefore ("p "); Result: <B> Hello </B> <p> I want to say: </p>

• Delete a node

Removes all matching elements from the DOM. After the node is deleted by using the remove () method, all child element contained in the node will be deleted at the same time. The return value of this method is a reference pointing to the deleted node. You can use these elements later.

1 var $ li = $ ("ul li: eq (1 )"). remove (); // get the second li node and delete it from the webpage 2 $ li. appendTo ("ul"); // Add the deleted element to ul

This code is actually equivalent:

$ ("Ul li: eq (1 )"). appendTo ("ul"); // The appendTo () method can also be used to move an element. When moving an element, delete the element from the document, and insert the element to the specified node of the document.

You can also use the remove () method to delete an object by passing a parameter. Eg: $ ("ul li"). remove ("li [title! = Pineapple] ")

2. detach () method

Like remove (), detach () also deletes matching elements from the DOM. However, this method does not delete the matching elements from the jQuery object, and all bound events and additional data will be retained.

1 $ ("ul li "). click (function () {2 alert(%(this%.html (); 3}); 4 var $ li = $ ("ul li: eq (1 )"). detach (); // Delete element 5 $ li. appendTo ("ul"); // re-append this element and find that the previously bound event is still in progress. If you use remove () to delete the element, the previously bound event will become invalid.

3. empty () method

Strictly speaking, it is not a method to delete a node, but to clear the node. It can be used for all the child nodes in the element.

$ ("Ul li: eq (1)"). empty (); // after obtaining the second li node, clear the content in this element.

• Copy a node

$ ("Ul li "). click (function () {$ (this ). clone (). appendTo ("ul"); // copy the currently clicked node and append it to ul });

After the clone () method is used to copy the node, it is also saved in the memory and needs to be appended to the document. The copied element does not have any behavior. If you want it to have a click event, you can:

$ (This). clone (true). appendTo ("body"); // input the parameter true

Input the parameter true in the clone () method to copy the binding event of the element while copying the element.

• Replace Node

 

 

Replaces all matched elements with specified html or DOM elements.

$ ("P"). replaceWith ("<strong> what kind of fruit do you dislike? </Strong> ");

2. replaceAll ();

The replayWith () method works the same way, but the operations are reversed.

$ ("<Strong> what kind of fruit do you like? </Strong> "). replayceAll (" p ");

• Package Node

Wrap a node with other tags, without compromising the semantics of the original document, and enclose all elements separately.

$ ("Strong"). wrap ("<B> </B>"); // use the B label to wrap the strong element.

The HTML result is as follows:

<B> <strong> what is your favorite expensive water? </strong> </B> <strong> what is your favorite water expensive? </strong> </ b> <strong> your favorite expensive water is/</strong> </B>

2. wrapAll ()

Enclose matched elements with one element.

$("strong").wrapAll("<b></b>");

The HTML result is as follows:

<B> <strong> your favorite expensive water is/</strong> <strong> your favorite expensive water is /</strong> </B>

3. wrapInner ()

Enclose the child content (including text nodes) of each Matching Element with other structured tags.

$("strong").wrapInner("<b></b>");

The HTML result is as follows:

<Strong> <B> what is your favorite expensive water? </B> </strong>

Iii. jQueryDOM operations-attribute operations

• Get and set attributes

To obtain an attribute, you only need to input a parameter attr (), that is, the attribute name. If you want to set the property value, two parameters are passed in: The property name and the corresponding value.

Var p_txt = $ ("p "). attr ("class"); // obtain the node Attribute class of p $ ("p "). attr ("class", "para"); // set the node Attribute class of p to para $ ("p "). attr ({"class": "para", "title": "test"}); // you can specify multiple attributes at a time.

• Delete attributes

Use removeAttr () to delete the object.

Iv. jQueryDOM operations-style operations

• Getting and setting styles

You can use the attr () method to obtain and set styles.

• Append Style

Use addClass () to append a style. If an element is added with multiple class values, it is equivalent to merging the style. If different classes have the same style attribute set, the latter overwrites the former.

• Remove Style

Use removeClass () to delete all or specified classes from the matching element. Multiple class names can be deleted by spaces. RemoveClass () deletes all classes without parameters.

• Change style

The toggle () method is used to display elements if the elements are hidden. If the elements are hidden, the switching between hidden elements is repeated. ToggleClass () implements repeated switching between adding and deleting class names.

• Determines whether a style exists.

HasClass () determines whether a class exists. If yes, true is returned and false is not returned.

5. jQueryDOM operations-set to get html, text, and values

You can also use the val () method to select, checkbox, and radio options. Eg: $ (": checkbox"). val (["check2", "check3"]);

V. jQueryDOM operations-Traverse nodes

Method	Description	Example
Parent ()	Obtains the parent element of each matching element.	$ (". Item-1" ).parent().css ("color", "red "); The query starts from the direct parent node of the specified type. Returns an element node.
Parents ()	Obtains the ancestor element of each matching element.	$ (". Item-1" 2.16.parents(2.16.css ("color", "red "); Start searching from the direct parent node of the specified type, and find the first parent node to continue searching. Returns multiple parent nodes.
Closest ()	From the element itself, the first matched ancestor element is matched to the parent element level by level and returned.	$ (". Item-1" 2.16.closest(2.16.css ("color", "red "); Start from the node that contains itself. Returns the first matched element node.

Vi. css dom operations

CSSDOM operations are used to read and set various attributes of a style object. You can use the css () method to obtain the style attributes of an element, whether it is external css or Inline css. In this method, if the input value is a number, it is automatically converted to a pixel value.

When you want to get the element height, you can use $ ("p" ).css ("height") to get it. jQuery also has a dedicated method to get the width and height of the element. $ ("P"). height () can also go to the height of the element.

PS: The height value obtained by css () is related to the set value, and auto may be obtained. Height () obtains the actual height of the element without the unit.