A jQuery Cross-Browser   JavaScript Library  write less, do more... new kind of JavaScript Library
? jQuery                                        JavaScript             - jQuery         AJAX                              ...
?jQuery                                                                                 http://jquery.com-http://code.msdn...
JavaScript Library Speed Comparison                                         Framework Speed Comparison60005000400030002000...
$ == jQuery is simply an “alias”                                             DOM    window.onload = function() {    …    }...
$(document).ready(function() {                                                     :each(callback)    $("div").each(functi...
-                                                         JavaScript                     jQueryjQuery.noConflict();       ...
jQuerySelectors
JavaScript Library Speed Comparison
<script type="text/javascript">$(document).ready(function() {    $("#example").click(function (){         alert(“element s...
-<script type="text/javascript">$(document).ready(function() {    $(“.examClass.myClass").click(function (){         alert...
$(document).ready(function() {    $(“ #main p ”).click(function (){         alert(“all elements been selected ”);    });)}...
-$(document).ready(function() {    $(“label + input”).click(function (){    });         alert(“First input selected”);    ...
$(document).ready(function() {    $(“ tr :first ”).click(function (){         alert(“First row selected”);    });         ...
$(document).ready(function() {    $(“ tr :not(.red) ”).click(function (){    });         alert(“First row selected”);     ...
:even$(document).ready(function() {    $("tr:even").css("background-color", "#bbbbff");)};<table>     <tr><td>Row 1</td></...
$(document).ready(function() {    $(“ td:gt(3)”).click(function (){         alert(“Cell && Cell 5”);    });)};            ...
$(document).ready(function() {    $(":header").css({background:#CCC, color:blue });)};<body>                              ...
$(document).ready(function() { $("div:contains(John)").css("text-decoration", "underline");)};<body>                      ...
$(document).ready(function() {    $("div:contains(John)").css("text-                                                      ...
$(document).ready(function() {    $("input: hidden").val(“Store hidden value”);     $(“div: hidden").text(“text In div”);)...
$(document).ready(function() {    $("div[id]").click(function(){        alert(“You Selected first div”);    });    $("div:...
$(document).ready(function() {    $("div[id]").click(function(){        alert(“You Selected first div”);    });    $("div:...
$(document).ready(function() {     $("input[name^=news]").val("news here!");)};                                           ...
<script type=“text/javascript”>   $(document).ready(function() {       $("input[id][name$=man]").val("only this one");   )...
<script type=“text/javascript”>   $(document).ready(function() {      $("ul li:nth-child(2)"). css("text-decoration", "und...
$(document).ready(function() {    $("div span:first-child") .css("text-decoration", "underline"))};<div>                  ...
$(document).ready(function() {    $("div :only-child") .css("text-decoration", "underline"))};<div>       <span> John </sp...
$(document).ready(function() {      alert($(" input).length); )};                                             input, texta...
-$(document).ready(function() {    $("input: password").css(„border‟,‟3px red solid‟);)};                                 ...
-$(document).ready(function() {    $("input: submit ").css(„border‟,‟3px red solid‟);)};                                  ...
-$(document).ready(function() {    $(“: button ").css(„border‟,‟3px red solid‟);)};                                       ...
$(document).ready(function() {     $(“input:enabled ").css(„border‟,‟3px red solid‟);)};                                  ...
jQueryAttributes
$(document).ready(function() {    alert($(#example1).attr("rel")); Simple Button    alert($(#example1).attr(“id"));     un...
$(document).ready(function() {    $(#example).addClass("example_class");)};                                               ...
HTML$(document).ready(function() {    alert($("p").html());              hello<input type="text"/>                        ...
jQueryTraversing
-$(document).ready(function() {    $("div") .filter(".middle") .css("border-color", "red");                               ...
-$(document).ready(function() {    $("div").find("span").text(div value changed);                                         ...
-                                 -$(document).ready(function() {)};    alert($("p").add("span").length);                 ...
-$(document).ready(function() {    $("#main").find("#childDivTwo")             //now childDivTwo is selected element      ...
jQueryManipulation
-$(document).ready(function() {    $("#main").append("<span>FirstChild</span>");                                          ...
-$(document).ready(function() { $("<div>insert after sibling</div>").insertAfter("#foo,#main");                           ...
-HTML-$(document).ready(function() {                                                :wrap(html/elem)    $("p").wrap($("#wr...
$(document).ready(function() {    $(„button). ).replaceWith("<div>" + $(this).text()             :ReplaceWith(content)    ...
jQuery  CSS
…CSS-$(document).ready(function() {    alert($(“div”).css(„backgroundColor‟));    .css                                    ...
$(document).ready(function() {      alert(“My Window Width is: ”+$(window).width());      $(“div”).width(200);)};         ...
$(document).ready(function() {    alert("left: " + $(“div”).offset().left + ", top: " + $(“div”).offset().top );)};       ...
jQueryEffects
$(document).ready(function() {    $("#showr").click(function () {                              :show( speed,[callback])   ...
$(“div”).slideUp();$(“div”).slideDown(“fast”);$(“div”).slideToggle(1000);
$(“div”).fadeIn(“fast”);$(“div”).fadeOut(“normal”);// fade to a custom opacity $(“div”).fadeTo (“fast”, 0.5);
$(“div”).hide(“slow”, function() {               alert(“The DIV is hidden”); });$(“div”).show(“fast”, function() {        ...
:animate(properties,[duration],[easing],[callba// .animate(options, duration)$(“div”).animate({ width: “90%”,             ...
jQueryEvents
?   jQuery                                      jQuery-                           Dom Level 0 Model*                      ...
jQuery 1.4-$(document).ready(function() {    $("div.test").bind({              mouseenter: function(){                    ...
-                                                                        :jQuery.proxyvar obj = {  name: "John",  test: fu...
$(document).ready(function() {    function aClick() { alert($("div").text()); }    $(“div").bind("click", aClick);        ...
$(document).ready(function() {                                                                  :live(type,fn)    $("p").l...
$(document).ready(function() {                                                                        jQuery.event.special...
jQuery Ajax
$(“div”).load(“content.htm”);// passing parameters $(“#content”).load(“getcontent.aspx”,                {“id”:”33”, “type”...
GET POST$.get(“test.aspx”, {id:1},         function(data){alert(data);});$.post(“test.aspx”, {id:1},         function(data...
JSON$.getJSON(“users.aspx”, {id:1},        function(users)        {              alert(users[0].name);        });
$.getScript(“script.js”,         function()         {               doSomeFunction();         });
jQueryUtilities
$.trim()                  Trims strings$.each()         Iterates through properties and                 collections$.grep(...
jQueryPlugins
(function ($) {                   jQuery.fn.bolder = function() {                        return $(this).each(function() { ...
jQuery UI     Moved many user interface plug-ins into one      core     Supported by core contributors    Includes (cur...
Microsoft AJAX FrameworkASP.NET AJAX + jQuery = Microsoft AJAX              Framework ASP.NET AJAX                jQuery  ...
   Use MS Library for:       AJAX / UpdatePanels       Creating custom classes and controls   Use jQuery for:       D...
Documentation / Tutorials    http://docs.jquery.
Jquery Introduction Hebrew
Upcoming SlideShare
Loading in …5
×

Jquery Introduction Hebrew

615 views

Published on

My jQuery Presentation

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

  • Be the first to like this

No Downloads
Views
Total views
615
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jquery Introduction Hebrew

  1. 1. A jQuery Cross-Browser JavaScript Library write less, do more... new kind of JavaScript Library
  2. 2. ? jQuery JavaScript - jQuery AJAX HTML WEB jQuery . 55.9kb -. (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) Cross-browser - - CSS - - . - . - - . - .Intellisense -
  3. 3. ?jQuery http://jquery.com-http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?Rel easeId=1736 To enable Intellisense support, add this to the top of your .js file: /// <reference path="~/shared/js/jquery-vsdoc.js"/>
  4. 4. JavaScript Library Speed Comparison Framework Speed Comparison600050004000300020001000 0 Firefox 3.0.4 Opera 9.62 Google Chrome Safari 3.1.2 Internet Explorer Internet Explorer Internet Explorer Internet Explorer Avg 5.5 6.0 7.0 8.0 MooTools jQuery Prototype YUI Dojo
  5. 5. $ == jQuery is simply an “alias” DOM window.onload = function() { … }; -X $(document).ready(function( ){ ... HTML- DOM }); $ (function( ) { //when the DOM is ready to be used });
  6. 6. $(document).ready(function() { :each(callback) $("div").each(function (i) { alert(„DivNumber:‟+i+$(this).text()); callback });)};<div>First Div</div><div>Second div</ div > continue(); break();$(document).ready(function() { alert(„Number of divs on Page:‟+$("div").length);)};<div>First Div</div> jQuery :length<div>Second div</ div >
  7. 7. - JavaScript jQueryjQuery.noConflict(); -jQuery.noConflict( )jQuery(document).ready(function(){ jQuery jQuery("div").hide(); jQuery});$(someid).hide();<script src="prototype.js"></script><script src="jquery.js"></script>var $jq = jQuery.noConflict();$jq(document).ready(function(){ jq - $jq("div").hide();});$(someid).hide();<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.6.js"></script><script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script><script type="text/javascript"> var jQuery_1_3_2 = $.noConflict(true); -jQuery.noConflict( extreme) var jQuery_1_2_6 = $.noConflict(true); jQuery (function($) { alert(jQuery: + $.fn.jquery); jQuery })(jQuery_1_2_6); (function($) { alert(jQuery: + $.fn.jquery); })(jQuery_1_3_2);</script>
  8. 8. jQuerySelectors
  9. 9. JavaScript Library Speed Comparison
  10. 10. <script type="text/javascript">$(document).ready(function() { $("#example").click(function (){ alert(“element selected by id”); ID -ID });)};<p id="example">Example paragraph</p><script type="text/javascript">$(document).ready(function() { $(“p").click(function (){ alert(“element selected by tagName”); - });)};<p id="example">Example paragraph</p><script type="text/javascript">$(document).ready(function() { $(“.example_class").click(function (){ alert(“element selected by class”); class -class });)};<p class=“example_class">Example paragraph</p>
  11. 11. -<script type="text/javascript">$(document).ready(function() { $(“.examClass.myClass").click(function (){ alert(“element selected by a couple classes”); -class - .class.class });)};<p class=“examClass myClass">Exampleparagraph</p>$(document).ready(function() { $(“*").click(function (){ alert(“all elements been selected ”); }); -*)};<span id="example">example</span><div>just sample</div>$(document).ready(function() { $(“div,span").click(function (){ alert(“elements selected by different selectors - -”); });)};<span class="example">example</span><div>just sample</div>
  12. 12. $(document).ready(function() { $(“ #main p ”).click(function (){ alert(“all elements been selected ”); });)}; -<div id="main"> <p>paragraph inside</p> <span> <p>paragraph inside inside</p> </span></div>$(document).ready(function() { $(“ #main > p ”).click(function (){ alert(“all elements been selected ”); });)}; . -<div id="main"> <p>paragraph inside</p> <span> <p>paragraph inside inside</p> </span></div>
  13. 13. -$(document).ready(function() { $(“label + input”).click(function (){ }); alert(“First input selected”); -prev + next)};<label>Name:</label> <input type="text"></input><label>Family:</label> <div>text</div>$(document).ready(function() { $(“#example~li”).click(function (){ alert(“Third & four li selected”); });)};<ul> -prev ~ siblings <li>first</li> DOM <li id="example">second</li> <li>third</li> <li>four</li> <ul><li>six</li></ul></ul>
  14. 14. $(document).ready(function() { $(“ tr :first ”).click(function (){ alert(“First row selected”); }); :first)};<table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr></table>$(document).ready(function() { $(“ tr :last”).click(function (){ alert(“Last row selected”); }); :last)};<table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr></table>
  15. 15. $(document).ready(function() { $(“ tr :not(.red) ”).click(function (){ }); alert(“First row selected”); :not(selector))};<table> <tr><td>Row 1</td></tr> <tr class=“red”><td>Row 2</td></tr></table>$(document).ready(function() { $(“ td:eq(1)”).click(function (){ }); alert(“Cell1 selected”); :eq(index))};<table> <tr><td>cell0</td><td>cell1</td></tr> <tr><td>cell2</td><td>cell3</td></tr></table>
  16. 16. :even$(document).ready(function() { $("tr:even").css("background-color", "#bbbbff");)};<table> <tr><td>Row 1</td></tr> - :odd <tr><td>Row 2</td></tr></table> One Two Thre Four One Two Thre Four$(document).ready(function() { e e $("tr:odd").css("background-color", "#bbbbff");)}; One Two Thre Four One Two Thre Four<table> <tr><td>Row 1</td></tr> e e <tr><td>Row 2</td></tr> One Two Thre Four One Two Thre Four</table> e e One Two Thre Four One Two Thre Four e e
  17. 17. $(document).ready(function() { $(“ td:gt(3)”).click(function (){ alert(“Cell && Cell 5”); });)}; :gt(index)<table> <tr><td>cell0</td><td>cell1</td></tr> <tr><td>cell2</td><td>cell3</td></tr> <tr><td>cell4</td><td>cell5</td></tr></table>$(document).ready(function() { $(“ td:lt(3)”).click(function (){ alert(“Cell 0 && Cell 1 && Cell 2”);)}; }); :lt(index)<table> <tr><td>cell0</td><td>cell1</td></tr> <tr><td>cell2</td><td>cell3</td></tr> <tr><td>cell4</td><td>cell5</td></tr></table>
  18. 18. $(document).ready(function() { $(":header").css({background:#CCC, color:blue });)};<body> h1,h2,h3 :header <h1>Header 1</h1> <p>Contents 1</p> <h1>Header 2</h1> <p>Contents 2</p></body>$(document).ready(function() { $(“ div:animated ”).click(function (){ alert(“You clicked div that currently underanimation”); }); :animated)};function animateIt() { $("#mover").slideToggle("slow", animateIt); }animateIt(); //run infinity loop<div id=“mover”>Just Animated Div</div>
  19. 19. $(document).ready(function() { $("div:contains(John)").css("text-decoration", "underline");)};<body> :contains(text) <p> John Resig </p> <p> George Martin </p> <p> Malcom John Sinclair </p> <p> J. Ohn </p></body>$(document).ready(function() { $(“ div: empty”).click(function (){ alert(“Last div was selected”); });)}; :empty<div> <p>Div with child</p></div><div>Div with text</div><div></div>
  20. 20. $(document).ready(function() { $("div:contains(John)").css("text- :has(selector)decoration", "underline");)};<body> <div><p>Hello in a paragraph</p></div> <div>Hello again! (with no paragraph)</div></body>$(document).ready(function() { $("td:parent").css(backgroundColor,#fff00f);)};<table border="1"> <tr> <td>Value 1</td> :parent <td><p><p></td> </tr> <tr> <td>Value 2</td> <td></td> </tr> </table>
  21. 21. $(document).ready(function() { $("input: hidden").val(“Store hidden value”); $(“div: hidden").text(“text In div”);)};<body> :hidden <div style="display: none;">Hider</div> <input type="hidden" /> <div>LOL</div></body>$(document).ready(function() { $(“div: visible").text(“text In div”);)};<body> <div style="display: none;">Hider</div> :visible <div>LOL</div></body>
  22. 22. $(document).ready(function() { $("div[id]").click(function(){ alert(“You Selected first div”); }); $("div:attr(rel)").text(“divik”); : [attribute])};<body> <div id="hey">first div</div> <div rel="there">second div</div></body>$(document).ready(function() { $("input[name=news]").val(“Hello”);)};<body> <input type="radio" name="news" value="Hot Fuzz" [attribute=value]/> <input type="radio" name=“accep" value="Hot Fuzz"/></body>
  23. 23. $(document).ready(function() { $("div[id]").click(function(){ alert(“You Selected first div”); }); $("div:attr(rel)").text(“divik”); : [attribute])}; <div id="hey">first div</div> <div rel="there">second div</div>$(document).ready(function() { $("input[name=news]").val(“Hello”);)}; [attribute=value]<input type="radio" name="news" value="Hot Fuzz" /><input type="radio" name=“accep" value="Hot Fuzz" />$(document).ready(function() { $("input[name!=news]").val(“Hello”);)}; [attribute!=value]<body> <input type="radio" name="news" value="Hot Fuzz"/> <input type=“text" value="Hot Fuzz" /> <input type="radio" name=“apolo" value="Hot Fuzz"
  24. 24. $(document).ready(function() { $("input[name^=news]").val("news here!");)}; [attribute^=value]<input name="newsletter" /> <input name="milkman" /><input name="newsboy" />$(document).ready(function() { $("input[name$=letter]").val("news here!");)};<input name="newsletter" /> [attribute$=value <input name="milkman" /><input name="jobletter" />$(document).ready(function() { $("input[name*=„man]").val("news here!");)}; [attribute*=value]<input name="newsmantter" /> <input name="milkman" /><input name="letterman" /><input name="newmilk" />
  25. 25. <script type=“text/javascript”> $(document).ready(function() { $("input[id][name$=man]").val("only this one"); )};</script><body> [attributeFilter1] [attributeFilterN] <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /></body>
  26. 26. <script type=“text/javascript”> $(document).ready(function() { $("ul li:nth-child(2)"). css("text-decoration", "underline"); )};</script> :nth-child(index/even/odd/equation)<body> <ul> - <li>John</li> :nth-child(3n) <li>Karl</li> <li>Brandon</li> - - </ul> <ul> CSS </ul> <li>Sam</li> - eq <ul> <li>Glen</li> nth-child <li>Tane</li> <li>Ralph</li> <li>David</li> </ul></body>
  27. 27. $(document).ready(function() { $("div span:first-child") .css("text-decoration", "underline"))};<div> :first-child <span> John </span> <span> John </span></div><div> <span> Glen </span> <span> Tane </span></div>$(document).ready(function() { $("div span:first-child") .css("text-decoration", "underline"))};<div> :last-child <span> John </span> <span> John </span></div><div> <span> Glen </span> <span> Tane </span>
  28. 28. $(document).ready(function() { $("div :only-child") .css("text-decoration", "underline"))};<div> <span> John </span> <span> John </span> :only-child</div><div> <span> Glen </span> <span> Tane </span></div><div> <div></div></div>
  29. 29. $(document).ready(function() { alert($(" input).length); )}; input, textarea, select :input <input type="button" value="Input Button"/> <input type="checkbox" /> button <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea>$(document).ready(function() {$("input:text").css(„border‟,‟3px red solid‟);)}; :text<input type="hidden" /><input type="password" /> $(“*:text”)<input type="submit" /><input type="text" /><textarea></textarea>
  30. 30. -$(document).ready(function() { $("input: password").css(„border‟,‟3px red solid‟);)}; :password<input type="password" /><input type="radio" />$(document).ready(function() { $("input: radio").css(„border‟,‟3px red solid‟);)}; :radio<input type="password" /><input type="radio" />$(document).ready(function() { $("input: checkbox").css(„border‟,‟3px red solid‟);)}; checkbox :checkbox<input type="password" /><input type="radio" /><input type="checkbox" />
  31. 31. -$(document).ready(function() { $("input: submit ").css(„border‟,‟3px red solid‟);)}; submit input :submit<input type="password" /><input type="radio" /><input type="submit" />$(document).ready(function() { $(“: image").css(„border‟,‟3px red solid‟);)}; : image<input type="password" /><input type="radio" /><input type="image" />$(document).ready(function() { $(" reset ").css(„border‟,‟3px red solid‟);)}; reset :reset<input type="password" /><input type="radio" /><input type="reset" />
  32. 32. -$(document).ready(function() { $(“: button ").css(„border‟,‟3px red solid‟);)}; : button<input type="button" value="Input Button"/><button>Button</button><input type="submit" />$(document).ready(function() { $(“: file ").css(„border‟,‟3px red solid‟);)}; : file<input type="password" /><input type="radio" /><input type="file" />
  33. 33. $(document).ready(function() { $(“input:enabled ").css(„border‟,‟3px red solid‟);)}; : enabled<input name="email" disabled="disabled" /> <input name="id" />$(document).ready(function() { $(“input:disabled ").css(„border‟,‟3px red solid‟);)}; :disabled<input name="email" disabled="disabled" /> <input name="id" />$(document).ready(function() { $(“input:checked").css(„border‟,‟3px red solid‟);)};<input type="checkbox" name="news" checked="checked" : checkedvalue="Hourly" /> <input type="checkbox" name="newsletter"value="Daily" />$(document).ready(function() { $(“: selected ").css(„border‟,‟3px red solid‟);)}; : selected<select name="garden" multiple="multiple"> <option>Flowers</option> checkboxes or radio<option selected="selected">Shrubs</option></select>
  34. 34. jQueryAttributes
  35. 35. $(document).ready(function() { alert($(#example1).attr("rel")); Simple Button alert($(#example1).attr(“id")); undefined :attr(name))}; undefined<input type=“button“ rel=„Simple Button‟ />$(document).ready(function() { $(“# btnFirst").attr("disabled", "disabled"); $(" btnZero").attr({title: "jQuery", alt: "jQuery Logo"}); :attr(key, value))};<img id=“imgZero” src="/images/hat.gif“ /><button id=“btnFirst”>1st Button</button><button id=“btnSecond”>2nd Button</button>$(document).ready(function() { $("div").attr("id", function (index) { divID0 return “divID" + index; divID1 }) divID2 :attr(key, fn))};<div>Zero-<div> <div>First </div> <div>Second </div>$(document).ready(function() { $(“input”).removeAttr(“rel");)}; :removeAttr(name)<input type="password" rel=“lol”/><input type="radio" rel=“lol”/><input type="reset" rel=“lol”/>
  36. 36. $(document).ready(function() { $(#example).addClass("example_class");)}; :addClass(class)<div id=“example”>This is sample div<div/>$(document).ready(function() {)}; $("p:even").removeClass("blue"); :removeClass(class)<p class="blue under">Hello</p><p class="blue under highlight">Hello</p>$(document).ready(function() { alert($(“#example").hasClass("selected")); false alert($(“p").hasClass("selected")); true :hasClass(class))};<p id=“example”>Hello</p><p class="selected">Goodbye</p>$(document).ready(function() { $(“p”).toggleClass("highlight");)}; :toggleClass(class) <p class="blue highlight">highlight</p> blue
  37. 37. HTML$(document).ready(function() { alert($("p").html()); hello<input type="text"/> innerHTML html :html( ) $(“p").html(hello song changed);)};<p>hello<input type="text"/></p> hello song changed HTML<p>wellcome</p> hello song changed$(document).ready(function() { alert($("p").text()); Test paragraphNew innerText :text( ) $("p").text(“sample template”); paragraph)}; sample<p>Test paragraph</p><p>New paragraph</p> template Text<p><input type="text" value="myvalue"/></p> sample template . - input- sample $(document).ready(function() { template alert($("option: selected , input, textarea").val()); $("*").val(["Single2"]); Single value :val( ) )}; <select id="single"> <option>Single</option> <option>Single2</option> </select> : <input type="text" value="Just Text"/> <textarea>Free text</textarea> inputs, selects ,textareas , checkboxes, radio <input type="radio" value="Single2"/>
  38. 38. jQueryTraversing
  39. 39. -$(document).ready(function() { $("div") .filter(".middle") .css("border-color", "red"); :filter(expr))};<div>just sample div</div><div class="middle">div with some class</div> expr expr$(document).ready(function() { alert($(“#mySpan”).is(":contains(Peter)"))); :is(expr))}; true<span id=“mySpan”>Peter</span> expr$(document).ready(function() { $(“div”). slice(0, 1).text(„selected‟); :slice(start, end) $(“div”). slice(-1).text(„new selected‟);)};<div>Zero div</div><div>Div one</div><div>Div two</div> end
  40. 40. -$(document).ready(function() { $("div").find("span").text(div value changed); :find(expr))}; div value<div id="childDivOne"><span>lol2</span></div> changed expr<div id="childDivTwo"><span>lol</span></div> div value changed .CSS 1-3 expr$(document).ready(function() { alert($("div").children().size()); 2 :children(expr))};<div id="childDivOne"> <span>Primary child1<span>SecondaryChild</span></span> </div> expr<div id="childDivTwo"><span>Primary child2</span></div>$(document).ready(function() { $("p").parent(".selected").css("background", "yellow"); :parent(expr))};<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>$(document).ready(function() { expr alert( $(".hit").siblings().size() ); 4 :siblings(expr))}; <ul> <li>Ei</li> <li class="hit">Nin</li> <li>Ten</li><li class="hil">Ele</li> </ul>
  41. 41. - -$(document).ready(function() {)}; alert($("p").add("span").length); expr :add(expr)<p>Hello</p><span>Hello Again</span> <span>my span</span>$(document).ready(function() { $("p").closest("span").css(color, „gray); :closest(expr) div span)};<div>div paragraph <span>span<p>paragraph</p><span></div>$(document).ready(function() { $(".selected").nextAll().css("background", "red") .end().next().css("background", "yellow") :prev(expr) .end().prevAll().css("background", "blue") .end().prev().css("background", "green"); Dom-)}; <p>Again</p> <div><span>Hello</span></div> Dom- :next(expr) <p>Hello Again</p> <p class="selected">And Again</p> <p>Again Again Again</p> <p>Again Again Again Again</p>
  42. 42. -$(document).ready(function() { $("#main").find("#childDivTwo") //now childDivTwo is selected element now selected elements childDivTwo and .andSelf() .css("border","5px solid red") main :andSelf( ) .end() //add red border to childDivTwo and main .find("span") div .css("border","5px solid green") //now childDivTwo is again selected .end() //now span with content lol is selected :end( ) .end() add green border to span with content lol now childDivTwo is selected .css("border-top","5px solid black");)}; //now main div is selected<div id="main"> //change top border color of div main to Main Div black <div id="childDivOne">Child one</div> <div id="childDivTwo">Child Two <span>lol</span> </div></div>
  43. 43. jQueryManipulation
  44. 44. -$(document).ready(function() { $("#main").append("<span>FirstChild</span>"); :append(content) $("<em>First Childs child</em>").appendTo("span"); $("#main").prepend("<span>Zero Child</span>"); $("<em>ZeroChild child</em>").prependTo("#main appendTo(selector)span:first");)}; <div id="main">Container</div> <DIV id="main“> <SPAN> <EM>Zero Child child</EM> :prepend(content) Zero Child </SPAN> Container <SPAN>FirstChild prependTo(selector) <EM>First Childs child</EM> </SPAN> </DIV>
  45. 45. -$(document).ready(function() { $("<div>insert after sibling</div>").insertAfter("#foo,#main"); :after(content) $("<div>after sibling</div>").after("#foo"); $("<div>insert before sibling</div>").insertBefore("#foo,#main"); $("<div>before sibling</div>").before("#foo"); insertAfter(selector))}; <div id="main">Container</div> <div id="foo">FOO!</div> <DIV insert before sibling </DIV> <DIV id="main"> Container </DIV> :before(content) <DIV insert after sibling </DIV> <DIV>insert before sibling </DIV> <DIV id="foo"> FOO! </DIV> <DIV > insert after sibling </DIV> insertBefore(selector)
  46. 46. -HTML-$(document).ready(function() { :wrap(html/elem) $("p").wrap($("#wrapDiv")); $("p").wrap("<span></span>"); $("div").wrapAll($("#wrapAllDiv")); $("p").wrapInner("<b></b>"); HTML)}; :wrapAll(html/elem)<p>First Paragraph</p><p>Second Paragraph</p><p>Third Paragraph</p> HTML<div id="wrapDiv" style="border:1px solid black;"></div><div id="wrapAllDiv" style="border:1px solid green;"></div> wrapInner(html/elem) HTML
  47. 47. $(document).ready(function() { $(„button). ).replaceWith("<div>" + $(this).text() :ReplaceWith(content) +"</div>");)}; <div>First</div> HTML<button>First</button>$(document).ready(function() { $("p").empty().text(lol);)}; <p>lol</p><p> :empty( ) Hello <span>Person</span><a href="#">person</a> </p>$(document).ready(function() { $("p").remove(":contains(Hello)"); DOM :remove(expr))}; : <p class="hello">Hello</p> how are how are you? expr <p>you?</p>$(document).ready(function() { $(“button”).clone(true).insertAfter(this); :clone(bool))};<button>Clone Me!</button> : <button>Clone Me!</button>
  48. 48. jQuery CSS
  49. 49. …CSS-$(document).ready(function() { alert($(“div”).css(„backgroundColor‟)); .css :css(name) alert($(“div”).css(„background-color‟));)};<div style="background-color:blue;"></div> margin, background, border .css :css(name)$(document).ready(function() { $(“div”).css(border,1px solid red); $(“div”).css(backgroundColor,blue); margin, background, border $(“div”).css(height,50);)}; Sample Text<div>Simple Text</div> z-index, font-weight, opacity, zoom and line- height :css(name)$(document).ready(function() { - css $(this).css({backgroundColor : red, font-weight : bolder });)}; Sample Text margin, background, border<div>Simple Text</div> z-index, font-weight, opacity, zoom and line-
  50. 50. $(document).ready(function() { alert(“My Window Width is: ”+$(window).width()); $(“div”).width(200);)}; width(val)<div id=“sample”>Sample Text</div><div>Another Sample Text</div>$(document).ready(function() { alert(“My Window Height is: ”+$(window).height()); $(“div”).height(200);)}; height(val)<div id=“sample”>Sample Text</div><div>Another Sample Text</div>$(document).ready(function() { alert("width+padding is: "+$("p").innerWidth()); 130 :)}; <p style="margin:10px;padding:5px;border:10px solid #666; innerWidth( )width:120px;"></p> <p>Another paragraph</p>$(document).ready(function() { : alert("height+border+padding is: "+$("p").outerHeight()); 50)}; alert("height+border+padding+marigin is: "+$("p").outerHeight(true)); 70 outerHeight(margin <p style="margin:10px;padding:5px;border:10px solid #666; )height:20px;"></p> <p>Another paragraph</p>
  51. 51. $(document).ready(function() { alert("left: " + $(“div”).offset().left + ", top: " + $(“div”).offset().top );)}; offset( )<div>Where is my div?</div>$(document).ready(function() { alert("left: " + $(“p”).position().left + ", top: " + $(“p”).position().top );)}; position( )<div><p>Where is my Paragraph</p></div>$(document).ready(function() { alert(“current scroll: " + $(“div”).scrollTop() ); $(“div”).scrollTop(20); scrollTop(va alert(“new scroll: " + $(“div”).scrollTop() );)}; l)<div style=“height:100px;”>Where is my div?</div>$(document).ready(function() { alert(“current scroll: " + $(“div”).scrollLeft() ); $(“div”).scrollLeft(100); scrollLeft(va alert(“new scroll: " + $(“div”).scrollLeft() );)}; l)<div style=“width:200px;”>Where is my div?</div>
  52. 52. jQueryEffects
  53. 53. $(document).ready(function() { $("#showr").click(function () { :show( speed,[callback]) $("div:eq(0)").show("fast", function () { // use callee so dont have to name the function $(this).next().show("fast", arguments.callee); }); slow,normal,fast }); callback $("#hidr").click(function () { $("div").hide(2000); });)};<style> div { background:#def3ca; margin:3px; width:80px; :hide( speed,[callback]) display:none; float:left; text-align:center; }</style><button id="showr">Show</button><button id="hidr">Hide</button><div>Hello 3,</div> slow,normal,fast<div>how</div><div>are</div> callback<div>you?</div>
  54. 54. $(“div”).slideUp();$(“div”).slideDown(“fast”);$(“div”).slideToggle(1000);
  55. 55. $(“div”).fadeIn(“fast”);$(“div”).fadeOut(“normal”);// fade to a custom opacity $(“div”).fadeTo (“fast”, 0.5);
  56. 56. $(“div”).hide(“slow”, function() { alert(“The DIV is hidden”); });$(“div”).show(“fast”, function() { $(this).html(“Hello jQuery”); }); // this is a current DOM element
  57. 57. :animate(properties,[duration],[easing],[callba// .animate(options, duration)$(“div”).animate({ width: “90%”, ck]) opacity: 0.5, borderWidth: “5px”}, 1000);$(“div”).animate({width: “90%”},100) .animate({opacity: 0.5},200) .animate({borderWidth: “5px”});$(“div”).animate({width: “90%”}, {queue:false, duration:1000}) .animate({opacity : 0.5});
  58. 58. jQueryEvents
  59. 59. ? jQuery jQuery- Dom Level 0 Model* Dom Level 2 Model* Internet Explorer 0-2 mess Model* jQuery- Unobtrusive Javascript - - - jQuery -
  60. 60. jQuery 1.4-$(document).ready(function() { $("div.test").bind({ mouseenter: function(){ :bind(events) $(this).addClass("inside"); }, mouseleave: function(){ $(this).removeClass("inside"); } });});$(document).ready(function() { $("p").focusin(function() { :focusin(handler(eventObject))$(this).find("span").css(display,inline).fadeOut(1000); }); $("p").focusout(function() { $(this).find("span").text(„focus out‟) .css(display,inline).fadeOut(1000); });}); :focusout(handler(eventObject))<p> <input type="text" /> <span>focusin fire</span></p><p> <input type="password" /> <span>focusinfire</span></p>
  61. 61. - :jQuery.proxyvar obj = { name: "John", test: function() { alert( this.name ); :jQuery.proxy(function,scope) } $("#test").unbind("click", obj.test); -}; -$("#test").click( jQuery.proxy( obj.test, obj ) ); :jQuery.proxy(scope,name)// This also works:$("#test").click( jQuery.proxy( obj, "test" ) ); - -
  62. 62. $(document).ready(function() { function aClick() { alert($("div").text()); } $(“div").bind("click", aClick); :bind(type,[data], fn)});<div>Just sample div</div>$(document).ready(function() { function aClick() { alert($("div").text()); } :unbind(type,fn) $(“div") ").unbind(click, aClick) ;});<div>Just sample div</div>$(document).ready(function() { $(“div").one("click" , function () { :one( type,data,fn) alert(“You see it only once”); } );<div>Just sample div</div>}):$(document).ready(function() {$(“button:first").click(function({alert(“First clicked”) ;}) ); :trigger(event,data)$(“button:last”).click(function({$("button:first").trigger(click); })))}; Dom 0 Model<button>Button #1</button>
  63. 63. $(document).ready(function() { :live(type,fn) $("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); });}):<p>Sample paragraph</p> stopImmediatePropagation stopPropagation$(document).ready(function() {$(“button:first").click(function({alert(“First clicked”) ;}) ); :die(type,fn)$(“button:last”).click(function({$("button:first").trigger(click); })))}; bind<button>Button #1</button><button>Button #2</button>$(document).ready(function() { $(“div").hover( function () { $(this).css(„bacground-color‟,‟red‟); }, function () { :hover(over,out) $(this).css(„bacground-color‟,‟black‟); } );)};<div>Sample div</div>
  64. 64. $(document).ready(function() { jQuery.event.special.tripleclick = { $(“div”).click(function(){ setup: function(data, namespaces) { alert(“Simple Alert”); var elem = this, }); $elem = jQuery(elem); $(“div”).click(function(){ $elem.bind(click, jQuery.event.special.tripleclick.handler); alert(“Another Alert”); }, teardown: function(namespaces) { }); var elem = this,)}; $elem = jQuery(elem);<div>Simple Text</div> $elem.unbind(click, jQuery.event.special.tripleclick.handler); }, handler: function(event) {// use different triggering function var elem = this,$(document).ready(function() { $elem = jQuery(elem), $(“div”).click(function(e){ clicks = $elem.data(clicks) || 0; e.preventDefault(); //stop browser default clicks += 1;action if ( clicks === 3 ) { e.stopPropagation();//stop bubbling clicks = 0; // set event type to "tripleclick" }); event.type = "tripleclick"; // let jQuery handle the triggering of "tripleclick“ $(“div”).triggerHandler(“click”); jQuery.event.handle.apply(this, arguments))}; } $elem.data(clicks, clicks); } };<div>Simple Text</div> blur click dblclick error focus keydown keypress keyup load(fn) blur(fn) click(fn) dblclick(fn) error(fn) focus(fn) keydown(fn) keypress(fn) keyup(fn) unload(fn) mousedown(fn) mouseenter(fn) mousemove(fn) submit mouseover(fn) resize(fn) select mousemove(fn) mouseleave(fn) mouseout(fn) submit(fn) mouseup(fn) scroll(fn) select(fn)
  65. 65. jQuery Ajax
  66. 66. $(“div”).load(“content.htm”);// passing parameters $(“#content”).load(“getcontent.aspx”, {“id”:”33”, “type”:”main”});
  67. 67. GET POST$.get(“test.aspx”, {id:1}, function(data){alert(data);});$.post(“test.aspx”, {id:1}, function(data){alert(data);});
  68. 68. JSON$.getJSON(“users.aspx”, {id:1}, function(users) { alert(users[0].name); });
  69. 69. $.getScript(“script.js”, function() { doSomeFunction(); });
  70. 70. jQueryUtilities
  71. 71. $.trim() Trims strings$.each() Iterates through properties and collections$.grep() Filters arrays$.map() Iterates through array, translating items into new array$.inArray() Returns index position of value in array$.makeArray() Converts array-like object into an array$.unique() Returns array of unique elements in original array$.extend() Extend target object with properties of other objects$.getScript() Dynamically load a script from url
  72. 72. jQueryPlugins
  73. 73. (function ($) { jQuery.fn.bolder = function() { return $(this).each(function() { this wrap(“<b></b>”); }); };Sample div })(jQuery);Another div $(document).ready(function(){ $(“div”).bolder(); }); <div>Sample div</div> <div>Another div</div>
  74. 74. jQuery UI  Moved many user interface plug-ins into one core  Supported by core contributors  Includes (currently in v1.6):• Coming in 1.7: Layout controls, menus, tooltips, more • Drag / Drop • Calendar • Auto Complete • Sortable • Slider • Color Picker • Selectables • Table • Progress Bar • Resizables • Tabs • Spinner • Accordion • Shadow • Magnifier http://ui.jquery.co
  75. 75. Microsoft AJAX FrameworkASP.NET AJAX + jQuery = Microsoft AJAX Framework ASP.NET AJAX jQuery AJAX Requests Selectors Components and Controls Animations Client TemplatesAJAX Control Toolkit Plugins 76
  76. 76.  Use MS Library for:  AJAX / UpdatePanels  Creating custom classes and controls Use jQuery for:  DOM manipulation  CSS manipulation  Event binding/handling UI controls: AJAX Control Toolkit or jQuery UI?  Look to AJAX Control Toolkit first (better integration)  jQuery UI offers better selection (not in code base yet) 77
  77. 77. Documentation / Tutorials http://docs.jquery.

×