1. Short into to JQuery
Jussi Pohjolainen
Tampere University of Applied Sciences

2. JQuery?
• Motivation
– Simple things may require lot of coding
– Common browsers are different and
implementation varies
• Solution, use a framework
– jQuery is a fast and concise JavaScript Library that
simplifies HTML document traversing, event
handling, animating, and Ajax interactions for
rapid web development.

3. How?
• Download JQuery file (http://jquery.com/)
– http://code.jquery.com/jquery-1.7.1.min.js
• Make your xhtml page and reference to the
file in script block
• Make your code and use JQuery functions!

4. <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
jQuery(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
jQuery("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>

5. Some Basic Syntax
• JQuery can be used in two ways:
– JQuery()
– Or
– $()
• $ is an alias to JQuery()! $ more commonly
used

6. <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
// When document is ready to be manipulated
$(document).ready( pageReadyToBeManipulated );
function pageReadyToBeManipulated() {
// If link is clicked
$("a").click( linkClick );
}
function linkClick(event) {
alert("Thanks for visiting!");
// Prevent the default action
event.preventDefault();
}
//]]>
</script>

7. // USING ANONYMOUS FUNCTIONS
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>

8. // EVEN SHORTER SYNTAX, FORGET THE DOCUMENT
PARAMETER
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$().ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
event.preventDefault();
});
});
//]]>
</script>

9. Getters in the Traditional Way
• getElementsById
• getElementsByTagName
• getAttribute

10. JQuery and Selectors
• Select all h1 elements
– $(“h1”)
• Select the first one
– $(“h1”)*0+
• Add contents
– $(“h1”)*0+.innerHTML = “hello!”;
• Lot of different selectors
– http://api.jquery.com/category/selectors/

11. Creating Elements in Traditional Way
• createElement
• createTextNode
• setAttribute
• appendChild
• removeChild

12. JQuery Insert
$().ready(function(){
$("a").click(function(event){
// Insert the new element after element with id here
$("<p>New Element</p>").insertAfter("#here");
event.preventDefault();
});
});

13. Manipulation Functions
• .addClass()
• .after()
• .append()
• .css()
• …
• See:
http://api.jquery.com/category/manipulation/

14. Some Effects: Lot of Anim Functions
$('#clickme').click(function() {
$('#book').slideUp('slow', function() {
// Animation complete.
});
});