Introduction

What is jQuery?

• A lightweight JavaScript library
   
• Uses in-built functions which makes developing fast

Introduction > What is jQuery?

How to use

• Locally by downloading the library and include it in your HTML
   
• Including the library directly into your HTML from CDN

Introduction > How to use

Important features

• Cross-browser support
   
• DOM manipulation
   
• AJAX support
   
• Animations
   
• Event handling

Introduction > Important features

Selectors

What is a selector?

• A function that's using expressions to find matching elements
   
• You can select 1 or more HTML elements
   
• They start with a $ sign, also called factory function or jQuery function

Selectors > What is a selector?

Using selectors

Selectors > Using selectors

// Selecting elements matching a name
$('div')
$('p')


// Selecting a single element matching the ID
$('#idname')
$('div#idname')


// Selects all elements matching the Class name
$('.classname')
$('.firstclass.secondclass')


// Selects all available elements
$('*')


// Selects a combination of selectors
$('article, p')
$('p strong, .classname')

Attributes

A few methods

Attributes > A few methods

// Set a key/value as a property to all matching elements
selector.attr({property1:value1, property2:value2})
$('img').attr({ src: '/img/logo.jpg', alt: 'Company logo'});


// Remove an attribute from the matching elements
selector.removeAttr(name)
$('button').removeAttr('border');


// Removes class from the set of matching elements
selector.removeClass(class)
$('p').removeClass('block');


// Add a class if it's not presents and removes a class when it is present
selector.toggleClass(class)
$(document).ready(function() {
    $('div.bar').click(function () {
        $(this).toggleClass('display-text');
    });
});

Events

What is an event?

• Actions that can be detected by your application
   
• Once triggered, you can use a function, also called "Event handler"
   
• Examples:
  • Mouse click
  • Submitting a form
  • Hovering over an element

Events > What is an event?

A few Event methods

Events > A few Event methods

// Preventing the browser from executing a default action
event.preventDefault()


// Preventing any parent handlers being notified of an event
event.stopPropagation()


// Stops the handlers from being executed
event.stopImmediatePropagation()

A few Event Manipulation Methods

Events > A few Event Manipulation Methods

// Binds a handler to one or more events for matching elements or custom events
selector.bind(type, [data], fn)
$(document).ready(function() {
    $('.btn').bind('click', function(event){
        alert('You just clicked on me!');
    });
});


// Removing bound events from matching elements
selector.unbind([type], [fn])


// Creates a hover effect on an object
selector.hover(over, out)
$(document).ready(function() {
    $('btn').hover(			
        function () {
            $(this).css({'border': '1px solid black'});
        }, 			
        function () {
            $(this).css({'border': '1px solid red'});
        }
    );
});


// Function will be executed when the DOM is ready
selector.ready(fn)


// To trigger an every on matching elements
selector.trigger(event, [data])

Effects

A few effects

Effects > A few effects

// Showing and hiding elements
[selector].show(speed, [callback]);
[selector].hide(speed, [callback]);

// Toggling the state of elements
[selector]..toggle([speed][, callback]);

// Fading in elements by adjusting opacity
selector.fadeIn(speed, [callback]);

// Fading out elements by adjusting opacity
selector.fadeOut(speed, [callback]);


// Example fadeIn and fadeOut
$(document).ready(function() {

    $("#in").click(function(){
        $(".block").fadeIn( 'slow', function(){ 
            $(".content").text('Fading in');
        });
    });

    $("#out").click(function(){
        $(".block").fadeOut( 'slow', function(){ 
            $(".content").text('Fading out');
        });
    });
				
});

AJAX

What is AJAX?

• Asynchronous JavaScript and XML
   
• Can be used to load data from a server without refreshing the browser

AJAX > What is AJAX?

A few methods

AJAX > A few methods

// Loading data
[selector].load(URL, [data], [callback]);
$('.block').load('path-to-data');


// Parsing retuned JSON and making it available for a callback function
[selector].getJSON(URL, [data], [callback]);
$.getJSON('test.json', function(dev) {
    $('.developer').html('<p>Outcome: ' + dev.name + '</p>');
    $('.developer').html('<p>Outcome: ' + dev.age + '</p>');
});


// Setting up global settings for future AJAX requests
$.ajaxSetup(options)
$("#driver").click(function(event){
    $.ajaxSetup({
        url: "test.html"
    });				
    $.ajax( {
        success:function(data) {
        $('.block').html(data);
    }
});

A few events

AJAX > A few events

// Attach a function when a request is completed
$(document).ajaxComplete()


// Attach a function when a request is a success
$(document).ajaxSuccess(callback)


// Attach a function when a request is failed
$(document).ajaxError(callback)