jQuery, Write Less & Do More
If you are a JavaScript developer and want to write less code and do more, this tutorial is for you.
What’s jQuery?
jQuery is a Javascript library and was created in 2006 by John Resig with a nice motto: Write less, do more. Its purpose is to make it much easier to use JavaScript on your website. According to jQuery’s official documentation, 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.
The jQuery library contains the following features: HTML/DOM manipulation, CSS manipulation, HTML event methods, Effects and animations, AJAX, and Utilities.
In this lesson, our file structure is set as below with three files: HTML, CSS and JavaScript file.
Install jQuery
Since jQuery is a library, we need to download or install it first in our project before we could benefit from its handy features. There are a couple of methods to get started with jQuery:
- Local Installation: You can directly download the jQuery library from their official website and include it in your HTML code.
- Package managers:
npm install jQuery and import it like this import * as jQuery from 'jQuery'
3. Link to a CDN: You can add jQuery library in your HTML code from Content Delivery Network. For this current project, we are going to use Google CDN, copy and paste the <script> tags in our HTML file like below(line 17).
Summary
In this lesson, we’ll be covering the following fundamentals: jQuery selectors, jQuery methods, jQuery events, and jQuery effects.
jQuery selectors
jQuery Selectors are used to select and manipulate HTML elements by using jQuery() or $() function. Both functions play the same role; but for the stake for “write less, do more” we will be using, for the rest of this project, $().
$() vs document.querySelector()
In regular JavaScript, to select HTML elements we use some functions such as: document.querySelector(), document.querySelectorAll(), document.getElementById() or document.getElementByClass(). Unlike JavaScript, in jQuery, we use $() it replaces all the above JavaScript functions for selecting HTML elements. For instance, in jQuery, we write $("h1") to select h1 tags unlike JavaScript we dodocument.querySelector("h1") , I hope you understand what’s beneath the motto: “Write less, do more”. Now, let’s head to google DevTools to get used to jQuery selectors.
jQuery methods
There are several jQuery methods, we’ll be covering some of the most commonly used.
1. jQuery Methods — addClass(): The addClass() method is used to add one or more classes to the selected element. Inside our styles.css file we have two classes: big-title & margin-50.
Let’s select <h1> jQuery fundamentals </h1> with jQuery $() selector and add some classes by invoking addClass().
2.jQuery Methods — text(): The jQuery text() method is used to set or return the text content of the selected elements. For this example, to return h1text content which is “jQuery fundamentals”, we will select again h1 tags and call text() on it. Secondly, for setting h1 text content to “I love jQuery”, we will select back again h1 and then invoke text() on h1 with “I love jQuery” as an argument.
3.jQuery Methods — html(): The jQuery html() method is used to set or return the entire content of the selected elements.
4. jQuery Methods — attr(): The jQuery attr() method is used for getting and setting attributes of the selected elements. In our HTML file, there is <a> tag with href attribute set to an empty string. In this example, we are going to return the href the initial value, then set href value to my personal blog’s link and finally return the updated href value.
5.jQuery Methods — before(): The jQuery before() method is used to insert the specified content before the opening tag of the selected elements. Let’s add button tag before our h1 tags.
6.jQuery Methods — after(): The jQuery after() method is used to insert specified content after the selected element. Let’s add another button tag after our h1 tags.
7.jQuery Methods — css(): The jQuery css() method is used to get or set style properties for selected elements. Let’s select this time around our <h2> By Issa, software engineer </h2> and set its color and background color.
jQuery Events
There are several jQuery events, we’ll be covering the most commonly used events: click(), keypress() and on().
1.jQuery events — click(): When you click on a selected element, the click event occurs by executing a function or a set of statements.
2.jQuery events — keypress(): The jQuery keypress() event is executed when a character is entered. In this example, we add event to the whole document and body tag, but you can add it to any HTML element you would like to.
3.jQuery events — on(): The jQuery on() event takes two parameters, the first one is the event we are looking for to listen for and the second is the callback function. For this example, let’s use mouseover event.
jQuery Effects
There are several jQuery effects, we’ll be covering some of the most commonly used effects.
1.jQuery effects — hide(): The jQuery hide() method is used to hide the selected elements.
2. jQuery effects - show(): The jQuery show()method is used to display the selected elements.
3.jQuery effects — toggle(): The jQuery toggle() method is used to toggle between the hide() & show() method, it displays the hidden selected elements and hides the visible selected element.
4.jQuery effects — slideUp(), slideDown() & slideToggle(): The jQuery slideUp() method is used to slide up the selected element, slideDown() is to slide down the selected element and slideToggle() is to toggle between the slideDown() & slideUp() methods.
Dear readers, with this we come to the end of this tutorial. I hope you found this informative and useful. Thanks for reading.
resources:
