The difference between jquery and javascript (comparison of common methods)_Basic knowledge

jquery is an extension and encapsulation of javascript, which makes javascript more usable and simpler. As people say, jquery uses less code to complete more functions beautifully. Comparison of common methods between JavaScript and JQuery

1. Differences in 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, it can be improved by the following method:
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 two will be executed
}

2. Get ID

JavaScript:
document.getElementById('idName')

JQuery:
$('#idName')

3. Get Class

JavaScript:
JavaScript has no 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);
//Append the p element as the lastchild child node of the body. If you want to insert the newly created p element into an existing one Before the element, you can use the insertBefore() method

JQuery:
JQuery provides 4 methods for inserting new elements before or after existing elements (inside): append(), appendTo(), prepend(), 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 element

JavaScript:
insertBefore() Syntax format:
parentElement.insertBefore(newElement,targetElement)
eg, 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 4 types of new elements Methods for inserting before or after existing elements (external): after(), insertAfter(), before(), 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 node

JavaScript:
reference = node.cloneNode(deep)
This method has only one Boolean parameter, and its possible 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() //After copying the node, the copied new element does not have any behavior
clone(true) //Copy the node content and its bound events
Remarks: This method is usually used in combination with appendTo(), prependTo() and other methods.

8. Delete node

JavaScript:
reference = element.removeChild(node)
removeChild() method deletes one from a given element Child node

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

9. Wrap node

JavaScript:
JavaScript not available yet

JQuery:
wrap() //Wrap matching elements with Wrap the structured tags of other elements separately
wrapAll() //Wrap all matching elements with one element
wrapInner() //Wrap the sub-content of matching elements with other structured tags

10. Attribute operations: setting attribute nodes, finding attribute nodes

JavaScript:
document.getElementsByTagName('tagName')

JQuery:
Setting and searching attribute nodes in JQuery are both: attr().
$('p').attr('title'); //Get the title attribute of the p element;
$('p').attr('title','My title'); // Set the title attribute of the p element
$('p').attr('title':'My title','class':'myClass'); //When you need to add multiple attributes, you can use "name" :Value" pairs, separated by commas.

11. Replace node

JavaScript:
reference = element.replaceChild(newChild,oldChild)
This method is to replace a given parent element with Replace a child node with another node.

JQuery:
replaceWith(), replaceAll()
eg:

hello

Want to replace with:

Hi

JQuery code:
$('p') .replaceWith('

Hi

');
Or it can be written as:
$('

Hi

').replaceAll('p');

12. CSS-DOM operation

JavaScript:
Format: element.style.property
CSS-DOM can read and set the properties of the style object. Its disadvantage is that it cannot extract the style information set by external CSS, while JQuery's .css() method can.
Note: If there is a "-" in CSS such as "font-size", use camel case with the first letter lowercase, such as fontSize.

JQuery:
Format: $(selector).css()
css() method to get the style attribute of the element
In addition, JQuery also provides height() and width() respectively Used to obtain the height and width of the element (without units), while css(height) and css(width) return the height and width with units.