Basic Introduction of jQuery

1
iFour Consultancy
https//www.ifourtechnolab.com/
2
Introduction to JQuery

• JavaScript Library
• Greatly simplifies JavaScript programming
• It is a lightweight, "write less, do more",
  JavaScript library
• Simplifies HTML document traversing, event
  handling, animating, and Ajax interactions for
  rapid web development
• The purpose is to make it much easier to use
  JavaScript on your website

https//www.ifourtechnolab.com/
3
Advantages of jQuery

• There are lots of other JavaScript frameworks out
  there, but jQuery seems to be the most popular,
  and also the most extendable
• Many of the biggest companies on the Web use
  jQuery, such as
• Google
• Microsoft
• IBM
• Netflix

https//www.ifourtechnolab.com/
4
How to Install

• There are several ways to start using jQuery on
  your website
• Download the jQuery library from jQuery.com
• Include jQuery from a CDN, like Google
  
• There are two versions of jQuery available for
  downloading
• Production version
• Development version
• If you don't want to download and host jQuery
  yourself, you can include it from a CDN (Content
  Delivery Network)
• Both Google and Microsoft host jQuery

https//www.ifourtechnolab.com/
5
jQuery Syntax

• It is tailor made for 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
• A jQuery action() to be performed on the
  element(s)
• The Document Ready event is used to prevent any
  jQuery code from running before the document is
  finished loading (is ready)
• It is good practice to wait for the document to
  be fully loaded and ready before working with it

https//www.ifourtechnolab.com/
6
Enable jQuery in your page

• jQuery can be enabled in your page by including
  reference to jQuery library file ltscript
  src"http//ajax.googleapis.com/ajax/libs/jquery/1
  .9.1/jquery.min.js"gt
• Introduce a jQuery function by using the below
  given function (document).ready(function() //S
  cript goes here ) OR (function() //Script
  goes here )

https//www.ifourtechnolab.com/
7
JavaScript vs jQuery

• Example 1 - Hide an element with id
  "textbox //JavaScript document.getElementById('
  textbox').style.display "none" //jQuery ('
  textbox' ).hide()
• Example 2 - Create a lth1gt tag with "my
  text //JavaScript var h1 document.CreateEleme
  nt("h1") h1.innerHTML "my text" document.get
  ElementsByTagName('body')0.appendChild(h1)
• //jQuery (' body').append( ("lth1/gt").html("my
  text")

https//www.ifourtechnolab.com/
8
jQuery Selectors

• One of the most important parts of the jQuery
  library
• Allow you to select and manipulate HTML
  element(s)
• Used to "find" (or select) HTML elements based on
  their id, classes, types, attributes, values of
  attributes and much more
• Selects elements based on the element name
• The jQuery id selector uses the id attribute of
  an HTML tag to find the specific element.
• The jQuery class selector finds elements with a
  specific class

