JQuery Interview Questions And Answers For Experienced

jQuery is a fast, small, and rich-featured JavaScript library.

It makes things like HTML document traversal and manipulation, event handling, animation, Ajax and much simpler with an easy-to-use jQuery. Jquery works across a multiple of browsers. 

With a combination of versatility and extensible, jQuery has changed the way that millions of people write JavaScript. It help for Fast development.

From: https://jquery.com/

Question: What is current stable version of jQuery?
Version: 3.4.1 (May 1, 2019)


Quesion: In Which language jQuery is written?
JavaScript


Question: What is offical website of jQuery?
https://jquery.com/


Question: Which file need to include to use jQuery functions.
We must include a jQuery file.
We can also include jQuery from their official website.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



Question: What are other jQuery Foundation Projects?

• jQuery User Interface
• jQuery Mobile
• QUnit
• Sizzle

Question: What is JQuery UI?
JQuery UI is a jQuery library where UI comes with cool widgets, effects and interaction mechanism. Whether you're building highly interactive web applications OR just need to add a date picker to a form control, jQuery UI is the perfect choice.


Question: From where I can get List of jQuery UI Demos?
http://jqueryui.com/demos/



Question: What are the different type of selectors in Jquery?
Following are 3 types of selectors in Jquery

1. CSS Selector
2. XPath Selector
3. Custom Selector

Question: What is the difference between jQuery-x.x.x.js and jQuery.x.x.x-min.js?
In terms of functionality, there is no difference between the jQuery-x.x.x.js and jQuery-x.x.x-min.js. jQuery-x.x.x-min.js also called minified version because in this file there is no space, no tab, no newline, small variable name and very less file size. Minified version load more faster as compare to normal jquery, that's why minified version used in production environment. However this can play a vital role in th


Question: What is the use of Delegate() Method in jQuery?
1. Attach an parent event to each one of its child elements.
2. Attach the event to the elements which is not available at the time of page loading (element will after page load).



Question: What does .size() method of jquery?
Return the number of elements in node.

$("div.webtechnologyexpert").size();

Question: What is the use of jQuery Connect?
It is used to connect or bind a function to another function.It is use to execute a function whenever a function from another object is executed. To use this you need to download the jquer.connect.js file.

        $.connect('fun1',fun2) 
        $.connect(null,'fun1',fun2) 
        $.connect(self,'fun1',fun2) 
        $.connect('fun1',null,fun2)     

Question: What is the use of jQuery disconnect?
It is used to disconnect a function to another function.It is the opposite of $.connect



Question: What is the use of jQuery disconnectAll?
It is used to disconnect all the connected functions.


Question: What is the purpose of jquery-x.x.x-vsdoc.js?
Generally we will use jQuery-x.x.x-vsdoc.js to provide the intellisense support. We can even delete this file. But the thing is that it won't provide the intellisense support if we delete that file.


Question: How to hide and show a div?

$(document).ready(function(){
        $('div#mydiv').hide();
        $('div#mydiv').show();  
    });

Question: How to add data in empty div?

$(document).ready(function(){        
        $('div#mydiv').html();
});

Question: How to add click event on div in jQuery

    $(document).ready(function(){
        $("div#mydiv").click(function(){
            alert('mydiv is clicked')
        });
    });

Question: How to add double-click event on div in jQuery

    $(document).ready(function(){
        $("div#mydiv").dblclick(function(){
            alert('mydiv is double clicked')
        });
    });

Question: How to add hover event on div in jQuery?

    $(document).ready(function(){
        $("div#mydiv").hover(function(){
            alert('Hover on mydiv')
        });
    });    

Question: Is jQuery dependened on operating system?
No, jQuery is independent of any operating system. It works similar in all operating system.



Question: Explain the features of jQuery?

1. Effects and animations on html
2. Ajax to send the server call
3. Extensibility
4. Add/Change on DOM
5. Add, Update, delete Events
6. CSS manipulation with use of jquery
7. We can add JavaScript Plugins
8. DOM traversal and modification with use of jquery

Question: Can constructors be parameterized?
Yes, It can be.


Question: What is Bootstrap, Extension and System Class loader? Can you explain primordial class loader?
Bootstrap class loader
Bootstrap class loader loads those classes those which are essential for JVM to function properly. Bootstrap class loader is responsible for loading all core java classes for instance java.lang.*, java.io.* etc.

The extension class loader
The extension class loader also termed as the standard extensions class loader is a child of the bootstrap class loader. Its primary responsibility is to load classes from the extension directories, normally located the "jre/lib/ext" directory. This provides the ability to simply drop in new extensions, such as various security extensions, without requiring modification to the user's class path.

The system class loader
The system class loader also termed application class loader is the class loader responsible for loading code from the path specified by the CLASSPATH environment variable. It is also used to load an application’s entry point class that is the "static void main ()" method in a class.




