Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
34 views

Lect 18 Quick Overview To JQuery

The document provides an overview of jQuery, explaining that it is a JavaScript library that makes JavaScript code shorter, faster and cross-browser compatible by providing methods to select elements, handle events, perform animations and AJAX requests. It discusses jQuery selectors, events, and categories of functionality including manipulating HTML, CSS, forms, effects and more. Examples are provided of using jQuery for common tasks like hiding/showing content and animations.

Uploaded by

Aqsa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

Lect 18 Quick Overview To JQuery

The document provides an overview of jQuery, explaining that it is a JavaScript library that makes JavaScript code shorter, faster and cross-browser compatible by providing methods to select elements, handle events, perform animations and AJAX requests. It discusses jQuery selectors, events, and categories of functionality including manipulating HTML, CSS, forms, effects and more. Examples are provided of using jQuery for common tasks like hiding/showing content and animations.

Uploaded by

Aqsa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like