قالب وردپرس درنا توس
Home / Tips and Tricks / jQuery, what is it and should you use it? – CloudSavvy IT

jQuery, what is it and should you use it? – CloudSavvy IT



jQuery is a small JavaScript library that tries to make working with HTML easier. It offers more functions for manipulating elements on web pages, making it useful for creating dynamic content. Is it the right choice for your website?

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

Modern JavaScript actually has the same selection functionality with the 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?

Adding many Javascript libraries, frameworks, and bloat to your website is the easiest way to slow down page loading, especially for mobile users with poor connections. However, JQuery is a minor exception to this rule; it's very small and used everywhere, so if you're referring to it from a popular CDN like Google's, chances are every average user will cache it in advance and not have to download anything from your servers. However, this does not make it free to record as it still needs to be loaded and run from the user's memory which will take both times.

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

Since jQuery blocks the view, you must load jQuery before displaying the page, which is not good for mobile users. If you're trying to make your largely static site as fast as possible on all devices, you should probably opt for vanilla JavaScript over jQuery for this reason alone. But if your site is very dynamic, jQuery or other libraries are probably worth accelerating development time. For internal business sites, admin panels, or anything else that end users don't have to deal with, don't worry about including it.

Beware of janky code

Since jQuery wraps around native Javascript functions, it will always perform less than using vanilla JS, with the disadvantage of speeding up development time. jQuery is still very fast, but you will want to look at non-optimized code. If you have too many laggy function calls, your app's frame rate may drop below the refresh rate, which will be a janky microstuttering for the end user, or just a straight delay.

Use 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 #container .

Should I use jQuery?

jQuery is a library ̵

1; not a framework. A library offers a few useful tools you can use or solves an issue that vanilla JS struggles with. A framework, such as React or Vue, offers a more rigid structure and determines most of how your application works.

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.


Source link

Home / Tips and Tricks / jQuery, what is it and should you use it? – CloudSavvy IT

jQuery, what is it and should you use it? – CloudSavvy IT



jQuery is a small JavaScript library that tries to make working with HTML easier. It offers more functions for manipulating elements on web pages, making it useful for creating dynamic content. Is it the right choice for your website?

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

Modern JavaScript actually has the same selection functionality with the 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?

Adding many Javascript libraries, frameworks, and bloat to your website is the easiest way to slow down page loading, especially for mobile users with poor connections. However, JQuery is a minor exception to this rule; it's very small and used everywhere, so if you're referring to it from a popular CDN like Google's, chances are every average user will cache it in advance and not have to download anything from your servers. However, this does not make it free to record as it still needs to be loaded and run from the user's memory which will take both times.

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

Since jQuery blocks the view, you must load jQuery before displaying the page, which is not good for mobile users. If you're trying to make your largely static site as fast as possible on all devices, you should probably opt for vanilla JavaScript over jQuery for this reason alone. But if your site is very dynamic, jQuery or other libraries are probably worth accelerating development time. For internal business sites, admin panels, or anything else that end users don't have to deal with, don't worry about including it.

Beware of janky code

Since jQuery wraps around native Javascript functions, it will always perform less than using vanilla JS, with the disadvantage of speeding up development time. jQuery is still very fast, but you will want to look at non-optimized code. If you have too many laggy function calls, your app's frame rate may drop below the refresh rate, which will be a janky microstuttering for the end user, or just a straight delay.

Use 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 #container .

Should I use jQuery?

jQuery is a library ̵

1; not a framework. A library offers a few useful tools you can use or solves an issue that vanilla JS struggles with. A framework, such as React or Vue, offers a more rigid structure and determines most of how your application works.

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.


Source link