JQuery Library integaration tutorials basic code and scripts to download

Jquery works with a JavaScript Library which is loaded to execute the code. Several standard functions are already written in the linked library so we can directly use them in our code.

How the script works

We must load the Library file first. We can download the file from jquery.com. Or we can use the Content Delivery Network ( CDN) of google , Microsoft or JQuery.com and point to their link. Here is the sample code to link to Google CDN

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Advantage of using CDN

The speed goes up as the Library can be used from the cache as several users use them frequently.

Installing JQuery

If you are not using CDN then you can download JQuery files from here. There is one basic file and above that you can download different plugins as per your requirements.

JQuery UI

Most important additional requirement will be JQuery UI ( JQuery user interface ) which is a library of different widgets like Date picker ( Calendar ) , Slider , Spinner etc.
To use JQuery UI, you must include JQuery. JQuery is the core library , JQuery UI is built on top of it.

In addition to basic JQuery library you need one more CSS file ( Style ) , known as Themes.

Download JQuery UI here

Uncompressed or Minified

Uncompressed files have long variable names, blank space and line breaks etc so it occupies more space. You need this for development of script, modifications etc. For production environment when site is lunched it is better to use minified version as it occupies less space.
Here is the files required for JQuery UI

JQuery
JQuery UI
JQuery UI CSS
Additional Plug in files

Visit JQuery UI CDN

Here is the sample code required to link to CDN

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css" rel="stylesheet">

Keep this code above the <script>JQuery Code</script> and before the end of <BODY> tag

JQuery UI Themes

These are Thems you can configure or download

How to use Themes for JQuery UI components

Check different themes by using the dropdown list at right side of the above demo page. Once you select a theme from the list the changes will be shown and the URL of the CDN ( Content Delivery Network ) is displayed. Copy the URL and use it like this .

<link href='https://code.jquery.com/ui/1.12.1/
themes/humanity/jquery-ui.css' rel='stylesheet'>

Here is a sample code to show a button and show a message associated with on Click event of the button.

<html>
<head>
<title>(Type a title for your page here)</title>
</head>
<body >
<button  id=new_one name=button1>My Button</button>

<script src="jquery-3.1.1.min.js"></script>

<script>
$(document).ready(function() {
$('#new_one').click(function(){
alert('Hi , you clicked the button');
})
})
</script>

</body>
</html>

Notice that we have used one external JavaScript file jquery-3.1.1.min.js , this is the main JQuery file which can be linked to get all libraries. You can download JQuery library file from here. Instead of downloading you can use CDN to link to this file.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

HTML elments and JQuery

We can apply JQuery to different HTML elements. Here is some sample code

Examples:

$(this).hide() - hides the current element.
$(this).show() - show the current element.
$("p").hide() - hides all <p> elements.
$(".my_element").hide() - hides all elements with class="my_element".
$("#my_id").hide() - hides the element with id="my_id".
$("#my_id").toggle() - toggle element with id="my_id".

Basic syntax of JQUERY

$(document).ready(function(){

  // JQuery code written here ...

});

Basic Code

JQUERY Basics Effects Events

We will display an alert window from a button click. For showing alert window there is no need to use JQuery but with this we will learn how click event is triggered.

The element which can fire the click event can be identified by its assigned class, like this

$(document).ready(function(){
 $(".button2").click(function(){
 alert('hi');
 });
});

<input type=button value='Show Hi' class='button2'>

Here is a problem. Once the same class is assigned to different elements then all those elements will fire the click event. Check this code. Here on Click of input text box also will display the alert window. To differentiate each element of a webpage we will assign unique id to the element.

This is a div layer ( Hide Me )

<script>
$(document).ready(function(){
$("#button1").click(function(){
  $("#basic_div").toggle();
});
});
</script>
<input type=button value='Hide / Un-Hide Layer' id="button1">
<div id="basic_div" style="width: 100px; height: 100px; background: yellow;padding-left:12px;"> This is a div layer ( Hide Me )</div>

