SlideShare a Scribd company logo
JQuery
Write less Do more
Google+: Mahmoud Tolba
Blog: Mahmoodfcis.wordpress.com
Twitter: @MahmoodTolba
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.
JQuery popularity
JQuery features
 Selectors
 Events
 Animation
 Ajax
 Effects
 Plugins
 CSS
 UI
 Mobile
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
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
JQuery Effects
 SlideUp,
 SlideDown
 FadeIn
 FadeOut
 ScrollTop
 show
 hide
 toggle
Events
 Bind
 Click
 Dblclick
 Change
 Blur
 mouseover
 Mouseup
 Mousedown
 Keyup
 Keydown
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()
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
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/

More Related Content

What's hot (20)

PPT
Introduction to j query
thewarlog
 
PPTX
Jquery Basics
Umeshwaran V
 
PDF
D3.js and SVG
Karol Depka Pradzinski
 
PDF
Jquery presentation
Mevin Mohan
 
PPT
J Query Public
pradeepsilamkoti
 
PPTX
jQuery
Dileep Mishra
 
PDF
Introduction to jQuery
Seble Nigussie
 
PDF
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
philogb
 
PPT
J query b_dotnet_ug_meet_12_may_2012
ghnash
 
PPT
Grails Views
NexThoughts Technologies
 
PPTX
JQuery
Jacob Nelson
 
ODP
JQuery introduction
Pradeep Saraswathi
 
PPTX
jQuery
Jay Poojara
 
PDF
jQuery State of the Union - Yehuda Katz
Marakana Inc.
 
PPTX
iOS Beginners Lesson 4
Calvin Cheng
 
PPTX
Migration to jQuery 3.5.x
StanislavIdolov
 
PPTX
jQuery besic
Syeful Islam
 
Introduction to j query
thewarlog
 
Jquery Basics
Umeshwaran V
 
D3.js and SVG
Karol Depka Pradzinski
 
Jquery presentation
Mevin Mohan
 
J Query Public
pradeepsilamkoti
 
Introduction to jQuery
Seble Nigussie
 
JavaScript para Graficos y Visualizacion de Datos - BogotaJS
philogb
 
J query b_dotnet_ug_meet_12_may_2012
ghnash
 
JQuery
Jacob Nelson
 
JQuery introduction
Pradeep Saraswathi
 
jQuery
Jay Poojara
 
jQuery State of the Union - Yehuda Katz
Marakana Inc.
 
iOS Beginners Lesson 4
Calvin Cheng
 
Migration to jQuery 3.5.x
StanislavIdolov
 
jQuery besic
Syeful Islam
 

Similar to JQuery Overview (20)

PPTX
JQuery_and_Ajax.pptx
AditiPawale1
 
PPT
jQuery for beginners
Divakar Gu
 
PPT
J query module1
Srivatsan Krishnamachari
 
PPTX
A Rich Web experience with jQuery, Ajax and .NET
James Johnson
 
PDF
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
PPTX
A Rich Web Experience with jQuery, Ajax and .NET
James Johnson
 
PPTX
Unit-III_JQuery.pptx engineering subject for third year students
MARasheed3
 
PPTX
Jquery
Pankaj Srivastava
 
PPTX
jQuery
Jon Erickson
 
PPT
J query presentation
sawarkar17
 
PPT
J query presentation
akanksha17
 
PPTX
JQUERY TUTORIALS
Moize Roxas
 
PPT
Jquery PPT_Finalfgfgdfgdr5tryeujkhdwappt
shubhangimalas1
 
PPTX
Getting started with jQuery
Gill Cleeren
 
PDF
jQuery
Andrew Homeyer
 
PDF
jQuery (DrupalCamp Toronto)
jeresig
 
PPTX
A to Z about JQuery - Become Newbie to Expert Java Developer
Manoj Bhuva
 
PDF
Javascript libraries
Dumindu Pahalawatta
 
PPTX
Web technologies-course 11.pptx
Stefan Oprea
 
JQuery_and_Ajax.pptx
AditiPawale1
 
jQuery for beginners
Divakar Gu
 
J query module1
Srivatsan Krishnamachari
 
A Rich Web experience with jQuery, Ajax and .NET
James Johnson
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Sean Burgess
 
A Rich Web Experience with jQuery, Ajax and .NET
James Johnson
 
Unit-III_JQuery.pptx engineering subject for third year students
MARasheed3
 
jQuery
Jon Erickson
 
J query presentation
sawarkar17
 
J query presentation
akanksha17
 
JQUERY TUTORIALS
Moize Roxas
 
Jquery PPT_Finalfgfgdfgdr5tryeujkhdwappt
shubhangimalas1
 
Getting started with jQuery
Gill Cleeren
 
jQuery (DrupalCamp Toronto)
jeresig
 
A to Z about JQuery - Become Newbie to Expert Java Developer
Manoj Bhuva
 
