jquery

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

Hello this is jQuery.
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.