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

Yes No Maybe I dunno

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

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

Fade in/out

Code

let isFaded = false;

$('#ex7button').click(function() {
    $('#ex7img').fadeOut("slow");
    if (isFaded)
        $('#ex7img').fadeIn("slow");
    else
        $('#ex7img').fadeOut("slow");
    isFaded = !isFaded;
});

Click on the button to fade the image in and out

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

Enter Record Data