After taking a brief note from previous JavaScript articles, let's now learn a little about jQuery which is arguably the most popular JS library among web developers. Generally, frameworks or libraries are used by developers to save time and have best practices/conventions, and indeed, jQuery accomplishes both feats.
Introduction
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Overall it's a simple syntax convention and set of methods used to navigate around and select HTML elements to respond to user behavior.
Why use Jquery?
In some cases, HTML and CSS are not enough. A developer needs to know more to get their work going. If HTML defines the structure, elements and order of elements of a page, and CSS defines how elements of the page are displayed, then jQuery allows manipulating such elements.
Use-cases of jQuery:
Change attributes of elements, such as class, value and style.
Change the order of elements. (i.e. rearrange items in the list)
Add/Remove new elements to a page. (from simple text to HTML blocks)
Add different behaviors to elements. (i.e. show a pop-up message when a button is clicked)
Running jQuery on your website
To use jQuery services on your project, you need to include the jQuery library on your page. Add the following line in the <head> section of the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Once jQuery is added to your project, you're good to go with writing your code. There are several other options to run jQuery on your website:
Include it in the page code (through your Content Management System).
Include it with Google Tag Manager (as a custom HTML tag, CDN).
Include it with Optimisely (through <edit code> section).
Now to test your web page move on to the Console, which is a part of Chrome Developer Tools. Open your browser and hit Ctrl + Shift + J on Windows or Cmd + Opt + J on mac.
Now paste a line of jQuery code and hit Enter. If the code has no error then it will be executed.
Structure of jQuery commands
To write jQuery code you need to understand how the commands are structured. There are three elements in each jQuery command:
$('element selector').function('parameter');
element selector: It defines which page element to apply the jQuery function to.
function: It defines the function you apply.
parameters: Some functions require parameters, and some don't.
Some useful Commands to remember
Changing the content of existing elements:
.html(): This function allows the user to replace the content of an element.
/* Example */ $('h3').html("Change it"); /* or */ $('.footer').html('<div class="footer-container">....</div>');
Adding new elements to the page:
.append(), .prepend(), .after(): All these three functions allow the addition of an extra element to the page with the only difference being the location of where the element will be added at.
/* Example */
$('.footer').after('<p>Paragraph that follows the footer</p>');
/* will add a paragraph AFTER the closing</div> of the element */
<div class=”footer”></div>.
Changing class and style attributes of elements:
.attr(): This function allows changing the attributes of an element such as class, style or value.
// Example $('#nameFirst').attr('class','FirstName'); /* will change the class attribute to “FirstName” of an element with id="nameFirst", so it would become */ <div id="nameFirst" class="FirstName"> … </div> /* Alternatively, you can use .attr() to add CSS styling to an element: */ $('#nameFirst').attr('style','text-decoration:none;'); /* which would change style attribute of nameFirst attribute: */ <div id="nameFirst" style="text-decoration:none;"> … </div>
Wrapping element:
- .wrap(): In some cases, you want to wrap an element with extra <div></div> to apply extra CSS styling.
// Example
$('.footer').wrap('<div class="extra-footer-wrapper"/>');
/* will wrap the element with class="footer" into */
<div class=”extra-footer-wrapper”>
<div class=”footer”> … </div>
</div>
Changing order of elements:
- .insertBefore() and .insertAfter(): Suppose you want to reorder elements on your page. Let's say you want to display the button with id="button-2" before the button with id="button-1".
$('#button-1').insertBefore('#button-2');
/* the above will take the element with id="button-2" and insert it before the element with the id="button-2" */
Removing elements:
- .remove(): Removing elements is very easy.
$('#button-1').remove();
/* the above will remove an element with id="button-1" from the page completely */
For other similar commands, you can refer to jQuery documentation.
Conclusion
That's the story behind jQuery. I hope you understood how it works. If you enjoyed learning and find it useful please do like and share so that, it reaches others as well 🤝.
Thanks for reading 😃
I would ❤ to connect with you on Twitter | LinkedIn | GitHub Let me know in the comment section if you have any doubts or feedback.