What is use of jquery and the features of jquery?
- Short CoursesWeb Development
- August 31, 2022
- No Comment
- 176
What is jQuery?
jQuery is a freely available JavaScript library. It’s small and convenient for when we need to write less and get more done. jQuery is a library that covers a variety of typical tasks that require a significant amount of JavaScript code in various techniques.
This method may be called with a single line of code. As a consequence, including JavaScript in your website is straightforward. The contrast between JavaScript and jQuery is that the former is a different computer language, whilst the latter is a collection of JavaScript code (not its own language).
“jQuery is a freely small and fast JavaScript library contained in a single.js file.” It has a lot of built-in features that allow you to swiftly do a range of tasks.”
jQuery is a freely cross-browser library that is small, fast, and packed with features. Despite the availability of multiple JavaScript libraries, jQuery remains the most popular and widely used framework among programmers. It is more flexible and easier to use than other JavaScript libraries.
jQuery requires significantly less code, has a vast number of plugins available on the internet, and is straightforward for web developers to utilize. It is compatible with all browsers and enhances the interactivity, simplicity, and usability of websites. It may also be SEO-optimized and is simple to set up and use.
Features of jQuery:
Simple and straightforward: In contrast to JavaScript, it provides predefined methods that may be utilized to swiftly execute any activity. It’s also easy to learn.
Lightweight: It’s a little library, at about 19KB in size ( Minified and gzipped ).
CSS manipulation: It has a built-in CSS() method that may be used to change the style of any HTML element.
Html manipulation: jQuery made it simple to pick, navigate, and edit the content of DOM elements.
Cross-browser compatibility: It works with all recent web browsers, including Internet Explorer 6.
Event handling: It supports event handling, such as the click of a mouse button.
JavaScript Library: The JavaScript Library is a JavaScript library.
Ajax Support: Because it supports ajax, you may use it to create a responsive and feature-rich website.
Built-in Animation: It comes with a preset function called “animate()” that allows you to build custom animations on your website.
What is $ in jquery?
When the jQuery library is properly loaded into your browser, it adds a global function named jQuery to your page (). Because the global scope refers to the scope of the window, the global jQuery() function may also be referred to as a window. Use jQuery() or jQuery anywhere on your website (). Because $ is an alias for a jQuery function, you may use $() as a jQuery shortcut ().
The diagram below depicts the window. Use the jQuery window in Chrome Developer Tools. $, jQuery and $ functions are all available.
jQuery is a freely used to generate a window, as you can see. window, $, and jQuery $ stand for the same thing.
window.jQuery = window.$ = jQuery = $
As you can see in the example above, the jQuery() (aka $) method accepts two parameters: selector and context.
As a selector argument, a CSS-style selector phrase for matching a group of objects on a page can be used. If you want to do anything with all of the div elements, for example, use the $ function, as seen below.
Example: Selector Parameter
jQuery(‘div’)
//Or
window.jQuery(‘div’)
//Or
$(‘div’)
//Or
window.$(‘div’)
Simply type in the tag name of the components you want to find here. Based on the selection, the jQuery (aka $) function produces an array of elements. You’ll learn more about selectors in the next section.
The second parameter in the jQuery() method is context. A context argument might be anything; for example, a DOM element reference or another jQuery selection. jQuery will start searching for things in the context’s supplied element. If you provide the jQuery selection context parameter, it may run quicker. In contrast, the context parameter is optional.
Built-in functions of jquery:
Hide function:
It’s used to quickly conceal the chosen Html element. It only works in hidden selected elements, as the name implies. The Hide () function in jQuery is incredibly handy. You can conceal HTML components with this approach ().
Example:
<script>
// We have to use the hide function to hide the element as well.
$(‘#hide_jQuery’).click(function(){
$(‘# jQuery’).hide();
});
$(‘#show_ jQuery’).click(function(){
$(‘# jQuery’).show();
});
</script>
<div id=”hide_ jQuery”></div>
<div id=”show_ jQuery”></div>
<div id=” jQuery”></div>
Show function:
It’s used to show the currently selected HTML element. These functions operate in the opposite direction from the hide function. However, before performing this method, it must first use the hide function on the same element.
Example:
<script>
// We have to use the hide function to hide the element as well.
$(‘#hide_ jQuery’).click(function(){
$(‘# jQuery’).hide();
});
$(‘#show_ jQuery’).click(function(){
$(‘# jQuery’).show();
});
</script>
<div id=”hide_ jQuery”></div>
<div id=”show_ jQuery”></div>
<div id=” jQuery”></div>
Toggle function:
It is used to toggle between the (hidden, display) functionality for the clicked objects. This function is used to hide or show a certain element. A toggle works well in comparison to the hidden and displays features.
Example:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>toggle demo</title>
<script src=”https://code.jquery.com/jquery-1.10.2.js”></script>
</head>
<body>
<button>Toggle</button>
<div>Hello</div>
<script>
$(“button”).click(function()
{
$(“div”).toggle();
});
</script>
</body>
</html>
SlideDown function:
This function uses to slide an element down the page and hide it.
Example:
<script type=”text/javascript”>
$(document).ready(function ()
{
$(“#btnSlideDown”).click(function ()
{
$(“#login_wrapper”).slideDown();
return false;
});
});
</script>
SlideUp function:
This method uses to slide and show an element’s upside. It gradually glides up and removes the selected pieces.
Example:
<script type=”text/javascript”>
$(document).ready(function ()
{
$(“#btnSlideUp”).click(function ()
{
$(“#login_wrapper”).slideUp();
return false;
});
});
</script>
Is jQuery a programming language?
Rather than a programming language, jQuery is a cross-platform JavaScript library. Rather than having its own syntax, it is a set of guidelines for utilizing JavaScript grammar. Internally, everything programming written in jQuery is converted to JavaScript. One line of jQuery code might be comparable to multiple lines of JavaScript code, suggesting that developers will only need to write a few lines.