The document introduces JQuery, a JavaScript library that simplifies HTML document manipulation, event handling, animations, and AJAX interactions. It explains that JQuery downloads as a JavaScript file that can then be referenced in an HTML page, allowing developers to select elements and use JQuery functions rather than traditional JavaScript methods. Basic JQuery syntax, selectors, DOM manipulation, and animation functions are demonstrated.

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.
});
});