Question: How to Merge the contents of two or more objects together into the one/first object?.

jQuery.extend( [ deep ], targetobject, [ object List] )

Question: How do I check if an element is hidden in jQuery?
Since the question refers to a single element, this code might be more suitable.

// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");

// The same works with hidden
$(element).is(":hidden");

Question: How do I redirect to another webpage??

// similar behavior as an HTTP redirect
window.location.replace("https://www.web-technology-experts-notes.in/");

// similar behavior as clicking on a link
window.location.href = "https://www.web-technology-experts-notes.in/";

Best Related Posts are Following:

1. jQuery Interview Questions and Answers for experienced.
2. How to add new row in existing table using jQuery.
3. Front End Developer Interview Questions and Answers.
4. How to Add attribute in A-Tag using jQuery.
5. Lightbox vs Fancybox.
6. Important PHP Interview Questions and Answers - jQuery, SQL Modes, Client Programs and Reset.
7. jQuery datepicker first week monday.
8. How to Create A Basic Plugin In JQuery.
9. Pending Interview Questions and Answers.
10. Ajax Methods in JQuery.
11. jQuery Interview Questions and Answers.
12. jQuery Fancybox.
13. jQuery multi column sorting with jQuery - Live Demo.
14. jQuery naming convention - jQuery tutorial for beginner.
15. How to Select / Deselect All Checkboxes using jQuery.
16. JQuery Interview Questions And Answers For Experienced.

jQuery naming convention - jQuery tutorial for beginner

JQuery A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and AJAX and do lot of more things in very simple and quick way..


For all this, Just include the jquery.js file.
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JQuery most useful and very common functions used in the development

1) jQuery(this);// Current object

2) jQuery("p");// Select all the P tag

3)jQuery("p.abc");//Select all the P tag having class abc

4) jQuery("ul li:first");//select the first li of ul

5)jQuery("p").hide();// Hide the p tag

6) jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("div.toggle").toggle();
});

});: 

/*When you click the button first time, it will hide the div having class toggle and when click again will show.*/

7)jQuery("div#intro .head"); // select the class having "head" under div having id "intro"

8)jQuery("[hrefjQuery='.jpg']"); //select all href having link ending with jpg

9)jQuery("p.abc").append("greatinformations");;// Add the text "greatinformations" end the div having class abc

10) jQuery("p.abc").after("greatinformations"); /*Add the text "greatinformations" after the ending the div having class abc Enter code here.
Please note: Although no board code and smiley buttons are shown, they are still usable.*/

11)jQuery("div").animate({height:300},"slow"); //change all the div height to 300px

12) jQuery(this).css("background-color"); //get the background color of current html object

13)jQuery(this).css("background-color", 'blue' ); //set the background-color to blue of current html object

14)jQuery("div").animate({left:"100px"},"slow"); // Move the div to 100px

15)/*jQuery Callback:A callback function is executed after the current work is done eg. */

jQuery("button").click(function(){
jQuery("div.class").show(300,function(){
alert("The div is display now ");
});.

16) jQuery("button.a").click(function(){
jQuery("div").load('abc.txt');
});  /* when click on button having class a will load the data from abc.text and upload to div */

17) jQuery("div").load('abc.txt','',function(){alert('hi')}); // after loading file abc.txt, alert the "hi" 

Best Related Posts are Following:

1. How can I check DOM is ready in jQuery.
2. How to add new row in existing table using jQuery.
3. What is difference between event.preventDefault() and return false in Javascript?.
4. How to Include a JavaScript file in another JavaScript file?.
5. How can I get query string values in JavaScript and jQuery?.
6. What is the Correct content-type of JSON and JSONP?.
7. jQuery Mobile interview questions and answers.
8. How to Add attribute in A-Tag using jQuery.
9. Lightbox vs Fancybox.
10. Firebase Chat with Facebook and Twitter Integration.
11. jQuery datepicker first week monday.
12. How to Create A Basic Plugin In JQuery.
13. Difference between JSON and JSONP.
14. jQuery Function with Examples.
15. jQuery Fancybox.
16. jQuery Autocomplete.
17. jQuery Slider Flowplayer Links with Demo.
18. jQuery multi column sorting with jQuery - Live Demo.
19. jQuery Facebook Autocomplete With Demo.
20. jQuery naming convention - jQuery tutorial for beginner.
21. How to Select / Deselect All Checkboxes using jQuery.

Top 10 jQuery interview Questions and Answers

Question: How to replace the text of div using class?
Suppose HTML

<div class="myDivClass">
Update this text</div>

jQuery code 

$('.myDivClass').text('Updated'); 

Question: How to replace the text of div using "div id"?
Suppose HTML

<div id="myDivId">
Update this text</div>

