jQuery is probably the most known and used JavaScript library used to simplify the client-side scripting code. It is an open source library created by John Resing. It has the advantage of being compatible with most browsers; simplifying programmers work from ensuring code compatibility with multiple browsers. This library is small (under 100Kb) which makes it easy to use in projects but also easy to load in browsers.
The main features of jQuery are:
1. The ability to manipulate by using the Document Object Model (DOM). That is, you can find any item on a web page by id, class or tag.
2. Make Animations: Fade In, Fade Out, Slide Up, Slide Down
3. Managing events on a page;
4. Handling of CSS elements;
5. Ajax-type asynchronous calls.
jQuery was created to be as small as possible, available in all major existing browser versions, and adhere to the “Unobtrusive JavaScript” philosophy.
Plugins or extensions are some of the most exciting aspects of jQuery. The architecture allows developers to develop sub-apps based on the main library that extend jQuery core functions with plugin-specific functions.
In this way, the main library can occupy very little space, and the necessary extensions in specific web pages can be loaded on demand only when needed. There is a set of primary extensions called jQuery UI or jQuery User Interface. jQuery UI offers a set of essential interactivity extensions, more complex effects than those in the primary library and color themes. The advantage of jQuery UI over other extensions is that development and testing of these components are done in parallel with the development of the main library, minimizing the risk of failure.
How to create a file with jQuery
1. Create the jquery-start.html file in a folder.
2. Copy and attach the following code to the file:
<Html>
<Head>
<Title> jQuery </ title>
<script src = “https://ajax.googleapis.com/ajax/libs/jquery/jquery.min.js”> </ script>
</ Head>
<Body>
<Script>
$ (Document) .ready (
function () {
alert (jQuery code works);
}
)
</ Script>
</ Body>
</ Html>
3. Save the file.
4. Open the document using a web browser.
In the head section of the HTML document, I uploaded the jQuery library. Without this library, the jQuery code would not have worked.
In the body section, in a script section of $ (document) .ready (function () {, it says that when the document is loaded, jQuery needs to notice this and automatically run the anonymous function (), along with all the code that is developed in the anonymous function.
Also, the code that is developed in this anonymous function can be called and run immediately, or it can be triggered at a certain time.
In the current case, the alert function (), which displays an on-screen alert in the browser, is called immediately after the completion of the page load.
Conclusions
1. Small, size, easy to use and fast
The jQuery library is small (only 20 KB in compressed form) both in size and execution. If you start using jQuery you will see that it is easy to use and much faster than writing all the code from 0. To include the jQuery library in your website, you will use the <script> tag, and that’s all.
2. You do not have to write a lot of code
Another significant advantage is that you do not have to write a lot of code for a single document. That’s because jQuery has selectors, mechanisms and all sorts of features that make DOM manipulation easy.
To select an HTML element in JavaScript:
document.getElementById ( ‘txtName’);
The above equivalent in jQuery will be
$ ( ‘# TxtName’);
To select all the rows in a table and change the background color:
<script src = “_scripts / jquery-1.3.2.min.js” type = “text / javascript”> </ script>
<script language = “javascript”>
$ (document) .ready (function () {
$ (‘# table1> tbody> tr’) css (“background-color”, “Red”);
});
</ Script>
3. Compatibility with any browser
JQuery is compatible with all major browsers, so you do not need to write separate code for each browser. However, the CSS must be consistent with all browsers if you want the site to look and work the same in all.
4. JavaScript separated by HTML
jQuery allows us to have HTML separated by javascript. This is possible due to jQuery $ (document) .ready () function of jQuery.
5. Fast and easy compatibility with Ajax
One of the most significant advantages of jQuery is the ease with which we can use Ajax in ASP.Net and JSON support.
6. There are a variety of plugins
There are many free plugins available online that we can use in projects.
7. JQuery functionality can be expanded to suit your needs.
8. We can use a Content Distribution Network or CDN for short.