JQuery Interview Questions Part - 8

JQuery Interview Questions Part - 8

Q 1.     What are JQuery utilities?

Ans 1. JQuery provides several utility methods that are helpful in completing the desired programming tasks

Example –

Suppose, I have a string -  “     Hello       ” but I need the text “Hello” without any spaces on its left or right, then I can use trim() JQuery utility to remove any such spaces.

Q 2.     How to use JQuery trim utility method?

Ans 2. $.trim() is used to remove the leading and trailing whitespace.

Example –

$.trim(“     Hello       ”) will return “Hello”

Q 3.    How to use JQuery each utility method?

Ans 3. $.each() is used to iterate over arrays and objects. It can work on arrays and objects.

Example –

Usage with arrays –

$.each([“JQuery”, “Javascript”, “AngularJS”], function( index, value){

        alert(“Element at index: ” + index + “ is ” + value);

});

Result-

Element at index: 0 is JQuery

Element at index: 1 is Javascript

Element at index: 2 is AngularJS

Usage with Objects -

$.each({Library: “JQuery”, Framework: “AngularJS”}, function(key, value){

        alert(“Key: ” + key + “ value: ” + value);

});

Result-

Key: Library value: JQuery

Key: Framework value: AngularJS

Q 4.     How to use JQuery inArray utility method?

Ans 4. $.inArray() is used to Returns a value's index in an array, or -1 if the value is not in the array.

Example -

var testArray = [“JQuery”, “Javascript”,  “AngularJS”];

var returnedValue = $.inArray(“C++”, testArray);

alert(returnedValue);

Result: -1 (Because C++ does not exist in the array)

If “C++” is replaced with “AngularJS” in the above statement, then result will be: 2

Q 5.     How to use JQuery extend utility method?

Ans 5. $.extend() is used to change the properties of the first object using the properties of subsequent objects.

EXAMPLE –

