Scribd
Upload
76 views

Diploma in Web Development - Part Ii: Jquery

This document summarizes a presentation on JQuery. It introduces JQuery as a JavaScript library that can simplify event handling, HTML document traversal, AJAX, and animation. It demonstrates how to call JQuery methods on HTML elements by wrapping them in a JQuery object using the $ alias. Events are occurrences recognized by an application that can then be handled, and are created by system triggers or user interaction. The presentation covers JQuery fundamentals like getting started and event handling.

Uploaded by

Sensei Hashibami
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
76 views

Diploma in Web Development - Part Ii: Jquery

This document summarizes a presentation on JQuery. It introduces JQuery as a JavaScript library that can simplify event handling, HTML document traversal, AJAX, and animation. It demonstrates how to call JQuery methods on HTML elements by wrapping them in a JQuery object using the $ alias. Events are occurrences recognized by an application that can then be handled, and are created by system triggers or user interaction. The presentation covers JQuery fundamentals like getting started and event handling.

Uploaded by

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

Diploma in Web

Development – Part II
Front-End Development – Week 3
JQuery

Presented by:
Julian Quirke
Web Development Educator

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Week 2 Recap

Object-Oriented JavaScript
➢ Object-Oriented Programming
➢ Properties & Methods
➢ Building a Prototype Object

➢ Summary
➢ Q&A

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Today’s Lesson

JQuery
➢ JQuery: The JavaScript Library
➢ Getting Started with JQuery
➢ Event Handling

➢ Summary
➢ Q&A

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Let’s Begin!

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
JQuery: The JavaScript Library

JQuery

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
JQuery: The JavaScript Library

JQuery
is a Javascript library that can be used to simplify
event handling, HTML document traversal, AJAX,
and animation

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
JQuery: The JavaScript Library
What is a Library?
Set of declared functions/methods

Can be called at any time in your code

Can be a general toolbox, or…

Can offer functionality for a specific task

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
JQuery: The JavaScript Library
JavaScript Libraries
React – User Interfaces

Three – 3D Library

Chart – Charts with Canvas

JQuery

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
JQuery: The JavaScript Library

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
JQuery: The JavaScript Library
To call JQuery methods on HTML elements, we need to wrap
the object in a JQuery object using the following class method:

(Note: $ is an alias for JQuery)


Elements are selected based on JQuery parameters:

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
JQuery: The JavaScript Library
Vanilla vs JQuery

versus:

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Getting Started With JQuery

Demo
Julian Quirke ADVANCED WEB DEVELOPMENT
Web Development Educator
Introduction to Events

Event

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Introduction to Events

Event
is an occurrence recognised by an application that
can then be handled by it.

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Introduction to Events
What Creates an Event?

➢ System trigger
➢ E.g. “Window has loaded”

➢ User Interaction
➢ E.g. “Mouse clicked”

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Introduction to Events

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Today’s Lesson

JQuery
✓ JQuery: The JavaScript Library
✓ Getting Started with JQuery
✓ Event Handling

➢ Summary
➢ Q&A

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Next Week

➢ The next session is “AJAX & Event Handling”


• What is User Experience?
• Introduction to AJAX
• AJAX & JQuery Demonstration

➢ Recordings are available within 24 hours after the live webinar

➢ Go to www.shawacademy.com and then the Top Right Corner – Members Area

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator
Q&A
Next Lesson is

AJAX & Event Handling


➢ Learn about powerful tools available in
JavaScript to dynamically request web content
without disrupting user experience
www.shawacademy.com
➢ You will understand how to create AJAX
www.facebook.com/shawacademy
queries in response to events
www.twitter.com/shawacademy

[email protected]

Julian Quirke ADVANCED WEB DEVELOPMENT


Web Development Educator

You might also like