jQuery Interview Questions Part 4

16. What do you know about Chaining in jQuery?

Answer:

Chaining is used to connect multiple events and functions in a selector.

It allows us to run multiple jQuery methods (on the same element) within a single statement.

Using chaining, browsers do not have to find the same elements more than once.

Example:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
    });
});
</script>


The above code snippet demonstrates the chaining of two functions slipUp() and slideDown().

Chaining not only helps you to keep your jQuery code concise, but it also can improve your script's performance since browser doesn't have to find the same elements multiple times to do something with them.

17. What is the difference between onload() and document.ready()?

Answer:

onload()document.ready()
We can have only one onload() function in a page.We can have more than one document.ready() function.
This function is called when DOM and images are loaded on the page.This function is called when DOM is loaded.
It is a standard event in the DOM.This event is specific to jQuery.
Syntax:
<body onload="javascript function name or the actual script">		Syntax:
<script type="text/javascript">
$(document).ready(function() {
      //Script goes here
});
</script>

18. Why is jQuery better than JavaScript?

Answer:

jQuery is a cross-platform JavaScript library used for developing Ajax application and it helps to write the code clean and concise.

It also handles events, animation and Ajax support applications.

It provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.

19. What is the difference between jQuery and JavaScript?

Answer:

jQueryJavaScript
jQuery is a framework.JavaScript is a language.
jQuery is a fast and concise JavaScript library that simplifies HTML document.JavaScript is most popular scripting language on Internet which works on all major browsers.
jQuery has Document Object Model (DOM).JavaScript is a combination of ECMA script and DOM.
Example: jQuery ID Selector

var $val = $("#hello");		Example: JavaScript ID Selector

var $val = document.querySelector('#hello');
Example: jQuery Class Selector

var $val = $('.welcome');
$ ('body') .css ('background', '#ccc');		Example: JavaScript Class Selector

var $val = document.querySelector('.welcome');

Function changeBackground(color){
Document.body.style.background = color;}
onload="changeBackground('red');"

20. What is the difference between Hover and Mouseover?

Answer:

HoverMouseover
Hover specifies two functions to run when the mouse pointer hovers over the selected elements.Mouseover occurs when the mouse pointer is over the selected element.
The hover() method triggers both the mouseenter and mouseleave events.The mouseover() method triggers the mouseover event or attaches a function to run when a mouseover event occurs.
Syntax:

$(selector).hover(inFunction,outFunction)

Parameters,
inFunction: It specifies the function to run when the mouseenter event occurs .

OutFunction: It specifies the function to run when the mouseleave event occurs.		Syntax:

Trigger the mouseover event for the selected elements:
$(selector).mouseover()

Attach a function to the mouseover event:
$(selector).mouseover(function)

Parameters,
function: It specifies the function to run when the mouseover event is triggered.
▲