Scribd
Upload
7 views

Chapter 7 JQuery (2)

w2py

Uploaded by

228016
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
7 views

Chapter 7 JQuery (2)

w2py

Uploaded by

228016
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/ 24

1

JQUERY
Adapted from w3schools
Prepared by: Mohammed Jabari
2

What it is?
• A JavaScript library
• Greatly simplifies writing JavaScript programs
3

How to use JQuery


here are several ways to start using jQuery on your web
site. You can:
1. Download the jQuery library from jQuery.com
2. Include jQuery from a CDN, like Google

• Which way is better?


• What is a CDN?
4

How to use JQuery

1. The jQuery library is a single JavaScript file, and you


reference it with the HTML <script> tag (notice that the
<script> tag should be inside the <head> section):

<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
5

How to use JQuery


2. If you don't want to download and host jQuery yourself,
you can include it from a CDN (Content Delivery Network).
To use jQuery from Google or Microsoft, use one of the
following:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.
11.3/jquery.min.js"></script>
</head>
6

jQuery Syntax

The jQuery syntax 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)
7

jQuery Syntax

• Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
8

The Document Ready Event


$(document).ready(function(){

// jQuery methods go here...

});

• This is to prevent any jQuery code from running before


the document is finished loading (is ready).
9

jQuery Selectors

• The element Selector:


The jQuery element selector selects elements based on the
element name.
Example:

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
10

jQuery Selectors

• The #id Selector:


The jQuery #id selector uses the id attribute of an HTML
tag to find the specific element.
Example: When a user clicks on a button, the element with
id="test" will be hidden:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
11

jQuery Selectors

• The .class Selector:


The jQuery class selector finds elements with a specific
class.
Example: When a user clicks on a button, the elements
with class="test" will be hidden:

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
12

jQuery Event Methods

• An event represents the precise moment when something


happens.
Examples:
• moving a mouse over an element
• selecting a radio button
• clicking on an element

Mouse Events Keyboard Events Form Events Document/Window Events


click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
13

jQuery Event Methods

• Example: To assign a click event to all paragraphs on a


page, you can do this:

$("p").click(function(){
// action goes here!!
});
14

jQuery Event Methods

• Example: dblclick()

$("p").dblclick(function(){
$(this).hide();
});
15

jQuery Event Methods

• Example: mouseenter()

$("#p1").mouseenter(function(){
alert("You entered p1!");
});
16

jQuery Event Methods

• Example: mouseleave()

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
17

jQuery Event Methods

• Example: mousedown()

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
18

jQuery Event Methods

• Example: hover()
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:

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
19

jQuery Effects
• jQuery hide() and show()

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});
20

jQuery Effects
• Hide and show with parameters

$("button").click(function(){
$("p").hide(1000);
});
21

jQuery Effects
• jQuery toggle()
With jQuery, you can toggle between the hide() and show()
methods with the toggle() method.

$("button").click(function(){
$("p").toggle();
});
22

jQuery and CSS


To change single CSS property value:

css("propertyname","value");

Example:

$(”#button1").click(function(){
$(“h1”).css("background-color", ”#ccc");
});
23

jQuery and CSS


• To change group of CSS values:

css({"propertyname":"value","propertyname":"value",...});

Example:

$("p").css({"background-color": "yellow", "font-size": "200%"});


24

• For more information refer to:


• www.w3schools.com

You might also like