06-jquery Document Operations * * *

Before JS in we learned the DOM operation JS, that is, the so-called additions and deletions to check DOM operation. Through the operation of JS Dom, we can also find that a lot of cumbersome code to achieve the effect we want. Then the jquery Documentation API provides a convenient way for us to manipulate our documentation.

Look at a previous example of our JS operation Dom:

var Oul = document.getelementsbytagname (' ul ') [0];var oLi = document.createelement (' li '); oli.innerhtml = ' Zhao Yun '; o Ul.appendchild (OLi);

I. Insert operation Knowledge POINT 1:

Grammar:

Parent element. Append (child element)

Explanation: Appends an element and adds a new child element to the parent element. Child elements can be: stirng | Element (JS object) | jquery elements

The code is as follows:

var oli = document.createelement (' li '); oli.innerhtml = ' hahaha '; $ (' ul '). Append (' <li>1233</li> '); $ (' ul '). Append (Oli); $ (' ul '). Append ($ (' #app '));

PS: If the jquery object is appended, then these elements will disappear from the original position. In short, it's a move operation.

Knowledge Point 2:

Grammar:

child element. AppendTo (parent Element)

Explanation: Appending a child element to an element is added to the parent element

$ (' <li> King cover the Tiger </li> '). AppendTo ($ (' ul ')). addclass (' active ')

PS: The element to be added can also be stirng, Element (JS object), jquery element

Knowledge point 3:

Grammar:

The parent element. Prepend (child element);

Explanation: Pre-Add, add to first position of parent element

$ (' ul '). Prepend (' <li> I was the first </li> ')

Knowledge point 4:

Grammar:

The parent element. Prependto (child element);

Explanation: Post-Add, add to the last position of the parent element

$(‘<a href="#">路飞学诚</a>‘).prependTo(‘ul‘)

Knowledge Point 5:

Grammar:

The parent element. After (child element);
child element. Inserafter (parent element);

Explanation: Inserting content after a matching element

$(‘ul‘).after(‘)$(‘).insertAfter(‘ul‘)

Knowledge Point 6:

Grammar:

The parent element. Before (child element);
child element. Inserbefore (parent element);

Explanation: Inserting content after a matching element

$(‘ul‘).before(‘)$(‘).insertBefore(‘ul‘)

Second, cloning operation

Grammar:

$ (selector). Clone ();

Explanation: Cloning a matching DOM element

$ (' button '). Click (function () {  //1.clone (): Clones the matching DOM element//2.clone (TRUE): The element is processed with all its events and a copy of these clones is selected (in short, The copy has the same event handling power as the true one)  $ (this). Clone (True). InsertAfter (this);})

Third, the modification operation Knowledge Point 1:

Grammar:

$ (selector). replacewith (content);

Replaces all matching elements with the specified string, JS object, and jquery object.

Replace all H5 titles with a label $ (' H5 '). ReplaceWith (' <a href= ' # ' >hello world</a> ')//Replace all H5 title tags with the DOM element ID for App $ (' H5 '). ReplaceWith ($ (' #app '));

Knowledge Point 2:

Grammar:

$ (' <p> ha ha </p> ') replaceall (' H2 ');

Explanation: Replace All. Replace all H2 tags with p tags.

$ (' <br/>
4. Delete operation
Knowledge point 1:
Grammar:
Explanation: When the node is deleted, the event is also deleted (in short, the entire label is deleted)
$ (' ul '). Remove ();
Knowledge Point 2:
Grammar:
Explanation: When a node is deleted, the event is preserved
var $btn = $(‘button‘).detach() //此时按钮能追加到ul中 $(‘ul‘).append($btn)
Knowledge point 3:
Grammar:
Explanation: Emptying all descendant nodes in the selected element
//清空掉ul中的子元素，保留ul$(‘ul‘).empty()
06-jquery Document Operations * * *