jQuery – Selectors חלק א

אחרי שהבנו מה זה 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 (שאני מדגיש שוב, שווה לקרוא אותה בעצמכם אם הידע שלכם באנגלית מספק).