programmingcrackers: Core Concepts in jQuery

jQuery interview questions and answers

1)What is the meaning of $(document).ready(function() { ... });?

document to be “ready” before JavaScript can interact with it.so that it wait until the document is ready for interaction.

jQuery is an JavaScript library that simplifies the interactions between an HTML document and JavaScript.

jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions,and cross-browser JavaScript development.

2)Element based effects in Jquery?

$(document).ready(function () {

$('h2').hide();

$('h2').text('I am from new content');

$('h2').show();

});

<h2>I from element based hiding</h2>

When ever above executed its hiding all <h2> elements in document . “I from element based hiding” will be hidden and display “I am from new content” in all <h2> elements

jQuery allowing us to methods to be chained.

If you want you can write above code below like this it gives gives same output.

$(document).ready(function () {

$('h2').hide().text('I am from new content').show();

});

3)What is Filter() method in Jquery?

Using this function for exclude elements that do not match a specified expression.

$(function () {

alert($('a').filter('.fltr').length + ' external');

});

//op: 3 external

<body>

<div>

</div>

</body>

4)What is Find() method in Jquery?

Using this function for find set of elements based on the context of the current set and their descendants.

$(function () {

alert($('p').find('a').length + ' elements');

});

// 4 elements

<p> hello i am for find method example

</p>

5)What is difference between Filter() and Find() method in jQuery?

From above we can understand that

Find() function returns children elements,

Filter() function only filters what is in the current wrapper set.

Find() function use the current wrapper set to further select the children of the elements selected

Filter() function use the current wrapper set and get a new subset of the current DOM elements in the set only,

6)What is End() method in Jquery?

Using this function you can return to the previous set of DOM elements that were selected before using a destructive method.

$(function () {

alert($('a').filter('.fltr').length + ' filter func');

alert($('a,p').filter('.fltr').end().length + ' filter func');

});

o/p: 2 filter func

5 filter func

<p>

<a></a>

</p>

If we use end() function without using destructive method it returns empty result.( destructive method change the jquery selected elements order)

7)How can we traverse HTML document using jQuery?

jQuery provides a set of methods for traversing the DOM based on the context. Here I showed some methods.

<body>

<div>

<p>

<h1>i am first </h1>

<h1>i am second</h1>

<h1>i am third</h1>

</p>

</div>

<div> i am scond dev</div>

</body>

$(function () {

$('h1:eq(2)').hide(); // hide the <h1>i am third</h1>

$('div:eq(1)').hide(); // <div> i am scond dev</div>

$('h1:eq(1)').prev().hide(); //<h1>i am first </h1>

$('h1:eq(1)').parent().children().show();// shows first Div elements

});

8)What is remove function jQuery( )?

<body>

<div>

<p>

<h1>i am first</h1>

<h2>i am second</h2>

<h1 class="rmv">i am thrid</h1>

</div>

</body>

$(function () {

$('h1').remove(); // removes h1 tag <h1>i am first</h1>

$('h1').remove('.rmv'); // removes h1 having class name .rmv<h1 class="rmv">i am thrid</h1>

});

9)What is Clone() method in jQuery?

jQuery provides the clone() method for copying DOM elements. If we want use this we need to select DOM elements using jquery then we need to apply Clone() method.

<body>

<h1>I am first</h1>

<h2>I am second</h2>

<h1>I am thrid</h1>

</body>

$(function () {

$('h1').clone().appendTo('div');

});

From the above code it copies the h1 elements append this div tag.

I am first

I am second

I am thrid

I am first

I am third

11)Getting and setting the values using jQuery?

What is attr() method in jQuery?

<body>

<p> Here i am showing demo on jQuery functions.</p>

<h1>my demo on getting and setting values </h1>

</body>

$(function () {

$('h1').attr('ID', 'SetID');// here we are setting ID

alert($('h1').attr('id')) // we are getting ID.

});

If we want we can set multiple values. Below like this

$(function () {

$('h1').attr({ 'ID':'SetID', 'class':'style'});

alert($('h1').attr('class'));

});

12)What is The removeAttr() function jQuery?

Using this we can opposite to above attr() function.

$(function () {

$('h1').removeAttr('id')) // we remove ID.

});

Thanks for visiting this blog. How is the content?. Your comment is great gift to my work. Cheers.

Privacy policy , contact us

Pages

Core Concepts in jQuery

2 comments: