jQuery is a free, open source, fast and rich features JavaScript library that provides dozens of API for common web features that make JavaScript programming easier. Beyond that the jQuery function is coded and tested for all web cross-browser compatibility so that they will work in all browsers. And that’s why jQuery is commonly used by professional web developers. In fact, you can think of jQuery as one of the four technologies that every web developer should know how to use: HTML, CSS, JavaScript, and jQuery.
Before you start studying jQuery, you should have a good knowledge of:
- HTML
- CSS
- JavaScript
An Introduction to HTML, CSS and JavaScript
HTML is a language for describing web pages. HTML provides a structure to data of a web page like text, images, audio, videos etc.
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. CSS handles presentation of the website.
JavaScript is a popular programming language that’s built into all the major web browsers and used to make web pages interactive. Meaning JavaScript or jQuery handles behaviours in a website.
How to Use jQuery?
jQuery usually comes as a single JavaScript file containing everything comes out of the box with jQuery. It can be included within a web page using the following mark-up:
How to include jQuery in your page?
If you go to the web site that’s shown in this figure, you’ll find a download button that lets you download the single file that contains the jQuery core library. By default, the version that’s downloaded is a compressed version that today is around 90KB. As a result, this version loads quickly into browsers, which is another reason why developers like jQuery.
The other version is uncompressed and currently about 247KB. If you download this version, you can study the JavaScript code that’s used in the library. But beware, this code is extremely complicated.
How to include the jQuery file after you’ve downloaded it to your computer
<script src="jquery-1.8.2.min.js"></script>
How to include the jQuery file from a Content Delivery Network (CDN)
The other way to include the jQuery library in your web applications and the one we recommend is to get the file from a Content Delivery Network (CDN). A CDN is a web server that hosts open-source software, and the Google, Microsoft, and jQuery web sites are CDNs for getting the jQuery libraries. In the second example in this figure, the script element uses the jQuery CDN with a URL that gets the latest version of jQuery, and that’s the way all of the applications in this book include the jQuery library.
The benefit to using a CDN is that you don’t have to download the jQuery file. This works especially well with the jQuery CDN and the “latest” URL. Then, you don’t have to change the URL when a new release becomes available. The disadvantage is that you have to be connected to the Internet to use a CDN.
How to include the jQuery file from a Content Delivery Network (CDN)
<script src="https://code.jquery.com/jquery-latest.min.js"></script>What is the difference between jQuery-x.x.x.js and jQuery.x.x.x min.js?
In terms of functionality, there is no difference between the jQuery-x.x.x.js and jQuery-x.x.x-min.js (also called minified version). However, this can play a vital role in the performance of the web page.
How does it affect performance?
jQuery-1.4.4.js file size is 178 KB as against its minified version jQuery-1.4.4-min.js that is only 76.7 KB in size. So when your page loads in the client’s browser if you are not using minified version, it loads 178 KB file that takes more time to load than 76.7 KB.
How to Execute jQuery Code?
- As and when page loads, execute the jQuery code:
<script language="javascript" type="text/javascript">$(function () { $("#div1").css("border", "1px solid green"); }); </script>
The benefit of executing jQuery code in this way is that it doesn’t wait for the whole page to load completely, so in case you want the user to see the effects as soon as the corresponding elements are loaded, you can use this.
- Execute jQuery only when the complete DOM objects (the complete page has been loaded). You will have to wrap your code in .ready function.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#div1").css("border", "1px solid red");
}); </script>This is the better and safer way to execute jQuery. This makes sure that jQuery code will execute only if complete page has been loaded in the browser so you are rest assured that user will not see any undesired behavior on the page.
How to code jQuery selectors?
When you use jQuery, you start by selecting the element or elements that you want to apply a jQuery method to. To do that, you can use jQuery selectors as shown below.
The syntax for jQuery selector
$(selector).action();
How to code multiple selectors
$("#div1,li,div p").css("border", "1px solid red");
$("p + ul,div p").css("border", "2px solid green");
Description
When you jQuery the dollar sign($) is used to refer to the jQuery library.then you can the selector by using the css syntax within quotation marks within parentheses.
How to call jQuery methods
Once you’ve selected the element or elements that you want to apply a method to, you call the method using the syntax shown at the top of the example below. This is the same way that you call a method of any object. You code the selector that gets the element or elements, the dot, the method name, and any parameters within parentheses.
The syntax for calling a jQuery method
$(selector).methodName (parameters);
Description
To call a jQuery method, you code a selector, the dot operator, the method name, and any parameters within parentheses. Then, that method is applied to the element or elements that are selected by the selector.
When you use object chaining with jQuery, you code one method after the other. This works because each method returns the appropriate object.
If the selector for a method selects more than one element, jQuery applies the method to all of the elements so you don’t have to code a loop to do that.
How to use jQuery event methods
When you use jQuery, you use event methods to attach event handlers to events. To do that, you use the syntax shown at the top of the example below. First, you code the selector for the element that will initiate the event like a button that will be clicked. Then, you code the name of the event method that represents the event that you want to use. Last, you code a function that will be the event handler for the event within parentheses.
The syntax for event method
$(selector).eventMethodName(function() {
// the statements of the event handler});
Two common jQuery event method
$(document).ready(function() {
alert("The DOM is ready"); });
$("h2").click(function() {
alert("This heading has been clicked");
});Description
To code a jQuery event handler, you code a selector, the dot operator, the name of the jQuery event method, and an anonymous function that handles the event within parentheses.
The event handler for the ready event will run any methods that it contains as soon as the DOM is ready, even if the browser is loading images and other content for the page. This works better than the JavaScript onload event, which doesn’t occur until all of the content for the page is loaded.
