The difference between jquery and JavaScript (common method comparisons)

jquery is an extension of JavaScript, encapsulation, is to make JavaScript better use, simpler. What others say, jquery is to use less code, beautiful to complete more functions. JavaScript and jquery common methods comparison





1, load dom difference





JavaScript:


window.onload





function A () {


alert (' a ');


}


function Second () {


alert (' second ');


}


window.onload = A;


window.onload = second;


//will only execute the second window.onload, but it can be improved by the following methods:


window.onload = function () {


A ();


second ();


}





Jquery:


$ (document) ready ()





$ (document). Ready () {


function A () {


alert (' a ');


}


function Second () {


alert (' second ');


}


$ (document). Ready (function () {


A ();


}


$ (document). Ready (function () {


second ();


}


//Two will perform


}





2, get ID





JavaScript:


document.getElementById (' idname ')





JQuery:


$ (' #idName ')





3, get class





JavaScript:


JavaScript does not have the default method of getting class





JQuery:


$ ('. ClassName ')





4, get tagname





JavaScript:


document.getelementsbytagname (' tagName ')





JQuery:


$ (' tagName ')





5, create the object and add it to the document





JavaScript:


var para = document.createelement (' P ');


//Create a P element


Document.body.appendElement (para);


//Adds the P element as the LastChild child node of the body, you can use the InsertBefore () method if you want to insert the newly created P element into an existing element





JQuery:


jquery provides 4 ways to insert new elements before or after an existing element (internal): Append (), Appendto (), prepend (), Prependto ().


format: $ (HTML);


eg,html Code:


<p>World!</p>


$ (' P '). Append (' <b>Hello!</b> ');


//Output:<p>world!<b>hello!</b></p>


$ (' <b>Hello!</b> '). Appendto (' P '); Output: Ibid.


$ (' P '). prepend (' <b>Hello!</b> ');


//output: <p><b>hello!</b>world! </p>


$ (' <b>Hello!</b> '). Prependto (' P ');


//output: Ditto





6, insert new element





JavaScript:


insertbefore () syntax format:


Parentelement.insertbefore (newelement,targetelement)


eg, insert an IMG element before inserting a paragraph.





HTML code:


<img src= "image.jpg" id= IMGs "/>"


<p> This is a piece of text </p>





JavaScript code:


var IMGs = document.getElementById (' IMGs ');


var para = document.getelementsbytag (' P ');


Para.parenetNode.insertBefore (Imgs,para);





JQuery:


jquery provides 4 ways to insert new elements before or after an existing element (external): After (), InsertAfter (), before (), InsertBefore ().


format: $ (HTML);


eg,html Code:


<p>World!</p>





jquery Code


$ (' P '). After (' <b>Hello!</b> ');


//output: <p>world! </p><b>Hello!</b>


$ (' <b>Hello!</b> '). InsertAfter (' P ');


//output: Ditto


$ (' P '). Before (' <b>Hello!</b> ');


//output: <b>hello!</b><p>world! </p>


$ (' <b>Hello!</b> '). InsertBefore (' P ');


//output: Ditto





7, replication node





JavaScript:


reference = Node.clonenode (deep)


This method has only one Boolean parameter, and its desirable value can only be true or false. This parameter determines whether the child nodes of the replicated node are also copied to the new node.





JQuery:

After the
clone ()//Replication node, the new element being copied does not have any behavior


Clone (TRUE)//Copy node content and its bound event


Note: This method is commonly used in combination with Appendto (), Prependto () and other methods.





8, delete node





JavaScript:


reference = element.removechild (node)

The
removechild () method deletes a child node from a given element





JQuery:


Remove ();

The
Remove () method removes all matching elements from the DOM, and the Remove () method can also be used in conjunction with other filter selectors.


eg, will be under the title of the UL Li is not "Hello" Li removal:


$ (' ul Li '). Remove (li[title!= ' Hello '));


empty ();

The
Empty () method is to empty the node.





9, parcel node





JavaScript:


JavaScript No





JQuery:


wrap ()///The matching elements are wrapped separately with the structured markup of the other elements


Wrapall ()///wrap all matching elements in one element


Wrapinner ()///To wrap the child contents of the matching element with other structured tags





10, Property action: Set property node, lookup attribute node





JavaScript:


document.getelementsbytagname (' tagName ')





JQuery:

The set and lookup attribute nodes in
jquery are: attr ().


$ (' P '). attr (' title '); Gets the title attribute of the P element;


$ (' P '). attr (' title ', ' My title '); Set the Title property of the P element


$ (' P '). attr (' title ': ' My title ', ' class ': ' MyClass '); When you need to add multiple properties, you can use the form "name: value" pairs, separated by commas in the middle.





11, replacement node





JavaScript:


Reference = Element.replacechild (newchild,oldchild)


This method replaces a child node in a given parent element with another node.





JQuery:


replacewith (), ReplaceAll ()


eg:


<p>hello</p>


to be replaced by:


<h2>Hi</h2>





jquery Code:


$ (' P '). ReplaceWith (' <h2>Hi</h2> ');


or can be written as:


$ (' <h2>Hi</h2> '). ReplaceAll (' P ');





12, css-dom operation





JavaScript:


format: Element.style.property


Css-dom can read and set the properties of a Style object, which is not enough to extract style information from external CSS settings, and jquery's. css () method is possible.


Note: CSS in the "font-size" such as "-", you want to use the first-letter lowercase camel-style representation, such as fontsize.





JQuery:


format: $ (selector). CSS ()


css () method gets the style properties of an element


In addition, jquery provides the height () and width () of the elements to get the heights and widths (all without units), while the CSS (height), CSS (width) returns a high width, with units.