The DOM manipulation of jquery and the transformation of the native DOM

This article contains a

• jquery Common DOM Operations,
• The difference and conversion between Q and native DOM objects
• Knowledge of pseudo-array objects

If there is any mistake, please correct me.

Increase

The following methods are common: you can add more than one content at a time, which can be Dom objects, HTML string, jquery objects

Creating elements

var=$(‘<div class="test"><p><span>Done</span></p></div>‘);

There are two ways to create an element

1. Write directly to HTML
2. Pass in a native DOM

adding elements

append()

You can pass in DOM objects, HTML STRING,JQ objects, etc.;

appendTo()

Compared with the former, the primary and secondary differences; Here is the addition of a child to a parent element;

prepend()

and append() similar, but is passed to the head;

prependTo

Primary and secondary relations appendTo() ;

before()、after()

Inserts the contents in front/back of the object at the same sibling position as the object, with the same parameter type append() ;

insertBefore()、insertAfter()

and primary and before() secondary differences, the XX inserted in front of XX;

By deleting

.remove()

You can pass in a selector to filter, delete the selected element and all the self-elements;

.empty()

Remove all child elements under the element that called the method, and the calling element itself is not deleted;

Package

.wrap()

Wrapping a layer of HTML structure for objects calling this API; You can pass in SELECTOR,ELEMENT,JQ objects, HTML strings, etc.;

wrapAll()、wrapInner()

These two APIs are an wrap() extension that wraps the entire selected object, while the latter sets a layer within the selected object;

unwrap()

This method moves the parent element out of the element. This can quickly cancel the effect of the. Wrap () method. Peel off the upper-level parent element of the DOM structure of the matching elements (and their sibling elements);

HTML-related

html()

The read-write API, which can read elements when there are no parameters, innerHTML modifies the element when the string parameter is passed innerHTML .

$("p").html("Hello <b>world</b>!");

This read-write API is an important design idea of jquery, followed by a number of similar approaches;

text()

Able to read and write, manipulate the DOM innerText ;

val()

Returns or sets the value of an element, processes the value of input, and so on;

The difference and conversion between JQ and native DOM objects

The DOM object is the object we get with native JS, and the jquery object is the object obtained with the jquery class library selector. The jquery object is unique to itself and cannot be mixed with native objects, nor can DOM objects be mixed with the methods of the JQ Object!

For example, the following two lines of code have the same effect

$("#color").html();document.getElementById("color").innerHTML;$("#id").innerHTML;// 错误写法

JQ Objects > Dom

jquery provides two ways to convert a JQ object into a DOM object, i.e., [index] and get(index) because the jquery object is actually a pseudo-array Object!

var=$("#cr");//jquery对象var= $cr[0];//dom对象，也可写成 var cr= $cr.get(0);alert(cr.checked);//检测这个checkbox是否给选中

Dom Objects > JQ objects

For a DOM object, you simply wrap the DOM object with $ () and you can get a jquery object by $ (DOM object);
Copy the code code as follows:

var=document.getElementById("cr");//dom对象var=$(cr);//转换成jquery对象

Pseudo-Array objects

Let's explore further the details of the conversion of the JQuery object to the DOM object.

There is a concept in jquery that the 包装集 package set is implemented with a pseudo-array. First look at the definition and traversal of the normal array:

var= [‘iceman‘,‘mengzhe‘,‘shoushou‘,‘zhuzhu‘];for (var=0;<arr.length; i++{    console.log(arr[i]);}

The execution results output four properties in turn, which is the most normal array traversal: Define an array in literal form, add a few simple strings, and iterate through each of the outputs, which is normal in JavaScript. So what is a pseudo-array? .... It 's just a mock-up with objects!

varObjarr= {    0 : ' Iceman ',    1 : ' Mengzhe ',    2 : ' Shoushou ',    3 : ' ZhuZhu ',    length: 4} for(varI= 0;I< Objarr.length;I++){    Console.Log($objArr [i]);}

The result of the execution or the output of four properties in turn.

The above code defines an object Objarr in the form of an object literal, which is used to emulate an array, a pseudo-array object, in which the array items to be camouflaged in $arr are numbered 0, 1, 2 ... the value is the value of the original array.

JS to get the property value of an object can use Obj.prop or obj[' prop '], when the object literal in the key is the beginning of a number, with obj[' prop '] to get the value of the time can be without quotation marks, that is, Obj[prop], in the above example is objarr[1 ], objarr[2], objarr[3] ....

Do you see a sense of déjà vu here? As mentioned earlier, one of the ways that jquery objects go to native DOM objects is: jquery Object [0], and the above object literal in the form of a number is not very similar? In addition, the JQuery object. Get (0) is used internally by the jquery object [0].

Pseudo-Array validation

The object that jquery gets with the selector is wrapped into a wrapper set whose internal implementation is using a pseudo-array object:

By interrupting the point, all that is obtained with the selector encapsulates a pseudo-array object. So using $divs[0] gets the div element with the key 0 in the $divs object, which is the first DIV element.

With $divs[0] or get() obtained is the first, and obtains is the native DOM object, then if uses the selector to obtain only one element, then uses $divs[0] obtains is this element's native DOM object, this is the jquery object to the native DOM object.

With the understanding above, the native DOM object to the jquery object is much simpler to understand, the $ (Native DOM object) way can convert the native DOM object into a jquery object, in fact $ is a method in which the native DOM object is passed into the $ method, In this method, the native DOM object is further processed and made into a wrapper set, which is a pseudo-array object.

The DOM manipulation of jquery and the transformation of the native DOM