jQuery coding tutorial


 Complete jQuery Tutorials for Beginners

 


 Selector    Events     Effects    Plugins

 

 jQuery Introduction

 

Table of Contents

  1. Overview:

  2. What you should know?

  3. What you need?

  4. How to Begin?

  5. How to Install


Overview:

jQuery is a JavaScript library. It is a  framework.  This library provides you inbuilt functions which are  developed using JavaScript. jQuery allows you to add various features to  your web pages.  You can add  slideshows, galleries, widgets and many more to your website. jQuery enhances the user experience of the site. jQuery is an open source library. To use it, you don't need to buy it. There are  tons of jQuery plugins available online at free of cost. You can integrate them to your website and  extend the website functionality. This is not only increase performance of the website, but also makes it ease of use.
 
There are different types of jQuery libraries.
  • jQuery Core
  • jQuery UI
  • jQuery Mobile

 

 MenuTop

What you should know?

  • HTML
  • CSS
  • JavaScript

 What you need?

 Text editor and jQuery.

 How to Begin?

In this tutorial, straight away, I am going to  show you how to get start with jQuery.

Before writing the code in jQuery, you need to include jQuery library in your program.

There are different ways to include it.

1. Download from  jQuery.com,  and include it, in your HTML code.

2. Include CDN link 

CDN(Content Delivery Network) Link:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

 TopMenu

jQuery Installation: If you are not using internet, then you need to install it in local machine.

1. Create a project folder:  sampleproject.

2. Create another folder with the name: js inside the sampleproject.

3. Go to jquery.com click the link (marked), as shown in the picture.

 Menu↑

It opens a page with  full of  code on it. You just save it in a sampleproject\js folder with name: jquery.min.js.

 


 4. Create hello.html file  in sampleproject.


hello.html 

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script> 
 
<script>
 
$(document).ready(function(){
alert("Hello");
});
 
</script>
</head>
<body>
<h2>jQuery Tutorial</h2>
</body>
</html>
 
 

 
 

 5. Open it in a browser.

  Result:


 

If you got the result, it means everything is up and running. In case feeling difficult in  setting up environment, then follow method-2. 

 

 Goto Menu

 

Method-2: 

 

Using CDN link. 

 

Replace hello.html with code given below and refresh the browser.

hello.html 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

$(document).ready(function(){
alert("Hello");
});

 
</script>
</head>
<body>
<h2>jQuery Tutorial</h2>
</body>
</html>

Make sure you are connected to Internet and then run this code, 

Result is same as above program. 

 Main Menu

 Move to Menu

You can run these program on any online compler. 

Just copy and paste the any of above program and click on Run button to see the result.

 you can use:  W3School Fron-end Editor.

Example:

coding-zon-jq-editor
coding-zon-jq-editor2






 

 

Here in the above example when HTML document completely loaded, jQuery code get executed automatically  prints the hello message in alert box.



 

Hopes this tutorial helped you to work with jQuery.


Please comment below if any questions you have.

Thanks for reading.


 

 

 

 

Comments

Post a Comment

Popular posts from this blog

Using javascript pass form variables to iframe src

Image
   Open PDF in Bootstrap Modal Window   This tutorial shows How to pass a JavaScript/jQuery variable to bootstrap modal view and sets it to iframe  src attribute. It passes value dynamically to src attribute of the iframe. When the user clicks a link, it opens the URL in a popup window. This  code shows the PDF in a Model without download option by hiding the toolbar.  To show PDF toolbar in modal, just add #toolbar=1   in the above script. index.php <!DOCTYPE html> <html lang= "en" > <head> <title>Bootstrap Model with PDF Example - coding-zon</title> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" > <script src= "https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.slim.
Read more

Creating a new PDF by Merging PDF documents using TCPDF

Image
Merging two PDFs in PHP What is PDF? The Portable Document Format. PDF stands for "Portable Document Format". Essentially, the format is used when you need to save files that cannot be modified but still need to be easily shared and printed. PDF is one of the most commonly used file types around. PDFs generally contain shareable data, such as text or photo documents etc., and are accessible to anyone who has a computer or smartphone. Unlike a Word file, which requires Microsoft Word to view or edit, most browsers will open a PDF. How to merge PDFs? You can merge several documents into one. In PHP, you have a library called TCPDF which allows you to combine one or more PDF documents to one single document. In this article, we will create a new PDF by Merging PDF documents using TCPDF. Download the PDFMerger-tcpdf.zip here. Unzip it and copy it to the PHP server. Copy the PDF files into the same folder that you want to combine. Open the file: merge-pdf-example.php Provide
Read more

Import excel file into mysql in PHP

Image
  Upload Excel file and Import  it into MySQL in PHP  Create a table in some database with given code.   Download Library - extract it, rename the folder to library . Create index.php file with given code in a server. Create excelUpload.php with given code. Create db_config.php . Create one Excel file with some sample data as shown in the below image of Excel file. Create ' uploads ' folder in the same directory. Now start server, run the index.php. Upload a .xls file. If Everything is fine, Excel data inserted in the above created MySQL table - tbl_products . PHP Version:   5.5.11 Folder Structure      Query: CREATE TABLE IF NOT EXISTS `tbl_products` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT, `productname` varchar ( 100 ) DEFAULT NULL , `description` varchar ( 100 ) DEFAULT NULL , PRIMARY KEY (`id`) )     Top index.php <!DOCTYPE html> <html> <head> <title> coding-zon Demo - Upload Excel to MySQL in PHP </title> <lin
Read more