What is jQuery?
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
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)
This is my first example.
Click below run the example.
|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
|$.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|
|$.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.
- Ease of use
- Large library
- 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 cross-platform.
- jQuery means “write less do more”.
- Functionality maybe limited
There is more advantages of jQuery, so if you are developer and love front end development, you should learn jQuery.