1. What is jquery?
Ans: Jquery is javascript based fast and concise library which 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 which provides internet contents such as images, videos, files. Due to easily caches end user get load content in a 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 an entire HTML document loaded. But onload method occurs when entire content has been loaded including images. So in good practice, a lot of people use document.ready method.
5. What is $.noConflict?
Ans: $ symbol is common inside a lot of another library so it may be a possible lot of time developer confuse about the $ sign and occurs a big mistake so $.noconflict provide an elegant way by which 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 which we can prevent default action of event. Like a tag redirect on click event.
event.stopPropagation is the way by which we can stop the bubbling 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 codes perform the same thing but the second code is using chaining concept now you can see multiple functions are connected together so basically chaining is the way by which we can connect multiple functions, 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 examples are the same but in the first example, we are creating three id instance but in the second time we are just creating one id instance. So the second way is much better just because 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();
Here you can prepare javascript interview questions.
