Jquery is an optimized lightweight JavaScript Library. It helps to develop more functional applications using less line of codes. You can say Jquery is the enhanced version of JavaScript. It contains many in-built functions to interact with HTML & JavaScript. You can download Jquery from http://jquery.com. Jquery is popular due to its reuse-ability. Jquery saves programmer time. For your successful interview read our Jquery Interview Questions and Answers. These Jquery interview questions are useful for both Experienced & Freshers professionals.
What is the difference between Jquery & JavaScript?
JavaScript is a programming language formalized in the ECMAScript standard. When Jquery is a library developed using JavaScript. Jquery contain many common used JavaScript functions. Using Jquery we can prepare cross-browser compatible applications with less line of codes. Compare to JavaScript Jquery save time of a programmer & Applications developed using Jquery is easy to debug.
What you required to Start you first Hello World program using Jquery?
To start with Jquery “Hello World” program you need a text editor and the downloaded version of Jquery file. You can download Jquery file from http://jquery.com. To integrate this on your page you can refer the line below.
<script type="text/javascript" src="jquery.min.js"></script>
After integrated Jquery file in your HTML page. Write the following lines of code.
$document.ready(function() {
alert('Hello World!');
});
What is document.ready() method in Jquery?
Document.ready() method is used to execute Jquery after the HTML Document loaded to the Client Browser. In below I am sharing my first Jquery program to show you an example of document.ready() method.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('My First Jquery Program.');
});
</script>
</head>
<body>
My First Jquery Program.
</body>
</html>
How to select all elements in a page using Jquery?
Using all selector in Jquery we can select all elements in a HTML page. Syntax used to select all elements is *. Look at the example below. In document.ready method here I am applying font style to all elements in a HTML page.
$("*").css("font-size", "14px");
What are the different type of Selectors available in Jquery?
In Jquery we have 3 types of Selectors. These are CSS selector, Xpath selector & Custom selector.
Explain me the show & hide methods in Jquery?
Show & hide are the ready-made methods of Jquery to Show or Hide any HTML element. Using show or hide methods in Jquery we can also add duration for showing or hiding an element. Show and Hide methods in Jquery accepts 2 parameters speed & callback. Look at the example below using Jquery Show & Hide methods.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnShow').click(function() {
$('#txtLabel').show();
});
$('#btnHide').click(function() {
$('#txtLabel').hide();
});
});
</script>
</head>
<body>
<div id="txtLabel">This is a sample text.</div>
<button id="btnShow">Show</button>
<button id="btnHide">Hide</button>
</body>
</html>
What are the advantages using Jquery?
Jquery is a JavaScript Library which gives ability to develop high performance web applications using less line of Codes. There are many advantages using Jquery.
A. Jquery is Cross-browser Compatible. With Jquery stuffs we don’t need to worry about Browser Compatibility.
B. Jquery is easy to learn & implement. To do a small animation in client-side we must need to write 10 to 15 lines of JavaScript codes. Using Jquery this can be done using one function. Jquery comes with many in-built functions. Jquery improves programers time by delivering quality outputs.
C. Jquery helps to improve the performance of a web-application.
D. In a HTML Document Jquery is easy to use for DOM manipulation & traversal.
E. Jquery Supports Event detection and handling.
F. Jquery is rich with AJAX Capability. Thousand of free plugins are available for Jquery.
What is jQuery noConflict method?
JQuery uses $ sign as the alias. There are many other JavaScript libraries those uses $ sign. To prevent conflict with other libraries methods or different versions of JQuery, JQuery introduced noConflict method. You can use noConflict using the following Syntax.
$.noConflict();
Let’s assume in your application you want to use two versions of JQuery. Version 1.1.2 & Version 1.1.3. In this case to prevent conflict among the different versions you can do the following.
<script type="text/javascript" src="http://example.com/jquery-1.1.2.js"></script> <script type="text/javascript"> var jquery-112 = $.noConflict(true); </script> <script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script> <script type="text/javascript"> var jquery-113 = $.noConflict(true); </script>
How do you disable or enable a form element using Jquery?
Let we have an input box with id txtName. Two more buttons are there btnEnable & btnDisable. On click of enable button I want to enable the input box & on click of disable button I want to disable the input control. Look at the example below.
$('#btnEnable').click(function() {
$('#txtName').attr('disabled', false);
});
$('#btnDisable').click(function() {
$('#txtName').attr('disabled', true);
});
How to Change href attribute of an anchor tag using JQuery?
JQuery provides attr() method to change control attributes. Let us assume we have a button control with id “btn1”. On this button click we want to assign link to a anchor tag named “link1”.
$('#btn1').click(function() {
$('#link1').attr('href','http://google.com');
});
How to Valid an email using JQuery?
To valid email id using JQuery create a separate function ValidEmail(). Pass the email id as a parameter. Using Regex we can valid the email id. Example shown below.
function ValidEmail(EmailID) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(EmailID)) {
return true;
}
else {
return false;
}
}
What is JQuery Selector? Explain me with Example.
JQuery selectors used to select group of HTML elements. Additionally JQuery supports CSS & ID Selector. JQuery Selector always starts with a dollar sign & parentheses. In case of we want to select all the div’s using Jquery Selector. The Syntax is as follows.
$(div)
Using CSS selector in JQuery we can select a control from its CSS class name. Let us we have a div with class “StyleDiv”. CSS Selector in JQuery uses dot with the class name to select the element. It can be selected using the following CSS selector.
$('.StyleDiv')
About ID Selector in JQuery we can select a control which have an ID. Let us we have a div with ID “MasterDiv”. ID selector is the most fastest JQuery selector compare to other selectors. It can be used using the following Syntax. # is the key to select a control using ID.
$('#MasterDiv')
Explain the animate function in JQuery.
In a HTML page for Client side animations JQuery provides animate function. Animate function accepts 4 parameters. Syntax of Animate function is as below.
$(selector).animate({params}, [duration], [easing], [callback])
Param defines CSS property on which we want animation. Using Duration we can set how long our animation will run. Easing is the controller to transition. Callback is the function which you can run just after the animation completed.
What is jQuery.holdReady() function?
Using jQuery.holdReady() function we can hold or release the execution of jQuery ready event in a HTML page. Jquery holdReady function accepts boolean parameters. To hold the execution we can write the following syntax.
jQuery.holdReady(true);
When we want to release the ready event we need to set holdReady to false as shown below.
jQuery.holdReady(false);
What is JQuery Ajax method?
JQuery Ajax method perform an asynchronous HTTP request. It accepts 2 parameters. URL & the settings as shown as below.
jQuery.ajax(url [, settings ])
Using JQuery Ajax method we can retrieve the DOM object value. Let us have a page demo.html. What we want is to extract the DOM object body contexts. After retrieve contexts we want to disable to the button control. Look at the example shown below.
$.ajax({
url: "demo.html",
context: document.body
}).done(function() {
$( this ).addClass( "class-disable" );
});
How animate method works in JQuery?
To made 2D animations easy, JQuery introduced animate method. It accepts 3 parameters. First one is the params. Using params we provides CSS to the future animation. Speed is the second parameter, which decides the speed of animation frames duration. Last parameter is Callback. It is a function which executes just after the animation completed. Let you see an example below.
$("btnAni").click(function(){
$("div").animate({
left:'350px',
opacity:'0.6',
height:'250px',
width:'180px'
});
});
Can we use two versions of JQuery in the same HTML page?
Yes. We can use multiple versions of JQuery in a same HTML page. To do so JQuery provides noConflict method. Lets take an example. In below code I have 2 versions of JQuery. JQuery-1.1.2 & JQuery-1.2.3.
<!-- Referring jQuery 1.2.3 Version --> <script type="text/javascript" src="jquery-1.2.3.js"></script> <script type="text/javascript"> var jQuery_3 = $.noConflict(true); </script> <!-- Referring jQuery 1.1.2 Version --> <script type="text/javascript" src="jquery-1.1.2.js"></script> <script type="text/javascript"> var jQuery_2 = $.noConflict(true); </script>
To use JQuery 1.2.3 we can call JQuery_3 in place of $ sign. For JQuery 1.1.2 we can replace $ sign with JQuery_2.
What is the difference between attr & prop in JQuery?
In case we are changing the attribute of a control using jquery we use attr. For an example on a button click I want to update an anchor tag hyperlink. Look at the code below.
$('#btnclick').click(function() {
$('#myanch').attr('href','http://google.com');
});
To get the value & property we use prop method in jquery. Let you have a checkbox & you want to know its state. Checked or un-checked. In this case we use prop. Look at the code below.
$('#btnclick').click(function() {
$('#mycheckbox').prop('checked');
});
To remove property we use removeProp in JQuery.
What is minify version of Jquery?
Minified version of JQuery is nothing but the same copy of Jquery library file but it is in compressed form. The extension of minify version is comes with .min.js. Minified version provides more performance then the normal one. In the cause many web development farms prefer to use minify version in there production server. To convert your JavaScript file for minify version there are many online providers. You can find then using Google search.
How to load Jquery from Local if CDN link fails?
In a web application to refer Jquery library many of us follow CDN link pattern. But for more safty approach it is better to provide both the options to access library file. In the below script I refered Jquery-1.10.2.js using CDN link as well I am checking if this fails then I am fetching the same library file from my server scripts folder.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
document.write(unescape("%3Cscript src='scripts/jquery-1.10.2.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
What is the use of JQuery $.extend method?
Using JQuery $.extend method we can merge the contents of two or more objects into the first object. The syntax is as follow.
var obj-0 = $.extend({}, obj-1, obj-2);
Let’s we have two array’s arr-i & arr-j. During development what I need is I want to merge arr-j values to arr-i. In this case jquery extend method helps.
$.extend( arr-i, arr-j );
But this is not recursive. To merge two objects recursively we need to pass the first parameter value true to extend method. As shown in below.
$.extend( true, arr-i, arr-j );
What is JQuery $.map method?
Jquery map method is used to translate items of an Array or object to new array of items. Let’s take an example.
var tempArray = { "name":"biswabhusan", "age":32, "designation":"UI lead" };
var realArray = $.makeArray( tempArray )
$.map( realArray, function( val, i ) {
// Do something
});
Can I have multiple Jquery document.ready() method in a html page?
Yes. We can declare any number of document.ready() method in a same HTML page.
What is the difference between document.ready() & body onLoad() method?
Document.ready() is a Jquery method. During page loading it executes just after DOM (Document Object Model) elements are loaded. Where HTML body onLoad() method loads after everything get loaded from a HTML document body. It includes DOM, images & related resources.
In a HTML document we can have one & only one body onLoad() method. While we can use multiple document.ready() methods as required.
Do you like the above Story related to Jquery Interview Questions? Share us.