var testObject1 = { Language: “C#”, Library: “JQuery”};

var testObject2 = { Language: “Java”, Library: “JQuery”};

var testObject3 = $.extend( testObject1, testObject2);

alert(testObject1.Language);

Result – C#

alert(testObject3.Language);

Result - Java

Q 6.     How to use JQuery proxy utility method?

Ans 6. $.proxy() is used to return a function that will always run in the provided scope i.e. it relates a general function to a specific object.

EXAMPLE –

var testFunction = function(){

alert(this);
}

var testObject = {Library: “JQuery”, Language: “C#”};

testFunction();

Result: [object Window]

var proxy = $.proxy(testFunction, testObject);

proxy();

Result: [object Object]

Click here to watch more informative JQuery Tutorial videos!

JQuery Interview Questions Part - 7

JQuery Interview Questions Part - 7

 

 

Q 1.     What is AJAX?

Ans 1. AJAX is an acronym for Asynchronous JavaScript and XML. AJAX enables us to send and receive data asynchronously without reloading the web page. AJAX is used not only by many well known IT companies like Gmail, Google Maps, Youtube, Facebook but by almost every company nowadays.

Example –

Google was one of the first major companies to start using AJAX, and Google’s search suggestion tool was one of the first ways they used it, and one of the first auto-complete tools made. When typing into the Google search bar, it starts to use AJAX to get common results from the database on each keystroke.

Q 2.     What are the advantages of using AJAX?

Ans 2. (A) Response time is faster so increases performance and speed.

(B) Reduce the traffic travels between the client and the server.

(C) Page not required to be reloaded

Q 3.    How to use AJAX using JQuery?

Ans 3. JQuery offers many methods that enable us to use AJAX in an effective manner. You can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post and you can load the external data directly into the selected HTML elements of your web page!

Q 4.     How to use JQuery AJAX load method?

Ans 4. The load method loads data from a server and puts the returned data into the selected element.

SYNTAX - $(selector).load(URL, data, callback)
URL(required) – the URL where you want to load data from
data(optional) – It specifies a set of query string key/value pairs to send along with the request
callback(optional) – It is the name of the function to be executed after the load method is completed
Example – Suppose I have a text file(JQueryLoadTest.txt) on server having content as shown below –

If I need to load the HTML inside the above text file into a “<div>” element then use - $(“div”).load(“JQueryLoadTest.txt”);

Q 5.     How to use JQuery AJAX get method?

Ans 5. The get JQuery method requests data from the server with an HTTP GET request.

SYNTAX – $.get(URL, callback)

URL(required) – the URL you want to request
callback(optional) – It is the name of the function to be executed if the request is successful

EXAMPLE – Suppose you are using ASP.NET MVC project and you have an action method “GetString” inside a controller that returns a string “JQuery Tutorial” as shown below -

Now, if you want to get this string on button click using AJAX then use,

$(“button”).click(function(){

        $.get(ActionMethodURL, function(data){

                alert(data);

});

});

This would show an alert – “JQuery Tutorial”

Q 6.     How to use JQuery AJAX post method?

Ans 6. The post JQuery method requests data from the server with an HTTP POST request.

SYNTAX – $.post(URL, data,  callback)

URL(required) – the URL you want to request
data(optional) – It specifies some data to send along with the request
callback(optional) – It is the name of the function to be executed if the request is successful

EXAMPLE – Suppose you are using ASP.NET MVC project and you have an action method “ChangeString” inside a controller that accepts a string and then returns it after changing it as shown below -

                       

You can Post a string to this action method and then get a changed string through JQuery POST method when user clicks a button  -

$(“button”).click(function(){

$.post(ActionMethodURL, ‘JQuery Tutorial’, function(data){

                alert(data);

});

});

We are posting the string “JQuery Tutorial” but we get the string – “Tech Geek” and it is alerted.

Q 7.    How to use JQuery ajax method?

Ans 7. The ajax JQuery method is used when some desired action cannot be obtained with other JQuery AJAX methods discussed before. For example, we want to specify what should happen in case an Ajax call fails.

SYNTAX – $.ajax(URL, [options])
URL(required) – the URL you want to request
options –  options is an object literal containing the configuration for the Ajax request.

EXAMPLE – You can now handle the successful posting of data as well as an error while doing so. With JQuery $.get() and $.post() methods you could not handle error scenario.

$(“button”).click(function(){

$.ajax(url:ActionMethodURL, method: “POST”, data: {Name:”Tech Geek”}, success:function(data){

                alert(“data posted successfully”);

},

error:function(JQxhr, exception){

        alert(“error occurred while posting data”);

});

});

Click here to watch more informative JQuery Tutorial videos!

JQuery Interview Questions Part - 6

JQuery Interview Questions Part - 6

Q 1.     What is JQuery Traversing?

Ans 1. JQuery traversing is used to find HTML elements based on their relation to other elements. Starting with one selection, reach the desired element.

Example –

 

                                <div>
                                     <ul>
                                          <li>
                                                 JQuery
                                          </li>
                                          <li>
                                                Javascript
                                          </li>
                                     </ul>
                                </div>

•      The <div> element is the parent of <ul>, and an ancestor of everything inside of it

•      The <ul> element is the parent of both <li> elements, and a child of <div>

•      The two <li> elements are siblings,  children of <ul> and descendants of <div>

Q 2.    What is JQuery Ancestor?

Ans 2. An ancestor is a parent, grandparent, great-grandparent, and so on. With JQuery you can traverse up the DOM tree to find ancestors of an element.

Q 3.     How to use JQuery parent method?

Ans 3. The parent JQuery method returns the immediate parent element of the selected element.

SYNTAX –

$(selector).parent()

EXAMPLE –

                        <body>

                                <div>

                                        <p>

                                                Hello

                                        </p>

                                </div>

                        </body>

$(“p”).parent()

The above code will return “<div>” element as it is the immediate parent of the “<p>” element.

Q 4.     How to use JQuery parents method?

Ans 4. The parents JQuery method returns all the ancestors of the selected HTML element.

SYNTAX –

$(selector).parents()

EXAMPLE –

                        <body>

                                <div>

                                        <p>

                                                Hello

                                        </p>

                                </div>

                        </body>

$(“p”).parents()

The above code will return “<div>” and “<body>” elements as they are the ancestors of “<p>” element.

Q 5.     How to use JQuery parentsUntil method?

Ans 5. The parentsUnitl JQuery method returns all ancestor elements between two given arguments.

SYNTAX –

$(selector).parents()

EXAMPLE –

                        <body>

                                <div>

                                        <table>

                                                <tr>

                                                        <td>

                                                                Hello

                                                        </td>

                                                </tr>

                                        </table>

                                </div>

                        </body>

$(“tr”).parentsUntil(“body”)

The above code will return “<div>” and “<table>” elements as they lie between “<tr>” and “<body>” elements.

Q 6.    What is JQuery Descendent?

Ans 6. A descendant is a child, grandchild, great-grandchild, and soon. With JQuery you can traverse down the DOM tree to find descendants of an element.

Q 7.     How to use JQuery children method?

Ans 7. The children JQuery method returns all immediate children of the selected element.

SYNTAX –

$(selector).children()

EXAMPLE –

                        <body>

                                <div>

                                        <table>

                                                <tr>

                                                        <td>

                                                                Hello

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                Tutorial

                                                        </td>

                                                </tr>

                                        </table>

                                </div>

                        </body>

$(“table”).children()

The above code will return two “<tr>” elements that are the immediate children of  “<table>” element.

Q 8.     How to use JQuery find method?

Ans 8. The find JQuery method returns descendant elements of the selected element.

SYNTAX –

$(selector).find()

EXAMPLE –

                        <body>

                                <div>

                                        <table>

                                                <tr>

                                                        <td>

                                                                Hello

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                Tutorial

                                                        </td>

                                                </tr>

                                        </table>

                                </div>

                        </body>

$(“table”).find(“td”)

The above code will return two “<td>” elements that are the descendents of  “<table>” element.

Q 9.     How to use JQuery siblings method?

Ans 9. The siblings JQuery method returns all siblings elements of the selected element.

SYNTAX –

$(selector).siblings()

EXAMPLE –

                        <body>

                                <div>

                                        <p>

                                                JQuery

                                        </p>

                                        <table>

                                                <tr>

                                                        <td>

                                                                Hello

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                Tutorial

                                                        </td>

                                                </tr>

                                        </table>

                                        <input type=”text”>

                                        </input>

                                </div>

                        </body>

$(“table”).siblings()

The above code will return “<p>” and “<input>” elements that are the siblings of  “<table>” element.

Q 10.     How to use JQuery next method?

Ans 10. The next JQuery method returns the next sibling element of the selected element.

SYNTAX –

$(selector).next()

EXAMPLE –

                        <body>

                                <div>

                                        <table>

                                                <tr>

                                                        <td>

                                                                Hello

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                Tutorial

                                                        </td>

                                                </tr>

                                        </table>

                                        <p>

                                                JQuery

                                        </p>

                                        <input type=”text”>

                                        </input>

                                </div>

                        </body>

$(“table”).next()

The above code will return “<p>” element that is the next sibling of  “<table>” element.

Q 11.     How to use JQuery nextAll method?

Ans 11. The nextAll JQuery method returns all next sibling elements of the selected element.

SYNTAX –

$(selector).nextAll()

EXAMPLE –

                        <body>

                                <div>

                                        <table>

                                                <tr>

                                                        <td>

                                                                Hello

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                Tutorial

                                                        </td>

                                                </tr>

                                        </table>

                                        <p>

                                                JQuery

                                        </p>

                                        <input type=”text”>

                                        </input>

                                </div>

                        </body>

$(“table”).nextAll()

The above code will return “<p>” and “input” elements that are the next siblings of  “<table>” element.

Q 12.     How to use JQuery nextUntil method?

Ans 12. The nextUntil JQuery method returns all next sibling elements between two given arguments

SYNTAX –

$(selector).nextUntil()

EXAMPLE –

                        <body>

                                <div>

                                        <table>

                                                <tr>

                                                        <td>

                                                                Hello

                                                        </td>

                                                </tr>

                                                <tr>

                                                        <td>

                                                                Tutorial

                                                        </td>

                                                </tr>

                                        </table>

                                        <p>

                                                JQuery

                                        </p>

                                        <input type=”text”>

                                        </input>

                                </div>

                        </body>

$(“table”).nextUntil(“input”)

The above code will return “<p>” element that is the next sibling of  “<table>” element that lies between “<table>” and “<input>” elements.

Q 13.     How to use JQuery prev, prevAll and prevUntil methods?

Ans 13. These methods can be used for previous sibling elements just like next, nextAll and nextUntil are used for next sibling elements.

Q 14.     How to use JQuery first method?

Ans 14. The first JQuery method returns the first element of the selected elements.

SYNTAX –

$(selector).first()

EXAMPLE –

                        <body>

                                <p>

                                        JQuery

                                </p>

                                <p>

                                        Tutorial

                                </p>

<p>

                                        Video

                                </p>

                        </body>

$(“p”).first()

The above code will return “<p>” element having text – “JQuery” as it is the first paragraph element.

Q 15.     How to use JQuery last method?

Ans 15. The last JQuery method returns the last element of the selected elements.

SYNTAX –

$(selector).last()

EXAMPLE –

                        <body>

                                <p>

                                        JQuery

                                </p>

                                <p>

                                        Tutorial

                                </p>

<p>

                                        Video

                                </p>

                        </body>

$(“p”).last()

The above code will return “<p>” element having text – “Video” as it is the last paragraph element

Q 16.     How to use JQuery eq method?

Ans 16. The eq JQuery method returns an element with a specific index number of the selected elements.

SYNTAX –

$(selector).eq(Index_Number)

EXAMPLE –

                        <body>

                                <p>

                                        JQuery

                                </p>

                                <p>

                                        Tutorial

                                </p>

<p>

                                        Video

                                </p>

                        </body>

$(“p”).eq(1)

The above code will return “<p>” element having text – “Tutorial” as it is at the index  - “1”

Q 17.     How to use JQuery filter method?

Ans 17. The filter JQuery method lets you select elements matching specific criteria.

SYNTAX –

$(selector).filter(Criteria)

EXAMPLE –

                        <body>

                                <p id=”id1”>

                                        JQuery

                                </p>

                                <p id=”id2”>

                                        Tutorial

                                </p>

<p id=”id3”>

                                        Video

                                </p>

                        </body>

$(“p”).filter(“#id2”)

The above code will return “<p>” element having text – “Tutorial” as it has the id – “id2”.

Click here to watch more informative JQuery Tutorial videos!