Hello Guys i am here with one of the JavaScript framework. It is quite old and popular library used widely.
What is jQuery?
jQuery is a library which offers good features which makes java script rich. It makes HTML page more rich and user-friendly with event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. When there are some complex script used in raw JavaScript, you can use jQuery which has a simplified code.
Integrating jQuery is very easy just include the library link in you html file, and you done just write the code and jQuery will execute. I will show some syntax and examples
jQuery Syntax
The jQuery syntax are easy in selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
- A $ sign to define/access jQuery
- A (selector) to “query (or find)” HTML elements or id, class of an html element
- A jQuery action() to be performed on the element(s)
jQuery Examples
This is my first example.
Click below run the example.
jQuery Method
| Method | Description |
|---|---|
| click() | Attaches/Triggers the click event |
| dblclick() | Attaches/Triggers the double click event |
| hover() | Attaches two event handlers to the hover event |
| mousedown() | Attaches/Triggers the mousedown event |
| mouseout() | Attaches/Triggers the mousedout event |
| animate() | Runs a custom animation on the selected elements |
| fadeIn() | Fades in the selected elements |
| fadeOut() | Fades out the selected elements |
| fadeToggle() | Toggles between the fadeIn() and fadeOut() methods |
| hide() | Hides the selected elements |
| show() | Shows the selected elements |
| slideDown() | Slides-down (shows) the selected elements |
| slideUp() | Slides-up (hides) the selected elements |
| slideToggle() | Toggles between the slideUp() and slideDown() methods |
| addClass() | Adds one or more class names to selected elements |
| appendTo() | Inserts HTML elements at the end of selected elements |
| css() | Sets or returns one or more style properties for selected elements |
| hasClass() | Checks if any of the selected elements have a specified class name |
| removeClass() | Removes one or more classes from selected elements |
| remove() | Removes the selected elements (including data and events) |
| toggleClass() | Toggles between adding/removing one or more classes from selected elements |
jQuery AJAX Methods
Loads (and executes) a JavaScript from a server using an AJAX HTTP GET request
| Method | Description |
|---|---|
| $.ajax() | Performs an async AJAX request |
| $.get() | Loads data from a server using an AJAX HTTP GET request |
| $.getJSON() | Loads JSON-encoded data from a server using a HTTP GET request |
| $.getScript() | |
| $.post() | Loads data from a server using an AJAX HTTP POST request |
| ajaxError() | Specifies a function to run when the AJAX request completes with an error |
| ajaxSend() | Specifies a function to run before the AJAX request is sent |
| ajaxSuccess() | Specifies a function to run when an AJAX request completes successfully |
| load() | Loads data from a server and puts the returned data into the selected element |
| serialize() | Encodes a set of form elements as a string for submission |
| serializeArray() | Encodes a set of form elements as an array of names and values |
Jquery have lots more methods and effects you can visit here and learn more about jQuery.
Advantages
- Ease of use
This is one of the most important advantage of using jQuery, it is lot more easy than the raw JavaScript and other JavaScript library. It has much fewer lines of code compared to other libraries.
- Large library
jQuery enables you to perform lots more of functions in comparison to other JavaScript libraries.
- Great documentation and tutorials and examples
jQuery websites has lots of documentation and tutorials, which is helpful for beginner programmers and also for the experts. There are also bundle of examples and plugin out there which is useful and can increase your development speed.
- Ajax support
Using ajax with jQuery is very easy. Ajax is used when you want to load the data into a page without reloading.
Some more advantages
- It is a lightweight JavaScript library.
- It is cross-platform.
- jQuery means “write less do more”.
Disadvantages
- Functionality maybe limited
While jQuery has an impressive library in terms of quantity, depending on how much customization you require on your website, functionality maybe limited thus using raw JavaScript maybe inevitable in some cases.
There is more advantages of jQuery, so if you are developer and love front end development, you should learn jQuery.
