Embed Size (px)
DESCRIPTION
My jQuery Presentation
Citation preview
write less, do more... new kind of JavaScript Library
A jQuery Cross-Browser JavaScript Library
? jQuery זה מהעל , מעבר מפשטת אשר ותמציתית - JavaScriptמהירה ספריית jQuery היא
, , ,AJAX ומסעיית אינטראקציות אנימציות אירועים אם מסמךHTML התעסקות.WEB אפליקציות של מהיר לפיתוח
?jQuery דווקא למה.( מוקטנת 55.9 (גירסה - kb של כל משקל בעלת ספרייה
. (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) Cross-browser - ב -תומכת.CSS- של בסלקטורים 1-3תומכת
מלא -. תיעוד בעלתאחרות -. ספריות אם עובדת
הספרייה - אפשרויות את המרחיבים פלגינים של מאות .בעלתרחבה -. קהילה בעלת
.Intellisense - בעלת תמיכה מלאה של מיקרוסופט וכוללת
?jQuery את מתקינים איך:http://jquery.com הורד את גרסה האחרונה מ-
To enable Intellisense support, add this to the top of your .js file:
/// <reference path="~/shared/js/jquery-vsdoc.js"/>
:התקן
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736
Firefox 3.0.4 Opera 9.62 Google Chrome
Safari 3.1.2 Internet Explorer
5.5
Internet Explorer
6.0
Internet Explorer
7.0
Internet Explorer
8.0
Avg0
1000
2000
3000
4000
5000
6000
Framework Speed Comparison
MooTools jQuery Prototype YUI Dojo
JavaScript Library Speed Comparison
...התחלה
$(document).ready(function( ) {...});
window.onload = function() {…};
$ == "jQuery" is simply an “alias”
X
כשעץ רק לא הקוד את מבצע אלה DOMדפדפן נוצרוגם חיצוניים ומשאבים התמונות כל לטעינת מחכה גם
. הדפדפן של בחלון מוצג עצמו שדף לרגעעד תוצאה: מחכה אך הדף את רואה משתמש
- מבוצע השהייה.שסקריפט
- ו לרכיבים מפורק המסמך כשמבנה מבוצע HTMLקודלעץ . DOMמומר
$ (function( ) {//when the DOM is ready to be used});
... דרך קיצור גם ויש
שימושיות גרעין ...פונקציות
$(document).ready(function() { $("div").each(function (i) { alert(‘DivNumber:’+i+$(this).text()); }); )};<div>First Div</div><div>Second div</ div >
:each(callback) מעבר לולאה על כל אלמנטיםהנבחרים , כאשר בעבור כל אלמנט מבצעים פונקציית
callback בנוסף ניתן להעביר פרמטר אינדקס של האלמנט, הנבחר.
הערה:אם מחזירים בפונקציה ערך בוליאני:(); continue(); אמת==breakשקר==
:length מחזיר כמות אלמנטים שנבירו לאובייקטjQuery
$(document).ready(function() { alert(‘Number of divs on Page:’+$("div").length); )};<div>First Div</div><div>Second div</ div >
המשך- התחלהjQuery.noConflict(); jQuery(document).ready(function(){ jQuery("div").hide();}); $('someid').hide();
JavaScript :אחרות ספריות של jQuery אם התנגשות מניעת
<script src="prototype.js"></script> <script src="jquery.js"></script>var $jq = jQuery.noConflict(); $jq(document).ready(function(){ $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); var jQuery_1_2_6 = $.noConflict(true); (function($) {
alert('jQuery: ' + $.fn.jquery); })(jQuery_1_2_6); (function($) {
alert('jQuery: ' + $.fn.jquery); })(jQuery_1_3_2);</script>
jQuery.noConflict) ( ' של- ' השם את והופכת $ כינוי מוחקתראשי שמות של jQueryמרחב לפונקציות לגשת יחידה לאפשרות
הספריה .ספריית הערה: טעינת אחרי לפונקציה לקרוא צורך jQueryיש
. אחרות ספריות של בפונקציות שימוש ולפני
- את והופך $ ה את .jq מוריד הראשי השמות למרחב
jQuery.noConflict( extreme) ' ' -מרחב ומשנה $ כינוי מוחקתהראשי .jQueryהשמות שנקבע אחר לשם
' ספריות: מס של לשימוש בעיקר מיועדת זאת פונקציה הערהjQuery. שונות מגרסאות ביחד
jQuery Selector
s
JavaScript Library Speed Comparison
בסיסיים סלקטורים<script type="text/javascript"> $(document).ready(function() { $("#example").click(function (){ alert(“element selected by id”); });)};<p id="example">Example paragraph</p>
ID-בחירת אלמנט לפי מאפיין IDסלקטור
<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”); });)};<p class=“example_class">Example paragraph</p>
מסוים. class-בחירת אלמנטים בעליclassסלקטור
- המשך בסיסיים סלקטורים
-בחירת אלמנטים בעלי מס' class.class.סלקטור class .ים-
$(document).ready(function() { $(“*").click(function (){ alert(“all elements been selected ”); });)};<span id="example">example</span><div>just sample</div>
-בחירת כל האלמנטים.*סלקטור
<script type="text/javascript"> $(document).ready(function() { $(“.examClass.myClass").click(function (){ alert(“element selected by a couple classes”); });)};<p class=“examClass myClass">Example paragraph</p>
-מאפשר לבחור על פי מספר סלקטורים בו-זמנית, סלקטור שילובסלקטורים שונים צריכים להיות מופרדים בפסיק.
$(document).ready(function() { $(“div,span").click(function (){ alert(“elements selected by different selectors ”); });)};<span class="example">example</span><div>just sample</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>
$(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>
Selected element
Selected element
- המשך היררכייה סלקטורים
-מאפשר לבחור אלמנטים שיש לידם prev + nextסלקטור אלמנטים אחרים.
$(document).ready(function() { $(“label + input”).click(function (){ alert(“First input selected”); });)};<label>Name:</label> <input type="text"></input><label>Family:</label> <div>text</div>
Selected element
-מאפשר לבחור אחים ישרים prev ~ siblingsסלקטור .DOMשל אלמנט מסוים הבאים לאחיו בעץ
$(document).ready(function() { $(“#example~li”).click(function (){ alert(“Third & four li selected”); });)};<ul> <li>first</li> <li id="example">second</li> <li>third</li> <li>four</li> <ul><li>six</li></ul></ul>
Selected elements
בסיסיים פילטרים סלקטורים
בחירת אלמנט הראשון מבין האלמנטים המוחזרים.first:סלקטור
$(document).ready(function() { $(“ tr :first ”).click(function (){ alert(“First row selected”); });)};<table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> </table>
Selected element
בחירת אלמנט האחרון מבין האלמנטים המוחזרים.last:סלקטור
$(document).ready(function() { $(“ tr :last”).click(function (){ alert(“Last row selected”); });)};<table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> </table>
Selected element
בסיסיים פילטרים סלקטורים
סינון אלמנטים שאנחנו לא not(selector):פילטר רצים לבחור אותם .
$(document).ready(function() { $(“ tr :not(.red) ”).click(function (){ alert(“First row selected”); });)};<table> <tr><td>Row 1</td></tr> <tr class=“red”><td>Row 2</td></tr> </table>
Selected element
$(document).ready(function() { $(“ td:eq(1)”).click(function (){ alert(“Cell1 selected”); });)};<table> <tr><td>cell0</td><td>cell1</td></tr> <tr><td>cell2</td><td>cell3</td></tr> </table>
Selected element בחירת אלמנט לפי אינדקס מבין eq(index):פילטר קבוצת אלמנטים.
בסיסיים פילטרים סלקטוריםסינון אלמנטים זוגיים מבין האלמנטים המוחזרים.even:פילטר
$(document).ready(function() { $("tr:even").css("background-color", "#bbbbff");)};<table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> </table>
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
One Two Three
Four
$(document).ready(function() { $("tr:odd").css("background-color", "#bbbbff");)};<table> <tr><td>Row 1</td></tr> <tr><td>Row 2</td></tr> </table>
סינון אלמנטים אי-זוגיים מבין האלמנטים המוחזרים.odd:פילטר
בסיסיים פילטרים סלקטורים
סינון אלמנטים הגדולים מאינדקס מועבר gt(index):סלקטור מבין אלמנטים הנבחרים.
$(document).ready(function() { $(“ td:gt(3)”).click(function (){ alert(“Cell 4 && Cell 5”); });)};<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>
Selected elements
סינון אלמנטים הקטנים מאינדקס מועבר lt(index):סלקטור מבין אלמנטים הנבחרים.
$(document).ready(function() { $(“ td:lt(3)”).click(function (){ alert(“Cell 0 && Cell 1 && Cell 2”); });)};<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>
בסיסיים פילטרים סלקטורים
h1,h2,h3בחירת אלמנטים כותרות כגון header:סלקטור וכוי..
$(document).ready(function() { $(":header").css({ background:'#CCC', color:'blue' });)};<body> <h1>Header 1</h1> <p>Contents 1</p> <h1>Header 2</h1> <p>Contents 2</p></body>
Selected elements
בחירת אלמנטים שנמצאים כרגע תחת animated:סלקטור אנימציה.
$(document).ready(function() { $(“ div:animated ”).click(function (){ alert(“You clicked div that currently under animation”); });)};function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt(); //run infinity loop<div id=“mover”>Just Animated Div</div>
תוכן של פילטרים סלקטורים
בחירת אלמנטים המכילים טקסט contains(text):סלקטורשמועבר כפרמטר.
$(document).ready(function() { $("div:contains('John')").css("text-decoration", "underline");)};<body> <p> John Resig </p> <p> George Martin </p> <p> Malcom John Sinclair </p> <p> J. Ohn </p></body>
Selected elements
סינון אלמנטים שאין להם ילדים או טקסט. empty:סלקטור
$(document).ready(function() { $(“ div: empty”).click(function (){ alert(“Last div was selected”); });)};
<div> <p>Div with child</p></div><div>Div with text</div><div></div>
Selected element
תוכן של פילטרים סלקטוריםבחירת אלמנטים בתנאי שיש בתוכם has(selector):פילטר
אלמנטים אשר מוחזרים על ידי סלקטור המועבר כפרמטר.או במילים אחרות...
בחירת אלמנטים בתנאי שסלקטור המסופק מחזיר לפחות תוצאה
אחד הנכללת בתוך אותם האלמנטים.
$(document).ready(function() { $("div:contains('John')").css("text-decoration", "underline");)};
<body> <div><p>Hello in a paragraph</p></div> <div>Hello again! (with no paragraph)</div> </body>
Selected elements
בחירת אלמנטים אשר יש להם ילדים או parent:סלקטור טקסט בתוכם.
$(document).ready(function() { $("td:parent").css('backgroundColor','#fff00f');)};<table border="1"> <tr> <td>Value 1</td> <td><p><p></td> </tr> <tr> <td>Value 2</td> <td></td> </tr> </table>
Selected elements
ראות של פילטרים סלקטורים$(document).ready(function() { $("input: hidden").val(“Store hidden value”); $(“div: hidden").text(“text In div”);)};<body> <div style="display: none;">Hider</div> <input type="hidden" /> <div>LOL</div></body>
Selected elementsבחירת אלמנטים אשר בלתי נראים.hidden:סלקטור
$(document).ready(function() { $(“div: visible").text(“text In div”);)};<body> <div style="display: none;">Hider</div> <div>LOL</div></body>
בחירת אלמנטים אשר נראים.visible:סלקטור Selected elements
מאפיינים של פילטרים סלקטורים$(document).ready(function() { $("div[id]").click(function(){ alert(“You Selected first div”); }); $("div:attr('rel')").text(“divik”);)};<body> <div id="hey">first div</div> <div rel="there">second div</div> </body>
בחירת אלמנטים אשר בעלי מאפיין [attribute: ]סלקטור מסוים.
בחירת אלמנטים בעלי מאפיין [:attribute=value]סלקטור וארך מסוים.
$(document).ready(function() { $("input[name='news']").val(“Hello”);)};<body> <input type="radio" name="news" value="Hot Fuzz" /> <input type="radio" name=“accep" value="Hot Fuzz" /> </body>
Selected element
מאפיינים של פילטרים סלקטורים$(document).ready(function() { $("div[id]").click(function(){ alert(“You Selected first div”); }); $("div:attr('rel')").text(“divik”);)}; <div id="hey">first div</div> <div rel="there">second div</div>
בחירת אלמנטים אשר בעלי מאפיין [attribute: ]סלקטור מסוים.
בחירת אלמנטים בעלי מאפיין [:attribute=value]סלקטור וארך מסוים.
$(document).ready(function() { $("input[name='news']").val(“Hello”);)};<input type="radio" name="news" value="Hot Fuzz" /><input type="radio" name=“accep" value="Hot Fuzz" />
Selected element
$(document).ready(function() { $("input[name!='news']").val(“Hello”);)};<body> <input type="radio" name="news" value="Hot Fuzz" /> <input type=“text" value="Hot Fuzz" /> <input type="radio" name=“apolo" value="Hot Fuzz" /> </body>
בחירת אלמנטים שאין להם [ :attribute!=value]סלקטור מאפיין או יש להם מאפיין וארך אינו מתאים.
Selected elements
מאפיינים של פילטרים סלקטורים$(document).ready(function() { $("input[name^='news']").val("news here!");)};<input name="newsletter" /> <input name="milkman" /> <input name="newsboy" />
בחירת אלמנטים אשר בעלי [ :attribute^=value]סלקטור ומתחיל בארך מסוים.מאפיין מסוים
בחירת אלמנטים בעלי מאפיין :attribute$=value]סלקטור ]מסוים ואשר מסתיימים בארך מסוים.
$(document).ready(function() { $("input[name$='letter']").val("news here!");)};<input name="newsletter" /> <input name="milkman" /> <input name="jobletter" />
בחירת אלמנטים בעלי מאפיין [ :attribute*=value]סלקטורמסוים וכוללים בתוכן ארך מסוים.
Selected elements
Selected elements
$(document).ready(function() { $("input[name*=‘man']").val("news here!");)};<input name="newsmantter" /> <input name="milkman" /> <input name="letterman" /><input name="newmilk" />
Selected elements
מאפיינים של פילטרים סלקטורים
<script type=“text/javascript”> $(document).ready(function() { $("input[id][name$='man']").val("only this one"); )};</script><body> <input id="man-news" name="man-news" /> <input name="milkman" /> <input id="letterman" name="new-letterman" /> <input name="newmilk" /></body>
[ :attributeFilter1[ ]attributeFilterN ]סלקטורסלקטור שילוב, בחירת אלמנטים על פי פילטרים
מאפיינים.
Selected element
ילדים של פילטרים סלקטורים
<script type=“text/javascript”> $(document).ready(function() { $("ul li:nth-child(2)"). css("text-decoration", "underline"); )};</script><body>
<ul> <li>John</li> <li>Karl</li> <li>Brandon</li></ul><ul> <li>Sam</li></ul><ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> <li>David</li></ul>
</body>
nth-child(index/even/odd/equation) :סלקטורבחירת ילד לפי מס' אינדקס,זוגיים,אי-זוגיים,או לפי פורמולה
יחזיר כל איבר שלישי .nth-child(3n)למשל: : 0 ולא מ -1חשוב לציין שאינדקס בסלקטור הנ"ל מתחיל מ-
.CSSוזאת כדי לצעור התאמה ל ובנוסף 0 אשר מתחיל מ-eqסלקטור הנ"ל שונה מן הסלקטור
בוחר אלמנט אבור nth-childבוחר אלמנט אחד בלבד כאשר כל הורה.
Selected elements
ילדים של פילטרים סלקטורים$(document).ready(function() { $("div span:first-child") .css("text-decoration", "underline"))};<div> <span> John </span> <span> John </span></div><div> <span> Glen </span> <span> Tane </span></div>
בחירת אלמנטים אשר ילדים ראשונים first-child:סלקטור להורים שלהם.
בחירת אלמנטים אשר ילדים אחרוניםlast-child:סלקטור להורים שלהם.
Selected element
$(document).ready(function() { $("div span:first-child") .css("text-decoration", "underline"))};<div> <span> John </span> <span> John </span></div><div> <span> Glen </span> <span> Tane </span></div>
Selected element
ילדים של פילטרים סלקטורים
$(document).ready(function() { $("div :only-child") .css("text-decoration", "underline"))};<div> <span> John </span> <span> John </span></div><div> <span> Glen </span> <span> Tane </span></div><div> <div></div></div>
בחירת כל האלמנטים אשר אין להם only-child:סלקטור אחאים.
Selected element
טפסים של סלקטורים$(document).ready(function() { alert($(":input).length);)};<input type="button" value="Input Button"/> <input type="checkbox" /> <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>
,input, textareaבחירת כל האלמנטים input :סלקטורselect button.
בחירת אלמנטים מסוג טקסט. text :סלקטור$: עדיף לא להשתמש בסלקטור בצורה חשוב לציין
:*“)text(” כי זה מאוד איטי.
Selected elements
$(document).ready(function() {$("input:text").css(‘border’,’3px red solid’);)};<input type="hidden" /> <input type="password" /> <input type="submit" /> <input type="text" /> <textarea></textarea>
Selected element
- המשך טפסים של סלקטורים$(document).ready(function() { $("input: password").css(‘border’,’3px red solid’);)};
<input type="password" /> <input type="radio" />
בחירת כל האלמנטים מסוג סיסמה. password :סלקטור
.checkboxבחירת אלמנטים מסוג checkbox :סלקטור
Selected element
בחירת כל האלמנטים מסוג רדיו. radio :סלקטור
$(document).ready(function() { $("input: radio").css(‘border’,’3px red solid’);)};
<input type="password" /> <input type="radio" />
$(document).ready(function() { $("input: checkbox'").css(‘border’,’3px red solid’);)};
<input type="password" /> <input type="radio" /><input type="checkbox" />
Selected element
Selected element
- המשך טפסים של סלקטורים$(document).ready(function() { $("input: submit ").css(‘border’,’3px red solid’);)};
<input type="password" /> <input type="radio" /><input type="submit" />
.submit מסוג inputבחירת כל האלמנטים submit :סלקטור
.resetבחירת אלמנטים מסוג reset:סלקטור
Selected element
בחירת כל האלמנטים מסוג תמונה. image : סלקטור
$(document).ready(function() { $(“: image").css(‘border’,’3px red solid’);)};
<input type="password" /> <input type="radio" /><input type="image" /> $(document).ready(function() { $(" :reset '").css(‘border’,’3px red solid’);)};
<input type="password" /> <input type="radio" /><input type="reset" />
Selected element
Selected element
- המשך טפסים של סלקטורים
$(document).ready(function() { $(“: button ").css(‘border’,’3px red solid’);)};
<input type="button" value="Input Button"/> <button>Button</button> <input type="submit" />
בחירת כל האלמנטים מסוג כפתור. button : סלקטורSelected elements
בחירת כל האלמנטים מסוג קובץ. file : סלקטור
$(document).ready(function() { $(“: file ").css(‘border’,’3px red solid’);)};
<input type="password" /> <input type="radio" /><input type="file" />
Selected element
טפסים של פילטרים סלקטורים$(document).ready(function() { $(“input:enabled ").css(‘border’,’3px red solid’);)};<input name="email" disabled="disabled" /> <input name="id" />
Selected elementבחירת כל האלמנטים מאופשרים. enabled : סלקטור
$(document).ready(function() { $(“input:disabled ").css(‘border’,’3px red solid’);)};<input name="email" disabled="disabled" /> <input name="id" />
בחירת כל האלמנטים לא מאופשרים. disabled :סלקטורSelected element
$(document).ready(function() { $(“input:checked").css(‘border’,’3px red solid’);)};<input type="checkbox" name="news" checked="checked" value="Hourly" /> <input type="checkbox" name="newsletter" value="Daily" />
בחירת כל האלמנטים מסומנים. checked : סלקטור
Selected element
$(document).ready(function() { $(“: selected ").css(‘border’,’3px red solid’);)};<select name="garden" multiple="multiple"> <option>Flowers</option> <option selected="selected">Shrubs</option></select>
בחירת כל האלמנטים מסוג selected : סלקטורcheckboxes or radioמובחרים שהם לא
Selected elements
jQuery Attribute
s
במאפיינים ...שימוש$(document).ready(function() { alert($('#example1').attr("rel")); alert($('#example1').attr(“id")); )};<input type=“button“ rel=‘Simple Button’ />
בחירת מאפיין של אלמנט הראשון attr(name):מאפייןשמוחזר על ידי הסלקטור ,אם המאפיין לא קיים מוחזר ערך
undefined.
קביעת מאפיין על ידי פונקציה. attr(key, fn):מאפיין
קביעה או שינוי ערך של attr(key, value):מאפייןמאפיין.
$(document).ready(function() { $(“# btnFirst").attr("disabled", "disabled"); $("#btnZero").attr({title: "jQuery", alt: "jQuery Logo" });)}; <img id=“imgZero” src="/images/hat.gif“ /><button id=“btnFirst”>1st Button</button> <button id=“btnSecond”>2nd Button</button>
מחיקת מאפיין מכל removeAttr(name):מאפייןהאלמנטים הנבחרים על ידי סלקטור.
Simple פלט: Button
undefinedפלט:
$(document).ready(function() { $("div").attr("id", function (index) { return “divID" + index; }))};<div>Zero-<div> <div>First </div> <div>Second </div>
divID0פלט: divID1פלט: divID2פלט:
$(document).ready(function() { $(“input”).removeAttr(“rel"); )};<input type="password" rel=“lol”/> <input type="radio" rel=“lol”/><input type="reset" rel=“lol”/>
Selected elements
מדורגים סגנונות מחלקות של מאפיינים$(document).ready(function() { $('#example').addClass("example_class");)};<div id=“example”>This is sample div<div/>
:addClass(class) הוספת קלס בעבור כל אחדמהאלמנטים
הנבחרים על ידי סלקטור.
Selected element
$(document).ready(function() { $("p:even").removeClass("blue"); )};<p class="blue under">Hello</p> <p class="blue under highlight">Hello</p>
:removeClass(class) הסרת קלס בעבור כלאחד
מהאלמנטים הנבחרים על ידי סלקטור.
Selected element
$(document).ready(function() { alert($(“#example").hasClass("selected")); alert($(“p").hasClass("selected"));)};<p id=“example”>Hello</p> <p class="selected">Goodbye</p>
:hasClass(class) בודק אם קלס קיים לפחותאצל אחד
מהאלמנטים הנבחרים על ידי סלקטור.$(document).ready(function() { $(“p”).toggleClass("highlight");)}; <p class="blue highlight">highlight</p>
:toggleClass(class) מוסיף קלס לאלמנטבמקרה והוא לא קיים,אחרת מסיר את הקלס.
Selected elements
falseפלט: trueפלט:
blueפלט:
..HTML תגיות של מאפיינים$(document).ready(function() { alert($("p").html()); $(“p").html('hello song changed');)};<p>hello<input type="text"/></p><p>wellcome</p>
:html( ) מחזירה תוכןhtml (innerHTML) בעבור אלמנט
הראשון מבין האלמנטים שנבחרו על ידי סלקטור . מתבצעת בעבור כל HTMLהגדרה של התוכן הערה: אלמנט
בהתאמה.
פלט: hello<input
type="text>/"פלט:
hello song changedhello song changed
$(document).ready(function() { alert($("p").text()); $("p").text(“sample template”);)};<p>Test paragraph</p><p>New paragraph</p><p><input type="text" value="myvalue"/></p>
פלט: Test paragraphNew
paragraph
$(document).ready(function() { alert($("option: selected , input, textarea").val()); $("*").val(["Single2"]);)}; <select id="single"> <option>Single</option> <option>Single2</option> </select> <input type="text" value="Just Text"/> <textarea>Free text</textarea> <input type="radio" value="Single2"/>
פלט:
:text( )) מחזיר את תוכן הטקסט innerText משולב (של כל
האלמנטים בהתאמה. מתבצעת בעבור כל Textהגדרה של התוכן הערה:
אלמנטים- ים.input בהתאמה,עבור כל אלמנטים חוץ מ- :val( ) מחזירה ערךvalue בעבור אלמנט הראשון מביןהאלמנטים שנבחרו על ידי סלקטור .
קביעת ערך מתבצעת בעבור כל אלמנטים הערה: בהתאמה,
ניתן להשתמש באלמנטים הבאים:inputs, selects ,textareas , checkboxes,
radio buttons
פלט: sample
templatesample
templatesample
templateפלט:
Single
jQuery Traversin
g
- פילטרים אלמנטים בין מעבר$(document).ready(function() { $("div") .filter(".middle") .css("border-color", "red");)};<div>just sample div</div> <div class="middle">div with some class</div>
:filter(expr) מסנן כל האלמנטים אשר לא מתאימים לביטוי
expr.שצוין יכול להיות גם פונקציה.exprהערה:
Selected element
$(document).ready(function() { alert($(“#mySpan”).is(":contains('Peter')")));)};<span id=“mySpan”>Peter</span>
:is(expr) מחזירה אמת ,אם לפחות אלמנט אחד מביןאו שקר אחרת.expr אלמנטים הנבחרים מתאים לביטוי
$(document).ready(function() { $(“div”). slice(0, 1).text(‘selected’); $(“div”). slice(-1).text(‘new selected’);)};<div>Zero div</div><div>Div one</div><div>Div two</div>
:slice(start, end) בחירת קבוצת חלקית שלאלמנטים,
מבין האלמנטים המוחזרים על ידי הסלקטור. לא כלול בבחירה.endאלמנט מס' הערה:
Selected element
פלט: true
Selected elements
- אלמנטים מציאת אלמנטים בין מעבר
$(document).ready(function() { alert($("div").children().size());)};<div id="childDivOne"> <span>Primary child1<span>SecondaryChild</span></span> </div><div id="childDivTwo"><span>Primary child2</span></div>
:children(expr) מציאת כל צאצאיים ישיריםשל אלמנטים הנבחרים על ידי סלקטור.
מסנן צאצאיים לפי סלקטור. exprביטוי הערה:
:parent(expr) בחירת הורה ישיר של אלמנטיםהנבחרים
על ידי סלקטור. מסנן הורה לפי סלקטור. exprביטוי הערה:
:find(expr) מחפש אלמנטים צאציים התואמים בתוך אלמנטים הנבחרים .exprלביטוי
CSS 1-3הוא סלקטור באמצעות .expr הערה: ביטוי
$(document).ready(function() { $("div").find("span").text('div value changed');)};<div id="childDivOne"><span>lol2</span></div><div id="childDivTwo"><span>lol</span></div>
פלט: div value changeddiv value changed
2פלט:
$(document).ready(function() { $("p").parent(".selected").css("background", "yellow"); )};<div><p>Hello</p></div> <div class="selected"><p>Hello Again</p></div>
Selected element
:siblings(expr) בחירת כל האלמנטים האחיםיחודיים של האלמנטים הנבחרים על ידי סלקטור.
ניתן לסנן את האחים לפי ביטוי.הערה:
$(document).ready(function() { alert( $(".hit").siblings().size() );)}; <ul> <li>Ei</li> <li class="hit">Nin</li> <li>Ten</li><li class="hil">Ele</li> </ul>
4פלט:
- - המשך אלמנטים מציאת אלמנטים בין מעבר$(document).ready(function() { alert($("p").add("span").length);)};<p>Hello</p><span>Hello Again</span> <span>my span</span>
:add(expr) הוספת אלמנטים נוספים לפי exprביטוי
לקבוצת אלמנטים הנבחרים על ידי סלקטור. $(document).ready(function() { $("p").closest("span").css('color', ‘gray');)};<div>div <span>span<p>paragraph</p><span></div>
:closest(expr) חיפוש אלמנט הורה הקרובביותר המתאים לביטוי של האלמנטים הנבחרים על
ידי סלקטור.אם הורה לא נמצא בעץ ההיררכיה לא מוחזר הערה:
דבר.
3פלט:
פלט:div spanparagraph
:prev(expr) בחירת אלמנט אח הקודם לפי- של האלמנט הנבחר.Domסדר ב
:next(expr) בחירת אלמנט אח הבא לפי סדר- של האלמנט הנבחר.Domב
$(document).ready(function() { $(".selected").nextAll().css("background", "red") .end().next().css("background", "yellow") .end().prevAll().css("background", "blue") .end().prev().css("background", "green");)}; <p>Again</p> <div><span>Hello</span></div> <p>Hello Again</p> <p class="selected">And Again</p> <p>Again Again Again</p> <p>Again Again Again Again</p>
פלט:
:andSelf) ( הוספת בחירה הקודמת שללבחירה הנוכחית.
$(document).ready(function() { $("#main").find("#childDivTwo") .andSelf() .css("border","5px solid red") .end() .find("span") .css("border","5px solid green") .end() .end() .css("border-top","5px solid black");)};<div id="main"> Main Div <div id="childDivOne">Child one</div> <div id="childDivTwo">Child Two <span>lol</span> </div></div>
- שרשרת יצירת אלמנטים בין מעבר
:end) ( ביטול של פעולת בחירתאלמנטים האחרונה, ושינוי למצב בחירת
אלנטים הקודם.אם מדובר בפעולת בחירה של הערה:
אלמנטים על ידי הסלטור בפעם הראשונה מוחזרת תוצאה ריקה.
:פלט
//now childDivTwo is selected element //now selected elements : childDivTwo and main //add red border to childDivTwo and main div //now childDivTwo is again selected //now span with content lol is selected //add green border to span with content lol //now childDivTwo is selected //now main div is selected //change top border color of div main to black
jQuery Manipulation
- פנימיים ילדים אלמנטים ...הוספת
$(document).ready(function() { $("#main").append("<span>FirstChild</span>"); $("<em>First Child's child</em>").appendTo("span"); $("#main").prepend("<span>Zero Child</span>"); $("<em>ZeroChild child</em>").prependTo("#main span:first");)}; <div id="main">Container</div>
:append(content) ,הוספת צאצא פנימית, בסוףבעבור כל אלמנטים הנבחרים על ידי סלקטור.
appendTo(selector): פעולה זהה אך הפוכה לפיסדר,בוחרים
מה להוסיף לאחר מכן בוחרים אלמנט היעד על ידי סלקטור.
:prepend(content) ,הוספת צאצא פנימית, בהתחלהבעבור כל אלמנטים הנבחרים על ידי סלקטור.
prependTo(selector): פעולה זהה אך הפוכה לפיסדר,בוחרים מה להוסיף לאחר מכן בוחרים אלמנט היעד על
ידי סלקטור.
“< DIV id="main >פלט: <SPAN> <EM>Zero Child child</EM> Zero Child </SPAN> Container <SPAN>FirstChild <EM>First Child's child</EM> </SPAN> </DIV>
- חיצוניים אחים אלמנטים ...הוספת
$(document).ready(function() { $("<div>insert after sibling</div>").insertAfter("#foo,#main"); $("<div>after sibling</div>").after("#foo"); $("<div>insert before sibling</div>").insertBefore("#foo,#main"); $("<div>before sibling</div>").before("#foo");)}; <div id="main">Container</div> <div id="foo">FOO!</div>
:after(content) הוספת אלמנטים אחרי כל אלמנטמבין
האלמנטים הנבחרים על ידי סלקטור.insertAfter(selector): פעולה זהה אך הפוכה לפי
סדר,בוחרים הוספת אלמנטים לפני כל אלמנט before(content):מה להוסיף לאחר מכן בוחרים אלמנט היעד על ידי סלקטור.
מבין האלמנטים הנבחרים על ידי סלקטור.
insertBefore(selector): פעולה זהה אך הפוכהלפי סדר,
בוחרים מה להוסיף לאחר מכן בוחרים אלמנט היעד על ידי סלקטור.
<DIV< insert before sibling </DIV> פלט: <DIV id="main"> Container </DIV> <DIV<insert after sibling </DIV> <DIV>insert before sibling </DIV> <DIV id="foo"> FOO! </DIV> <DIV > insert after sibling </DIV>
ב HTML-...עטיפות -מניפולציות
$(document).ready(function() { $("p").wrap($("#wrapDiv")); $("p").wrap("<span></span>"); $("div").wrapAll($("#wrapAllDiv")); $("p").wrapInner("<b></b>");)};
<p>First Paragraph</p><p>Second Paragraph</p><p>Third Paragraph</p>
<div id="wrapDiv" style="border:1px solid black;"></div><div id="wrapAllDiv" style="border:1px solid green;"></div>
:wrap(html/elem) מאפשר לעטוף כל אלמנטמהאלמנטים הנבחרים באלמנט אחר שכבר קיים או
המסופק.HTMLאלמנט חדש שיוצר במיוחד מ :wrapAll(html/elem) מאפשר לעטוף את כל קבוצת
אלמנטים הנבחרים באלמנט אחר שכבר קיים או אלמנט המסופק.HTMLחדש שיוצר במיוחד מ
:אם מדובר באלמנט קיים יש לשים לב שאלנמנט הערההמסופר לא ימחק אלה ישאר במקומו.
wrapInner(html/elem): מאפשר לעטוף את כל הילדים של האלמנטים הנבחרים וגם ערכי טקסט
באלמנט אחר קיים או אלמנט חדש שיוצר במיוחד מ HTML.המסופק
במאפיינים ...שימוש$(document).ready(function() { $(‘button'). ).replaceWith("<div>" + $(this).text() +"</div>"); )};<button>First</button>
:ReplaceWith(content) מחליף כל אלמנטים חדש או קיים.HTMLהנבחרים על ידי סלקטור באלמנט
פונקציה מחזירה אלמנט שהוחלף.הערה:
:remove(expr) מוחקת אלמנטים הנבחרים מDOM , פונקציה מחזירה את האלמנטים שנמחקו אך ללא אירועים.
נועד לצורך סינון אלמנטים שרוצים למחוק.exprביטוי הערה:
:empty) ( מוחקת את כל הצאצאיים,תוכן,ואירועיםמהאלמנטים שנבחרו על ידי סלקטור.
$(document).ready(function() { $("p").empty().text('lol');)}; <p> Hello <span>Person</span><a href="#">person</a> </p>
:clone(bool) , מבצעת שיכפול של האלמנטים הנבחריםארך בוליאני מציין אם לעתיק גם אירועים של אלמנטים.
פונקציה מחזירה אלמנטים ששוכפלו.הערה:
פלט:<div>First</div>
$(document).ready(function() { $("p").remove(":contains('Hello')");)}; <p class="hello">Hello</p> how are <p>you?</p>
:פלטhow areyou?
$(document).ready(function() { $(“button”).clone(true).insertAfter(this); )};<button>Clone Me!</button>
פלט:<p>lol</p>
:פלט<button>Clone
Me!</button>
jQuery CSS
.css באמצעות פונקציה הזאת ניתן לאחזרcss(name): מאפייני
לא ניתן להשתמש בקיצורים של מס' מאפיינים ביחד הערה::כגון
.margin, background, border
…CSS ב -שינויים$(document).ready(function() { alert($(“div”).css(‘backgroundColor’)); alert($(“div”).css(‘background-color’));)};<div style="background-color:blue;"></div>
.css באמצעות פונקציה הזאת ניתן לשנותcss(name): מאפיין
אין הגבלה לקביעה למס' מאפיינים ביחד כגוןהערה: :.margin, background, border
חוץ בפיקסיליםכמו כן כל הערכים מספריים מומרים לערך :מבאים
)z-index, font-weight, opacity, zoom and line-height(
$(document).ready(function() { $(“div”).css('border','1px solid red'); $(“div”).css('backgroundColor','blue'); $(“div”).css('height',50);)};<div>Simple Text</div>
Sample Text
:פלט
$(document).ready(function() { $(this).css({backgroundColor : 'red', 'font-weight' : 'bolder' });)};<div>Simple Text</div>
Sample Text
:פלט
באמצעות פונקציה הזאת ניתן לשנות מס' רב מאפייניcss .בו-זמנית css(name): של
אין הגבלה לקביעה למס' מאפיינים ביחד כגוןהערה: :.margin, background, border
חוץ בפיקסיליםכמו כן כל הערכים מספריים מומרים לערך :מבאים
)z-index, font-weight, opacity, zoom and line-height(
דוגמה הסבר פונקציה$(document).ready(function() { alert(“My Window Width is: ”+$(window).width()); $(“div”).width(200);)};<div id=“sample”>Sample Text</div><div>Another Sample Text</div>
מחזירה רוחב של אלמנט הראשון .מבין אלמנטים הנבחריםוקובעת רוחב בעבור כל
האלמנאים המובחרים. ברירת .מחדל פיקסילים
width(val)
$(document).ready(function() { alert(“My Window Height is: ”+$(window).height()); $(“div”).height(200);)};<div id=“sample”>Sample Text</div><div>Another Sample Text</div>
מחזירה אורך של אלמנט הראשון .מבין אלמנטים הנבחריםוקובעת אורך בעבור כל
האלמנאים המובחרים. ברירת .מחדל פיקסילים
height(val)
$(document).ready(function() { alert("width+padding is: "+$("p").innerWidth());)}; <p style="margin:10px;padding:5px;border:10px solid #666; width:120px;"></p> <p>Another paragraph</p>
מחזירה גודל משותף של רוחב וריפוד בעבור אלמנט הראשון
.מבין אלמנטים הנבחריםinnerWidth( )
$(document).ready(function() { alert("height+border+padding is: "+$("p").outerHeight()); alert("height+border+padding+marigin is: "+$("p").outerHeight(true));)}; <p style="margin:10px;padding:5px;border:10px solid #666; height:20px;"></p> <p>Another paragraph</p>
מחזירה גודל משותף של אורך אלמנט וגודל גבול+ריפוד בעבור
.אלנהט ראשון מהין הנבחריםמקבלת פרמטר בוליאני הערה:
המציין אם לכלול בחישוב .שוליים
outerHeight(margin)
אלמנטים ...מיקום
Selected elements
Selected elements
:130פלט
:פלט5070
דוגמה הסבר פונקציה
$(document).ready(function() { alert("left: " + $(“div”).offset().left + ", top: " + $(“div”).offset().top );)};<div>Where is my div?</div>
מחזירה מרחק יחסי בין אלמנט לבין המסמך בעבור אלמנט
הראשון מבין אלמנטים .הנבחרים
עובד רק בעבור אלמנטים הערה:.נראים
offset( )
$(document).ready(function() { alert("left: " + $(“p”).position().left + ", top: " + $(“p”).position().top );)}; <div><p>Where is my Paragraph</p></div>
מחזירה מרחק יחסי בין אלמנט לבין ההורה בעבור אלמנט
הראשון מבין אלמנטים .הנבחרים
עובד רק בעבור אלמנטים הערה:.נראים
position( )
אלמנטים ...מיקום
$(document).ready(function() { alert(“current scroll: " + $(“div”).scrollTop() ); $(“div”).scrollTop(20); alert(“new scroll: " + $(“div”).scrollTop() );)};<div style=“height:100px;”>Where is my div?</div>
מחזירה /קובעת מיקום גלילה אנכית בעבור אלמנט הראשון
.מבין אלמנטים הנבחרים
scrollTop(val)
$(document).ready(function() { alert(“current scroll: " + $(“div”).scrollLeft() ); $(“div”).scrollLeft(100); alert(“new scroll: " + $(“div”).scrollLeft() );)};<div style=“width:200px;”>Where is my div?</div>
מחזירה /קובעת מיקום גלילה אופקית בעבור אלמנט הראשון
.מבין אלמנטים הנבחרים
scrollLeft(val)
jQuery Effects
$(document).ready(function() {
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
// use callee so don't have to name the function $(this).next().show("fast", arguments.callee);
});
});
$("#hidr").click(function () { $("div").hide(2000); });
)};
<style> div { background:#def3ca; margin:3px; width:80px; display:none; float:left; text-align:center; }
</style><button id="showr">Show</button><button id="hidr">Hide</button> <div>Hello 3,</div><div>how</div> <div>are</div><div>you?</div>
אלמנטים של והעלמה ...הצגה
:show( speed,[callback]) מציגה כל אלמנטיםמוחבאים
שנבחרו על ידי סלקטור.פרמטר מהירות מקבל מס' במילישניות לביצועה אפקט וכולל
slow,normal,fast פרמטרים הבאים:3פונקציה שתקרא בסיום האנימציה.callback הערה:
:hide( speed,[callback]) מעלים כל אלמנטיםנראים
שנבחרו על ידי סלקטור.פרמטר מהירות מקבל מס' במילישניות לביצועה אפקט וכולל
slow,normal,fast פרמטרים הבאים:3פונקציה שתקרא בסיום האנימציה.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() {$(this).html(“Hello jQuery”);
}); // this is a current DOM element
האנימציה סיום ...איתור
אישית אנימציה ...יצירת
// .animate(options, duration)$(“div”).animate({ width: “90%”, 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});
:animate(properties,[duration],[easing],[callback]) פונקציה המאפשרת יצירת
אנימציה מותאמת אישית.
jQuery Events
צריכים ל jQuery בכלל? אנחנו מה
שונים בדפדפנים באירועים טיפול של מודלים -jQuery .מאחדתDom Level 0 Model* Dom Level 2 Model*
Internet Explorer 0-2 mess Model*
) שלו ) מהתנהגות הדך עיצוב תוכן של הפרדה -jQuery . יוצר Unobtrusive Javascript *
- משלנו אירועים ליצור מאפשר- שקבנו אירועים לבטל .מאפשר
- ' אחד לאלמנט זהים אירועים מס .להוסיךלאירועים סטנדרטיים בשמות -jQuery .משתמשת
jQuery 1.4 - ב אירועים חדשים
$(document).ready(function() { $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); }); $("p").focusout(function() { $(this).find("span").text(‘focus out’) .css('display','inline').fadeOut(1000); }); });<p> <input type="text" /> <span>focusin fire</span></p> <p> <input type="password" /> <span>focusin fire</span> </p>
:focusin(handler(eventObject)) אירועמתרחש כאשר אלמנט שעליו מופעל האירוע או אחד
האלמנטים שבתוכו מקבלים פוקוס.
:focusout(handler(eventObject)) אירועמתרחש כאשר אלמנט שעליו מופעל האירוע או אחד
האלמנטים שבתוכו מעבדים פוקוס.
$(document).ready(function() { $("div.test").bind({
mouseenter: function(){ $(this).addClass("inside"); }, mouseleave: function(){ $(this).removeClass("inside"); }
});});
:bind(events) קישור מערך של אירועים בעבוראלמנט/ים ופונקציות ביצוע בעבור כל סוג של אירוע,
jQuery 1.4המשך - ב אירועים חדשים
var obj = { name: "John", test: function() { alert( this.name ); $("#test").unbind("click", obj.test); }};
$("#test").click( jQuery.proxy( obj.test, obj ) );// This also works:$("#test").click( jQuery.proxy( obj, "test" ) );
:jQuery.proxy מקבלת פונקציה ותחום ביצוע ומחזירהפונקציה בעלת משמעות חדשה.
:jQuery.proxy(function,scope) פונקציה שתחום שלה ישתנה.פונקציה- אובייקט שעליו תחום הפונקציה יהיה מוגדר.תחום-
:jQuery.proxy(scope,name) אובייקט שעליו תחום הפונקציה יהיה מוגדר.תחום- שם של פונקציה שתחום שלה ישתנה (חייב להיות שם-
מאפיין של אובייקט תחום),
באירועים ...טיפול$(document).ready(function() { function aClick() { alert($("div").text()); } $(“div").bind("click", aClick);});<div>Just sample div</div>
:bind(type,[data], fn) קישור אחד או מס' אירועיםלאלמנטים.
יש להפריד אירועים שונים ברווחים.
:unbind(type,fn) מחיקת קישור של אירועים מאלמנט,מאפשר למחוק רק פונקציות ספיציפיות או כל פונקציות.
$(document).ready(function() { function aClick() { alert($("div").text()); } $(“div") ").unbind('click', aClick) ;});<div>Just sample div</div>
$(document).ready(function() { $(“div").one("click" , function () { alert(“You see it only once”); } );<div>Just sample div</div> }):
$(document).ready(function() { $(“button:first").click(function({alert(“First clicked”) ;}) ); $(“button:last”).click(function({$("button:first").trigger('click'); })))};<button>Button #1</button><button>Button #2</button>
:one( type,data,fn) קישור אירוע/אירועים בצורה חדמפעמית בעבור אלמנט/ים מסוימים.
:trigger(event,data) מפעיל /מתניעה אירוע מסויםשל אלמנט הנבחר.מתניעה גם אירוע ברירת מחדל של
דפדפן.Dom 0 Modelכמו כן עובד בצורת
באירועים ...טיפול$(document).ready(function() { $("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); }); }):<p>Sample paragraph</p>
$(document).ready(function() { $(“button:first").click(function({alert(“First clicked”) ;}) ); $(“button:last”).click(function({$("button:first").trigger('click'); })))};<button>Button #1</button><button>Button #2</button>
:live(type,fn) קישור אירוע/אירועים בעבור אלנטיםקיימים ובעבור אלמנטים עתידיים.
הערה:לא ניתן לעצירה על ידי:stopPropagation,stopImmediatePropagation
:die(type,fn).פעולה הפוכה לפונקציה הקודמתהערה:פונקציה מאפשרת לעשות מחיקת אירועים גם
bindלאלמנטים שנקשרו על ידי פונקצית
$(document).ready(function() { $(“div").hover( function () { $(this).css(‘bacground-color’,’red’); }, function () { $(this).css(‘bacground-color’,’black’); } );)};<div>Sample div</div>
:hover(over,out) יצירת התמיה של ריחוף מעל אלמנטאו קבוצת אלמנטים כאשר על אלמנט נמצא עכבר מבוצע אירוע מסוים וכאשר עכבר גולש החוצה אירוע שני נדלק.
mousedown(fn)
mouseenter(fn)
mouseleave(fn)
submit
blur
blur(fn)
mousemove(fn)
mousemove(fn)
mouseout(fn)
mouseover(fn)
mouseup(fn)
resize(fn)
scroll(fn)
select
select(fn)submit(fn)
click
click(fn)
dblclick
dblclick(fn)
error
error(fn)
focus
focus(fn)
keydown
keydown(fn)
keypress
keypress(fn)
keyup
keyup(fn)
load(fn)
unload(fn)
// use different triggering function$(document).ready(function() { $(“div”).click(function(e){ e.preventDefault(); //stop browser default action e.stopPropagation();//stop bubbling }); $(“div”).triggerHandler(“click”); )};<div>Simple Text</div>
באירועים ...טיפול$(document).ready(function() { $(“div”).click(function(){ alert(“Simple Alert”); }); $(“div”).click(function(){ alert(“Another Alert”); });)};<div>Simple Text</div>
jQuery.event.special.tripleclick = { setup: function(data, namespaces) { var elem = this, $elem = jQuery(elem); $elem.bind('click', jQuery.event.special.tripleclick.handler); }, teardown: function(namespaces) { var elem = this, $elem = jQuery(elem); $elem.unbind('click', jQuery.event.special.tripleclick.handler); }, handler: function(event) { var elem = this, $elem = jQuery(elem), clicks = $elem.data('clicks') || 0; clicks += 1; if ( clicks === 3 ) { clicks = 0; // set event type to "tripleclick" event.type = "tripleclick"; // let jQuery handle the triggering of "tripleclick“ jQuery.event.handle.apply(this, arguments) } $elem.data('clicks', clicks); } };
jQuery Ajax
$(“div”).load(“content.htm”);
// passing parameters$(“#content”).load(“getcontent.aspx”,
{“id”:”33”, “type”:”main”});
מקובץ תוכן ...טעינת
$.get(“test.aspx”, {id:1},function(data){alert(data);});
$.post(“test.aspx”, {id:1},function(data){alert(data);});
...GET/POST שליחת בקשות
$.getJSON(“users.aspx”, {id:1},function(users){
alert(users[0].name);});
...JSON בצורת מידע קבלת
$.getScript(“script.js”,function(){
doSomeFunction();});
קבצים של דינמית ...טעינה
jQuery Utilities
$.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
שימושיות ...פונקציות
jQuery Plugins
פלגינים ...יצירת
(function ($) { jQuery.fn.bolder = function() { return $(this).each(function() {
this.wrap(“<b></b>”); }); }; })(jQuery);
$(document).ready(function(){ $(“div”).bolder(); });<div>Sample div</div><div>Another div</div>
:הרצה
:יצירת פלגין פשוט ביותר
Sample divAnother div
:פלט
jQuery UI
http://ui.jquery.com
Moved many user interface plug-ins into one core
Supported by core contributors Includes (currently in v1.6):
• Drag / Drop • Sortable• Selectables• Resizables• Accordion
• Calendar• Slider• Table• Tabs• Shadow
• Auto Complete • Color Picker• Progress Bar• Spinner• Magnifier
• Coming in 1.7: Layout controls, menus, tooltips, more
ASP.NET AJAX + jQuery = Microsoft AJAX Framework
Microsoft AJAX Framework
76
AJAX RequestsComponents and Controls
Client Templates
AJAX Control Toolkit
Selectors
Animations
Plugins
ASP.NET AJAX jQuery
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
Documentation / Tutorials
http://docs.jquery.com
