jQuery Interview Questions - Set 3

This page consists of jQuery interview questions and answers.

Q1: How will you set the background color of all the paragraphs to black and text color to white using jQuery?

To accomplish this we will use the css() method.

In the following example we are setting the background color to black and text color to white for all the paragraphs.

$('p').css({
  'background-color': 'black',
  'color': 'white'
});

Q2: How will you change the font size and family to 20px and Arial respectively for a given div having id 'user-info' using jQuery?

For this we will first select the div by id then using the css() method we will set the font size and family to the mentioned values.

$('div#user-info').css({
  'font-size': '20px',
  'font-family': 'Arial'
});

Q3: What is the use of each function in jQuery?

The each is a generic function to iterate over arrays and objects.

In the following example we will print the elements of an array using the each function.

Note! index holds the index of the element of the array and value is the element of the array.

var arr = ['zero', 'one', 'two'];
$.each(arr, function(index, value) {
  console.log(index + " " + value);
});

The above code will print the following.

0 zero
1 one
2 two

Q4: Write jQuery code to select elements having class 'super', 'awesome' and 'fabulous'

For this we can write the following jQuery code.

var super_elems = $('.super');
var awesome_elems = $('.awesome');
var fabulous_elems = $('.fabulous');

Or, we can store them all in one single variable.

var elems = $('.super, .awesome, .fabulous');

Q5: Write jQuery code to handle click event for a button having id 'my-button'

For this we will use the on() method. This will take two arguments. The first one is the click as we are handling the click event. The second one is a function which will be executed when the button is clicked.

$('#my-button').on('click', function() {
  // some code goes here...
});

Q6: How will you check if an element having id 'info' has class 'loaded' using jQuery?

For this we will first select the element by id and then we will use the hasClass() method which will return true if the class is present. Otherwise, it will return false.

// get the element
var el = $('#info');

// now check the class
if (el.hasClass('loaded')) {
  console.log('Class loaded is present');
} else {
  console.log('Class loaded is not present');
}

Q7: How will you get the selected option for the given select element using jQuery?

<select id="item">
  <option value="-">--- Select Item ---</option>
  <option value="Apple">Apple</option>
  <option value="Mango">Mango</option>
</select>

For this we will first select the element by id and then call the val() method to get the selected value.

var selectedValue = $('#item').val();

Q8: How will you get the value of all the selected checkboxes using jQuery?

<input type="checkbox" name="fruit" value="Apple"> Apple
<input type="checkbox" name="fruit" value="Mango"> Mango
<input type="checkbox" name="fruit" value="Orange"> Orange

For this we will first select all the checkboxes then we will use the each() method to get the value of all the checked checkboxes.

var checkbox = [];
$('input[name="fruit"]:checked').each(function() {
  checkbox.push(this.value);
});
console.log("Checkbox selected: " + checkbox);

Click here to learn more about form handling using jQuery.

Q9: How will you get the value of the selected radio button using jQuery?

<input type="radio" name="fruit" value="Apple"> Apple
<input type="radio" name="fruit" value="Mango"> Mango
<input type="radio" name="fruit" value="Orange"> Orange

For this we will first select the radio button that is checked and then using the val() method we will get the value of the selected radio button.

var radio = $('input[name="fruit"]:checked').val();
console.log('Selected radio: ' + radio);

Q10: How will you get the value of an email field having id 'user-email' using jQuery?

First we will select the input email field using the id and then using the val() method we will get the value entered in the field.

var email = $('#user-email').val();