jQuery

jQuery Selectors

Code 

$('#ex1DivButton').click(function () {
    let colour = getRandomColour();
    $('#demo1 div').css("background-color", colour);
});
    
$('#ex1ClassButton').click(function () {
    let colour = getRandomColour();
    $('.ex1DemoClass').css("background-color", colour);
});
    
$('#ex1IDButton').click(function () {
    let colour = getRandomColour();
    $('#ex1DemoID').css("background-color", colour);
});
Click on the buttons to recolour the selected elements
Div
Div Class
Div Class ID

Selector Filtering

Code 
$('input:radio[name=radio-group]').change(function() {
    $('#ex2Output').html($('input:radio[name="radio-group"]:checked').val());
});
Change the radio button selection

Selected option is

Click Event

Code 
          $('.ex3Click').click(function () {
    $(this).css("background-color", getRandomColour());
});
Click on the box to change its colour
Click me
or me
or me

Hover

Code 
$("#overlay").hide();
$(".hover").hover(function () {
    $("#overlay").css($(this).offset());
    $("#overlay").html($(this).css("background-color").toString()).show();
}, function () {
    $("#overlay").hide();
});
Mouse over the coloured cells to show an overlay
1 2 3
4 5 6

Handling Mouse Input

Code 
$('#demo3').click(function() {
    $('#lightbox').slideToggle(500);
});
Click on the lightbox to toggle show or hide its content

Lightbox

Animation Speed

Code 
let ex9Animated = false;

$('#ex9 button').click(function () {
    let x = ex9Animated ? '0px' : '700px';

    $('#ex91').animate({left: x}, "fast");
    $('#ex92').animate({left: x}, "slow");
    $('#ex93').animate({left: x}, 1000);

    ex9Animated = !ex9Animated;
});
Click to start animation
Fast
Slow
1000ms

Animation Chaining

Code 
$('#ex10 button').click(function () {
    let target = $('#ex10animate');
    target.animate({height: '500px', opacity: '0.5'}, "slow")
        .animate({height: '500px', width: '500px', opacity: '1'}, "slow")
        .animate({height: '100px', opacity: '0.5'}, "slow")
        .animate({width: '100px', opacity: '1'}, "slow");
});
Click to start animation

Input fetching & element creation

Code 
$('#ex11 button').click(function () {
    $('#ex11 table').append(                // append table row
        $('').append(                       // append table data
            $('').text(                     // set the text of td
                $('#ex11 input:text').val() // fetch input value from user
            )
        )
    );
});