Home » Exercises » jQuery Exercises » All jQuery Exercises » Page 2

All jQuery Exercises

Write a simple jQuery plugin to highlight elements

Description: Create a plugin highlight() which sets a yellow background by default, and accepts a color option.

Hint:

  • Add it to $.fn, use $.extend() and return this.each().

HTML of the page

<p class="a">First</p>
<p class="b">Second</p>

Solution

(function ($) {
  $.fn.highlight = function (options) {
    var settings = $.extend({ color: 'yellow' }, options);

    return this.each(function () {
      $(this).css('background-color', settings.color);
    });
  };
})(jQuery);

$('.a').highlight();
$('.b').highlight({ color: 'lightblue' }).addClass('done');
HTML after the code runs

<p class="a" style="background-color: yellow;">First</p>
<p class="b done" style="background-color: lightblue;">Second</p>

How it works

  • The defaults and the user options are merged with $.extend().
  • The plugin returns the jQuery object, so .addClass('done') still works after it.

Read jQuery Plugins.

Write jQuery code to enable the submit button only when a checkbox is checked

Description: The “Register” button must be disabled at the start, and enabled only when “I agree” is checked.

Hint:

  • Use .prop('disabled', ...) in the change event of the checkbox.

HTML of the page

<label><input type="checkbox" id="agree"> I agree to the terms</label>
<button id="register" disabled>Register</button>

Solution

$('#agree').on('change', function () {
  $('#register').prop('disabled', !this.checked);
});

console.log('start: disabled = ' + $('#register').prop('disabled'));

$('#agree').prop('checked', true).trigger('change');
console.log('checked: disabled = ' + $('#register').prop('disabled'));

$('#agree').prop('checked', false).trigger('change');
console.log('unchecked: disabled = ' + $('#register').prop('disabled'));
Console output

start: disabled = true
checked: disabled = false
unchecked: disabled = true

How it works

  • this.checked is true or false. We set disabled to the opposite.

Read Set Content (prop).

Write jQuery code to count the clicks of a button

Description: Show the number of clicks of the “Count” button. A second button must set the count back to 0.

Hint:

  • Keep the count in a variable and update the text in each click.

HTML of the page

<button id="count">Count</button>
<button id="reset">Reset</button>
<p>Clicks: <span id="n">0</span></p>

Solution

var clicks = 0;

$('#count').on('click', function () {
  clicks++;
  $('#n').text(clicks);
});

$('#reset').on('click', function () {
  clicks = 0;
  $('#n').text(clicks);
});

$('#count').click().click().click();
console.log('after 3 clicks: ' + $('#n').text());
$('#reset').click();
console.log('after reset: ' + $('#n').text());
Console output

after 3 clicks: 3
after reset: 0

How it works

  • The variable keeps the state outside of the handlers, so both handlers can use it.

Read jQuery Events.

Write jQuery code to copy the text of one field to another field

Description: If the checkbox “Same as billing” is checked, copy the billing address into the shipping field. If it is unchecked, clear the shipping field.

Hint:

  • Use .val() as getter and setter and .is(':checked').

HTML of the page

<input type="text" id="billing" value="12 Main Road, Delhi">
<label><input type="checkbox" id="same"> Same as billing</label>
<input type="text" id="shipping" value="">

Solution

$('#same').on('change', function () {
  if ($(this).is(':checked')) {
    $('#shipping').val($('#billing').val());
  } else {
    $('#shipping').val('');
  }
});

$('#same').prop('checked', true).trigger('change');
console.log('shipping: "' + $('#shipping').val() + '"');

$('#same').prop('checked', false).trigger('change');
console.log('shipping: "' + $('#shipping').val() + '"');
Console output

shipping: "12 Main Road, Delhi"
shipping: ""

How it works

  • .val() without an argument reads the value, and with an argument it sets it.

Read Get Content and Set Content.