jQuery is a fast, lightweight, feature-rich client-side JavaScript library. It is cross-platform and supports different types of browsers. It has provided a much-needed boost to JavaScript. Before jQuery, JavaScript codes were lengthy and bigger, even for smaller functions. It makes a website more interactive and attractive.
1. What is the difference between JavaScript and jQuery?
JavaScript
- It is a weakly typed, dynamic programming language
- It is an interpreted language
- You need to write your own script and it can be a time-consuming process
- Don’t need to add any additional plugins as all browsers support JavaScript
- Too many lines of Code
jQuery
- jQuery is a Concise and fast JavaScript library
- It uses resources of JavaScript to make tasks simpler and easier
- You only have to write existing JQuery scripts so it saves time
- You may have to include jQuery library URL in the header of the page
- Fewer lines of Code
2. Why jQuery is needed?
jQuery is needed for the following list:
- Used to develop browser compatible web applications
- Improve the performance of an application
- Very fast and extensible
- UI related functions are written in minimal lines of codes
3. What are the methods used to provide effects?
jQuery effects method help us to add some special effects to HTML elements present in DOM of web pages, and these methods can be grouped in fade, slide, hide, show and special effects.
The list of jQuery effects methods is given below.
- show(): This method can display /show the selected element.
- hide(): This method hides the element selected.
- toggle(): This method helps to toggle between show() and hide() method for the selected element.
- fadeIn(): This method helps hidden elements in the page to fade in (displayed), i.e. make hidden elements into an opaque element.
- fadeOut(): This method helps to hide an element from the web page by making the colored element transparent, in other words, it fades out.
- fadeToggle(): This method helps to modify the state of the selected element, i.e. hidden selected element into visible and visible selected element into the hidden element.
- slideUp(): This method can help selected HTML element slide upward.
- slideDown(): This method can help selected HTML element slide downward.
- slideToggle(): This method helps to modify the position of the selected element, i.e. selected element if slide upwards from its position, then it will slide down, and if the selected element slid downwards from its position, then it will slide up.
- animate(): This method can change selected elements from one state to another with CSS styles. The CSS property value such as position, color or shape changes within a particular interval resulting in an animated effect.
4. What are the features of jQuery?
- DOM manipulation – jQuery makes the selection of DOM elements easy, traverse them and modify their content by using cross-browser open source selector engine.
- Event handling – It provides an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
- AJAX Support – jQuery helps you to develop a responsive and feature-rich website with AJAX technology.
- Animations – This framework comes with plenty of built-in animation effects which you can use in your websites.
- Lightweight – It is a very lightweight library – about 19KB in size.
- Cross Browser Support – jQuery has cross-browser support and works well in IE 6.0+, Safari 3.0+, Chrome and Opera 9.0+.
- JSON parsing
- Deferred and Promise – These objects are used to govern asynchronous processing
- Compatibility – Compatibility methods that are natively present in newer browsers but require fallbacks for older ones, such as inArray() and each ().
5. What are Selectors in jQuery?
A jQuery Selector is a function that uses the expressions to find out matching elements from a DOM based on the given criteria. In a simple language, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.
Selecting an element in DOM is done with the help of $() construct with a string parameter containing any CSS selector expression. $() will return zero or more DOM elements on which you can apply any effect or style.
6. What are the different types of Selectors?
- Tag Name : $(‘div/p/span’) – All div tags in the document
- ID : $(‘#tag_id’) – Selects element with ID as TextId.
- Class : $(‘.tag-class’) – Selects all elements with class as myclass.
7. What is jQuery Mobile?
jQuery Mobile is a JavaScript library that enables developers to create mobile-first applications. It is a lightweight framework that allows developers to create rich, touch-first interfaces that are optimized for touch devices.
jQuery Mobile is a mobile-first JavaScript library that aims to provide a modern and easy-to-use framework for developing mobile apps. It was originally developed by Facebook to improve the performance of its iOS and Android apps. Since then, it has been adopted by many other companies, including Google, Yahoo, and Mozilla.
When using jQuery Mobile, you can use the library to create a mobile-first app that is faster and easier to maintain than traditional web apps. It also makes it easier to add new features to your app without having to rewrite your code.
JQuery Mobile is built on top of the jQuery JavaScript library. It works by using the same techniques that are used when you are developing a traditional web app. However, instead of using JavaScript, jQuery Mobile uses HTML5 and CSS3 to create a modern and easy-to-use framework for developing mobile apps.
8. What is jQuery.noConflict?
jQuery no-conflict is an option given by jQuery to overcome the conflicts between the different javascript frameworks or libraries. When you use jQuery no-conflict mode, you replace the $ to a new variable and assign jQuery some other JavaScript libraries. Also, the $ is used as a function or variable name that jQuery has.
9. Explain various Ajax functions available in jQuery?
- ajaxStart(): It is a Global Event, that triggers as a result of the Starting of an Ajax request, provided no other Ajax requests are currently running.
- beforeSend(): It is a Local Event, as the name indicates, this event gets invoked before Ajax request starts, thereby allowing to modify XMLHttpRequest objects.
- ajaxSend(): It is a Global Event, and this event gets called before the Ajax request is run.
- success(): It is a Local Event. This event triggers only if the Ajax request was successfully sent ( i.e. while sending Ajax request, the event does not display any error from the server or from data).
- ajaxSuccess(): It is a Global Event, triggers only if the request sent was successful.
- error(): It is a Local Event, that gets triggered if an error occurs while executing the request. (You can have either error or a success callback while sending Ajax request)
- ajaxError(): It is a Global Event, which behaves the same as its local counterpart error() event.
- complete(): It is a Local Event. This event gets called regardless of the request being successful or result in an error, and complete callbacks are received, even for synchronous requests.
- ajaxComplete(): It is a Global Event, gets called regardless of the request being successful or resulting in an error, and a complete callback is received, even for synchronous requests.
- ajaxStop(): It is a Global Event, that gets triggered when no Ajax requests are still being processed/ pending for processing.
10. What is the $() function in the jQuery library?
The $() function is used to access the properties of elements in the DOM (Document Object Model). $() is similar to javascript’s selector functions, but it is more powerful and has more options.
$() can be used to access attributes, classes, id, data-* attributes, and more.
$(document).ready(function() {
$("h1").css("background-color", "green");
});
11. Explain $(document).ready() function?
The $(document).ready() function is a jQuery extension that allows you to immediately run code when the document is ready. It’s most commonly used to initialize a new page or to load scripts or styles into the document. However, it can also be used to load a script or style into the document at any time.
The $(document).ready() function is useful for loading scripts or styles into the document at any time. It’s not useful for loading scripts or styles into the document when the document is already loaded.
12. How to read, write and delete cookies in jQuery?
Cookies are small blocks of data created by a web server when a user is using a website and cookies are stored on the user’s device. These cookies remember certain information about the user.
Create cookie: We use the cookie() method to create cookies.
$.cookie('name', 'value', { settings });
Parameters: This method has two parameters.
name: This is the key of the cookie
value: This is the value of the cookie.
settings: This is an object that can be used to set additional parameters to the Cookie.
Read cookie:
We can use the cookie() method to read a cookie by passing the name of the cookie and it will return the value of the cookie.
$.cookie('name');
Removing a cookie:
We can use the removeCookie() method to read a cookie by passing the name of the cookie. It Returns true when a cookie was successfully deleted, otherwise, it returns false.
$.removeCookie('name');