שאלות נפוצות

תוכן

• 1 כיצד אוכל ... ?
  • 1.1 כיצד לבחור אלמנט באמצעיות מחלקה או ID?
  • 1.2 כיצד אוכל לבדוק האם לאלמנט יש מחלקה מסוימת?
  • 1.3 כיצד אוכל לבדוק האם אלמנט קיים?
  • 1.4 כיצד אוכל לקבוע את מצב המתג של האלמנט?
  • 1.5 כיצד לבחור אלמנט באמצעות ID, שמכיל תווים המשתמשים בסימון CSS?
  • 1.6 כיצד אני יכול לבטל / לאפשר אלמנט הטופס?
  • 1.7 כיצד אוכל לסמן/לבטל תיבת הסימון או כפתור רדיו?
  • 1.8 כיצד אוכל לקבל את ערך הטקסט של פרמטר הנבחר?
  • 1.9 כיצד אוכל להחליף את הטקסט של אלמנט השלישי מתוך רשימה של 10 אלמנטים?
  • 1.10 כיצד אוכל לדחוס את הקוד שלי?
  • 1.11 כיצד אוכל לקבל ולהשתמש בתגובת השרת מהבקשה של AJAX?
  • 1.12 כיצד אוכל למשוך את האלמנט המקור DOM מאובייקט jQuery?
• 2 מדוע ... ?
  • 2.1 מדוע האירועים שלי מפסיקים לעבוד אחרי בקשת AJAX?
    • 2.1.1 שימוש במשלחת האירוע
    • 2.1.2 שימוש באירוע צירוף מחדש
  • 2.2 מדוע לא עובדים האירוע על אלמנט חדש שיצרתי?
  • 2.3 מדוע אנימציה מגדירה סגנון התצוגה ל- block?
• 3 ספר מתכונים
  • 3.1 מתכון: תפריט פשוט עם הצגת תת-תפריט בהצבעה

כיצד אוכל ... ?

כיצד לבחור אלמנט באמצעיות מחלקה או ID?

בחירת אחד או אף אלמנט תלויה אם אלמנט עם מזהה שצוין קיים.

$('#myDivId')

קוד הזה בוחר אלמנט עם מחלקה "myCssClass". מכיוון שכל כמות של אלמנטים יכולה להיות עם אותה מחלקה, ביטוי הזה יבחר מספר כלשהו של אלמנטים.

$('.myCssClass')

אובייקט jQuery, המכיל אלמנט הנבחר, יכול להיות נועד למשתנה של JavaScript, כרגיל:

var myDivElement = $('#myDivId');

בדרך כלל על אלמנטים באובייקט של jQuery מופעלות פונקציות אחרות של jQuery:

 var myValue = $('#myDivId').val();    // get the value of a form input
 
 $('#myDivId').val("hello world");     // set the value of a form input

כיצד אוכל לבדוק האם לאלמנט יש מחלקה מסוימת?

hasClass (הוסף לגירסה 1.2) מטפל במקרה של שימוש רגיל:

 $("div").click(function(){
   if ( $(this).hasClass("protected") )
     $(this)
       .animate({ left: -10 })
       .animate({ left: 10 })
       .animate({ left: -10 })
       .animate({ left: 10 })
       .animate({ left: 0 });
 });

אתם גם יכולים להשתמש בשיטה is() יחד עם סלקטור המתאים עבור התאמה רחבה יותר:

 if ( $('#myDiv').is('.pretty.awesome') )
   $('#myDiv').show();

שימו לב ששיטה הזו מאפשרת לבדוק גם דברים אחרים. לדוגמה, אתם יכולים לבדוק, האם אלמנט מוסתר ( באמצעות סלקטור של משתמש :hidden):

 if ( $('#myDiv').is(':hidden') )
   $('#myDiv').show();

כיצד אוכל לבדוק האם אלמנט קיים?

תשתמשו במאפיין length של אוסף jQuery, שמוחזר על ידי סלקטור שלכם:

 if ( $('#myDiv').length)
   $('#myDiv').show();

שימו לב שאין תמיד צורך לבדוק האם אלמנט קיים. קוד הבא מציג אלמנט, אם הוא קיים, ולא עושה דבר (ללא שגיות), אם הוא לא קיים:

 $('#myDiv').show();

כיצד אוכל לקבוע את מצב המתג של האלמנט?

אתם יכולים לקבוע האם אלמנט מוסתר או לא באמצעות סלקטורים :visible ו- :hidden.

 var isVisible = $('#myDiv').is(':visible');
 var isHidden = $('#myDiv').is(':hidden');

אם אתם פשוט מבצעים פעולה על האלמנט, המבוסס על הנראות שלו, פשוט תכניסו ":visible" או ":hidden" בתוך ביטוי בחירה. לדוגמה:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

כיצד לבחור אלמנט באמצעות ID, שמכיל תווים המשתמשים בסימון CSS?

מכיוון ש- jQuery משתמשת בתחביר CSS עבור בחירה של אלמנטים, מספר תווים מפורשים כי סימני CSS. לדוגמה, מאפיינים ID, אחרי אותיות (a-z או A-Z), גם יכולים להשתמש בנקודות ונקודתיים, בנוסף לאותיות, מספרים, מקפים וקווים תחתונים (ראו W3C סוגי נתונים העיקריים של HTML). נקודתים (":") ונקודה (".") הם בעייתים בהקשר של סלקטורים jQuery, מכיוון שמצביעים על פסאודו מחלקה ומחלקה, בהתאמה.

על מנת לגרום ל- jQuery לטפל בתווים אלה לא כי סימני CSS, הם חייבים להיות "נמלטים" על ידי הצבת שני לוכסנים לפניהם.

 // Does not work
 $("#some:id")
 
 // Works!
 $("#some:id")

 // Does not work
 $("#some.id")
 
 // Works!
 $("#some.id")

הפונקציה הבאה דואגת לסימנים האלה ושמה "#" בתחילת מחרוזת עם ID:

 function jq(myid) { 
   return '#' + myid.replace(/(:|.)/g,'$1');
 }

ניתן להשתמש בפונקציה כך:

 $( jq('some.id') )

כיצד אני יכול לבטל / לאפשר אלמנט הטופס?

ישנן שתי דרכים כדי לבטל / לאפשר אלמנטים של הטופס.

להגדיר תכונה 'disabled' ל- true או false:

 // Disable #x
 $('#x').attr('disabled', true);
 // Enable #x
 $('#x').attr('disabled', false);

להוסיף או למחוק תכונה 'disabled':

 // Disable #x
 $("#x").attr('disabled', 'disabled');
 // Enable #x
 $("#x").removeAttr('disabled');

אתם יכולים לנסות דוגמה של הפעלה / ביטול עם ההדגמה הבאה:

onetwo

והנה את קוד המקור של ההדגמה:

כיצד אוכל לסמן/לבטל תיבת סימון או כפתור רדיו?

ישנן שתי דרכים כדי לסמן/לבטל תיבת סימון או כפתור רדיו.

להגדיר תכונה 'disabled' ל- true או false.

 // Check #x
 $('#x').attr('checked', true);
 // Uncheck #x
 $('#x').attr('checked', false);

להוסיף או למחוק תכונה 'checked':

 // Check #x
 $("#x").attr('checked', 'checked');
 // Uncheck #x
 $("#x").attr('checked');

אתם יכולים לנסות דוגמה של סימון / ביטול עם ההדגמה הבאה:

I'll be checked/unchecked.

והנה את קוד המקור של ההדגמה:

כיצד אוכל לקבל את ערך הטקסט של פרמטר הנבחר?

לאלמנטים שנבחרו בדרך כלל יש שני ערכים שברצונכם יהיה לגשת אליהם. ראשית יש את הערך שנשלח לשרת:

 $("#myselect").val();
 // => 1

השני הוא ערך טקסט של הבחירה. לדוגמה, באמצעות תיבת בחירה הבאה:

אם אתם רוצים לקבל מחרוזת "Mr", אם אפשרות ראשונה נבחרה (במקום "1"), אתם יכולים לעשות זאת בדרך הבאה:

 $("#myselect option:selected").text();
 // => "Mr"

אתם יכולים לראות את זה בפעולה בהדגמה הבאה:

Mr Mrs Ms Dr Prof

והנה את קוד מלא של המקור של ההדגמה:

כיצד אוכל להחליף את הטקסט של אלמנט השלישי מתוך רשימה של 10 אלמנטים?

גם סלקטור :eq(), וגם שיטה .eq() מאפשרים לכם לבחור אלמנט הנכון. עם זאת, כדי להחליף טקסט, אתם צריכים לקבל ערך, לפני שמגדירים אותו:

  // This doesn't work; text() returns a string, not the jQuery object
  $(this).find('li a').eq(2).text().replace('foo','bar');

  // This works
  var $thirdLink = $(this).find('li a').eq(2);
  var linkText = $thirdLink.text().replace('foo','bar');
  $thirdLink.text(linkText);

דוגמה ראשונה פשוט זורקת טקסט שהשתנה. דוגמה שניה שומרת טקסט שהשתנה, ואחרי זה מחליפה טקסט הקודם לטקסט החדש שהשתנה. זכרו, ש- .text() מקבל; .text("foo") מגדיר.

כיצד אוכל לדחוס את הקוד שלי?

בדרך כלל הדרך הטובה ביותר לעשות זאת היא להשתמש ב- Google Closure Compiler (משתמש ב- jQuery) או YUI compressor.
jQuery מספק גירסה דחוסה של jQuery לנוחיותך.

דחיסה של JavaScript באמצעות Dean Edwards' Packer (משתמש במיוחד בקידוד base64) לא מומלצת, מכיוון שלפענוח בצד הלקוח יש כמה פגמים הגדולות שעולים על היתרונות הקטנה בגודל הקובץ.

אם דחיסת JavaScript שוברת אותו, נסו להפעיל קוד דרך JSLint. זה יזהה שגיאות קלות שיכולות לגרום לכשלון אצל JavaScript הדחוס, בזמן שגירסה לא דחוסה עובדת מצוין.

כיצד אוכל לקבל ולהשתמש בתגובת השרת מהבקשה של AJAX?

"А" ב- AJAX מייצג אסינכרוניות. בהפעלת פונקציות עם התנהגות אסינכרונית יש לציין פונקציה של קריאה חוזרת, כדי לתפוס תוצאה הרצויה. זה חשוב במיוחד עם AJAX בדפדפן, מכיוון שכאשר בקשה מרוחקת בוצעה, אי אפשר לדעת מתי (או אפילו אם) תתקבל תגובה.

בקטע הבא מוצגת דוגמה של יצירת קריאה של AJAX והתראה של תגובה שהתקבלה (או טעות):

 $.ajax({
     url: 'myPage.php',
     success: function(response) {
        alert(response);
     },
     error: function(xhr) {
        alert('Error!  Status = ' + xhr.status);
     }
 });

אבל איך יכולה התגובה לשמש בהקשר של פונקציה? קחו לדוגמה חסרונות של הדוגמה הזו, כאשר אנחנו מנסים לעדכן מספר נתונים על מצב בדף:

 function updateStatus() {
     var status;
     $.ajax({
         url: 'getStatus.php',
         success: function(response) {
             status = response;
         }
     });
     // update status element?  this will not work as expected
     $('#status').html(status);
 }

הקוד הנ"ל לא עובד לפי רצונינו בשל האופי של תכנות אסינכרונית. במקרה של הצלחה מטפל לא מופעל מייד, אלא במועד כלשהו בעתיד, כאשר התגובה התקבלה מהשרת. לכן, כאשר אנו משתמשים במשתנה "status" מיד לאחר הפעלה של $.ajax, אז הערך שלו עדיין לא מוגדר. קטע הבא מראה כיצד אנו יכולים לשכתב את הפונקציה להתנהג לפי הצורך:

 function updateStatus() {
     $.ajax({
         url: 'getStatus.php',
         success: function(response) {
             // update status element
             $('#status').html(response);
         }
     });
 }

אבל איך אני יכול להחזיר את תגובת שרת מתוך הפעלת AJAX? הנה שוב אנו מראים ניסיון פגום. בדוגמה זו אנו מנסים להתריע בפני מצב HTTP עבור URL של "getStatus.php":

 //...
 alert(getUrlStatus('getStatus.php'));
 //...
 function getUrlStatus(url) {
     $.ajax({
         url: url,
         complete: function(xhr) {
             return xhr.status;
         }
     });
 }

הקוד הנ"ל לא יעבוד כי אתם לא יכולים להחזיר נתונים מפונקציה זו, שמופעלת באופן אסינכרוני. במקום זה יש לכתוב אותו מחדש עם שימוש בפונקציה של קריאה חוזרת:

 //...
 getUrlStatus('getStatus.php', function(status) {
     alert(status);
 });

 // ...
 function getUrlStatus(url, callback) {
     $.ajax({
         url: url,
         complete: function(xhr) {
             callback(xhr.status);
         }
     });
 }

כיצד אוכל למשוך את האלמנט המקור DOM מאובייקט jQuery?

אובייקט jQuery היא מעטפת כמו מערך סביב אחד או יותר אלמנטים של DOM. כדי לקבל התייחסות לאלמנטים של DOM (במקום אובייקט jQuery), עומדות בפניך שתי אפשרויות. הראשונה (והמהירה) היא בשימוש של מערך סימון:

 $('#foo')[0]; // equivalent to document.getElementById('foo')

