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

##Two minutes to understand the difference 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.

jQuery- and native Javascript writing method:
1 Positioning elements

JS:

document.getElementById("abc")

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

abc.html("test");

3 Show hidden elements JS:

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

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

abc.val("test");

6 Get the value of the form
JS:

alert(abc.value);

alert(abc.val());

7 Setting the element is not available JS:

abc.disabled = true;

abc.attr("disabled", true);

8 Modify element style JS:

abc.style.fontSize=size;

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

abc.className="test";

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

9 Determine whether the check box is selected jQuery

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

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

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

Example:

var p = $(".test");

3. Get elements based on name JS: Returns an array
Example:

var bd = document.getElementsByName(uid);

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

Example:

$("p");

Operation content

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

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

p.removeAttribute("");

p.getAttribute();

Used in JQUERY Methods of operating attributes Add attributes:

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

p.removeAttr("width");

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!