jQuery

JavaScript Details Snippets AJAX

Core

jQuery: the most commonly used JavaScript library, which have great number of plugins also.

Two versions are available for download (jQuery.com):

  • Production: minified and compressed, for live website
  • Development:  uncompressed and readable, for testing and development

jQuery library should be linked inside the head element:
(a) with downloaded jquery-3.3.1.min.js:
<script src="jquery-3.3.1.min.js"></script>
or:
(b) with Google CDN (Content Distribution Network):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Do something with selected using jQuery method :

Example:
$(this).hide();

Prevent from running before the document is finished loading:
$(document).ready(function(){
// jQuery methods
});

jQuery selectors (HTML element name, #id, .class) select elements.

jQuery event (e.g. click, keypress) defines the moment when something happens.

EffectsHide/Show   Fade   Slide   Animate    stop()   Callback   Chaining

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

HTML:  Get   Set   Add   Remove   CSS Classes   css()   Dimensions

<script>   $(document).ready(function()   {$("button").click(function(){
$("h1, h2, p").toggleClass("blue");});   });   </script>

<style>   .blue {color: blue;}   </style>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Toggle class</button>

Traversing:  Traversing   Ancestors   Descendants  Siblings   Filtering

AJAX:  AJAX Intro   Load   Get/Post

MiscnoConflict()   Filters

Useful links

Learn

(a) tutorial: w3schools   snoopcode   tutorialspoint   Learning Center
(b) exercises / exam: w3resource – exercises   snoopcode – exercises   w3schools – quiz   w3schools – certificate ($95 online certification)

Practice

(a) w3schools jQuery references:  Selectors   Events   Effects   HTML/CSS   Traversing   AJAX   Misc   Properties  OnlineEditor01
(b) examples: w3schools

Selected Books (ebooks collected)

  1. jQuery

JavaScript Details Snippets AJAX