Scribd
Upload
7 views14 pages

4 - Intro To JQuery

Uploaded by

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

4 - Intro To JQuery

Uploaded by

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

Introduction to JEE

jQuery

Sayed Taha

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.


Session Objectives
This part of the session aims to discuss the following
topics:
• Getting familiar with JQuery
• jQuery installation and basic usage.

1-2 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
What is jQuery?
Lightweight JS Library which is:
• Makes JS coding more easier.
• Implicitly handles HTML-DOM.
• Easier handling to events.
• Manipulates CSS.
• Efficiently deal with AJAX.

1-3 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Getting Started with jQuery
Do the flowing to make your page ready for jQuery
• Download it from http://jquery.com/download/
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>

• Or refer to it at any Content Delivery Network (CDN)


– MS:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-
3.2.1.min.js"></script>
– Google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jq
uery.min.js"></script>

1-4 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Getting Started with jQuery
Syntax
• Basic syntax is: $(selector).action()
– Selector: element to search for.
– Action: event to perform

Example
• Selector is current element
– $(this).hide() - hides the current element.
• Selector by tag name
– $("p").hide() - hides all <p> elements.
• Selector by Class name
– $(".test").hide() - hides all elements with class="test".
• Selector for element by id:
– $("#test").hide() - hides the element with id="test"

1-5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Getting Started with jQuery

Document ready event


• In order to execute function after HTML page load.
$(document).ready(function(){

// jQuery methods go here...

});

Looks like
anonymous
inner classes
creation 

1-6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Getting Started with jQuery

Register Event
• In order to register event just get the element and write an
event like below example:
$("button").click(function(){
$("p").hide();
//any business logic code
});

1-7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Getting Started with jQuery

Register Event
• Different way:

$("p").on("click", function(){
$(this).hide();
});

1-8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Getting Started with jQuery

Update Element CSS


• Via css property

$(this).css("background-color", “red");

1-9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.
Getting Started with jQuery

Register multiple events

1 - 10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.


Getting Started with jQuery
Actions (hide/show)
hide(time_in_millis): hide the element with slow animation

toggle()
Hides the element immediately

1 - 11 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.


Getting Started with jQuery

Get
• As a replacement for DOM jQuery provides the following
functionality
– Get Content
— text()
— html()
— val()
– Get element attributes
— attr()

1 - 12 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.


Getting Started with jQuery

Set
• As a replacement for DOM jQuery provides the following
functionality
– set Content
— text()
— html()
— val()
– set element attributes
— attr()

1 - 13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.


References

• https://www.w3schools.com/jquery

1 - 14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved.

You might also like