Learning

In a nutshell, jQuery is a simplified version of JavaScript. It uses most of JavaScript’s abilities but allowing the user to achieve more with less written code. One of jQuery/JavaScript’s main purposes is to create functions or scripts that target selected HTML elements and change them when a user interacts with them. For example, hide an element when it’s clicked or change the background color of an element when the user’s hovers it.

It’s written code with predetermined functions set to go off based on user interaction. These are just some small examples of what jQuery is possible of.

To better understand how it works, let’s break down the jQuery syntax.

Document Ready Event Syntax

This tells the function not to execute until the document (html page) has fully loaded.

$(document).ready(function(){

   // jQuery methods go here...

}); 

jQuery Syntax

The syntax is created for selecting HTML elements and performing action on them.

Basic Syntax:

$(selector).action() is our basic syntax.

But first, we would prepare our script with the Document Ready Event Syntax and then start our jQuery syntax inside the { } brackets of the document ready function.

Try writing your own Document Ready Event Syntax in the input box below:

Remember, there are:
– three sets of ( )
– three main words
– one set of { }
– one $ symbol
– and one; symbol

Try to break it into four parts and remember, Document Ready Function or DRF for short:

$(document)
.ready
(function() {
});

$(document).ready(function() {

});

Remember, this only wraps around your actual script.

jQuery Method

Once you’re comfortable writing out the Document Ready Event, the next step would be to add our jQuery method in between the set of { }. See below:

$(document).ready(function(){

   // jQuery methods go here...

}); 

Hover over the colored jQuery syntax to understand what each part is doing.

So our syntax translates to: start jQuery, select an element, perform action.

The only parts of this syntax we’re interested in changing are the words ‘selector’, ‘action’, and adding arguments inside the ( ). Let’s go over some examples of different ways to target different elements.

Color Table

Hover over each colored item to see what it is.

Examples:

$(this).hide() – hides the current element.
$(“div“).hide() – hides all <div> elements and everything inside it..
$(“.test“).hide() – hides all elements with class=”test” and everything inside it.
$(“#test“).hide() – hides the element with id=”test” and everything inside it.
$(“header“).hide() – hides the HTML tag header and everything inside it.

These are examples of using the hide() effect to various selectors. Notice the selectors are the only things changing in each example. Also, notice the first one

Note:

If you’re selected a HTML element, it must be wrapped in a double quotation”” inside the () or it will look for a variable. Ex, $(“p”) selects all p tags and $(p) selects the var p = .my-paragraph-class. The $(p) would actually try to select all classes set by the variable p = .my-paragraph-class. Notice the difference.

jQuery Selectors

Remember, jQuery uses the same selectors that CSS uses.

Example:

CSS Selector: input a {} is how you select ‘input a’ for CSS and
jQuery Selector: $(“input a”).action(); is how you would select ‘input a’

HTML Tag: To select all the <p> elements on a page: $(“p”)
HTML ID: To select an id from the page: $(“#test”)
HTML Class: To select an id from the page: $(“.test”)

Script Example

When a user clicks on a button, all <p> elements will be hidden:

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

Working Example

Selector Examples

$(“*“) Selects all elements
$(this) Selects the current HTML element
$(“p.intro“) Selects all <p> elements with class=”intro”
$(“p:first“) Selects the first <p> element
$(“ul li:first“) Selects the first <li> element of the first <ul>
$(“ul li:first-child“) Selects the first <li> element of every <ul>
$(“[href]“) Selects all elements with an href attribute
$(“a[target=’_blank’]“) Selects all <a> elements with a target attribute value equal to “_blank”
$(“a[target!=’_blank’]“) Selects all <a> elements with a target attribute value NOT equal to “_blank”
$(“:button“) Selects all <button> elements and <input> elements of type=”button”
$(“tr:even“) Selects all even <tr> elements
$(“tr:odd“) Selects all odd <tr> elements

jQuery Events

Mouse Events

click()
dblclick()
mouseenter()
mouseleave()

Keyboard Events

keypress()
keydown()
keyup()

Form Events

submit()
change()
focus()
blur()

Document/Window Events

load()
resize()
scroll()
unload()

jQuery Syntax For Event Methods

click event when all paragraph elements are clicked

$("p").click(function(){
  // action goes here!!
}); 

Script Example

When input is clicked, or focused on, background-color will change.
When input was clicked on and user clicks out of that input, background-color will change back.

$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#cccccc");
    });
    $("input").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
});

Working Example

Note

If you intend on using multiple events in one function, using .on instead of the specific event is a more consistent way of writing your jQuery event because it allows you to reference multiple events in the same function.

Example:

When the mouse hovers over P tag, the background color will change to lightgray
When the mouse hovers and leaves over P tag, the background will change to lightblue
When the mouse clicks the P tag, the background color will change to yellow

Script Example

$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
});

Working Example