אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » מדריכים » jQuery » jQuery – Selectors חלק ב

jQuery – Selectors חלק ב

רן בר-זיק ינואר 18, 2009 10:33 am אין תגובות

במאמר זה, המשך למאמר הקודם, אני ממשיך וסוקר את הסלקטורים המרובים ש-Jquery מאפשרת לנו.

המאמר הקודם ללימו jQueryjQuery – Selectors חלק א
המאמר הבא ללימוד jQueryjQuery – Events – אירועים
כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

מאמר זה מהווה המשך למאמר הקודם המספר על הסלקטורים שיש ב-jQuery. פה אמשיך לפרט את הסלקטורים השונים.

הקבוצה הבאה של הסלקטורים בוחרת אלמנטים שונים על פי התוכן. כך למשל, אצמיד את פונקצית ה-Alert החביבה שלנו לפסקאות שונות עם תוכן שונה.

סלקטור בחירת תוכן contains(text)

סלקטור שימושי להפליא זה בוחר אלמנטים שונים על פי התוכן הטקסטואלי שלהם – כמו למשל מילה או משפט. למשל פסקה שבה מופיע המונח ahla bahla internet.

תקליקו על הפסקה הזו ahla bahla internet

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


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p:contains('ahla bahla internet')").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 

<p>תקליקו על הפסקה הזו ahla bahla internet</p>

בחירת אלמנט ריק – empty

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


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p:empty)").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 

<p>תקליקו על הפסקה הזו ahla bahla internet</p>

יש ילד has(child))

סלקטור זה מאפשר לבחור אלמנט שיש לו ילד מסוג כלשהו. כותבים את שם האלמנט-אבא ואז את שם אלמנט הילד עם הסלקטורים המתאימים. בדוגמא הבאה אני בוחר פסקאות שיש בהן את המילה bonanaza שנמצאות בתוך div שה-id שלו הוא example :

bonanaza – click here!

וככה זה נראה


<p><script type="text/javascript"> 
$(document).ready(function() {
$("#example:has(p:contains('bonanaza'))").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 

<div id="example">
<p>bonanaza - click here!
</p>
</div>

אפשר גם להשתמש ב-has כפונקציה ולא רק בתוך הסלקטור. כך למשל:


$(document).ready(function() {
$("#example").has('p:contains('bonanaza')').click(function () { 
alert("הודעה מעצבנת");
});
 });

מצא את ההורה :parent

סלקטור זה מוצא את כל האלמנטים מסוג מסוים שהם הורים לאלמנטים אחרים (מכל סוג) כך למשל הקוד הזה מוצא את כל הפסקאות שמכילות אלמנטים אחרים (למשל strong, abbr או em):


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p:parent)").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


סלקטור מצא בלתי נראים :hidden

מדובר באחד הסלקטורים השימושיים ביותר שיש, הוא בוחר את כל האלמנטים שהם לא נראים – כלומר מאפיין display שלהם מכוון ל-none. שימו לב שזה כולל גם אלמנטים שהשתנו לאחר טעינת העמוד, חוסך זמן רב מאד במיוחד בכל מני הודעות שגיאה. הסינטקס הוא פשוט לחלוטין – שם האלמנט, נקודתיים ואז hidden. הדוגמא הבאה היא לכל האלמנטים מסוג p שהם בלתי נראים:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p:hidden)").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


סלקטור מצא נראים – visible

סלקטור זה דומה לסלקטור 'מצא בלתי נראים' הקודם, והוא מוצא את כל האלמנטים הנראים. שוב, שימושי להפליא.


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p:visible)").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 



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

ל-jQuery יש מגוון סלקטורים למאפיינים. מאפיינים יכולים להיות כל דבר שיש בתוך תגית html: id, name, href או rel וכו'. אני אבצע את כל ההדגמות על פסקאות שיש בהן מאפיין .rel

סלקטור בחירת מאפיין

בוחר את כל האלמנטים שיש בהם מאפיין מסוג מסוים. הקוד הבא יבחר את כל הפסקאות שיש בהן מאפיין מסוג rel:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p:attr('rel'))").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 



סלקטור בחירת אלמנטים עם מאפיינים ששווים לערך מסוים

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


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p[rel = 'example'])").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


סלקטור בחירת אלמנטים עם מאפיינים ששונים מערך מסוים

בדיוק כמו הסלקטור הקודם – בחירת כל האלמנטים שלא מכילים בדיוק את מחרוזת הטקסט. במקרה שלנו:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p[rel != 'example'])").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


סלקטור בחירת אלמנטים עם מאפיינים שמכילים ערך מסוים

מדובר בסלקטור סלקטור היותר שימושי ובוחר את כל האלמנטים שמכילים מחרוזת מסוימת. כך למשל הדוגמא הבאה תבחר את כל הפסקאות שיש בהם מאפיין rel שמכיל את מחרוזת example:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p[rel *= 'example'])").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


סלקטור בחירת אלמנטים עם מאפיינים שמתחילים עם ערך מסוים

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


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p[rel ^= 'example'])").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


יבחר את הפסקאות שיש להן rel שמתחיל ב example: כך למשל example big ייבחר אך big example לא ייבחר.

סלקטור בחירת אלמנטים עם מאפיינים שמסתיימים בערך מסוים

בדיוק כמו הסלקטור הקודם, רק שהפעם המאפיין חייב להסתיים עם ערך מסוים. כלומר הפעם אנו רוצים את big example ולא את example big.


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p[rel $= 'example'])").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


שילובים בין כמה מאפיינים

אפשר לשלב כמה סלקטורים שונים כמובן, למשל הקוד הבא יבחר לי פסקה שה-rel שלה שווה ל yhuhu שיש לו id וה-nama שלו שונ מ-bahla:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("p[rel = 'yhuhu'][id][name != 'bahla'])").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


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

סלקטורים אלו מוצאים את כל האלמנטים ילדים. אם יש אלמנט מקונן בתוך אלמנט אחר, אנחנו נמצא אותו.

סלקטור מצא את הילד n

סלקטור זה מוצא את הילד מספר n (כשאנו בוחרים את n כמובן) של האלמנט. אם יש לנו רשימה עם id=example למשל, ואני רוצה לבחור את ה-li השני – אני אשתמש בקוד הבא:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("#example:nth-child(2))").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


כאשר אני יכול להחליף את 2 באיזה מספר שבא לי או במילים even (למציאת האלמנטים הילדים הזוגיים) או odd (למציאת האלמנטים הילדים הלא זוגיים)

סלקטור מצא את הילד הראשון

הסלקטור הזה מוצא את האלמנט הילד הראשון של אלמנט האב שאנו רוצים. בדוגמא שלנו הקוד הזה מוצא את ה-li הראשון של רשימת הדוגמא שלנו:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("#example:first-child)").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


סלקטור מצא את הילד האחרון

בדיוק כמו סלקטור מצא את הילד הראשון, הסלקטור הזה מוצא את הילד האחרון ובדוגמא שלנו למשל את ה-li האחרון:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("#example:last-child)").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


סלקטור מציאת בן יחיד

סלקטור זה מוצא את האלמנט שיש לו רק אלמנט ילד אחד בלבד. כך למשל הקוד הבא בוחר רק רשימות שיש להן li אחד בלבד:


<p><script type="text/javascript"> 
$(document).ready(function() {
$("ul:only-child)").click(function () { 
alert("הודעה מעצבנת");
});
 });
</script></p> 


סיכום

יש עוד כמה סלקטורים שנוגעים לטפסים אך אסקור אותם במאמר יותר מתאים. במאמר הבא אנו נדון באירועים שהם קצת יותר מלהיבים מ click שבו השתמשנו לכל הדוגמאות.

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.
ספרית jQuery
ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

    בחשבון הטוויטר שלי אני מפרסם עדכונים מהירים על חדשות בתחום התכנות והיזמות, התרעות על מצבי חירום ורכילות בוערת על תחום הווב.
    מה זה טוויטר?
  • facebook like image

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

גלילה לראש העמוד