סלקטורים ב-MooTools

מאמר זה מלמד על פסאודו סלקטורים ב-MooTools

רן בר-זיק
מאי 12, 2010
קטגוריה: MooTools
תגיות: MooTools

במאמר הקודם התחלנו ללמוד על סלקטורים ב-MooTools באמצעות מתודות getElement ו-getElements שמחזירים לנו אלמנט (או מערך של אלמנטים) מתוך אלמנט אב כלשהו שבחרנו עם פונקצית $.

במאמר זה אנו נלמד על סלקטורים נוספים שאפשר להפעיל אותם באמצעות מתודת getElements או באמצעות $$. רוב הסלקטורים מחזירים יותר מאלמנט אחד אז חייבים להשתמש במתודות שמחזירות מערך של אלמנטים (בניגוד ל-$ בודד או ל-getElement).

סלקטורים של פסאודו קלאס

אנחנו יכולים להשתמש בפסאודו קלאסים של CSS על מנת לבחור כמה אלמנטים. למשל, הפסאודו קלאס selected. נניח שיש לי שני input שאחד מהם אוחז בתכונת selected:


<p id="myCheckBox">
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car"  checked="checked" /> I have a car <br />
</p>

אם אני רוצה להוסיף לאלמנט שהוא כבר checked אירוע כלשהו, אני צריך להשתמש בסלקטור שבוחר את כל האלמנטים שהם selected (במקרה הזה אלמנט אחד). נסו ללחוץ על הצ'קובקס שמסומן כבר.

I have a bike
I have a car

שימו לב שלחיצה חוזרת שוב ושוב תציב לי את אותו alert למרות שהצ'קבוקס כבר לא מסומן. זה נובע מכך שהצמדת האירוע היתה לאלמנט התיבה שמסומנת כבר וההצמדה (addEvent) התרחשה רק בטעינת העמוד.

איך עשינו את ההצמדה? ישנן שתי שיטות:


window.addEvent('domready', function() {
    $$('*:checked').addEvent('click', function(){
    	alert('clicked!');	
    });
});

השיטה שלעיל פשוטה ומשתמשת ב-$$ על מנת להחזיר מערך של אלמנטים שאוחזים ב-checked ולהצמיד להם את האירוע. ניתן גם לבחור באמצעות $ את הפסקה עם ה-id שמכילה את שני הצ'קבוקס ובאמצעות getElemets (שעליהם דנו במאמר הקודם) לבחור את האלמנטים הבנים שהם גם input וגם checked:


window.addEvent('domready', function() {
    $('myCheckBox').getElements('input:checked').addEvent('click', function(){
    	alert('clicked!');	
    });
});

בנוסף ל-selected, ניתן להשתמש בפסאודו קלאסים הבאים באותו אופן שהודגם כאן:

enabled
empty
odd
even
first-child
last-child
only-child

סלקטורים של פסאודו קלאס עם פרמטר

contain

יש כמה סלקטורים שמקבלים פרמטר. האהוב עלי הוא contains שהפרמטר שלו הוא הטקסט שאלמנט מסוים מכיל. נניח ויש לנו שני divים חביבים שנמצאים בתוך div שה-id שלו הוא myTextDiv:


<div id="myTextDiv">
<div>דיב זה מכיל טקסט כלשהו בעברית</div>
<div>דיב זה מכיל טקסט כלשהו, אבל שונה מאד</div>
</div>

ואני רוצה להצמיד אירוע ל-div שמכיל את הטקסט 'שונה מאד'. קל לי מאד לעשות את זה באמצעות הקוד הבא:


window.addEvent('domready', function() {
    $('myTextDiv').getElements('div:contains("שונה מאד")').addEvent('click', function(){
    	alert('clicked!');	
    });
});

נסו בעצמכם – הקליקו על ה-div שבו יש את הטקסט 'שונה מאד'.

דיב זה מכיל טקסט כלשהו בעברית

דיב זה מכיל טקסט כלשהו, אבל שונה מאד

אפשר גם להשתמש ב:


    $$('div:contains("שונה מאד")').addEvent('click', function(){
    	alert('clicked!');	
    });

אבל אז הוא יחזיר לי מערך של כל ה-divים שיש בהם את הטקסט הזה ויצמיד לכל אחד מהם את האירוע ($$ מחזיר מערך כאמור) וזה לא מעט divים באתר מורכב.

not

סלקטור חביב נוסף שמשתמש בפרמטר שאנו מעבירים לו הוא סלקטור not שפשוט מפלטר החוצה אלמנטים לא רצויים מהמערך המתקבל. כך למשל בואו ונניח שיש לי שני divים שלאחד מהם יש class מסוים:


<div id='myDivs'>
<div>דיב ראשון וחביב</div>
<div class="evilDiv">דיב שני ומרושע</div>
</div>

אם אני רוצה לבחור את הדיב החביב ולא את הדיב המרושע, אשתמש בסלקטור רגיל כדי להחזיר את כל הבנים של ה-div שה-id שלו הוא myDivs ובאמצעות סלקטור not אפלטר החוצה את הדיב המרושע


window.addEvent('domready', function() {
    $('myDivs').getElements('div:not(".evilDiv")').addEvent('click', function(){
    	alert('clicked!');	
    });
});

כאשר הפרמטר במקרה הזה הוא ה-class שנקרא evilDiv, אבל הוא יכול להיות כל סלקטור שעברנו עליו כאן ובמאמרים הקודמים. הוא יכול להיות תגית שלמה (a למשל שתפלטר החוצה את כל ה-anchors) או id, או פסאודו סלקטור. בואו תנסו בעצמכם! הקליקו על הדיב הראשון ואז הקליקו על הדיב השני והמרושע. תראו שהאירוע לא הוצמד לדיב השני.

דיב ראשון וחביב

דיב שני ומרושע

סלקטור nth-child

זה סלקטור שמצריך קצת מחשבה, הוא מפלטר את הילדים לפי נוסחה מסוימת שמבוססת על n. הסלקטור עובר על המערך של האלמנטים הילדים לפי n שורות כאשר n הוא השורה כלומר, אם אני רוצה לבחור כל ילד זוגי, אני אכתוב 2n כיוון שהסלקטור הזה יבחר רק את הילדים שבאים בכל n שני. אם אני רוצה כל ילד לא זוגי, אני אכתוב 2n+1 כיוון שהסלקטור הזה יבחר רק את הילדים שבאים בכל n שני ועוד אחד – כלומר מקום ראשון (אפס כפול שניים ועוד אחד) מקום שלישי, (אחד כפול שניים ועוד אחד), מקום חמישי (שניים כפול שניים ועוד אחד) וכך הלאה. אני בכלל יכול להתפרע ולכתוב 4n+3 על מנת שהוא יחזיר לי את המקום השלישי, השביעי, האחת עשרה וכך הלאה. בואו נשתמש בסלקטור המופלא הזה בנוגע לרשימה הזו:


<ul id="myList">
<li>מספר 1</li>
<li>מספר 2</li>
<li>מספר 3</li>
<li>מספר 4</li>
<li>מספר 5</li>
<li>מספר 6</li>
<li>מספר 7</li>
<li>מספר 8</li>
<li>מספר 9</li>
<li>מספר 10</li>
<li>מספר 11</li>
<li>מספר 12</li>
</ul>

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


window.addEvent('domready', function() {
    $('myList').getElements('li:nth-child(4n+3)') .addEvent('click', function(){
    	alert('clicked!');	
    });
});

נסו ותהנו! הקליקו על הפריט השלישי, השביעי והאחד עשר ברשימה: