Introduction

What is jQuery

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

How to use

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

Important features

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

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

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

// 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

A few 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()
// 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])

A few manipulation methods

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');
        });
    });
				
});

A few effects

jQuery

By CodePamoja

Made with Slides.com

jQuery

  • 17

More from CodePamoja