search

Home >Web Front-end >JS Tutorial >Detailed graphic explanation of the difference between JavaScript and jQuery

Detailed graphic explanation of the difference between JavaScript and jQuery

yulia
yuliaOriginal
2018-10-30 17:13:343746browse

JavaScript is an indispensable part of front-end development. jQuery is also widely used because it is easy and fast to use. Both can achieve the effect of the page. Do you know the difference between JavaScript and jQuery? This article will tell you about the difference between JavaScript and jQuery. Interested friends can refer to it.

1. The essential difference

JavaScript is an interpreted scripting language. This language can be used for HTML and web, and can be widely used on servers and PCs. , laptops, tablets, and smartphones.

JQuery is a function library of JavaScript, which can also be said to be a framework of JavaScript.

JavaScript code is written directly in the tag

jQuery code is also written in tag, but the jQuery library must be introduced before the HTML code. As shown in the figure below:

Detailed graphic explanation of the difference between JavaScript and jQuery

2. Grammatical differences

JavaScript and jQuery operate element nodes, attribute nodes, and text Nodes, click events, etc. are all different. Let’s take the operation of element nodes as an example to see how they are different.

Example 1: Get tag elements based on ID name

Description:

Create two p tags in the page and give them a class class name and ID name. It is convenient to obtain it with JavaScript and jQuery later.

Use JavaScript and jQuery to get the element with ID first. The specific code is as follows: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p class="pp" id="first">1</p>
<p class="pp">2</p>
</body>
<script type="text/javascript">
var first = $("#first");
var first = document.getElementById("first");
</script>
</html>

Example 2: Get the tag element based on class

var pp = $(".pp");//返回的是一个jQuery对象，通过pp[i]能取到具体元素
var pp = document.getElementsByClassName("pp");//返回的是元素列表，通过pp[i]能取到具体元素

Example 3: Get the tag element based on the tag name

var p = $("p");//返回的是一个jQuery对象，通过p[i]能取到具体元素
var p = document.getElementsByTagName("p");//返回的是元素列表，通过p[i]能取到具体元素

There are many differences in syntax between JavaScript and jQuery. I won’t do too many demonstrations here for those who don’t know. You can refer to the effect articles on the PHP Chinese website, or visit JavaScript Video Tutorial.

Summary of the difference between JavaScript and jQuery:

1. Without javascript, there would be no jquery. They are a father-son relationship.
2. jquery is a reference to javascript. A kind of encapsulation, jQuery is more concise than JavaScript
3. jquery is a script that is simpler to use with javascript. When writing scripts, javascript and jquery syntax are basically compatible

The above introduces the difference between JavaScript and jQuery , hope it helps you!

For more related tutorials, please visit JavaScript Chinese Reference Manual

The above is the detailed content of Detailed graphic explanation of the difference between JavaScript and jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How does html reference JavaScript? Four ways to introduce js paths in htmlNext article：How does html reference JavaScript? Four ways to introduce js paths in html

Related articles

See more