jQuery code 

$('#myDivId').text('Updated'); 

Question: How to replace the html of div using class?
Suppose HTML

<div class="myDivClass">
Update this html</div>

jQuery code 

$('.myDivClass').html('Updated'); 

Question: How to replace the text of div using "div id"?
Suppose HTML

<div id="myDivId">
Update this text</div>

jQuery code 

$('#myDivId').html('Updated'); 

Question: How to Check if checkbox is checked?
Suppose HTML is

<input name="lang[]" type="checkbox" value="English" />
<input name="lang[]" type="checkbox" value="Hindi" />
<input name="lang[]" type="checkbox" value="Urdu" />

JQuery code

var totalCheckboxSelected = $('input[name="lang[]"]:checked').length;
if(totalCheckboxSelected){
    console.log(totalCheckboxSelected+' check box checked');
}else{
    console.log('NO checkbox is selected');
}

Question: How can you check for a #hash in a URL?

if(window.location.hash) {
    var hashValue = window.location.hash.substring(1);
    console.log(hashValue);
} else {
  console.log('Hash not found');
} 

Question: How get to know which mouse button is pressed?

$('#divId').mousedown(function(event) {
    switch (event.which) {
        case 1:
            console.log('Left button pressed.');
            break;
        case 2:
            console.log('Middle button pressed.');
            break;
        case 3:
            console.log('Right button pressed.');
            break;
        default:
            console.log('Exception Case!');
    }
});

Question: How to add update the color of div with jQuery?

$('div#divId').css("background-color", "red");

Question: How to remove class from div?

$("div#divId").removeClass('className'); 

Question: How do I get the value of a textbox using jQuery?
Html

<input id="websiteId" name="website" type="text" value="Web Technology Experts Notes" /> jQuery:

$("#websiteId").val();

Question: How to submit form with post method with Ajax?
HTML Form

<form action="/ajax/form-url" id="ajaxform" method="POST" name="ajaxform">
First Name: <input name="fname" type="text" value="" /> <br />
Last Name: <input name="lname" type="text" value="" /> <br />
<input name="submit" type="submit" value="Submit the Form" /> </form>

jQuery Code

$( document ).ready(function() {
    $("#ajaxformSubmit").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = '/ajax/form-url'
        $.ajax(
        {
            url : formURL,
            type: "POST",
            data : postData,
            success:function(data, textStatus) 
            {            console.log(data);
            }
        });
        e.preventDefault(); //STOP default action
    });
});

Question: How to escape the text?

