Group Discounts available for 3+ students and Corporate Clients

jQuery Interview Questions And Answers

What is jquery ?

Jquery is fast & concise Javascript that defines HTML document traversing, event handling, animating & ajax interaction for web development. It is designed to to change the way we write javascript. It is a built library for javascript.

What is the $ symbol in jquery ?

$ symbol defines the replacement of the jquery. In the place of $ you may use jquery. It indicates the line is used for jquery.

How we get an server response from an ajax request using Jquery?

While invoking functions has asynchronous attitude we provide a call back function to recover our desired result.

Example:

$.ajax({
     url: 'EmployeeRecords.php',
     success: function(response) {
        alert(response);
     },
     error: function(yhrt) {
        alert('Error!  Status = ' + yhrt.status);
     }
 });

How do you enable or disable form element using Jquery ?

We have 2 ways to enable or disable form elements.

//Enable #employee

$(‘#employee’).attr(‘disabled’,false);
// Disable #employee
 $('#employee).attr('disabled', true);

Add or remove the ‘disabled’ attribute:

 // Enable #x
 $("#employee’").removeAttr('disabled');
// Disable #pcds
 $("#employee’").attr('disabled', 'disabled');

How to get text value of a selected option ?

Select elements typically have two values that you want to access. First there’s the value to be sent to the server, which is easy:

$("#employeeselect").val();
 // => 1

The second is the text value of the select. For example, using the following select box:

<select id="employeeselect">
   <option value="11">Mister</option>
   <option value="12">Mistress</option>
   <option value="13">Miss</option>
   <option value="14">Doctor</option>
   <option value="15">Prof</option>
 </select>

If you need to get string “Mister” if the 1st option is selected (instead “11”), you can follow the following way:

$("#memployeeselect option:selected").text();
 // => "Mister"

Explain the width() vs css(‘width’) ?

We have 2 ways to change the width of the element.

One would be .width() & .css(‘width’)

Example:

$(‘#namediv’).width(100);

$(‘#namediv’).css(‘width’,’300px’);
  • The difference in both of them is the datatype we specify or return of both the functions.
  • In .width() we do not add pixel but in css.(‘width’) we need to add ‘px’.
  • If you want to get width of ‘namediv’ then .width() will give you only integer 300 where as in .css(‘width’) will give ‘300px’.

Explain what is each() function ?

It is the function that specify to be called for matched element.

Syntax :

$(selector).each(function (index, element))

The “selector” specify the present selector where can it be used “new” selector also.

The “index” of the index position is the selector.

In which case we need to stop loop of each early than we use “return false;”

Example:

$("#button").click(function()

{

$("name").each(function()

{

     document.write($(new).text())

});

});

This can specify the text for each “name” element.

Difference between ‘new’ and $(new) in jQuery?

Example:

$(document).ready(function()

{

$(‘#button).click(function()

{

     alert($(new).text());

     alert(new.innerText);

});

});

new and $(new) refers to same element, the difference was that “new” used via traditional way but when “new” used with in $() it holds a jQuery object in which we use the functions with jQuery.

In the above example, if we use “new” than we use jQuery in  text() function whereas to get before the element, as it is not jQuery object. If the “new” is wrapped in $() w use jQuery function to text of the element.

Explain what is .empty() vs .detach() vs .remove() ?

The .empty() method likely to remove all child elements from matched ones.

The .remove() method likely to remove the matched elements with this you can remove all jQuery data associated to matched element.
The .detach() method likely the same as .remove() method none that the .detach() method cannot remove jQuery data linked with matched elements.

The .remove() is faster & quicker than .detach() or .empty() method.

Syntax:

$(selector).empty();

$(selector).detach();

$(selector).remove();

Difference between string array sorting and numerical array sorting with jQuery?

Sort method is used to sort array elements. The string elements are sorted alphabetically.

Example::

$(doc).ready(function()

{

     var mylist = [ “Apricot”,Grapes”,”Cherry”];

     mylist = mylist.sort();

     $(“#mydiv”).html(list.join(“”));

});

Output:

Apricot

Cherry

Grapes

Numerical array sorting method::

$(doc).ready(function()

{

     var mylist = [ “22”,”2””99”,”49”];

     mylist = mylist.sort();

     $(“#mydiv”).html(list.join(“”));

});

Output::

99

49

22

2

Effects methods that are used in jQuery?

Below mentioned are few effects methods that are used in jQuery:

  • fadeOut()
  • hide()
  • show()
  • fadeIn()
  • toggle()

Different types of selectors in jQuery what are they ?

3 types in selectors for jQuery:

  • Custom Selector
  • CSS Selector
  • XPath Selector

What are 2 type in CDN ?

2 types CDN:

  • Google:: jQuery to Google libraries API.
  • Microsoft:: jQuery to AJAX CDN.

How to set & get attributes of the element by using jQuery?

We can use att() to fetch the value of the attribute from the element in the matching set.
attr(name, value) to set the attribute name, onto all element using the passed value.

The syntax for including jQuery to code?
Syntax:: <script src= “jquery.js”> Sample Code </script>

Use of jQuery Filter ?
To filter values from the object, jQuery filters are used. The filters specifically result in your query into specific elements.

Why use jQuery?
Easy to learn.
Fast & extensible.
Performance of the application improves.
Provides cross-browser support in scripting.

An example while selecting an element based on the class name?
$(‘.SelfControl’).Hide()

What is CDN?
CDN – Content Delivery Network or Content Distribution System, which is a network of servers deployed in large data centers & accessed using the internet.

How to check element is empty in jQuery?

Below is the code::

$(render).ready(function(){
if ($('#owncodelid’).is(':empty')){
//Code here for Empty element
}
});

What is “empty” method in jQuery?
It is to remove child elements & associated texts to the elements.

Query or method to stop the animation?
stop() in jQuery is the method to use to stop the animation.

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on jQuery Interview Questions And Answers"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Support


    Please leave a message and we'll get back to you soon.
    Three + 6