JQueryJquery 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 worksWe 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
![]() Advantage of using CDNThe 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 JQueryIf 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 MinifiedUncompressed 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.
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.
HTML elments and JQueryWe can apply JQuery to different HTML elements. Here is some sample codeExamples: $(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
Basic CodeWe 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
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>
Demo Scripts using jQuery
Frequently Used Code
Form reset (id=data)
Redirect to different page or url
Open in a new window
Redirect after some time delay ( here 4 seconds )
show message for a duration
Page Reload
Scrolling to the top of the page
Scrolling to bottom of the page
$("html, body").animate({ scrollTop: $(document).height() }, 500);Scrolling ( vertical ) within DIV
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
Removing and Adding class
This article is written by plus2net.com team.
![]() | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |