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

jQuery – Selectors חלק א

רן בר-זיק ינואר 9, 2009 4:26 pm אין תגובות

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

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

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

תפקיד הסלקטורים

הסלקטורים בעצם מאפשרים לנו לבחור אלמנטים מתוך ה-DOM (דף האינטרנט) ללא מאמץ. כל מי שהסתבך אי פעם עם childnodes ידע להעריך את הקלות שבה אפשר לגשת לכל אלמנט באמצעות jQuery. ושוב, בדוקומנטציה באנגלית ישנו חומר נהדר + דוגמאות מצויינות המסבירות על הסלקטורים.

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

 
 
<script type="text/javascript">
$(document).ready(function() {
$("#example").click(function () {
alert("הודעה מעצבנת");
});
 });
</script>
 
<p class="example_class" id="example">פסקת הדוגמא שלנו</p>
 

סלקטור id

מה שמודגש הוא בעצם הסלקטור, המשפט שבאמצעותו אנו בוחרים את האלמנט. בדוגמא הראשונית אנו בחרנו בסלקטור פשוט של id כאשר גם הסינטקס הוא מאד פשוט – סולמית (#) ואז שם ה-id, הכל בתחום מרכאות ובתוך סוגריים שלפניהם יש דולר.

והנה הדוגמא שנתתי גם במאמר הקודם, לחיצה על פסקת הדוגמא תקפיץ הודעה:

פסקת הדוגמא שלנו

סלקטור class

על מנת לבחור את כל האלמנטים עם class מסוים, כל מה שאנחנו צריכים לעשות זה להשתמש בסלקטור הזה. הדוגמא שאתן משתמשת בפסקת הדוגמא שיש לה class="example_class" אך כמובן שאפשר להשתמש ב-class שמכיל כמה וכמה אלמנטים שונים.

הסינטקס הוא פשוט, במקום # יש לנו נקודה (.)

והנה הדוגמא המובטחת, פשוט לחצו על פסקת הדוגמא:

פסקת הדוגמא שלנו

וככה זה נראה:

 
 
<script type="text/javascript">
$(document).ready(function() {
$(".example_class").click(function () {
alert("הודעה מעצבנת");
});
 });
</script>
 
<p class="example_class" id="example">פסקת הדוגמא שלנו</p>
 

סלקטור אלמנט

זה גם משהו שמוכר מ-JavaScript – בחירת כל האלמנטים מסוג מסוים, כל הפסקאות למשל, כל הרשימות וכו' וכו" כל מה שצריך לעשות זה לכתוב את שם האלמנט, למשל פסקה:

 
 
<script type="text/javascript">
$(document).ready(function() {
$("p").click(function () {
alert("הודעה מעצבנת");
});
 });
</script>
 
<p class="example_class" id="example">פסקת הדוגמא שלנו</p>
 

שילוב בין כמה סלקטורים

אם אנו רוצים למשל לבחור את כל האלמנטים עם class=example_class אבל גם את כל הרשימות (ul)? אין דבר יותר פשוט מזה פשוט לכתוב את כל שמות הסלקטורים עם פסיק מבדיל ביניהם. אפשר כמה שרוצים ש-* זה עבור כל האלמנטים שיש בדף.

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

 
 
<script type="text/javascript">
$(document).ready(function() {
$("p, ul, #example").click(function () {
alert("הודעה מעצבנת");
});
 });
</script>
 
<p class="example_class" id="example">פסקת הדוגמא שלנו</p>
 

סלקטורים היררכיים

אנחנו יכולים לבחור אלמנטים שונים לא רק באמצעות סוג, id או class אלא גם באמצעות היררכיה. למשל, כל האלמנטים שנמצאים בתוך אלמנט מסוים, או הילד הראשון (firstchild) של אלמנט מסוים.

סלקטור הילדים

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

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

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

סלקטור של ילדים בלבד

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

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

 

הסקריפט הזה יבחר את כל הילדים של כל אלמנט ul שיש לו class=example_class ויצמיד להם אירוע של alert. נסו ותהנו.

בחירת אח

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

 
 
  <form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  <input name="none" />
 

נניח שאני רוצה לבחור דווקא את הinputים שיש לידם labels, מה עושים? משתמשים בסלקטור הזה שחוסך המון המון קוד JavaScript.

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

 

בחירת אח מאותה המשפחה

הסלקטור הזה די זהה לסלקטור הקודם אבל הוא בוחר את כל האלמנטים האחים (ולא רק את הראשון) ובתנאי שהם זהים לסוג שלו. אם ניקח לדוגמא ul תיאורטי שיש בתוכו li שלאחד מהם יש id=example ואנו רוצים לבחור את כל הli שבאים אחריו, אנו נשתמש בסלקטור הזה.

הנה הרשימה התיאורטית:


<ul>
<li>bla bla</li>
<li>bla bla</li>
<li id="example">bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
<li>bla bla</li>
</ul>

והנה הקוד שיבחר אך ורק את li עם id=example ואת כל ה-li שבאים אחריו באותו ul:

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

 

האלמנט הראשון

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

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

 

האלמנט האחרון

בדיוק כמו הסלקטור הקודם, רק להיפך, בוחר את האלמנט האחרון בדף מסוג זה.

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

 

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

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

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