The difference between jquery and javascript

One of jquery's extensions to javascript, encapsulation, is to make javascript easier to use and simpler. W hat people say, jquery is to use less code, beautiful completion of more functions. JavaScript is compared to JQuery's common methods

1, load DOM difference

JavaScript：
window.onload

function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload = first;
window.onload = second;
Only the second windows.onload will be executed;
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 will be executed
}

2, get the ID

JavaScript：
document.getElementById('idName')

JQuery：
$('#idName')

3, get Class

JavaScript：
JavaScript does not have a default method for getting classes

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 child node of the body, and you can use the insertBefore() method if you want to insert a newly created p element into an existing element

JQuery：
JQuery provides four 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! Hello!
$('<b>Hello!</b>').appendTo('p'); Output: Same as above
$('p').prepend('<b>Hello!</b>');
Output: < p> Hello! World! </p>
$('<b>Hello!</b>').prependTo('p');
Output: Same as above

6, insert a new element

JavaScript：
insertBefore() syntax format:
parentElement.insertBefore(newElement,targetElement)
eg, before inserting an img element into a paragraph.

html code:
<img src="image.jpg" id="imgs" />
< p> this is a text </p >

JavaScript code:
var imgs = document.getElementById('imgs');
var para = document.getElementsByTag('p');
para.parenetNode.insertBefore(imgs,para);

JQuery：
JQuery provides four ways to insert a new element 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: Same as above
$('p').before('<b>Hello!</b>');
Output: < b> Hello! < p>World! </p>
$('<b>Hello!</b>').insertBefore('p');
Output: Same as above

7, copy 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 children of the replicated node are also copied to the new node.

JQuery：
After the clone() //copy node, the new element that is copied does not have any behavior
Clone(true)//copy the node content and its bound events
Note: This method is typically used in conjunction with methods such as appendTo(), prependTo() and so on.

8, delete the node

JavaScript：
reference = element.removeChild(node)
The removeChild() method removes a child node from a given element

JQuery：
remove();
The effect of the remove() method is to remove all matching elements from the DOM, and the remove() method can also be used in conjunction with other filter selectors, which is convenient.
eg, remove the title under ul li that is not "Hello":
$('ul li').remove(li[title!='Hello']);
empty();
The empty() method is to empty the node.

9, package node

JavaScript：
JavaScript is not 1

JQuery：
Wrap// Wraps the matching elements individually with structured markers for other elements
WrapAll()//wraps all matching elements in one element
WrapInner()//wraps the child content of the matching element with other structured markers

10, property action: set the property node, find the property node

JavaScript：
document.getElementsByTagName('tagName')

JQuery：
The settings and lookup property nodes in JQuery are: attr().
$('p').attr('title'); // Get 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 separate them with a comma in the form of a Name:Value pair.

11, replace the node

JavaScript：
reference = element.replaceChild(newChild,oldChild)
The method is to replace one child node in a given parent element with another.

JQuery：
replaceWith()、replaceAll()
eg:
<p>hello</p>
You want to replace it with:
<h2>Hi</h2>

JQuery code:
$('p') .replaceWith('<h2>Hi</h2>');
Or it could be written as:
$('<h2>Hi</h2>').replaceAll('p');

12, CSS-DOM operation

JavaScript：
Format: element.style.property
CSS-DOM's ability to read and set the properties of style objects is that it does not allow it to extract style information set by external CSS, and JQuery's .css() approach is possible.
Note: In CSS, such as "font-size" there is a "-" to use the initials lowercase hump representation, such as fontSize.

JQuery：
Format: $(selector) .css()
The css() method gets the style properties of the element
In addition, JQuery provides height(height) and width() to get the height and width of the element (both without units), while css (height), css (width) returns height and width, respectively, with units.