Hello guys! I want to welcome you to a brand new course on web design. I will be taking you guys through series of topics on jQuery and i will try my possible best to simplify all my tutorials so they can be easy to understood.
So in this tutorial post, i will be giving a brief introduction to the course and also how to use jQuery with your HTML files.
jQuery is a very fast and compressed JavaScript Library created by John Resig in the year 2006 with a nice motto: Write less, do more. jQuery simplifies HTML document traversing, handling of event, animation, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks that is by writing less code. Below is the list of all the important core features of jQuery -
So in this tutorial post, i will be giving a brief introduction to the course and also how to use jQuery with your HTML files.
jQuery is a very fast and compressed JavaScript Library created by John Resig in the year 2006 with a nice motto: Write less, do more. jQuery simplifies HTML document traversing, handling of event, animation, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks that is by writing less code. Below is the list of all the important core features of jQuery -
- Event handling - jQuery offers a very nice way to capture a wide range of events, such as a user clicking on a link, without the need to cluster the HTML code itself with Event handlers.
- DOM manipulation - jQuery has made it easy to select DOM elements, negotiate them and also modifying their content by using cross browser open source selector engine called Sizzle.
- Animations - jQuery comes with plenty of built in animation effects which you can make use of in your website.
- AJAX Support - The jQuery helps you alot in developing a responsive and featurerich site the AJAX technology.
- Cross Browser Support - The jQuery has cross browser support, and works very fine in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
- Lightweight - jQuery is a very lightweight library, about 19kb in size ( Minified and gzipped ).
- Latest Technology - jQuery supports the CSS3 selectors and basic Xpath syntax.
You can also read our tutorial post on: JavaScript Syntax
How to install jQuery?
There are two ways of installing jQuery.
- Local Installation - You can download jQuery library into your local computer and include it in your HTML code.
- CDN Based Version - You can include the jQuery library directly from Content Delivery Network.
Local Installation
- Go to the jQuery official website using this link to download the latest version of jQuery.
- Now put the downloaded jQuery 3.5.0.min.js file in the directory of your website.
Example
Now you can include jQuery library in your HTML file as follows -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript" src = "/jquery/jquery-3.5.0.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
document.write( "Hello World!" );
} );
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript" src = "/jquery/jquery-3.5.0.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
document.write( "Hello World!" );
} );
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Output
Below is the output of the above example.
Hello World!
You can also read our tutorial post on: JavaScript Browser Compatibility Test
CDN Based Version
You can include jQuery library into your HTML code directly from Content Delivery Network. Microsoft and Google provides content delivery for the latest version.
Note : I am going to be using Google's CDN version of the library all through out my tutorials on jQuery.
Note : I am going to be using Google's CDN version of the library all through out my tutorials on jQuery.
Example
Now we are going rewrite the above example using jQuery library from Googl's CDN.
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
document.write( "Hello World!" );
} );
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
document.write( "Hello World!" );
} );
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Output
Below is the output of the above example.
Hello World!
How to call jQuery Library Function
As almost everything we do, when using jQuery, it reads or manipulates the document object model (DOM). We need to make sure that we start adding events etc. as soon as the DOM is ready.
If you want an event to work on your web page, you should call it in the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and also before the page content are loaded.
In order to do this, we have to register a ready event for the document as follows -
If you want an event to work on your web page, you should call it in the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and also before the page content are loaded.
In order to do this, we have to register a ready event for the document as follows -
$( document ).ready(function() {
// do some stuffs when DOM is ready.
} );
// do some stuffs when DOM is ready.
} );
To call upon any jQuery library function, use the HTML script tags as shown below -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div" ).click( function( ) { alert( "Hello World!" ); } );
} );
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see an alert box.
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div" ).click( function( ) { alert( "Hello World!" ); } );
} );
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see an alert box.
</div>
</body>
</html>
Output
Below is the output of the above example.
Click on this to see an alert box.
You can also read our tutorial post on: JavaScript Operators
How to Use Custom Script
Its better to write our own custom code in the custom JavaScript file: custom.js, as follows -
/* Filename : custom.js */
$( document ).ready( function( ) {
$( "div" ).click( function( ) {
alert( "Hello World!" );
} );
} );
$( document ).ready( function( ) {
$( "div" ).click( function( ) {
alert( "Hello World!" );
} );
} );
So now let us include the custom.js file in our HTML file as follows -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript" src = "/jquery/custom.js">
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see an alert box.
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript" src = "/jquery/custom.js">
</script>
</head>
<body>
<div id = "mydiv">
Click on this to see an alert box.
</div>
</body>
</html>
Output
Below is the output of the above example.
Using Multiple Libraries
You can also use multiple libraries all together without them conflicting each others in the code during execution. For example, you can use jQuery and MooTool JavaScript libraries all in one program.
Alright guys! We have come to the end of this tutorial on jQuery introduction. Incase you don't really understand much of this tutorial, no need to panic. In my subsequent tutorials, you will definitely start understanding better.
In my next tutorial post, i will be discussing about the basic concepts in jQuery needed in order to move ahead with the rest of the course.
Follow us on our various social media platforms available. Also subscribe to our newsletter to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.
Alright guys! We have come to the end of this tutorial on jQuery introduction. Incase you don't really understand much of this tutorial, no need to panic. In my subsequent tutorials, you will definitely start understanding better.
In my next tutorial post, i will be discussing about the basic concepts in jQuery needed in order to move ahead with the rest of the course.
Follow us on our various social media platforms available. Also subscribe to our newsletter to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.