J querypractice
Upcoming SlideShare
Loading in...5
×
 

J querypractice

on

  • 169 views

 

Statistics

Views

Total Views
169
Views on SlideShare
169
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

J querypractice J querypractice Presentation Transcript

  • Practice jQuery Inbal Geffen
  • 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
  • $("#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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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