jQuery Interview Questions
This page consists of jQuery interview questions and answers.
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'
});
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'
});
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
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');
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...
});
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');
}
<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();
<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.
<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);
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();
ADVERTISEMENT