https//www.ifourtechnolab.com/
9
Positional Selectors
Syntax Examples("selectorfirst") ("p
first") ("selectorlast") ("plast") ("sele
ctorodd") ("podd") ("selectoreven") ("p
even") ("selectoreq(i)") ("peq(1)") ("se
lectorgt(i)") ("pgt(1)") ("selectorlt(i)")
("plt(1)")
https//www.ifourtechnolab.com/
10
Basic selectors

• Tag Name document.getElementsByTagName("tagName")
  (JavaScript) ("tagName") - ("div"), ("p"),
  ("div")
• Tag ID document.getElementById("id")
  (JavaScript) ("id") - ("name"),
  ("address")
• Tag Class document.getElementsByClassName("classN
  ame") (JavaScript) (".className") -
  (".comment"), (".code")
• To select all elements - ("")

https//www.ifourtechnolab.com/
11
Form Element(Custom) Selectors
("selectorvisible") ("selectorinput") ("s
electorhidden") ("selectortext")("selecto
rdisabled") ("selectorpassword") ("selecto
renabled") ("selectorradio")("selectorch
ecked") ("selectorcheckbox") ("selectorsel
ected") ("selectorsubmit")("selectorheade
r") ("selectorreset") ("selectoranimated")
("selectorimage")("selectornot(selectorn
ot)") ("selectorfile") ("selectorbutt
on")
https//www.ifourtechnolab.com/
12
Retrieve, Set and Remove attribute
Syntax Examples ("selector").attr("name")
("img").attr("src") ("selector").attr("key","
val") ("p").attr("class","source") ("selector"
).attr("key",fn()) ("img").attr("height",calHt()
) ("selector").attr(properties) ("img").attr(
"src""/path/","title" "My Img") ("selector"
).removeAttr(attr) ("div").removeAttr("class)
https//www.ifourtechnolab.com/
13
Class, HTML, Text, Value - Functions
("selector").hasClass("className") ("selector").
addClass("className") ("selector").removeClass("c
lassName") ("selector").toggleClass("className")
("selector").html() ("selector").html("html
code") ("selector").text() ("selector").text("te
xt content") ("selector").val() ("selector").val
("value")
https//www.ifourtechnolab.com/
14
Events

• All the different visitor's actions that a web
  page can respond to are called events
• Represents the precise moment when something
  happens
• Examples
• moving a mouse over an element
• selecting a radio button
• clicking on an element
• The term "fires/fired" is often used with events.
  Example "The keypress event is fired, the moment
  you press a key"

https//www.ifourtechnolab.com/
15
Commonly Used jQuery Event Methods

• click()
• This method attaches an event handler function to
  an HTML element
• The function is executed when the user clicks on
  the HTML element
• The following example says When a click event
  fires on a ltpgt element hide the current ltpgt
  element
• Example
• ("p").click(function()   (this).hide() )
  

https//www.ifourtechnolab.com/
16
Commonly Used jQuery Event Methods

• dblclick()
• This method attaches an event handler function to
  an HTML element
• The function is executed when the user
  double-clicks on the HTML element
• Example
• ("p").dblclick(function()
• (this).hide())

https//www.ifourtechnolab.com/
17
Commonly Used jQuery Event Methods

• mouseenter()
• This method attaches an event handler function to
  an HTML element
• The function is executed when the mouse pointer
  enters the HTML element
• Example
• ("p1").mouseenter(function()
• alert("You entered p1!"))

https//www.ifourtechnolab.com/
18
Commonly Used jQuery Event Methods

• mouseleave()
• This method attaches an event handler function to
  an HTML element
• The function is executed when the mouse pointer
  leaves the HTML element
• Example
• ("p1").mouseleave(function()
•    alert("Bye! You now leave p1!"))

https//www.ifourtechnolab.com/
19
Commonly Used jQuery Event Methods

• mousedown()
• This method attaches an event handler function to
  an HTML element
• The function is executed, when the left, middle
  or right mouse button is pressed down, while the
  mouse is over the HTML element
• Example
• ("p1").mousedown(function()
•    alert("Mouse down over p1!"))

https//www.ifourtechnolab.com/
20
Commonly Used jQuery Event Methods

• mouseup()
• This method attaches an event handler function to
  an HTML element
• The function is executed, when the left, middle
  or right mouse button is released, while the
  mouse is over the HTML element
• Example
• ("p1").mouseup(function()
•   alert("Mouse up over p1!"))

https//www.ifourtechnolab.com/
21
Commonly Used jQuery Event Methods

• hover()
• This method takes two functions and is a
  combination of the mouseenter() and mouseleave()
  methods
• The first function is executed when the mouse
  enters the HTML element, and the second function
  is executed when the mouse leaves the HTML
  element
• Example
• ("p1").hover(function()
•   alert("You hover p1!")) ,function()   
  alert("Bye! You now leave p1!"))

https//www.ifourtechnolab.com/
22
Commonly Used jQuery Event Methods

• focus()
• This method attaches an event handler function to
  an HTML form field
• The function is executed when the form field gets
  focus
• Example
• ("input").focus(function()
•   (this).css("background-color",
  "cccccc"))

https//www.ifourtechnolab.com/
23
Commonly Used jQuery Event Methods

• blur()
• This method attaches an event handler function to
  an HTML form field
• The function is executed when the form field
  loses focus
• Example
• ("input").blur(function()
•    (this).css("background-color",
  "ffffff"))

https//www.ifourtechnolab.com/
24
Useful Event Functions

• .hide() displaytrue
• .show() displaynone
• .toggle(func1, func2) first click calls func1,
  next click executes func2
• .hover(over, out) mouseover, mouseout

https//www.ifourtechnolab.com/
25
Effects

• show() Shows the selected elements
• Hide() Hides the selected elements
• fadeIn() Fades in the selected elements
• fadeOut() Fades out the selected elements
• fadeToggle() Toggles between the fadeIn() and
  fadeOut() methods
• slideUp() Slides-up (hides) the selected
  elements

https//www.ifourtechnolab.com/
26
Effects

• slideDown() Slides-down (shows) the selected
  elements
• Finish() Stops, removes and completes all queued
  animations for the selected elements
• Delay() Sets a delay for all queued functions on
  the selected elements
• Animate() Runs a custom animation on the
  selected elements
• Stop() Stops the currently running animation for
  the selected elements
• Dequeue() Removes the next function from the
  queue, and then executes the function

https//www.ifourtechnolab.com/
27
jQuery UI

• Collection of GUI widgets, animated visual
  effects, and themes implemented
  with jQuery (a JavaScript library), Cascading
  Style Sheets, and HTML. 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.
• Features
• Interactions
• Widgets
• Effects

https//www.ifourtechnolab.com/
28
jQuery UI Interactions

• Draggable Allow elements to be moved using the
  mouse
• Droppable Create targets for draggable elements
• Resizable Change the size of an element using
  the mouse
• Selectable Use the mouse to select elements,
  individually or in a group
• Sortable Reorder elements in a list or grid
  using the mouse

https//www.ifourtechnolab.com/
29
jQuery UI Interactions - Example (Draggable,
Resizable)

https//www.ifourtechnolab.com/
30
jQuery UI Widgets

• Accordion Displays collapsible content panels
  for presenting information in a limited amount of
  space
• Autocomplete Enables users to quickly find and
  select from a pre-populated list of values as
  they type, leveraging searching and filtering
• Button Enhances standard form elements like
  buttons, inputs and anchors to themeable buttons
  with appropriate hover and active styles
• Checkboxradio Enhances standard checkbox and
  radio input element to themeable buttons with
  appropriate hover and active styles
• ControlGroup Groups multiple buttons and other
  widgets into one visual set
• Datepicker Select a date from a popup or inline
  calendar

https//www.ifourtechnolab.com/
31
jQuery UI Widgets

• Dialog Open content in an interactive overlay
• Menu Themeable menu with mouse and keyboard
  interactions for navigation
• Progressbar Display status of a determinate or
  indeterminate process
• SelectMenu Duplicates and extends the
  functionality of a native HTML select element to
  overcome the limitations of the native control
• Slider Drag a handle to select a numeric value
• Spinner Enhance a text input for entering
  numeric values, with up/down buttons and arrow
  key handling
• Tabs A single content area with multiple
  panels, each associated with a header in a list
• Tooltip Customizable, themeable tooltips,
  replacing native tooltips

https//www.ifourtechnolab.com/
32
jQuery UI Widgets - Examples

• Accordion

https//www.ifourtechnolab.com/
33
jQuery UI Widgets - Examples

• Autocomplete

https//www.ifourtechnolab.com/
34
jQuery UI Widgets - Examples

• Datepicker

https//www.ifourtechnolab.com/
35
jQuery UI Effects

• Add Class Adds class(es) to elements while
  animating all style changes
• Color Animation Animate the properties of
  elements between colors
• Easing Apply an easing equation to an animation
• Effect Apply an animation effect to an element
• Hide Hide elements using custom effects
• Remove Class Removes class(es) from elements
  while animating all style changes
• Show Display elements using custom effects
• Switch Class Add and remove class(es) to
  elements while animating all style changes
• Toggle Display or hide elements using custom
  effects
• Toggle Class Toggle class(es) on elements while
  animating all style changes

https//www.ifourtechnolab.com/
36
jQuery UI Effects - Examples

• Add Class and Remove Class

https//www.ifourtechnolab.com/
37

• Thank You!!

https//www.ifourtechnolab.com/