שינוי מטרה/יעד – חלק 2 – JQuery

 

 

 

מטרת שיעור זה היא ללמד כיצד להשתמש ב Selectors של JQuery.

השימוש ב Selectors ב JQuery נעשה בדומה לשימוש בהם ב CSS, רק שיש "לעטוף" אותם במרכאות. כך לדוגמא, אם נרצה לקבוע כמטרה את ה Class שנקרא Button, נעשה זאת באמצעות:

$('.button').someAction

ואם נרצה לעשות זאת עבור ID שנקרא Button, נעשה זאת באמצעות:

$('#button').someAction

* דגמאת לשימוש ב Selectors ב CSS ניתן למצוא בקישור – http://www.w3schools.com/cssref/css_selectors.asp

תרגיל

התרגיל בשיעור זה מבקש מאיתנו להוסיף Selector לסקריפט של ה Jquery שיבחר את כמטרה את ה Div id שנקרא Green.

קובץ ה HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div></div>
<div id="green"></div>
</body>
</html>

קובץ ה CSS:

הקובץ מגדיר מבנה כללי ל Div ומוסיף פרמטר יחודי ל Div שה ID שלו הוא Green (הפרמטר הוא צבע רקע ירוק).

div {
height:100px;
width:100px;
background-color:#FF0000;
border-radius:5px;
margin-bottom:5px;
}

#green {
background-color:#008800;
}

Jquery

הקובץ מוציע לפועל פונקציה שגורמת להעלמות של אלמנט ב DOM לאחר סיום טעינת המסמך.

 

$(document).ready(function() {
$().fadeOut(1000);
});

פתרון התרגיל הוא הוספה של Selector לשורה השניה שיקבע את Div id בשם Green כיעד.

כלומר במקום

$().fadeOut(1000);

יש לקרוא ל:

$('#green').fadeOut(1000);

* חשוב לא לשכוח את המרכאות.

——————————————————————————————————————————–

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

מכיוון שזה תהליך לימודי יש לקחת את האמור כאן בערבון מוגבל. תגובות, הערות והארות יתקבלו בברכה כל עוד הן בונות ותורמות לתהליך הלימודי.

—————————————————————————————————————————–