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")

jQuery:

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

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";                //现在的项目中有用到

jQuery:

abc.html("test");

3 Show hidden elements

JS:

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

jQuery:

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

4 Get focus

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

5 Assign values ​​to the form

JS:

abc.value = "test";

jQuery:

abc.val("test");

6 Get the value of the form

JS:

alert(abc.value);

jQuery:

alert(abc.val());

7 Setting the element is not available

JS:

abc.disabled = true;

jQuery:

abc.attr("disabled", true);

8 Modify element style

JS:

abc.style.fontSize=size;

jQuery:

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

JS:

abc.className="test";

JQuery:

abc.removeClass(); 
abc.addClass("test");

9 Determine whether the check box is selected

jQuery

if(abc.attr("checked") == "checked")

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");

JQUERY: What is obtained is a JQUERY object.

Example:

var div = $("#one");

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");

JQUERY:

Example:

var div = $(".test");

3. Get elements based on name

JS: Returns an array

Example:

var bd = document.getElementsByName(uid);

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']");

4. Elements are retrieved based on tag names

JS: The returned array is also an array

Example:

var div = document.getElementsByTagName("div");

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");

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();

1.2. When there are parameters Is assignment

div.text("aaaa");
div.html("aaaa");

　2. Form element

JS：

2.1. Value

div.value;

2.2. Assignment

div.value = 'xxx';
JUQERY：

2.3. Value

div.val();

3.4. Assignment

div.val('xxx');

Operation attribute

JS operation attribute

Settings | Modify attributes:

div.setAttribute("","");

Delete attributes

div.removeAttribute("");

Get attributes

div.getAttribute();

Methods used to operate attributes in JQUERY

Add attributes :

div.attr("width","20%");

Remove attributes:

div.removeAttr("width");

Get attributes:

div.attr("width");

Operation style

JS operation style-keyword is [style]

Example:

div.style.backgroundColor = "red";

The keyword for operating styles in JQUERY is css

Example:

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

——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!