Jquery is an extension and encapsulation of javascript, which makes javascript easier and easier to use. To illustrate the differences, next I will share with you the JavaScript and JQuery common methods. jquery is an extension of javascript, encapsulation, that is, making javascript easier to use and use. What people say is jquery is to use less code to perform more functions beautifully. Comparison of common JavaScript and JQuery Methods
1. Differences between loading DOM
JavaScript:
Window. onload
Function first (){
Alert ('first ');
}
Function second (){
Alert ('second ');
}
Window. onload = first;
Window. onload = second;
// Only the second window. onload will be executed; however, you can improve it using the following methods:
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 ();
}
// Both are executed
}
2. Get the ID
JavaScript:
Document. getElementById ('idname ')
JQuery:
$ ('# Idname ')
3. Get the Class
JavaScript:
JavaScript does not have the default method to get the class.
JQuery:
$ ('. Classname ')
4. Get TagName
JavaScript:
Document. getElementsByTagName ('tagname ')
JQuery:
$ ('Tagname ')
5. Create an object and add it to the document
JavaScript:
Var para = document. createElement ('P ');
// Create a p element
Document. body. appendElement (para );
// Append the p element to the lastchild subnode of the body. If you want to insert the newly created p element to an existing element, you can use the insertBefore () method.
JQuery:
JQuery provides four methods to insert new elements before or after an existing element (internal): append (), appendTo (), prepend (), and prependTo ().
Format: $ (html );
Eg, html code:
World!
$ ('P'). append ('
Hello!');
// Output:
World!Hello!
$ ('
Hello!'). AppendTo ('P'); // output: Same as above
$ ('P'). prepend ('
Hello!');
// Output:
Hello!World!
$ ('
Hello!'). PrependTo ('P ');
// Output: Same as above
6. Insert new elements
JavaScript:
Syntax format of insertBefore:
ParentElement. insertBefore (newElement, targetElement)
For example, insert an img element before a paragraph.
Html code:
This is a piece of text.
JavaScript code:
Var imgs = document. getElementById ('imgs ');
Var para = document. getElementsByTag ('P ');
Para. parenetNode. insertBefore (imgs, para );
JQuery:
JQuery provides four methods to insert new elements before or after an existing element (external): after (), insertAfter (), before (), and insertBefore ().
Format: $ (html );
Eg, html code:
World!
JQuery code
$ ('P'). after ('
Hello!');
// Output:
World!
Hello!
$ ('
Hello!'). InsertAfter ('P ');
// Output: Same as above
$ ('P'). before ('
Hello!');
// Output:
Hello!
World!
$ ('
Hello!'). InsertBefore ('P ');
// Output: Same as above
7. Copy nodes
JavaScript:
Reference = node. cloneNode (deep)
This method has only one Boolean parameter, and its value can only be true or false. This parameter determines whether to copy the child nodes of the copied node to the new node.
JQuery:
After cloning () // copying a node, the copied new element does not have any behavior
Clone (true) // copy the node content and its bound events
Note: This method is usually used in combination with appendTo (), prependTo (), and other methods.
8. delete a node
JavaScript:
Reference = element. removeChild (node)
The removeChild () method deletes a subnode from a given element.
JQuery:
Remove ();
The remove () method is used to delete all matching elements from the DOM. The remove () method can also be used with other filter selectors, which is very convenient.
For example, remove the li with the title not "Hello" under ul li:
$ ('Ul li'). remove (li [title! = 'Hello']);
Empty ();
The empty () method is used to clear nodes.
9. Package nodes
JavaScript:
No JavaScript
JQuery:
Wrap () // enclose matching elements separately with the structural tags of other elements
WrapAll () // wrap all matching elements with one element
WrapInner () // wrap the child content of the matching element with other structured tags
10. Attribute operations: set attribute nodes and search for Attribute nodes
JavaScript:
Document. getElementsByTagName ('tagname ')
JQuery:
In JQuery, the set and search attribute nodes are both attr ().
$ ('P'). attr ('title'); // obtain the title attribute of the p element;
$ ('P'). attr ('title', 'My title'); // you can specify the title attribute of the p element.
$ ('P '). attr ('title': 'My title', 'class': 'myclass'); // you can use "Name: value pairs separated by commas.
11. Replacing nodes
JavaScript:
Reference = element. replaceChild (newChild, oldChild)
This method replaces a child node in a given parent element with another node.
JQuery:
ReplaceWith (), replaceAll ()
Eg:
Hello
To replace it:
Hi
JQuery code:
$ ('P'). replaceWith ('Hi ');
Or you can write it as follows:
$ ('Hi'). replaceAll ('P ');
12. CSS-DOM operation
JavaScript:
Format: element. style. property
The terminate () method is acceptable.
NOTE: If "font-size" is like "-" in CSS, it must be indicated in the upper case of the first letter, such as fontSize.
JQuery:
Format: Optional (selector).css ()
The css () method is used to obtain the style attributes of an element.
In addition, JQuery also provides height () and width () for obtaining the height and width of elements (both without unit), while css (height) and css (width) returns the height and width in units.
