Overview to JQuery

1. JQuery
Write less Do more
Google+: Mahmoud Tolba
Blog: Mahmoodfcis.wordpress.com
Twitter: @MahmoodTolba

2. Overview
 One of the best JavaScript libraries.
 jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal
and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that
works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has
changed the way that millions of people write JavaScript.

3. JQuery popularity

4. JQuery features
 Selectors
 Events
 Animation
 Ajax
 Effects
 Plugins
 CSS
 UI
 Mobile

5. JQuery Selectors
Selector Description Example
$(‘*’) Select All the elements $(‘*’).hide()
$(‘[name*="value"]’) Select elements with names
contain the value
$(‘input[name*=“name”]’).val(‘text’)
$(‘[name$="value"]’) Select elements with end with
value with given string
$(‘input[name$=“some”]’).show()
$(‘[name="value"]’) Select elements with name
equals the value
$(‘input[name=“someName”]’).hide()
$(‘[name^=“value”]’) Select elements with name starts
with a specific values
$(‘:button’) Select buttons
$(‘:checkbox’) Select check boxes
$(‘:file’) Select file tags

6. Selectors
Selector Description Example
$(‘.class’) Select elements that have class
$(‘#id’) Select elements by id
$(‘:contains(“text”)’) Select elements that contains specific text
$(‘:disabled’) Select disabled elements
$(‘:hidden’) Select hidden elements
$(‘:eq’) Select elements of index
$(‘:gt()’) Select elements at index greater than the
specified
$(‘:lt()’) Select elements at index less than the
specified
$(‘:even’) Select elements that have even indexes
$(‘:odd’) Select elements that have odd indexes
$(‘:last’) Select last element

7. JQuery Effects
 SlideUp,
 SlideDown
 FadeIn
 FadeOut
 ScrollTop
 show
 hide
 toggle

8. Events
 Bind
 Click
 Dblclick
 Change
 Blur
 mouseover
 Mouseup
 Mousedown
 Keyup
 Keydown

9. Ajax
 The jQuery library has a full suite of AJAX capabilities. The functions and methods therein allow us to load data from the
server without a browser page refresh
 .ajaxComplete()
 .ajaxError()
 .ajaxSend()
 .ajaxStart()
 .ajaxStop()
 .ajaxSuccess()
 jQuery.ajax()
 jQuery.ajaxPrefilter()
 jQuery.ajaxSetup()
 jQuery.ajaxTransport()

10. JQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top
of the jQuery JavaScript Library. Whether you're building highly interactive web applications or
you just need to add a date picker to a form control, jQuery UI is the perfect choice.
http://jqueryui.com

11. JQuery plugins
 There are a huge number of useful JQuery plugins in the web
 http://www.jqueryrain.com/
 http://plugins.jquery.com/
 http://blog.teamtreehouse.com/best-free-jquery-form-plugins-to-improve-user-experience
 http://www.smashingapps.com/2013/09/10/40-fresh-jquery-plugins-to-make-your-website-user-
friendly.html
 http://thedesignblitz.com/best-jquery-plugins-august-2013/