var someHtmlString = "";
var escaped = $("

").text(someHtmlString).html();
console.log(escaped); //<script>aalert('hi!');</script>

Best Related Posts are Following:

1. How to remove all classes using jQuery?.
2. Jquery Interview Questions and Answers for experienced.
3. jQuery Interview Questions and Answers for experienced.
4. How to add new row in existing table using jQuery.
5. Front End Developer Interview Questions and Answers.
6. How to Add attribute in A-Tag using jQuery.
7. Lightbox vs Fancybox.
8. Important PHP Interview Questions and Answers - jQuery, SQL Modes, Client Programs and Reset.
9. jQuery datepicker first week monday.
10. Pending Interview Questions and Answers.
11. Ajax Methods in JQuery.
12. jQuery Interview Questions and Answers.
13. jQuery naming convention - jQuery tutorial for beginner.
14. JQuery Interview Questions And Answers For Experienced.

How to remove all classes using jQuery?

Question: How to remove class for single tag or single element with jQuery?

$(document).ready(function() {
    //Use this 
    $("#idName").removeAttr('className');

    //OR use this, both will be work same
    $("#idName").attr('class', '');
});

Any element having id="idName", Its class will be removed.
Element can p, div and p etc.
removeAttr is jQuery's inbuilt function, So you must call this function after loading the jQuery file.

$(document).ready() is used to identify jQuery file loaded.


Question: How to remove class for multiple tags in single line?

$(document).ready(function() {
    $(".className").removeAttr('className');
});

Any element having className class, "class" will be delete from html  tag.
Element can p, div & p etc.
removeAttr is jQuery's inbuilt function, So you must call this function after loading the jQuery file. $(document).ready();, is used to identify jQuery file loaded.


Question: How to remove class for single tag or single element without jQuery?

$(window).load(function() { 
    //Use this 
    document.getElementById('idName').className = '';
});

Any element having idName's class will be removed.
Element can pdiv and p etc.
$(window).load();, is used to identify html is fully loaded.

Best Related Posts are Following:

1. Jquery Interview Questions and Answers for experienced.
2. jQuery Interview Questions and Answers for experienced.
3. How to add new row in existing table using jQuery.
4. Front End Developer Interview Questions and Answers.
5. How to Add attribute in A-Tag using jQuery.
6. Lightbox vs Fancybox.
7. Important PHP Interview Questions and Answers - jQuery, SQL Modes, Client Programs and Reset.
8. jQuery datepicker first week monday.
9. How to Create A Basic Plugin In JQuery.
10. Pending Interview Questions and Answers.
11. Ajax Methods in JQuery.
12. jQuery Interview Questions and Answers.
13. jQuery naming convention - jQuery tutorial for beginner.
14. JQuery Interview Questions And Answers For Experienced.

Jquery Interview Questions and Answers for experienced

Question: What is jQuery?
jQuery is a fast, small and feature-rich JavaScript library.
jQuery makes things like HTML document traversal and manipulation, animation, event handling and Ajax much simpler with an easy-to-use API.
It works across a multitude of browsers.


Question: What is Ajax?
Ajax( Short form of Asynchronous JavaScript and XML) is a Web development techniques used on the client-side to create Synchronous OR asynchronous Web applications. It is used to get the data from server without refresh the page.


Question: What is Iframe?
Iframe is an HTML document embedded inside another HTML document on a website. We can embed one OR many iframe in one website.


Question: What is element in HTML?
An HTML element is an individual component of an HTML document or web page.
For example, p,div,span etc know as element.
when these surrounded by angle brackets know as HTML Tags.


Question: What is event in jQuery? Doing any thing, known as event.
For Example, Click event, mouseover event, blur event, double click event etc.


Question: What is jQuery event?
A jQuery object is array-like which means that it contains zero or more indexes.


Question: How to parse a JSON String?

var obj = jQuery.parseJSON( '{ "name": "John" }' );
console.log( obj.name);

Question: How to communicate between iframe and the parent site?
With same domain and same port/protocol
you can use window.opener to change in parent window from child window.
you can use document.getElemetById('#iframeId') to change in child window from parent window.
With different domain OR different port/protocol
You have to use cross-document messaging.

Question: How can I select an element by name or class or id with jQuery?
Select by name

console.log($('div[name=divname]'));

Select by class name

console.log($('div.className'));

Select by classId

console.log($('div#classId'));

Question: How to show the preview an image before it is uploaded to server?
To show the preview you need to use "FileReader" javascript function.
See Demo:http://jsfiddle.net/LvsYc/


Question: How to get html tags from string?

var re = /(<([^>]+)>)/ig; 
    var str = '

Hello!
';
    var m;
     
    while ((m = re.exec(str)) !== null) {
        if (m.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    console.log(re);

Question: What is use $.each? Give examples?
It is similar to foreach in jQuery.
you can use $.each for normal array OR list of elements. For Example:

$('a.myclass').each(function(index, value){
      console.log($(this).attr('href'));
});

var numberArray = [0,1,2,3,4,5];
jQuery.each(numberArray , function(index, value){
     console.log(index + ':' + value); 
});

Question: What's the difference between jquery.js and jquery.min.js?
Both are same.
only difference jquery.min.js is minified file which have no space, tab.

Question: How to add Email Validation in jQuery?

function IsValidEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
console.log(IsValidEmail('myvalidemail@domain.com'));
console.log(IsValidEmail('myInvalidemail@'));
console.log(IsValidEmail('myInvalidemail#domain.com'));

Question: How to get nth jQuery element?
use eq function.

console.log($("div.myclass:eq(2)")); 

Question: How to remove a row from table?

$('tr#myTableRowId').remove();

OR

$('tr.myTableRowClass').remove();

Question:How to bind shortcut-keys with jQuery?
To bind Ctrl+f to a functionName.

$(document).bind('keydown', 'ctrl+f', functionName);

You can check also: http://github.com/jeresig/jquery.hotkeys


Question: How to convert array to JSON?
You can use stringify.

var yourArray = Array('1','2','3','4');
var myJsonString = JSON.stringify(yourArray);

Question: How to check if a div exists with jquery?

if($("div#idName" + name).length > 0) {
  /** It is exist **/
}

Question: How to call a function after 3 seconds?

setTimeout(
  function(){
/** Do here **/

/** Do here **/    
  }, 3000);
}

Question: How to prevent caching in Ajax?
After loading of jQuery, add the below code at the top of all ajax call.

$.ajaxSetup({ cache: false });

Best Related Posts are Following:

1. How to get visitor location with JavaScript ?.
2. jQuery UI Interview Questions and Answers.
3. jQuery Mobile interview questions and answers.
4. jQuery Ajax Interview Questions and Answers for Experienced.
5. Jquery Interview Questions and Answers for experienced.
6. How can I check DOM is ready in jQuery.
7. How to add new row in existing table using jQuery.
8. How to Include a JavaScript file in another JavaScript file?.
9. How can I get query string values in JavaScript and jQuery?.
10. How to Add attribute in A-Tag using jQuery.