Home > Web Front-end > JS Tutorial > Let's talk about the differences between jQuery, JavaScript and JS

Let's talk about the differences between jQuery, JavaScript and JS

烟雨青岚
Release: 2020-06-30 13:08:46
forward
2810 people have browsed it

Let's talk about the differences between jQuery, JavaScript and JS

JavaScript: It is a common scripting language in browsers, which is used to realize the dynamics of web pages and the interaction with the back-end (database).

jQuery: It is a class library integrated with JavaScript. By operating jQuery, you can reduce the use of native JavaScript statements, thereby improving efficiency.

JS: It is an abbreviation of JavaScript.

Summary of differences:

1. JQuery greatly simplifies JavaScript and accomplishes the arduous task of completing more functions with the least code to the greatest extent.

2. JavaScript loads the DOM only once, while JQuery loads it multiple times.

3. JQuery is more convenient to operate DOM. Such as node acquisition. Eg: $()

Description: The most direct way to improve the understanding of native JavaScript and encapsulated JQuery is to achieve basic front-end and back-end interaction without introducing JQuery into the page.

The following content is a summary compiled to understand jQuery and JS differently:

jQuery- and native Javascript writing method:

1 Positioning elements

JS:

document.getElementById("abc")
Copy after login

jQuery:

$("#abc") 通过id定位 
$(".abc") 通过class定位 
$("div") 通过标签定位
Copy after login

Note: The result returned by JS is this element, and the result returned by jQuery is a JS object. The following example assumes that element abc has been positioned.

2 Change the content of the element

JS:

abc.innerHTML = "test";                //现在的项目中有用到
Copy after login

jQuery:

abc.html("test");
Copy after login

3 Show hidden elements

JS:

abc.style.display = "none";              //现在的项目中有用到
abc.style.display = "block";
Copy after login

jQuery:

abc.hide(); 
abc.show();
abc.toggle();         //在显示和隐藏之间切换、
Copy after login

4 Get focus

JS and jQuery are the same, All are abc.focus();

5 Assign values ​​to the form

JS:

abc.value = "test";
Copy after login

jQuery:

abc.val("test");
Copy after login

6 Get the value of the form

JS:

alert(abc.value);
Copy after login

jQuery:

alert(abc.val());
Copy after login

7 Setting the element is not available

JS:

abc.disabled = true;
Copy after login

jQuery:

abc.attr("disabled", true);
Copy after login

8 Modify element style

JS:

abc.style.fontSize=size;
Copy after login

jQuery:

abc.css('font-size', 20);
Copy after login

JS:

abc.className="test";
Copy after login

JQuery:

abc.removeClass(); 
abc.addClass("test");
Copy after login

9 Determine whether the check box is selected

jQuery

if(abc.attr("checked") == "checked")
Copy after login

Note: What is said online that .attr("checked") == true cannot actually be used. The above one has been tested and works.

The difference between JS and JQUERY

1 . Get elements based on ID

JS: What you get is a DOM object.

Example:

var div = document.getElementByID("one");
Copy after login

JQUERY: What is obtained is a JQUERY object.

Example:

var div = $("#one");
Copy after login

2. Get elements according to class [In the array, if you want to get the DOM object, use the index method, if you want to get the JQUERY object, use eq()]

JS: What is obtained is an array

Example:

var div = document.ElementsByClassName("test");
Copy after login

JQUERY:

Example:

var div = $(".test");
Copy after login

3. Get elements based on name

JS: Returns an array

Example:

var bd = document.getElementsByName(uid);
Copy after login

JQUERY: The method is to use square brackets, attribute = a value, there is no restriction on taking the value based on name, JQUERY Elements are retrieved based on attributes

Example:

$("[name='uid']");
Copy after login

4. Elements are retrieved based on tag names

JS: The returned array is also an array

Example:

var div = document.getElementsByTagName("div");
Copy after login

JQUERY: In the same way as adding styles to all divs in the style sheet, write the tag name directly within double quotes

Example:

$("div");
Copy after login

Eg: Specify the subdirectory element object Get: var div = $("div span"); - There are many combination methods

Operation content

1. Non-form element (if it is text, use text method, if it is html code, use html method)

Example:

1.1. When there are no parameters, the value is

div.text();
div.html();
Copy after login

1.2. When there are parameters Is assignment

div.text("aaaa");
div.html("aaaa");
Copy after login

 2. Form element

JS:

2.1. Value

div.value;
Copy after login

2.2. Assignment

div.value = 'xxx';
JUQERY:
Copy after login

2.3. Value

div.val();
Copy after login

3.4. Assignment

div.val('xxx');
Copy after login

Operation attribute

JS operation attribute

Settings | Modify attributes:

div.setAttribute("","");
Copy after login

Delete attributes

div.removeAttribute("");
Copy after login

Get attributes

div.getAttribute();
Copy after login

Methods used to operate attributes in JQUERY

Add attributes :

div.attr("width","20%");
Copy after login

Remove attributes:

div.removeAttr("width");
Copy after login

Get attributes:

div.attr("width");
Copy after login

Operation style

JS operation style-keyword is [style]

Example:

div.style.backgroundColor = "red";
Copy after login

The keyword for operating styles in JQUERY is css

Example:

div.css("background-color","yellow");
Copy after login

——Change the background color of this div Turns yellow. All the styles in the CSS here are exactly the same as the styles in the css style sheet without any changes.

The JS method of operating styles can only get inline styles, not embedded ones. And external! ! ! ! !

  JQUERY's method of operating styles can be inline or embedded

Thank you for reading, I hope you will benefit a lot

This article is reproduced from: https://blog.csdn .net/dalei9243/article/details/79804789

Recommended tutorial: "JS Tutorial"

The above is the detailed content of Let's talk about the differences between jQuery, JavaScript and JS. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template