Scribd
Upload
2 views

4 - Intro to JQuery

Uploaded by

b42a0dc98d
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

4 - Intro to JQuery

Uploaded by

b42a0dc98d
Copyright
© © All Rights Reserved
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