jQuery Interview Questions
This page consists of jQuery interview questions and answers.
API: https://api.github.com
For this we will use $.ajax() method.
$.ajax()
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.
For this we will use the empty() method.
empty()
// select the element var el = $('#container'); // now empty it el.empty();
For this we will select all the tables inside the div having id 'container' then we will call the remove() method.
remove()
// select the elements var elems = $('#container table'); // now remove them elems.remove();
For this we will first create a new paragraph element and then using the append() method we will append the new paragraph.
append()
// 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);
For this we will first create an image img tag. Then we will set the src attribute to some image.
img
src
Finally, we will select the div by id and using the prepend() method we will prepend the image tag.
prepend()
// 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);
href
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.
each()
attr
// 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); });
We will select the odd position paragraphs using the CSS selector p:nth-child(odd).
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>
We will first select the paragraph using id and then using the removeAttr() method we will remove the attribute.
removeAttr()
// select the element var el = $('#info'); // remove the attribute el.removeAttr('data-description');
filter
The filter method helps to filter selected elements based on some criteria.
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.
css
// 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');