JQuery

To select 2nd element from ul element, you can use nth-child() function and it looks like this:

$('ul > li:nth-child(2)');

To find nth element from the list then you can pass the index 'n' to it.

$('ul > li:nth-child(n)');

The following code finds 2nd element from the list and handles a mouseover event.

   let list = $('ul > li:nth-child(2)');
   list.on('mouseover', function(){
      // mouseover handle logic comes here.
   });

filter() is one of the jQuery DOM traversal methods which constructs a new jQuery object from a subset of the matching elements.

The following code is to select all the links in the page whose host name is different than the site host name and then applies css class name “external”

$('a')
 .filter((i, a) =>
a.hostname && a.hostname !== location.hostname
 )
 .addClass('external');

A staple in JQuery interview questions, be prepared to answer this one.  

If you have to call several functions that return promises and take action only when all are completed, then $.when can be used. It provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.

The following is the syntax:

jQuery.when(deferreds);

Look at the following example:

ar promises = [
   $.ajax('http://google.com'),
   $.ajax('http://yahoo.com'),
   $.ajax('http://www.nytimes.com')
];
$.when.apply($, promises).then(
   function(result1, result2, result3){
       console.log('All URLs fetched.');
}
);

The arguments passed to the thenCallbacks provide the resolved values for each of the Deferreds and match the order in the Deferreds were passed to jQuery.when().

Yes, The $.grep() method finds the elements of an array which satisfy a filter function. In this case, the original array is not affected.

The following condition filters numbers above 0 and returns [1,2].

$.grep( [ 0, 1, 2 ], function( n, i ) {
 return n > 0;
})

The following returns [0] because invert set as true.

$.grep([ 0, 1, 2 ], function(n, i) {
return n > 0;
}, true);

The most common way to write a for loop to create one array from another, or an array from an object. JQuery makes it even easier with the $.map utility function.

The syntax:

$.map(collection, callback);
The following statement appends 1 to each element in the array and maps the array into [1, 2, 3, 4, 5].
var numbers = $.map(
  [0, 1, 2, 3, 4],
  function(value) {
  return value + 1;
  }

A promise about future value. You can attach callbacks to it to get that value. The promise was "given" to you and you are the receiver of the future value.

If we request a resource from another website, the result of a long calculation either from server or from a JavaScript function, or the response of a REST service, and we perform other tasks while we await the result. When the latter becomes available (the promise is resolved/fulfilled) or the request has failed (the promise is failed/rejected), we act accordingly.

In Jquery, $.ajax, .fadeOut().promise(),  .fadeIn().promise() returns promise objects.

Deffered() method is used if you write your own function and want to provide a promise to the calling code. A deferred object can create a promise and can change its state to resolved or rejected.

The following is the example of how simple Deffered object works.

// Existing object
var obj = {
hello: function( name ) {
  alert( "Hello " + name );
}
 },
 // Create a Deferred
 defer = $.Deferred();
// Set object as a promise
defer.promise( obj );
// Resolve the deferred
defer.resolve( "John" );
// Use the object as a Promise
obj.done(function( name ) {
 obj.hello( name ); // Will alert "Hello John"
}).hello( "Karl" ); // Will alert "Hello Karl"

This question is a regular feature in Javascript query interview questions, be ready to tackle it.  

There are two ways to stop a form:

• Return false inside function, which is called on form submit.

The sample code:

<script>
  function formSubmit(){
     return false;
  }
</script>
<form onsubmit="return formSubmit();" >

• By using event. preventDefault() to stop the default action on the event.

The sample code:

<form>
 <button class='.submit' type="submit">Submit</button>
</form>
$(function(){
   $('.submit').on('submit', function(event){
       event.preventDefault();
});
})

This is a frequently asked question in JQuery advanced interview questions.  

When an ajax request is made, if you want to handle it when the request completes then .always() will come in handy. .always() is a promise callback method added in jQuery 1.6 and it's a replacement for the deprecated .complete() method.

For example, if you want to show a loading indicator when a request is made and hide the loading indicator when the request is complete, in this case, .always() handler can be useful.

The following is an example:

var jqxhr = $.ajax("example.php")
 .done(function() {
alert("success");
 })
 .fail(function() {
   alert("error");
 })
 .always(function() {
   alert("complete");
 })

Yes, there is a selector called “: contains” which selects the elements that contains the specified text.

Here is the syntax:

$(":contains(text)")

Let's consider the following example which contains a set of div elements contains text.

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

The following statement filters all the elements contains text "John" and underlines them.

<script>
$("div:contains('John')").css("text-decoration", "underline");
</script>