Exercise Try these questions to understand and manage JQuery.

Application	Description
getJSON	Collecting and using Json data
get	HTTP GET method of posting data
post	HTTP POST method of posting data
load	load to fetch file or URL with parameters
TextBox	Textbox value and managing data
Button	Button reading value and managing attr
Checkbox	Managing Checkbox through Jquery
Radio Button	Managing Radio buttons through Jquery
ListBox	Adding removing options from dropdown list box
function	User Defined Function
serialize()	Input data as name value pair for Form submission
Double ListBox	Dependent list box for selection of Category and subcategory
Record Display	Show record details after selection of Dependent list boxes
Tripple ListBox	Country > State > City : Selection of linked dropdown
Message Box	Message layer and tooltip control
Select Element	Select images or records by clicking
Bootstrap	Page Design using Bootstrap

Widgets	Description
Slider	Change input data by sliding pointer
Date Picker	Selection of dates by using Calendar
draggable	Draggable elements UI
droppable	Droppable elements UI
Progress Bar	Displaying progress with changes in value
Autocomplete	Suggestion while entering text by using different sources
Dialog Box	Positioning and displaying data from table and updating records
Spinner	Use up and down arrow to increment or decrement value of a input box
Accordion	for expanding and collapsing content
Menu	Menu with submenu

Demo Scripts using jQuery

Tooltip Display help text above part of the text
Online Survey A set of questions for user to submit choice
Event Calendar Add and display events by selecting dates from Calendar
Fetch Record Collect record details from MySQL table on button click
Data Matrix Update MySQL records through Grid View
Password Vaidation Check the user input in password field with message
Textarea Counter Display number of text inside textarea along with a progress bar
PHP Converter Compatible JQuery code to run inside PHP script
Colur Sliders Generate CSS by selecting colour of font and background
Edit Record Edit and update rows of data using PHP MySQL
Searching Search using suggested matching options as we enter chars
Signup Signup and login script
Image Coordinates X Y Coordinates of a click on image

Application	Description
Form Inputs	Text box, radio buttons, checkbox, dropdown list etc
Form	Layout and design of a Form with backend script to post data
Child window	Opening closing and passing data between parent & child window

Frequently Used Code

$('#empno').focus(); // focus on text box with id empno
$('#empno').select(); // select all text inside text box with id empno
$('#empno').focus().select(); // better way with less code

Form reset (id=data)

$('form#data').trigger("reset");

$("#t1").css("background-color", "yellow"); // Set Background color to yellow

Redirect to different page or url

 window.location = "index.php";

Open in a new window

window.open('index.php','_blank')

Redirect after some time delay ( here 4 seconds )

setTimeout(function() { window.location = "index.php"; }, 4000);

show message for a duration

$("#msg").show();
setTimeout(function() { $("#msg").fadeOut('slow'); }, 4000);

Page Reload

location.reload();

Scrolling to the top of the page

$('html, body').animate({scrollTop: 0 }, 'slow');

Scrolling to bottom of the page

$("html, body").animate({ scrollTop: $(document).height() }, 500);

Scrolling ( vertical ) within DIV

$('#d2').animate({scrollTop: 0 }, 'slow'); // to scroll top
$("#d2").animate({ scrollTop: $('#d2').prop('scrollHeight') }, 2500); // to bottom

Iterate through all elements of an object

$('.select_card').each(function() {
var my_id=this.id;
cards_to_upd.push(my_id); // storing in an array
});

Refresh button with Bootstrap design

<div class=text-center><a href=''><button type='button' class='btn btn-info'>Try again : Refresh</button></a></div>

Removing and Adding class

var presentClassName = $('#d1').attr('class');
var appliedClassName='bg-success ' + font_style ;
$('#d1').removeClass( presentClassName).addClass( appliedClassName );

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element