Lecture 18 1
Quick Overview to JQuery
Mr. Mubashir Ali
Lecturer (Dept. of Computer Science)
dr.mubashirali1@gmail.com
jQuery is a library of helper functions that are cross browser–
compatible. 2
It is an open source add-in that provides an easy, browser-agnostic
means for writing JavaScript.
jQuery is written in JavaScript, so it is JavaScript.
Make your JavaScript code shorter, faster and cross browser.
Manipulate your HTML, like showing or hiding something from the
page.
Handles events – it can do something when a user click a button or
any other activity a user can do with a mouse.
Animation – for example make a part of your page fade in, fade out
or just simply make something move.
AJAX – do a server request without refreshing your whole web page
JQuery Selectors 3
The most important purpose of jQuery is: select elements and do
some action on those selected elements.
The jQuery selectors allow you to search or select HTML elements
and then perform intended action on those.
Selectors in jQuery start with: $()
For example: $(‘tag_name’) , $(“#ID”), $(“.class”)
Note: Run Jquery when DOM is ready I;e;
$(document).ready( )
4
Categories of functionality jQuery Provides
Ajax (Asynchronous JavaScript and XML ) Methods that provide
synchronous and asynchronous calls to the server
Attributes Methods that get and set attributes of document object
model (DOM) elements
Callbacks object An object that provides many methods for
managing callbacks
Core Methods that provide core jQuery functionality
CSS Methods that get and set CSS-related properties
Data Methods that assist with associating arbitrary data with DOM
elements
Deferred object A chainable object that can register multiple
callbacks into call-back queues and relay the success or failure
state of any synchronous or asynchronous functions
5
Dimensions Helper methods for retrieving and setting DOM element
dimensions
Effects Animation techniques that can be added to your webpage
Events Methods that provide the ability to register code to execute
when the user interacts with the browser
Forms Methods that provide functionality when working with form
controls
Offset Methods for positioning DOM elements
Selectors Methods that provide the ability to access DOM elements
by using CSS selectors
Traversing Methods that provide the ability to traverse the DOM
Utilities Utility methods This lesson only scratches the surface of
jQuery’s capabilities, but subsequent lessons use jQuery whenever
possible.
6
Forms Methods that provide functionality when working with form
controls
Offset Methods for positioning DOM elements
Selectors Methods that provide the ability to access DOM
elements by using CSS selectors
Traversing Methods that provide the ability to traverse the DOM
Utilities Utility methods This lesson only scratches the surface of
jQuery’s capabilities, but subsequent lessons use jQuery
whenever possible.
JQuery Events 7
$("button").click(function(){
// do something when user click the button
});
$("form").submit(function(){
// do something when user submits a form
});
$("#myDiv").hover(function(){
// do something when user hover an HTML element
});
$("#myTextbox").keyup(function(){
// do something when user types on a textbox with ID
myTextbox
Class Practical Examples 8
Hide Show Content on Button Click
Slide Down & Slide Up Content on Click
Toggle & Fade Text on Button Click
Animations on Click
