Understand the differences between jQuery, JavaScript, and JS in two minutes

##Two minutes to understand the difference between jQuery, JavaScript, and JS

JavaScript , jQuery, and JS often appear in our lives. Do you know what are the similarities and differences between them? Let’s take two minutes to learn about them below.

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定位 
$("p") 通过标签定位

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, 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: It is said on the Internet that .attr("checked") == true cannot actually be used, but 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 p = document.getElementByID("one");

JQUERY: What is obtained is a JQUERY object.

Example:

var p = $("#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 p = document.ElementsByClassName("test");

JQUERY:

Example:

var p = $(".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 to get the value based on the name, JQUERY takes the element based on the attribute

Example:

$("[name='uid']");

4. Get the element based on the tag name JS: The returned value is also an array
Example:

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

JQUERY: And style The method of adding styles to all p in the table is the same. Write the tag name directly within double quotes

Example:

$("p");

Eg: Specify subdirectory element object acquisition: var p = $("p span") ;——There are many combination methods

Operation content

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

Example:

1.1. If there are no parameters, the value is
p.text();
p.html();
1.2. If there are parameters, they are assigned values
p.text("aaaa");
p.html("aaaa");

2. Form elements JS:
2.1. Get value
p.value;
2.2. Assign value
p.value = 'xxx';
JUQERY：
2.3. Get value
p.val() ;
3.4. Assignment
p.val('xxx');

Operation attributes

JS operation attributes
Set | Modify attributes:

p.setAttribute("","");

Delete attributes

p.removeAttribute("");

Get attributes

p.getAttribute();

Used in JQUERY Methods of operating attributes Add attributes:

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

Remove attributes:

p.removeAttr("width");

Get attributes:

p.attr("width");

操作样式
JS操作样式-关键字是[style]
例：

p.style.backgroundColor = "red";

JQUERY里面操作样式的关键字是css
例：

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

——把这个p的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
JQUERY操作样式的方法可以是内联的也可以是内嵌的

感谢大家的阅读，希望大家收益多多。

本文转自：https://blog.csdn.net/dalei9243/article/details/79804789

推荐教程：《JS教程》

 

The above is the detailed content of Understand the differences between jQuery, JavaScript, and JS in two minutes. For more information, please follow other related articles on the PHP Chinese website!