Javascript libraries
Dumindu Pahalawatta
 
Web technologies-course 11.pptx
Stefan Oprea
 
Ad

More from Mahmoud Tolba (10)

PPTX
The passionate programmer
Mahmoud Tolba
 
PPTX
Introduction to SAP, Systems, Applications
Mahmoud Tolba
 
PPTX
AngularJS
Mahmoud Tolba
 
PPTX
Developing cross platforms mobile applications using the Apache Cordova
Mahmoud Tolba
 
PPTX
Microsoft Entity Framework
Mahmoud Tolba
 
PPTX
Windows Communication Foundation
Mahmoud Tolba
 
PPTX
ASP.NET MVC controllers
Mahmoud Tolba
 
PPTX
ASP.NET MVC4 Overview
Mahmoud Tolba
 
PPTX
Top emerging technologies
Mahmoud Tolba
 
PPTX
Advanced JavaScript
Mahmoud Tolba
 
The passionate programmer
Mahmoud Tolba
 
Introduction to SAP, Systems, Applications
Mahmoud Tolba
 
AngularJS
Mahmoud Tolba
 
Developing cross platforms mobile applications using the Apache Cordova
Mahmoud Tolba
 
Microsoft Entity Framework
Mahmoud Tolba
 
Windows Communication Foundation
Mahmoud Tolba
 
ASP.NET MVC controllers
Mahmoud Tolba
 
ASP.NET MVC4 Overview
Mahmoud Tolba
 
Top emerging technologies
Mahmoud Tolba
 
Advanced JavaScript
Mahmoud Tolba
 
Ad

Recently uploaded (20)

PDF
Lesson 2 - WATER,pH, BUFFERS, AND ACID-BASE.pdf
marvinnbustamante1
 
PDF
Knee Extensor Mechanism Injuries - Orthopedic Radiologic Imaging
Sean M. Fox
 
PDF
DIGESTION OF CARBOHYDRATES,PROTEINS,LIPIDS
raviralanaresh2
 
PPTX
SPINA BIFIDA: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
PPTX
A PPT on Alfred Lord Tennyson's Ulysses.
Beena E S
 
PDF
The Different Types of Non-Experimental Research
Thelma Villaflores
 
PDF
The History of Phone Numbers in Stoke Newington by Billy Thomas
History of Stoke Newington
 
PDF
community health nursing question paper 2.pdf
Prince kumar
 
PDF
Stokey: A Jewish Village by Rachel Kolsky
History of Stoke Newington
 
PDF
The dynastic history of the Chahmana.pdf
PrachiSontakke5
 
PDF
QNL June Edition hosted by Pragya the official Quiz Club of the University of...
Pragya - UEM Kolkata Quiz Club
 
PPTX
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
PPT
Talk on Critical Theory, Part One, Philosophy of Social Sciences
Soraj Hongladarom
 
PPT
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
PDF
Chapter-V-DED-Entrepreneurship: Institutions Facilitating Entrepreneurship
Dayanand Huded
 
PDF
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
PDF
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
PPTX
2025 Winter SWAYAM NPTEL & A Student.pptx
Utsav Yagnik
 
PDF
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
PDF
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 
Lesson 2 - WATER,pH, BUFFERS, AND ACID-BASE.pdf
marvinnbustamante1
 
Knee Extensor Mechanism Injuries - Orthopedic Radiologic Imaging
Sean M. Fox
 
DIGESTION OF CARBOHYDRATES,PROTEINS,LIPIDS
raviralanaresh2
 
SPINA BIFIDA: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
A PPT on Alfred Lord Tennyson's Ulysses.
Beena E S
 
The Different Types of Non-Experimental Research
Thelma Villaflores
 
The History of Phone Numbers in Stoke Newington by Billy Thomas
History of Stoke Newington
 
community health nursing question paper 2.pdf
Prince kumar
 
Stokey: A Jewish Village by Rachel Kolsky
History of Stoke Newington
 
The dynastic history of the Chahmana.pdf
PrachiSontakke5
 
QNL June Edition hosted by Pragya the official Quiz Club of the University of...
Pragya - UEM Kolkata Quiz Club
 
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
Talk on Critical Theory, Part One, Philosophy of Social Sciences
Soraj Hongladarom
 
Talk on Critical Theory, Part II, Philosophy of Social Sciences
Soraj Hongladarom
 
Chapter-V-DED-Entrepreneurship: Institutions Facilitating Entrepreneurship
Dayanand Huded
 
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
2025 Winter SWAYAM NPTEL & A Student.pptx
Utsav Yagnik
 
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
Generative AI: it's STILL not a robot (CIJ Summer 2025)
Paul Bradshaw
 

JQuery Overview

  • 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.
  • 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/

Editor's Notes

  • #4: http://www.google.com/trends/explore#q=mootools,jquery,prototype+js,yui,dojo
  • #7: See http://api.jquery.com/category/selectors/