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.
