Basics of jQuery

jQuery is one of Avanka IT’s favorite Javascript libraries.

Here is a comprehensive guide that will help you to understand the basics of jQuery.

We will do out best to cut learning fluff, and update the guide based on your input.

Etymology

jQuery likely stands for Javascript Query.

jQuery outputs commands onto the DOM.

The library has cross-browser compatibility and Javascript best practices in mind.

Usage

jQuery allows for direct DOM manipulation.

Many of the library’s commands are concise and clear.

Enterprise and smaller scale applications use jQuery due to its flexibility.

Tip: jQuery web apps may be fast because jQuery manipulates the DOM directly. In our testing, jQuery apps loaded faster than Angular or React counterparts.

Syntax

jQuery uses the following syntax:

$(selector).action()

The ‘$’ symbol summons jQuery to execute.

The ‘selector’ selects a DOM element to manipulate.

The ‘action’ is what manipulates the DOM element.

Using jQuery in the HTML DOM

Below some useful selectors in jQuery

jQuery Effects

One of the most fun features of jQuery is its use of effects.

Effects allow developers to produce transitory animations on selected DOM elements.

Commonly used jQuery effects are

1. hide() = Hides DOM elements from the screen.
2. show() = Shows DOM elements on the screen.
3. animate() = Allows you to customize animations for your needs.

Tip: Developers can use animate() for most jQuery effects.

jQuery with AJAX GET/POST Requests

Developers can use jQuery for GET and POST requests.

The get() method pulls information from a server to a client.

The post() method pulls information from a server to a client without caching data.

Tip: The post() method is more secure than the get() method because it does not cache data. The post() method is slower than the get() method.

Avanka IT jQuery Tips

1. Limit DOM interactions.
2. Do not access layout properties unnecessarily.
3. Keep selectors simple.
4. Turn your code into a jQuery plugin to avoid code conflicts. Doing so limits dependabilities and improve reusability.
5. Use local storage instead of cookies.
6. Refrain from using anonymous functions in your code.
7. Avoid using global variables.

Conclusion

jQuery is a great Javascript library that allows for quick DOM manipulation. The selectors and actions of the library are clear. We recommend beginners learn jQuery at some point in their careers.

References

• [https://www.hongkiat.com/blog/code-optimization-jquery-best-practices/]
• [https://www.cybrilla.com/blog/jquery-best-practices-performance/]
• JQuery Tutorial. (2018). Retrieved September 20, 2018, from https://www.w3schools.com/jquery/
• How jQuery Works. (2018). Retrieved September 20, 2018, from https://learn.jquery.com/about-jquery/how-jquery-works/
• JQuery Basics. (2018). Retrieved September 20, 2018, from https://www.tutorialspoint.com/jquery/jquery-basics.htm
• Jaeger, R. (2017, March 17). JQuery Selectors – The Absolute Basics – Robbie Jaeger – Medium. Retrieved September 20, 2018, from https://medium.com/@jaeger.rob/jquery-selectors-the-absolute-basics-d781500c722c
• Severance, C. (2018). JQuery Basics – Using JQuery. Retrieved September 20, 2018, from https://www.coursera.org/lecture/javascript-jquery-json/jquery-basics-VkM0I