CINXE.COM

jQuery Tutorial

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="jQuery, tutorial, tutorials, javascript, traversal, ui, script"> <meta name="Description" content="Learn jQuery in 10 minutes. See why it has become the most popular JavaScript library on the web. "> <link rel="canonical" href="https://www.quackit.com/jquery/tutorial/"> <title>jQuery Tutorial</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> &#9776; </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">jQuery Tutorial</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/category_header --> <div data-fuse="23059883638"></div> </div> <ul class="pager"> <li><a href="/scripting/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Scripting Tutorials</a></li> <li><a href="/jquery/tutorial/what_is_jquery.cfm">What is jQuery? <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">Learn jQuery and see why it has become the most popular JavaScript library on the web!</p> <p>This jQuery tutorial is presented in the following sections for easy reference:</p> <div class="index"> <div class="row"> <div class="cell col-2"> <ul> <li><a href="/jquery/tutorial/what_is_jquery.cfm">jQuery - What is it?</a></li> <li><a href="/jquery/tutorial/getting_started_with_jquery.cfm">jQuery - Getting Started</a></li> <li><a href="/jquery/tutorial/how_to_use_jquery.cfm">jQuery - How to Use</a></li> <li><a href="/jquery/tutorial/jquery_dom_traversal.cfm">jQuery - DOM Traversal</a></li> <li><a href="/jquery/tutorial/jquery_dom_manipulation.cfm">jQuery - Manipulate the DOM</a></li> <li><a href="/jquery/tutorial/jquery_css_manipulation.cfm">jQuery - Manipulate CSS</a></li> <li><a href="/jquery/tutorial/jquery_add_class_dynamically.cfm">jQuery - Add a Class on the Fly</a></li> <li><a href="/jquery/tutorial/jquery_ajax.cfm">jQuery - Ajax Requests</a></li> <li><a href="/jquery/tutorial/jquery_animation.cfm">jQuery - Animation</a></li> <li><a href="/jquery/examples/">jQuery Examples</a></li> </ul> </div> <div class="cell col-2"> <a href="/jquery/tutorial/what_is_jquery.cfm"><img class="img-responsive" src="/pix/stock/jquery_logo.png" alt="jQuery logo"></a> </div> </div> </div> <p>This jQuery tutorial assumes no prior knowledge of jQuery, but you should have a basic understanding of <a href="/html/tutorial/">HTML</a> and <a href="/css/tutorial/">CSS</a> before trying to understand the examples. It will also help if you know <a href="/javascript/tutorial/">JavaScript</a>, as jQuery is based on JavaScript. </p> <ul class="pager"> <li><a href="/scripting/"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Scripting Tutorials</a></li> <li><a href="/jquery/tutorial/what_is_jquery.cfm">What is jQuery? <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/jquery/tutorial/"><i class="fa fa-database"></i> JQuery Tutorial</a></h3> <ul> <li><a href="/jquery/tutorial/what_is_jquery.cfm">jQuery - What is it?</a></li> <li><a href="/jquery/tutorial/getting_started_with_jquery.cfm">jQuery - Getting Started</a></li> <li><a href="/jquery/tutorial/how_to_use_jquery.cfm">jQuery - How to Use</a></li> <li><a href="/jquery/tutorial/jquery_dom_traversal.cfm">jQuery - DOM Traversal</a></li> <li><a href="/jquery/tutorial/jquery_dom_manipulation.cfm">jQuery - Manipulate the DOM</a></li> <li><a href="/jquery/tutorial/jquery_css_manipulation.cfm">jQuery - Manipulate CSS</a></li> <li><a href="/jquery/tutorial/jquery_add_class_dynamically.cfm">jQuery - Add a Class on the Fly</a></li> <li><a href="/jquery/tutorial/jquery_ajax.cfm">jQuery - Ajax Requests</a></li> <li><a href="/jquery/tutorial/jquery_animation.cfm">jQuery - Animation</a></li> <li><a href="/jquery/examples/">jQuery Examples</a></li> </ul> </li> <li> <h3><a href="/javascript/" title="">JavaScript</a></h3> <ul> <li><a href="/javascript/tutorial/" title="Client side scripting language">JavaScript Tutorial</a></li> <li><a href="/javascript/examples/" title="">JavaScript Examples</a></li> <li><a href="/javascript/javascript_reserved_words.cfm" title="">JavaScript Reserved Words</a></li> <li><a href="/javascript/javascript_event_handlers.cfm" title="Introduction to the 12 JavaScript event handlers">JavaScript Event Handlers</a></li> <li><a href="/javascript/javascript_date_and_time_functions.cfm" title="Full listing of all JavaScript methods for dealing with date and time.">JavaScript Date &amp; Time</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/category_vrec_2 --> <div data-fuse="23059883641"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/category_vrec_1 --> <div data-fuse="23059511718"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&amp;lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms&nbsp;of&nbsp;Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy&nbsp;Policy</a></p> <p>&#169; Copyright 2000 - 2025 Quackit.com &nbsp;</p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

Pages: 1 2 3 4 5 6 7 8 9 10