What is jQuery and what is it good for?
jQuery is everywhere; it is by far the most popular JS library, it is integrated into major systems like WordPress, and JS questions about StackOverflow always seem to have answers in jQuery.
The library is short for many JS functions used to manipulate the HTML DOM, which can often be long and tedious to type. jQuery offers much shorter and cleaner syntax, and if you type
document.getElementByID () a hundred times, reducing that character to a single character can save a lot of time on development.
jQuery's main allure is the selector function, used to find and reference elements in your HTML. For example, to find an element with an ID, you can do the following:
$ (& # 39; # ID & # 39;)
Which is a lot easier to type than:
document.getElementByID (& # 39; ID & # 39;)
This is of course not the only way to select elements; jQuery can use almost any CSS selector, all packaged in the function
$ . The
$ object also contains all other jQuery methods, such as
$. Ajax () .
document.querySelectorAll () function, so if you only use jQuery to type "
document.querySelectorAll () " a little less specify your jQuery by aliasing functions to
$ or something else:
window. $ = document.querySelectorAll
But this is not all jQuery is good for; it is much better to work with DOM elements than vanilla JS, with traversal functions to parse through a list of elements and filters for search results. When selecting HTML with vanilla JS, you get a list of the literal DOM elements, but jQuery will return jQuery objects with additional methods and properties that may be useful to you.
jQuery has a few other features, such as animation and AJAX support, but pure CSS animations are often much faster and libraries such as axios handle AJAX requests much better than jQuery, so you really should only use jQuery to use the DOM to work. jQuery now offers a & # 39; sleek & # 39; version without these functions, which saves about 6 kb when using the compressed and reduced file.
Will jQuery slow down my website?
If they don't have it in the cache, you can use the miniaturized and gzipped version, which is only 28.78 KB, probably less than the size of your HTML. This is no better than nothing, and it can add another second or more to the loading of your page on slow 3G connections (without cache).
Beware of janky code
for loops instead of jQuery & # 39; s
each is repeated when you run over a significant number of items. They are both fast, but
each is much slower, despite being much more readable. Most of the added time comes from the delay at the end of the loop before the next one starts, so loops with a small amount of code and a long length will see a greater performance hit than loops with a lot of code and a few elements.
jQuery voters are slow. In fact, everything is slow with the DOM, so you want to minimize the DOM-related calls in your scripts. If you reference an item multiple times, cache it in a variable:
var $ item = $ (& # 39; # item & # 39;)
This prevents jQuery from running multiple searches every time you run the
$ () syntax to find an element. The
$ for the variable is a convention for naming jQuery object variables and is not required.
You can speed up the selection of jQuery by using IDs across classes whenever possible. Selecting by ID is much faster than selecting by class, since jQuery simply wraps around the native
.getElementByID () method, rather than using its own selection engine. If you need to select by class, you should at least try to provide a context to tell jQuery where to look. For example:
$ (& # 39;. Class & # 39 ;, & # 39; # container & # 39;)
Will be much faster than just searching for
& # 39 ;. Class & # 39; because jQuery ignores everything in the DOM except the element
Should I use jQuery?
jQuery is a library ̵
jQuery has a simple syntax and can make your development a lot easier. If you're adding just a few simple things to your website, you probably won't need it, but if you're going to be using a lot of dynamic content, jQuery can really speed up development time. If you are new to JS development, learning jQuery can help you start simple applications.
However, in the context of a large app, the benefits become more blurred. JQuery is not built as the engine of large web apps, but is often used instead of a more complicated framework for building simple dynamic pages. This works well for simple apps, but is very easy to outgrow. If you really need jQuery to make your web app work, you probably also have a much greater need for the structure, modularity and extensibility that a full framework offers.
But jQuery is much more performant than a huge framework like React, so if you want to stay closer to the metal, jQuery can be a good addition to clean up your code. If you work in an existing codebase, jQuery is easy to add, compared to a full framework that requires a lot of refactoring, learning and updating. Plus, jQuery is just a lot simpler than most web frameworks, and you don't have to rethink the way you code things.
jQuery is ultimately just a library for DOM manipulation, so if your usage situation requires more complex DOM manipulation than vanilla JS offers, jQuery might be for you.