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>
Jquery CDN

Advantage of using CDN

The speed goes up as the Library can be used from the cache as several users use them frequently.
Copy Basic Structure of HTML code with JQuery using CDN

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.

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 a sample code to show a button and show a message associated with on Click event of the button.
<title>(Type a title for your page here)</title>
<body >
<button  id=new_one name=button1>My Button</button>

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

$(document).ready(function() {
alert('Hi , you clicked the button');

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


$(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

  // JQuery code written here ...


Basic Code

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


<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 )

<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>

getJSONCollecting and using Json data
getHTTP GET method of posting data
postHTTP POST method of posting data
loadload to fetch file or URL with parameters
TextBoxTextbox value and managing data
ButtonButton reading value and managing attr
CheckboxManaging Checkbox through Jquery
Radio ButtonManaging Radio buttons through Jquery
ListBoxAdding removing options from dropdown list box
functionUser Defined Function
serialize()Input data as name value pair for Form submission
Double ListBoxDependent list box for selection of Category and subcategory
Record DisplayShow record details after selection of Dependent list boxes
Tripple ListBoxCountry > State > City : Selection of linked dropdown
Message BoxMessage layer and tooltip control
Select ElementSelect images or records by clicking
BootstrapPage Design using Bootstrap

SliderChange input data by sliding pointer
Date PickerSelection of dates by using Calendar
draggableDraggable elements UI
droppableDroppable elements UI
Progress BarDisplaying progress with changes in value
AutocompleteSuggestion while entering text by using different sources
Dialog BoxPositioning and displaying data from table and updating records
SpinnerUse up and down arrow to increment or decrement value of a input box
Accordionfor expanding and collapsing content
MenuMenu 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
  • thumbnail Generate Youtube video thumbnail URL by using share link
Form InputsText box, radio buttons, checkbox, dropdown list etc
FormLayout and design of a Form with backend script to post data
Child windowOpening 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)
$("#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
Redirect after some time delay ( here 4 seconds )
setTimeout(function() { window.location = "index.php"; }, 4000);
show message for a duration
setTimeout(function() { $("#msg").fadeOut('slow'); }, 4000);
Page 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 );


* indicates required
Subscribe to plus2net



    how download code from plus2net?


    You will get zip file to download or copy code from the web page, in some places we have added button to copy the code to clipboard.

    Post your comments , suggestion , error , requirements etc here .

    Most Popular JQuery Scripts


    Two dependant list boxes


    Calendar with Date Selection


    Data change by Slider


    Show & Hide element

    JQuery Video Tutorials

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer