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