• The connect() method of jQuery is a utility function that allows you to create a new jQuery object and pass it to the jQuery object's constructor. This allows you to create a new object with the same functionality as the original object, but without having to manually set up the object's properties. For example, you can pass in an existing jQuery object and it will be automatically set up to use the same properties as the original object.
• When using connect() method, you can pass in a callback function that will be called when the new object is ready. The callback function can be used to perform any additional setup that needs to be done before the new object can be used. 
• For example - you can set up a data source using the data() method of jQuery. When using connect() method, you can pass in a callback function that will be called when the new object is ready.

The functionality of jquery.min.js and jquery.js is the same. However, If you are serving a page that contains a lot of JavaScript, it is a good idea to minify it. Minifying JavaScript (jquery.min.js) reduces the size of your file and makes it faster to load on all platforms. Minifying your code also reduces the chances that erroneous code will be rendered as a malicious attack because it makes it more difficult to test. With minified JavaScript, you will get better page performance, faster loading, and shorter wait times for your visitors.

There are also some of the major advantages of the jquery.min.js. - 

• When JS files are minified in a production environment, they load faster and provide faster and better page performance.
• Minifying a script also reduces the size of the file in the server’s temporary directory and browser cache, which results in a faster download and a smaller server response.
• Another advantage of using minified JS is that it removes the need to include any external JS files in the HTML document. This makes it easier to structure the code and easier to edit the code.

Hosting jQuery on a Content Delivery Network (CDN) improves availability and performance at a reduced cost and with less network traffic, improves latency (the time it takes to send and receive a data packet from the server), and provides a device-specific version of the contents.

CDNs are a great way to host your JavaScript and CSS files. By caching these files, you can reduce the amount of time it takes for your site to load, making it faster and more responsive. This is especially important for sites that serve large amounts of content, such as blogs or e-commerce sites. By using a CDN, you can also reduce the number of load times that occur when visitors access your site. In addition, by hosting your JavaScript and CSS files on a CDN, you can also reduce the amount of bandwidth that is consumed by your site.

Example - It makes it simple to maintain responsiveness for mobile screen sizes, as well as safe storage space for important data or files. 

Caching JavaScript and CSS files on a CDN is an important optimization that should be considered when building a site with a lot of JavaScript and CSS files.

• $(this) is a jQuery object, whereas this is a JavaScript global object reference. We may refer to DOM elements in HTML documents using this.
• $(this) refers to the parent object, whereas this is a DOM element that, in the case of an array, represents an object with the .each() method, which shows the current iteration.

We use this as an alternative to this.parent() to refer to the parent object in JavaScript. This is more convenient than using this.parent(). We can also use this to refer to other elements in HTML, as in an ul element: 

var myElement = $('ul').each(function() { 
    var childElement = this.parent().nextSibling(); 
}); 

This is useful when you need to iterate over a list of elements and their children, but you do not want to reference the parent object.

There are two methods for obtaining a query string using regular expressions.

• String-based approach: This method aids in the generation of Strings by comparing similar regular expressions using the.replace() function.
• Regular Express Based Approach: When compared to strings in JavaScript, the regular expression technique is the most powerful method for extracting a query string and pattern. Using the.exec() and.test() methods to compare against patterns. Other String methods include match(), matchAll(), replace(), search(), and split().

Event.PreventDefault is a jQuery event that stops an event from firing when the user clicks on a link or other trigger. It basically stops the default behaviour of the triggers and allows any other event to occur. It is useful for preventing unwanted events from firing when a user clicks on a link or other trigger. This can be useful when you want to prevent users from accidentally clicking on links that open up new windows or tabs.

When you use an event like click or keypress, you can prevent the event from firing by adding the event.preventDefault() method to the event object. When you use event.preventDefault(), the event will not fire unless the user clicks on a link or other trigger.

Event.preventDefault() is only available in jQuery 1.7 and later versions of jQuery.

Example - Assume you're developing an AJAX-based application in which you need to submit form data through AJAX when a button in the form is clicked. So, if you click on a button without preventing it, the button behaves normally and the website reloads. As a result, the other event will not occur when you click the button. So, if we use prevent default there, we can skip the button's default behaviour and instead perform the AJAX event and alter the HTML DOM accordingly.

Below are some of the benefits of using jQuery instead of javascript in ASP.net Web Application - 

• Jquery is well-written optimized javascript code, thus it will execute quicker until we create the same standard optimized javascript code.
• Jquery is javascript code that is succinct, which implies that it requires the least amount of code to do the same functionality as javascript.
• Jquery makes Javascript development faster since much of the functionality is already provided in the library and we only need to access it.
• Because Jquery supports cross-browser compatibility, we save time on supporting all browsers.

event.stopPropagation() stops the event from propagating up the DOM tree, preventing any parent handlers from being notified of the event. For example, if a link with a click method is linked inside of a DIV or FORM that also has a click method attached, the DIV or FORM click method will not fire.

Yes, that is possible. With the release of jQuery 1.6, a new method called "jQuery.holdReady(hold)" was added. This function allows you to postpone the execution of the document.ready() event. The document.ready() event is triggered as soon as your DOM is ready, however, there may be occasions when you wish to load extra JavaScript or plugins that you have referenced.

No. If we can accomplish our goals using simple JavaScript, then we should avoid using jQuery. It is because the jQuery library is always xx kilobytes in size, thus there is no use in wasting bandwidth. And because jQuery is built on top of javascript, it has numerous functions that are more complicated than the simple job you can accomplish with javascript. jQuery will also load all dependencies. It will have some speed issues as compared to the javascript code.

• jQuery provides the ajax() method to perform an AJAX (asynchronous HTTP) request.
• Syntax: $.ajax({name:value, name:value, ... }). The parameters specify one or more values of name-value pairs.
  • url: this name specifies the URL to send the request to. Default is the current page.
  • success(result,status,xhr): success callback function which runs when the request succeeds
  • error(xhr,status,error): A function to run if the request fails.
  • async: Boolean value that indicates whether the request should be handled asynchronous or not. The default value is true.
  • complete(xhr,status): A function to run when the request is completed (after success and error functions are handled)
  • xhr: A function used for creating the XMLHttpRequest object
• Example:

$.ajax({
  url: "resourceURL", 
  async: false, 
  success: function(result){
    $("div").html(result);
  },  
  error: function(xhr){
    alert("An error occured: " + xhr.status + " " + xhr.statusText);
  }
});

$( "div#firstDiv, div.firstDiv, ol#items > [name$='firstDiv']" )

• The given code is an example of getting elements that satisfy multiple selectors at once. The function returns a jQuery object having the results of the query.
• The given code does a query to retrieve those <div> element with the id value firstDiv along with all <div> elements that has the class value firstDiv and all elements that are children of the <ol id="items"> element and whose name attribute ends with the string firstDiv.

There is no direct way to access the cookies using jquery. We can easily do this with the help of pure javascript. To work with cookies in jQuery, you must install the Dough cookie plugin or any other cookies plugins. The dough is simple to use and offers a number of useful capabilities.

• Creating a cookies - $.dough("cookieName", "cookieValue");
• Reading a cookies - $.dough("cookieName");
• Deleting a cookies - $.dough("cookieName", "remove");

<div id="expand"></div>

<style>
  div#expand{
    width: 50px;
    height: 50px;
    background-color: gray;
  }
</style>

Write jQuery code to animate the #expand div, expanding it from 50 * 50 pixels to 300 * 300 pixels within five seconds.

We can do this by using the animate() function. We first need to have access to the div element which has id value of expand and then apply animate function on the element as follows:

$("#expand").animate(
 {
   width: "300px",
   height: "300px",
 },
 5000 
);

$( "div" ).css( "width", "500px" )
          .add( "p" )
          .css( "background-color", "yellow" );

• The given code first selects all the <div> elements and applies width of 500px to them and adds all the <p> elements to the elements selection after which the code can finally change the background color to yellow for all the <div> and <p> elements
• The given code is an example of method chaining in jQuery which is used to accomplish a couple of things in one single instruction.

• jQuery.ajax() allows the creation of highly-customized AJAX requests, with options for how long to wait for a response, what to do once the request is successful, how to handle a failure scenarios, whether the request to be sent is blocking (synchronous) or non-blocking (asynchronous), what format to expect as the response, and many more customizable options.
• jQuery.get() is uses jQuery.ajax() underneath to create an AJAX request typically meant for simple retrieval of information.
  • There are various other pre-built AJAX requests given by jQuery such as:
    • jQuery.post() for performing post requests
    • jQuery.getScript() meant for loading and then executing a JavaScript file from the server using GET request.
    • jQuery.getJSON() for loading JSON-encoded data from the server using a GET HTTP request.

<script> 
    $(document).ready(function(){ 
        $("#submitButton").click(function(event){ 
           event.preventDefault(); 
        }); 
    }); 
</script>

document.getElementById("interviewBit"); OR $("#interviewBit");

• The code document.getElementById( "interviewBit" ); is more efficient because its the pure JavaScript version.
• The reason being jQuery is built on top of JavaScript and internally uses its methods to make DOM manipulation easier. This introduces some performance overhead. We need to remember that jQuery is not always better than pure JavaScript and we need to use it only if it adds advantage to our project.

$('class_or_id_of_element_to_disable').attr('disabled', true);
$('class_or_id_of_element_to_disable').attr('disabled', false);

We can use the following selector:

 $("[id$='IB']")

• The .promise() method returns a dynamically generated promise that is resolved when all actions of a certain type bound to the collection, queued or not, have ended.
• The method takes two optional arguments:
  • type - The default type is “fx” which indicates that the returned promise is resolved only when all animations of the selected elements have been completed.
  • target - If a target object is specified, .promise() will attach to promise to that specified object and then return it rather than creating a new one.

$(document).ready(function(){
    var arr = [ "jQuery","Interview","Questions","By","InterviewBit"];
    sortedArr = arr.sort();
    $("#elementId").html(sortedArr.join(""));
});

The Output will be

["By","InterviewBit","Interview","jQuery","Questions"]

function getMinsSeconds() {
  var dt = new Date();
  return dt.getMinutes()+":"+dt.getSeconds();
}

$( "input" ).on( "click", function() {
  $( "p" ).append( "Start: " + getMinsSeconds() + "<br />" );
  $( "div" ).each(function( i ) {
        $( this ).fadeOut( 1000 * ( i * 2 ) );
  });
  $( "div" ).promise().done(function() {
        $( "p" ).append( "End: " + getMinsSeconds() + "<br />" );
  });
});

• For the above code, the difference between the start and end times will be 10 seconds.
• This is because .promise() will wait for all <div> animations (here, all fadeOut() calls) to complete, the last one will complete 10 seconds (i.e. 5 * 2 = 10 seconds) after the fadeOut() starts.

Old Code:

$(document).ready(function(){
    $('#id').addClass('ib);
    $('#id').css('color', 'blue);
    $('#id').fadeIn('slow');
});

New Code after Chaining:

$(document).ready(function(){
    $('#id').addClass('ib)
    .css('color', 'blue')
    .fadeIn('slow); 
});

• Both prop() and attr() can be used to get or set the value of the specified property of an element attribute.
• The attr() gives the default value of a property whereas prop() returns its current value.

Conclusion

A JavaScript library called jQuery makes it simple to construct dynamic web pages. It contributes to the efficiency and interactivity of web applications. It also facilitates the usage of a number of functions that may be used to alter data, which speeds up the development process. JQuery has some important uses like - DOM manipulations, Availability of different plugins according to the work, Animation and AJAX Support, Support for Cross browsers, etc. jQuery is a lightweight library that can be easily integrated into any website. We have seen all the most frequently asked questions related to jquery in the interview.