Home >Web Front-end >JS Tutorial >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!