Practice jQuery   Inbal Geffen
Add jQuery to your project   ● Download JQuery from the jQuery website     and use this code : <script src=‘jquery.js’></s...
$("#div1") == jQuery("#div1")  <script src="jquery.js" type="text/javascript"></script>  <script type="text/javascript">  ...
Select Elements - CSS selectors   ● $(“#div1”) - select all elements with "div1" id   ● $(“div”) - select all div elements...
Select Elements - more selectors   ● $(“:button”) - select all buttons   ● $(“:contains(hello)”) - select all elements tha...
Select Elements - DOM tree  <p id="p1">  This is a first link: <a href="page1.html">Page1</a><br />  This is a second link...
What can we do with it?  We used the $ to select elements from our page -  what can we do with these elements?   ● $(“div”...
Change element content   ● $(“div”).text("I am a div") - will change only the text in the div   ● $(“div”).html(“I am a di...
Change element content(2)  callback functions   ● each() gets a function that will work on any element in the array of div...
Change element attribute   ● $("div").addClass("specialDiv");  //add the class "specialDiv" to all the divs   ● $("div").r...
Add elements  <div id="div1">       <p>Im a paragraph</p>  </div>   ● $("<p style=color:red>I am dynamic text</p>").append...
Add elements(2)  <div id="div1">       <p>Im a paragraph</p>  </div>   ● $("<p style=color:red>I am dynamic text</p>").ins...
Run the script  We want to wait until all the page loads... and only then start our function  <script type="text/javascrip...
Events  <input type="button" value="Test" />  Bind(eventname, function to perform)        can be removed from the element ...
Animations  function divAnimate() {  $("#div1").fadeOut();  }  <input type="button" value="Click Me" onclick="divAnimate()...
Animations(2)  Any css changes we want using the animate() method:  $("#div1").animate({  width: "100%",  fontSize: "50px"...
Upcoming SlideShare
Loading in …5
×

J querypractice

225 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
225
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

J querypractice

  1. 1. Practice jQuery Inbal Geffen
  2. 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. 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 ExampleInbal Geffen
  4. 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. 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 classInbal Geffen
  6. 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 DOMInbal Geffen
  7. 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 pageInbal Geffen
  8. 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. 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. 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. 11. Add elements <div id="div1"> <p>Im a paragraph</p> </div> ● $("<p style=color:red>I am dynamic text</p>").appendTo("#div1"); <div id="div1"> <p>Im 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>Im a paragraph</p> </div>Inbal Geffen
  12. 12. Add elements(2) <div id="div1"> <p>Im a paragraph</p> </div> ● $("<p style=color:red>I am dynamic text</p>").insertAfter("#div1"); <div id="div1"> <p>Im a paragraph</p> </div> <p style=color:red>I am dynamic text</p>Inbal Geffen
  13. 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. 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. 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. 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

×