JavaScript Basics Tutorial

An overview of Javascript fundementals

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. - jquery.com

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the elements. The Basic syntax is:
$(selector).action()

Selectors:

jQuery selectors allow you to select and manipulate HTML elements. jQuery selectors are used to find or select HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

Here are some examples:

$("h1")             //element selector
$("#mainHeading")   //ID selector
$(".yellow")        //class selector
$("*")              //selects all HTML elements
$(this)            //selects current element
$("button")         //selects button element
$("[href]")         //selects all link based elements

actions:

JQuery action()'s are jQuery built-in functions that can manipulate, remove, add or create elements.
common built-in functions include:

  • after() - Inserts content after the selected HTML element
  • append() - Inserts content at the end of the selected element
  • before() - Inserts content after the selected HTML element
  • empty() - Removes the child elements from the selected element, but not the element itself
  • prepend() - Inserts content at the beginning of the selected element
  • text() - sets or returns the text content of the selected element
  • val() - Sets or returns the value of a form field
  • remove() - Removes the selected element, including its child elements

Here is an example of a selected element being altered using jQuery:


let newParagraph = $("<p></p>").text("This is a new paragraph.");  //creates a new paragraph

$("body").append(newParagraph);     //appends newParagraph to the end of the body element

Events and Effects

An event represents the precise moment when something happens. All the different visitors' actions that a web page can respond to are called events. jQuery allows us to recognize these events and react to them.

Common DOM events in jQuery:

    Mouse Events
  • click
  • dblclick (double click)
  • mouseenter
  • mouseleave
    keyboard events
  • keypress
  • keydown
  • keyup
    Form Events
  • submit
  • change
  • focus
  • blur
    Document/window events
  • load
  • resize
  • scroll
  • unload

jQuery enables us to add effects on a web page using built-in methods. jQuery effects can be categorized into fading, sliding, hiding/showing and animation effects.

Here are some common jQuery effects:

  • hide() - hides the selected elements
  • show() - shows the selected elements
  • fadeIn() - fades in the selected elements
  • fadeOut() - fades out the selected elements
  • fadeTo() - fades in/out the selected elements to a given capacity
  • slideDown() - slides down (shows) the selected elements
  • slideUp() - slides up (hides) the selected elements
  • slideToggle() - toggles between the slideDown() and slideUp() methods
  • stop() - stops the currrently running animation for tne selected elements
  • toggle() - toggles between the hide() and show() methods

Example:


//here the click() event is fired when a user clicks on the selected paragraph element   
//the hide() effect is implemented on the current paragraph. The speed input parameter is set to 'slow'                 
$("p").click(function(){
    $(this).hide('slow');
});

//jQuery allows us to chain actions/methods together.
//this allows us to run multiple jQuery methods on the same element within a single statement:

$("button").css("color", "blue").slideDown(500).slideUp(500);
// the button element's color will change to blue, then it will slide down in 500ms, then back up in 500ms

seperate scripting files

When icorporating jQuery in your project remember to include both your scripting file and the jQuery scripting file so that your code will work: 


<head>
    <script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"</script>
    <script> src="script.js"</script>
</head>
<!-- Used to create a scripting file incorporating jQuery -->

Exercise

Insert the relevant jQuery event and effect so that when a user double clicks on the button, the paragraph will toggle between the slideDown() and slideUp() methods.


$("button").(function(){
    $("p").("fast");
});

  try Again!
 prev  Events
 next