Detailed explanation of the differences between JavaScript and JQuery common methods with examples

jquery is an extension library and encapsulation library for javascript, which makes javascript easier to use and simpler. jQuery is about using less code and completing more functions beautifully.

Comparison examples of common methods between JavaScript and JQuery are as follows:

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 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(); 
} 
//两条均会执行 
}

2. Get ID
JavaScript:
document.getElementById('idName')

JQuery:
$('#idName')

3. Get Class
JavaScript:
JavaScript has no default method of obtaining class

JQuery:
$('.className')

4. Get TagName
JavaScript:
document.getElementsByTagName('tagName')

JQuery:
$('tagName')

5, Create object and join In the document
JavaScript:

var para = document.createElement('p'); 
//创建一个p元素 
document.body.appendElement(para); 
//将p元素追加为body的lastchild子节点，如果想将新创建的p元素插入到已存在的某个元素之前，可以使用insertBefore()方法

JQuery:
JQuery provides 4 methods for inserting new elements before or after existing elements (inside): append(), appendTo( ), prepend(), prependTo().
Format: $(html);
eg, html code:

<p>World!</p> 
$(&#39;p&#39;).append(&#39;<b>Hello!</b>&#39;); 
//输出：<p>World!<b>Hello!</b></p> 
$(&#39;<b>Hello!</b>&#39;).appendTo(&#39;p&#39;); //输出：同上 
$(&#39;p&#39;).prepend(&#39;<b>Hello!</b>&#39;); 
//输出：<p><b>Hello!</b>World! </p> 
$(&#39;<b>Hello!</b>&#39;).prependTo(&#39;p&#39;); 
//输出：同上

6. Insert new element
JavaScript:
insertBefore() Syntax format:
parentElement.insertBefore(newElement,targetElement)
eg, insert an img element before a paragraph.

html code:

<img src="image.jpg" id="imgs" /> 
<p>这是一段文字</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 into existing elements (External) before or after methods: after(), insertAfter(), before(), insertBefore().
Format: $(html);
eg, html code:

World!

JQuery code

$(&#39;p&#39;).after(&#39;<b>Hello!</b>&#39;); 
//输出：<p>World! </p><b>Hello!</b> 
$(&#39;<b>Hello!</b>&#39;). insertAfter (&#39;p&#39;); 
//输出：同上 
$(&#39;p&#39;).before(&#39;<b>Hello!</b>&#39;); 
//输出：<b>Hello!</b><p>World! </p> 
$(&#39;<b>Hello!</b>&#39;).insertBefore(&#39;p&#39;); 
//输出：同上

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
Note: This method is usually used in combination with appendTo(), prependTo() and other methods.

8. Delete node
JavaScript:
reference = element.removeChild(node)
removeChild() method deletes a child node from a given element

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

9. Wrapping node
JavaScript:
No JavaScript yet

JQuery:

wrap() //将匹配元素用其他元素的结构化标记单独包裹起来 
wrapAll() //将所有匹配的元素用一个元素包裹起来 
wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来

10. Attribute operation: Set attribute nodes and find attribute nodes
JavaScript:
document.getElementsByTagName('tagName')

JQuery:
Setting and finding attribute nodes in JQuery are both: attr().

$('p').attr('title'); //获取p元素的title属性； 
$('p').attr('title','My title'); //设置p元素的title属性 
$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时，可以用"名：值"对的形式，中间用逗号隔开。

11、替换节点 
JavaScript： 
reference = element.replaceChild(newChild,oldChild) 
该方法是将一个给定父元素里的一个子节点替换为另外一个节点。 

JQuery： 
replaceWith()、replaceAll() 
eg: 

hello

 
想替换为： 

Hi

 

JQuery代码： 
$('p') .replaceWith('

Hi

'); 
或者可以写成： 
$('

Hi

').replaceAll('p'); 

12、CSS-DOM操作 
JavaScript： 
格式：element.style.property 
CSS-DOM能够读取和设置style对象的属性，其不足之处是无法通过它来提取外部CSS设置的样式信息，而JQuery的.css()方法是可以的。 
注意点：CSS中的如"font-size"这样有"-"的，要使用首字母小写的驼峰式表示，如fontSize。 

JQuery： 
格式：$(selector).css() 
css()方法获取元素的样式属性 
此外，JQuery还提供了height()和width()分别用来获取元素的高度和宽度（均不带单位），而css(height)、css(width)返回高宽，且带单位。

The above is the detailed content of Detailed explanation of the differences between JavaScript and JQuery common methods with examples. For more information, please follow other related articles on the PHP Chinese website!