Practice jQuery

Inbal Geffen

Add jQuery to your project

● Download JQuery from the jQuery websiteand use this code : <script src=‘jquery.js’></script>

OR

● Link to a CDN hosted jQueryand use a code like this :

<script src=‘http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js’></script>

Inbal Geffen

<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

$("#div1") == jQuery("#div1")

Inbal Geffen

● $(“#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..

Select Elements - CSS selectors

Inbal Geffen

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

<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

Select Elements - DOM tree

Inbal Geffen

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

● $(“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 methodfunction showDivNumber(){

$("div").each(function (index) {this.innerHTML = "I am div number " + index;});

}

Change element content

Inbal Geffen

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

}

Change element content(2)

Inbal Geffen

● $("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"

Change element attribute

Inbal Geffen

<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>

Add elements

Inbal Geffen

<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>

Add elements(2)

Inbal Geffen

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>

Run the script

Inbal Geffen

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

Events

Inbal Geffen

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()

Animations

Inbal Geffen

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();

Animations(2)

Inbal Geffen