This document provides an introduction to using jQuery. It discusses downloading and including jQuery in a project, selecting elements using CSS selectors and the DOM tree, changing element content and attributes, adding new elements, handling events, and animations. Key points covered include using $ to select elements, common selection methods like id and class, changing text and HTML, and animating properties over time.

1. Practice jQuery
Inbal Geffen

2. Add jQuery to your project
● Download JQuery from the jQuery website
and use this code : <script src=‘jquery.js’></script>
OR
● Link to a CDN hosted jQuery
and use a code like this :
<script src=‘http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js’>
</script>
Inbal Geffen

3. $("#div1") == jQuery("#div1")
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function hellojQuery() {
$("#div1").html("Hello jQuery");
}
</script>
● The $ sign tells us to choose an element from our code
● We can choose elements using all the known css selectors
● $("#div1") - will choose all the elements in the page with the id div1
● .html - is like using innerHTML on all the selected elements
Example
Inbal Geffen

4. Select Elements - CSS selectors
● $(“#div1”) - select all elements with "div1" id
● $(“div”) - select all div elements
● $(“.classic”) - select all elements with classic class
● $(“div.classic”) - select all div elements with classic class
● $(“div:last”) - select the last div
● $(“div:even”) - select all divs in even places
and all the rest..
Inbal Geffen

5. Select Elements - more selectors
● $(“:button”) - select all buttons
● $(“:contains(hello)”) - select all elements that contain the text "hello"
● $(“:hidden”) - select all hidden elements
● $(“:visible”) - select all visible elements
● $(“div:not(.classic)”) - select all elements that are not from classic class
Inbal Geffen

6. Select Elements - DOM tree
<p id="p1">
This is a first link: <a href="page1.html">Page1</a><br />
This is a second link: <a href="page2.html">Page2</a><br />
This is a third link: <a href="page3.html">Page3</a><br />
</p>
● $(“p”).parent() - select the parent p
● $(“p”).children("a") - select all the a elements in the p
● $(“div”).siblings() - select the parent div
● $(“div”).next('div') - select the next div in the DOM
● $(“div”).prev('p') - select the previous p in the DOM
Inbal Geffen

7. What can we do with it?
We used the $ to select elements from our page -
what can we do with these elements?
● $(“div”)[0] - will return the first div element in the page
● $(“div”).size() - will return how many divs are in the page
What else?
● Change the element attributes
● Change the element content
● Dynamically add elements to the page
Inbal Geffen

8. Change element content
● $(“div”).text("I am a div") - will change only the text in the div
● $(“div”).html(“I am a div”) - change the innerHTML of all the divs
//This is instead of going in a loop over all the divs
//We can iterate over each div using the each method
function showDivNumber()
{
$("div").each(function (index) {
this.innerHTML = "I am div number " + index;});
}
Inbal Geffen

9. Change element content(2)
callback functions
● each() gets a function that will work on any element in the array of divs
● The function gets the index of the element and it can use it
function showDivNumber()
{
$("div").each(function (index) {
this.innerHTML = "I am div number " + index;});
}
Inbal Geffen

10. Change element attribute
● $("div").addClass("specialDiv");
//add the class "specialDiv" to all the divs
● $("div").removeClass("specialDiv");
//remove the class "specialDiv" from all the divs that has this class
● $("#div1").attr("id", "hello");
//change the id of div with id="div1" to id="hello"
Inbal Geffen

11. Add elements
<div id="div1">
<p>I'm a paragraph</p>
</div>
● $("<p style='color:red'>I am dynamic text</p>").appendTo("#div1");
<div id="div1">
<p>I'm a paragraph</p>
<p style='color:red'>I am dynamic text</p>
</div>
● $("<p style='color:red'>I am dynamic text</p>").prependTo("#div1");
<div id="div1">
<p style='color:red'>I am dynamic text</p>
<p>I'm a paragraph</p>
</div>
Inbal Geffen

12. Add elements(2)
<div id="div1">
<p>I'm a paragraph</p>
</div>
● $("<p style='color:red'>I am dynamic text</p>").insertAfter("#div1");
<div id="div1">
<p>I'm a paragraph</p>
</div>
<p style='color:red'>I am dynamic text</p>
Inbal Geffen

13. Run the script
We want to wait until all the page loads... and only then start our function
<script type="text/javascript">
$(document).ready(function () {
$("<p style='color:red'>I am dynamic text</p>").appendTo("#div1");
});
</script>
It also works using this shortcut:
<script type="text/javascript">
$(function () {
$("<p style='color:red'>I am dynamic text</p>").appendTo("#div1");
});
</script>
Inbal Geffen

14. Events
<input type="button" value="Test" />
Bind(eventname, function to perform) can be removed from the element using unbind()
$("#btnTest").bind('click', function () {
alert('btnTest was clicked');
});
Many events have shortcuts:
$("#btnTest").click(function () {
alert('btnTest was clicked');
});
Get info from the event
$("#div1").mousemove(function(event) {
var str = "(X = " + event.pageX + ", Y=" + event.pageY + ")";
$("#div1").text(str);
});
Inbal Geffen

15. Animations
function divAnimate() {
$("#div1").fadeOut();
}
<input type="button" value="Click Me" onclick="divAnimate();" />
More animations
● $(“div1”).hide()
● $(“div1”).show()
● $(“div1”).toggle()
● $(“div1”).fadeOut()
● $(“div1”).fadeIn()
● $(“div1”).slideDown()
● $(“div1”).slideUp()
Inbal Geffen

16. Animations(2)
Any css changes we want using the animate() method:
$("#div1").animate({
width: "100%",
fontSize: "50px",
}, 1500);
Stop the animation:
$("#div1").stop();
jQuery supports multiple calls in a row
$("#div1").fadeOut().slideDown().fadeOut().slideUp();
Inbal Geffen