Scribd
Upload
44 views17 pages

Lecture 18

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
44 views17 pages

Lecture 18

Uploaded by

kmani11811
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Web Technologies

jQuery Basics
Today’s Lecture
• jQuery Introduction
– Advantages of using jQuery
– Adding jQuery to Web Pages
• jQuery Syntax
• jQuery Selectors
• jQuery Events
jQuery
• jQuery was created in 2006 by John Resig.
• It’s a JavaScript Library, that simplifies JavaScript programming.
• It was designed to handle Browser Incompatibilities and to simplify
HTML/DOM Manipulation, CSS Manipulation, HTML Event
Methods, Effects and Animations, and AJAX.
• jQuery is a lightweight, fast, and feature-rich JavaScript library.
– It's based on the principle "write less, do more".
– Purpose of jQuery is to make it much easier to use JavaScript on
website.
• Many of the biggest companies on the web use jQuery.
– Such as Google, Microsoft, IBM, and Netflix.
jQuery
• Advantages of using jQuery
– Simplify Common JavaScript Tasks
• We can easily create feature-rich and interactive web pages
with fewer lines of codes.
– Save Time
• We can save time and efforts by using jQuery inbuilt effects.
– Easy to Use
• Anybody with basic working knowledge of HTML, CSS and
JavaScript can start development with jQuery.
– Compatible with Browsers
• It’s compatible with all major modern browsers.
• Examples are Chrome, Firefox, Safari, and Internet Explorer.
– Absolutely Free
• It’s free to download and use.
jQuery
Adding jQuery to Web Pages
• There are two ways to start using jQuery on website:
o Download jQuery Library (from jQuery.com)
<head><script src="jquery-3.7.1.min.js"></script></head>
o Include jQuery from a CDN (like Google)
• If don't want to download and host jQuery, we can include it
from a CDN (Content Delivery Network):
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
</head>
jQuery Syntax
• jQuery uses CSS syntax to select elements.
• It uses jQuery object to select HTML elements and performs actions
on it.
• Basic syntax is $(selector).action();
– $ Dollar sign access jQuery
– (selector) defines to "query (or find)" HTML elements
– action() defines an action on the element(s)
• Example:
$("this").hide() //hides current element
$("p").hide() //hides all <p> elements
$(".test").hide() //hides all elements with class="test"
$("#test").hide() //hides element with id="test"
jQuery Selectors
• jQuery selectors are used to "find" (or select) HTML elements based
on their name, id, classes, types, attributes, values of attributes and
much more.
• Example:
$(".feature"); // class selector
$("b, i"); //multiple selector
$("a[target="_blank"]"); //attribute selector
element Selector
• jQuery element selector selects elements based on element name.
• Example: when user clicks on a button, all <p> elements will hide.

before clicking button

after clicking button


.class Selector
• jQuery .class selector finds elements with a specific class.
• To find elements with a specific class, write a . period character,
followed by name of the class.
• Example: when user clicks on a button, elements with class="test"
will hide.

before clicking button

after clicking button


#id Selector
• jQuery #id selector finds elements with a specific id.
• To find an element with a specific id, write a # hash character,
followed by id of the HTML element.
• Example: when user clicks on a button, element with id="test" will
hide.

before clicking button

after clicking button


More Examples of jQuery Selectors
jQuery Events
• Visitors' action(s) that a web page can respond to are called events.
– Example: by moving a mouse over an element, and clicking on
an element etc.
Some Common DOM Events
jQuery Events
• Some Common jQuery Event Methods
– click()
• It executed when user clicks on the HTML element:
$("p").click(function(){
$(this).hide();});
– dblclick()
• It executed when user double-clicks on the HTML element:
$("p").dblclick(function(){
$(this).hide();});
– blur()
• It executed when the form field loses focus:
$("input").blur(function(){
$(this).css("background-color", "green");});
jQuery Events
• Some Common jQuery Event Methods
– mouseenter()
• It executed when mouse pointer enters the HTML element:
$("#p1").mouseenter(function(){
alert("You entered p1!");});
– mouseleave()
• It executed when mouse pointer leaves the HTML element:
$("#p1").mouseleave(function(){
alert("You now leave p1!");});
– mousedown()
• It executed when left, middle or right mouse button is
pressed down while the mouse is over the HTML element:
$("#p1").mousedown(function(){
alert("Mouse down over p1!");});
jQuery Events
• Attach Multiple Events
– on()
• It attaches more than one event handlers for selected
elements.
• Attach multiple event handlers to a <p> element:

before

when mouse enter

when mouse leave

when clicking
Summary of Today’s Lecture
• jQuery Introduction
– Advantages of using jQuery
– Adding jQuery to Web Pages
• jQuery Syntax
• jQuery Selectors
• jQuery Events
References
• https://jquery.com/
• https://learn.shayhowe.com/advanced-html-css/jquery/
• https://www.w3schools.com/jquery/default.asp
• https://www.tutorialrepublic.com/jquery-tutorial/

You might also like