jQuery Interview Questions - Set 4

This page consists of jQuery interview questions and answers.

Q1: How will you make a GET request to the following API using jQuery?

API: https://api.github.com

For this we will use $.ajax() method.

In the following code we are making a GET request to the given API and printing the response in the console.

$.ajax({
  url: 'https://api.github.com',
  method: 'GET',
  success: function(data) {
    console.log(data);
  }
});

Click here to learn more about jQuery AJAX method.

Q2: How will you delete all the child elements inside a given div having id 'container' using jQuery?

For this we will use the empty() method.

// select the element
var el = $('#container');

// now empty it
el.empty();

Q3: How will you delete all the tables inside a div having id 'container' using jQuery?

For this we will select all the tables inside the div having id 'container' then we will call the remove() method.

// select the elements
var elems = $('#container table');

// now remove them
elems.remove();

Q4: How will you append a new paragraph inside a div having id 'container' using jQuery?

For this we will first create a new paragraph element and then using the append() method we will append the new paragraph.

// create a new paragraph
var p_el = $('<p></p>');

// add some text
p_el.text('This is a simple paragraph.');

// select the div
var div_el = $('#container');

// now append the paragraph
div_el.append(p_el);

Q5: How will you prepend a new image tag inside a div having id 'container' using jQuery?

For this we will first create an image img tag. Then we will set the src attribute to some image.

Finally, we will select the div by id and using the prepend() method we will prepend the image tag.

// create image tag
var imgEl = $('<img>');

// set src attribute
imgEl.attr('src', 'path/to/image.png');

// select the div
var divEl = $('#container');

// prepend the image
divEl.prepend(imgEl);

Q6: How will you print the href value of all the anchor tags in a page using jQuery?

For this we will first select all the anchor tags. Using the each() method we will iterate through each selected anchor tags. To get the value of the href attribute we will use the attr method.

// select all the anchor tags
var aElems = $('a');

// loop using each
aElems.each(function() {
  // get the href
  var href = $(this).attr('href');

  // now print
  console.log(href);
});

Q7: How will you select all the odd position paragraphs in a page and print their text in the browser console using jQuery?

We will select the odd position paragraphs using the CSS selector p:nth-child(odd).

// select the odd position paragraphs
var pElems = $('p:nth-child(odd)');

// loop
pElems.each(function() {
  // print the text
  console.log($(this).text());
});

If we have the following paragraphs in the web page.

<p>Hello World 1</p>
<p>Hello World 2</p>
<p>Hello World 3</p>
<p>Hello World 4</p>
<p>Hello World 5</p>
<p>Hello World 6</p>

Then the above jQuery code will give us the following output.

<p>Hello World 1</p>
<p>Hello World 3</p>
<p>Hello World 5</p>

Q8: How will you remove 'data-description' attribute from a paragraph having id 'info' using jQuery?

We will first select the paragraph using id and then using the removeAttr() method we will remove the attribute.

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

// remove the attribute
el.removeAttr('data-description');

Q9: What is the use of filter method in jQuery?

The filter method helps to filter selected elements based on some criteria.

Q10: How will you set the background color of all the odd place paragraphs to yellow using jQuery filter method?

For this we will first select all the paragraphs present in the page. Then using the filter method we will get the odd place paragraphs. Finally using the css method we will set the background color.

// select the paragrpahs
var pElems = $('p');

// filter
var filteredElems = pElems.filter(':nth-child(odd)');

// now set the background color
filteredElems.css('background-color', 'yellow');

We can chain the three steps into one like the following.

$('p')
  .filter(':nth-child(odd)')
  .css('background-color', 'yellow');