Jquery interview question

jqueryinterview

1. What is jquery?

Ans: Jquery is java script based fast and concise library witch is created by John Resig. Using jquery we can easily work on DOM and Css manipulation, Event handling, Effects and animations, ajax, utilities.

2. What is CDN?
Ans: CDN stands for content delivery networks basically it is a geographically distributed server witch provide internet contents such as images, videos, files. Due to easily caches end user get load content in quick interval.

3. What is the difference between jquery and $ method?
Ans: Both are same things. $ is the shorter way to access function within the jquery library.

4. What is the difference between onload and document.ready?
Ans: document.ready event occurs when entire html document loaded. But onload method occurs when entire content has been loaded including images. So in a good practice lot of people use document.ready method.

5. What is $.noConflict?
Ans: $ symbol is common inside lot of another library so it may be possible lot of time developer confuse about the $ sign and occurs a big mistake so $.noconflict provide a elegant way by witch we can avoid this problem.


var jq = $.noConflict(); // now we can use jq instead of $

jq("#id").hide(); // now this way we can use with all jquery method


6. What is the difference between event.preventDefault(), event.stopPropagation and return false?
Ans: event.preventDefault is a way by witch we can prevent default action of event. Like a tag redirect on click event.
event.stopPropagation is the way by witch we can stop the bubling of an event to parent elements, preventing any parent event handlers from being executed.
return false is the combination of event.preventDefault and event.stopPropagation.

7. What’s the difference between prop and attr?
Ans: The purpose of both method are same but the output will be different the attr method return attribute value but prop gives us true or false value.



<input id="checkbox" type="checkbox" checked="checked"> 

var checkbox = $(“#checkbox”);
console.log(checkbox.attr(“checked”), checkbox.prop(“checked”)); //checked, true

8. What is chaining in jQuery?
Ans: To understand the concept we need to understand this example –



$(document).ready(function(){
    $("#id").addClass('bgclr');
    $("#id").css('color', 'red');
    $("#id").fadeIn('slow');
});​

// Second code

$(document).ready(function(){
    $("#id").addClass('bgclr')
            .css('color', 'red')
            .fadeIn('slow');
});​

both code perform same thing but the second code is using chaining concept now you can see multiple function are connect together so basically chaining is the way by witch we can connect multiple function, event and selector together apart from that code is shorter and faster.

9. What is Selector Caching in jQuery?
Ans: To understand the concept we need to understand this example –



$(document).ready(function(){
    $("#id").addClass('bgclr');
    $("#id").css('color', 'red');
    $("#id").fadeIn('slow');
});​

// Second code

$(document).ready(function(){
    var id = $("#id");
    id.addClass('bgclr');
    id.css('color', 'red');
    id.fadeIn('slow');
});​

both example are same but in first example we are creating three id instance but in second time we are just creating one id instance. So the second way is much better just because of we are reusing variable that is already in memory.

10. What is the difference between the detach, empty and remove?
Ans: detach is a method that remove all child element including selected item but it can track all event and data so we can use it at latter time.
remove is just slimier to detach method it will remove all child element including selected item but it can not track data and events.
empty only remove child element and selected item will not remove.


// Detach
<div class="cmn detach" style="padding:10px; background-color:yellow; border:1px solid #000000; width:300px; height:150px;">
    <div class="child">child</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam tempore exercitationem eum ex assumenda dolorum, sunt mollitia odit fugit! Fuga vel iste officiis, ullam. Maiores aliquam cumque praesentium eaque sint.</p>
</div>

$(".detach").detach();

// Remove
<div class="cmn remove" style="padding:10px; background-color:yellow; border:1px solid #000000; width:300px; height:150px;">
    <div class="child">child</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam tempore exercitationem eum ex assumenda dolorum, sunt mollitia odit fugit! Fuga vel iste officiis, ullam. Maiores aliquam cumque praesentium eaque sint.</p> 
</div>
 
$(".remove").remove();

// Empty
  
<div class="cmn empty" style="padding:10px; background-color:yellow; border:1px solid #000000; width:300px; height:150px;">
    <div class="child">child</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam tempore exercitationem eum ex assumenda dolorum, sunt mollitia odit fugit! Fuga vel iste officiis, ullam. Maiores aliquam cumque praesentium eaque sint.</p>
</div>

$(".empty").empty();


You May Also Like

About the Author: admin