אפשרות השניה היא שימוש בפונקציה get:

 $('#foo').get(0); // identical to above, only slower

ניתן גם להפעיל get ללא ארגומנטים, כדי לקבל מערך אמיתי של אלמנטים DOM.

מדוע ... ?

מדוע האירועים שלי מפסיקים לעבוד אחרי בקשת AJAX?

לעתים קרובות, כאשר מוסיפים קליק (או אירוע אחר) של המטפל על כל הקישורים המשמשים $('a').click(fn), תגלו שאירועים אחרי זה לא פעילים יותר, אחרי שתוכן חדש הועלה לדף באמצעות בקשת AJAX.

בקריאה $('a'), מוחזרים כל הקישורים בדף לרגע הקריאה, ו- .click(fn) מוסיף מטפל שלכם רק לאלמנטים האלה. כאשר קישורים נוספיף הוספו, עליהם אפקט הזה לא פועל.

יש לך שתי דרכים לטפל זה:

שימוש במשלחת האירוע

משלחת אירוע היא טכניקה המנצלת אירוע מבעבע כדי לתפוס אירועים על אלמנטים בכל מקום של DOM.

החל מ- jQuery 1.3, אתם יכולים להשתמש בשיטות live ו- die עבור משלחת אירוע עם משנה של סוגי האירוע. החל מ-jQuery 1.4, אתם יכולים להשתמש בשיטות האלה (יחד עם delegate ו- undelegate החל מ- 1.4.2) עבור משלחת אירוע עם כל סוגי של אירוע.

אתם יכולים גם באופן ידני לטפל במשלחת האירוע באמצעות איגוד למיכל משותף והאזנה לאירועים משם. לדוגמה:

 $('#mydiv').click(function(e){
    if( $(e.target).is('a') )
       fn.call(e.target,e);
 });
 $('#mydiv').load('my.html');

דוגמה הזו מטפלת בקליקים על כל אלמנטים של <a> בתוך #mydiv, אפילו אם הם לא היו קיימים לרגע הוספת המטפל.

שימוש באירוע צירוף מחדש

שיטה זו מחייבת אותך לקרוא לשיטה bind על אלמנטים חדשים ברגע שהם הוספו. לדוגמה:

 $('a').click(fn);
 $('#mydiv').load('my.html',function(){
   $('#mydiv a').click(fn);
 });

היזהרו! החל מ- jQuery 1.4.2, צירוף של מטפל לאותו אלמנט מספר פעמים גורם לבצע מטפל הזה יותר מפעם אחת. זה שונה מגירסאות קודמות של jQuery, וגם ממפרט אירועים של DOM 2 ( שגם מתעלם מכפולות של מטפלי אירועים).

מדוע לא עובדים האירוע על אלמנט חדש שיצרתי?

כפי שהוסבר בשאלה הקודמת על AJAX, אירועים הקשורים רק לאלמנטים, שקיימים לרגע, כאשר אתם מבצעים הפעלה ראשונה של jQuery. כשה אתם יוצרים אלמנט חדש, יש לקשר אליו אירוע בנפרד, או להשתמש במשלחת האירוע.

מדוע אנימציה מגדירה סגנון התצוגה ל- block?

רק אלמנטים ברמה של block יכולים לקבל רוחב וגובה מותאמים אישית. כאשר אתם מבצעים אנימציה על האלמנט, שמשנה גובה ורוחב (לדוגמה, show, hide, slideUp, או slideDown), תכונה של CSS 'display' תוגדר ל- "block" במשך האנימציה. תכונה 'display' תחזור לערך הקודם אחרי סיום האנימציה.

ישנן שתי דרכים נפוצות:

אם אתם רוצים שהאלמנט ישאר בתוך השורה, אבל אתם רוצים להפעיל עליו אנימציה, אתם יכולים להשתמש באנימציה fadeIn או fadeOut ( אשר משפיעות רק על האטימות של האלמנט).

 // Instead of this:
 $("span").show("slow");
 
 // do this:
 $("span").fadeIn("slow");

האפשרות השנייה היא להשתמש באלמנט ברמה של קטע, אבל להוסיף הזזה כך שאלמנט ישאר בתוך שורה עם שאר התוכן סביבו. התוצאה תראה כך:

ספר מתכונים

מתכון: תפריט פשוט עם הצגת תת-תפריט בהצבעה

• ראו הצגה פשוטה של תת-תפריט בהצבעה.