jquery is an extension of JavaScript, encapsulation, is to make JavaScript better, more simple, in order to illustrate the difference, the following with you to share the next JavaScript and jquery common methods of comparison jquery on JavaScript an extension, Encapsulation is to make JavaScript better and easier. What people say, jquery is to use less code, beautiful to complete more features. Comparison of common methods of JavaScript and jquery
1. Loading DOM Differences
Javascript:
Window.onload
function First () {
Alert (' first ');
}
function second () {
Alert (' second ');
}
Window.onload = First;
Window.onload = second;
Only the second window.onload is executed, but improvements can be made in the following ways:
Window.onload = function () {
First ();
Second ();
}
Jquery:
$ (document). Ready ()
$ (document). Ready () {
function First () {
Alert (' first ');
}
function second () {
Alert (' second ');
}
$ (document). Ready (function () {
First ();
}
$ (document). Ready (function () {
Second ();
}
Two will be executed.
}
2. Get ID
Javascript:
document.getElementById (' Idname ')
Jquery:
$ (' #idName ')
3. Get class
Javascript:
JavaScript does not have the default method of acquiring class
Jquery:
$ ('. ClassName ')
4. Get tagname
Javascript:
document.getElementsByTagName (' TagName ')
Jquery:
$ (' tagName ')
5. Create objects and add them to the document
Javascript:
var para = document.createelement (' P ');
Create a P element
Document.body.appendElement (para);
Append the P element to the LastChild child node of the body, and 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 they are inserted into 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: Ibid.
6. Inserting new elements
Javascript:
InsertBefore () syntax format:
Parentelement.insertbefore (newelement,targetelement)
eg, insert an IMG element before a paragraph.
HTML code:
<p> This is a paragraph 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 they are inserted into 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: Ibid.
$ (' P '). Before (' <b>Hello!</b> ');
Output: <b>hello!</b><p>world! </p>
$ (' <b>Hello!</b> '). InsertBefore (' P ');
Output: Ibid.
7. Replication Nodes
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 copied node are also copied to the new node.
Jquery:
Clone ()//Copy node, the new element being copied does not have any behavior
Clone (TRUE)//Copy the node content and its bound events
Note: This method is usually used in conjunction with Appendto (), Prependto (), and so on.
8. Deleting nodes
Javascript:
Reference = Element.removechild (node)
The RemoveChild () method removes a child node from a given element
Jquery:
Remove ();
The Remove () method acts to remove all matching elements from the DOM, and the Remove () method can also be used in conjunction with other filter selectors for ease of use.
eg, remove Li under the title of UL Li that is not "Hello":
$ (' ul Li '). Remove (li[title!= ' Hello ']);
Empty ();
The empty () method acts to empty the node.
9. Parcel Node
Javascript:
JavaScript is not currently
Jquery:
Wrap ()//wrap the matching element in a separate package with a structured tag of other elements
Wrapall ()//wrap all matching elements together with one element
Wrapinner ()//wrap the child content of the matching element with other structured tags
10. Attribute actions: Set attribute node, find attribute node
Javascript:
document.getElementsByTagName (' TagName ')
Jquery:
The set and find attribute nodes in jquery are: attr ().
$ (' P '). attr (' title '); Gets the title property 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 more than one property, you can use the "name: Value" Pair in the middle, separated by commas.
11. Replace node
Javascript:
Reference = Element.replacechild (Newchild,oldchild)
This method replaces one child node in a given parent element with another node.
Jquery:
ReplaceWith (), ReplaceAll ()
eg
<p>hello</p>
To be replaced by:
jquery Code:
$ (' P '). ReplaceWith (' &NBSP;
or can be written as: &NBSP;
$ ('
&NBSP;
12, css-dom operation &NBSP;
Javascript:&NBSP;
Format: Element.style.property&NBSP;
Css-dom ability to read and set properties of a Style object, The disadvantage is that it is not possible to extract style information from external CSS settings, and jquery's. css () method is possible. &NBSP;
Note: In CSS, such as "Font-size" with "-", to use the first letter lowercase camel, such as FontSize. &NBSP;
Jquery:&NBSP;
Format: $ ( selector). CSS () &NBSP;
css () method gets the style properties of an element &NBSP;
In addition, jquery provides height () and width () to get the heights and widths of the elements (both without units), while the CSS (height), CSS (width) returns high-width, with units.
Some differences between the common methods of jquery and JavaScript
