JQuery

JQuery
natankrasney@gmail.com
1

? JQuery ‫זה‬ ‫מה‬
javascript ‫ספרית‬ ‫היא‬ JQuery
javascript ‫ב‬ ‫מורכבות‬ ‫משימות‬ ‫בפשטות‬ ‫מבצעת‬ JQuery
2

JQuery ‫דוגמה‬
<html><head></head><body>
<p>If you click on me, I will disappear.</p>
<p>i also disappear</p>
<p>i disappear too!</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){$(this).hide();});});
</script></body></html>
3
‫ניתן‬ .‫הספריה‬ ‫של‬ JS ‫קובץ‬ ‫של‬ URL
‫ולהשתמש‬ ‫מקומית‬ ‫להוריד‬ ‫גם‬
.‫הדיסק‬ ‫על‬ ‫יחסי‬ ‫במיקום‬
Google CDN ‫כאן‬ ‫בשימוש‬
‫הגדרות‬ ‫את‬ ‫להכניס‬ ‫היא‬ ‫התיעוד‬ ‫של‬ ‫ההמלצה‬
‫שיוגדרו‬ ‫כך‬ ‫הזו‬ ‫בצורה‬ JQuery ‫של‬ ‫הפונקציות‬
‫עלה‬ ‫שהדף‬ ‫אחרי‬ ‫רק‬
‫מעלימה‬ ‫אשר‬ click handler ‫הגדרת‬
‫עליהם‬ ‫שלוחצים‬ ‫ברגע‬ p ‫אלמנטי‬. selector ‫כ‬ $ ‫ב‬ ‫שימוש‬
‫של‬ selector ‫על‬ ‫מבוסס‬
‫תוספות‬ ‫עם‬ css

‫תקינה‬ ‫בצורה‬ ‫נטענה‬ JQuery ‫שספרית‬ ‫בדיקה‬
‫הבאה‬ ‫בצורה‬ jQuery ‫הפונקציה‬ ‫בעזרת‬ ‫אחת‬ ‫פעם‬ ‫מבצעים‬ ‫הבדיקה‬ ‫את‬
<body>
<script>
if (typeof jQuery == 'undefined') {
alert('jquery not loaded ok');}
else {
alert('jquery loaded ok');}
</script>
</body>
4

JQuery ‫תחביר‬
action - ‫פעולה‬ ‫ומבצעים‬ CSS ‫מבוסס‬ selector ‫בעזרת‬ HTML ‫אלמנט/ים‬ ‫בוחרים‬ JQuery‫ב‬
: ‫הבאה‬ ‫בצורה‬ ‫נראה‬ JQuery ‫ב‬ ‫בסיסי‬ ‫משפט‬
$(selector).action()
5
‫דוגמה‬ ‫הסבר‬
$(this).hide(); ‫אותו‬ ‫ומעלים‬ ‫הקוד‬ ‫מבוצע‬ ‫בו‬ ‫האלמנט‬ ‫את‬ ‫בוחר‬
$(‘span’).hide(); ‫אותם‬ ‫ומחביא‬ span‫ה‬ ‫אלמנטי‬ ‫כל‬ ‫את‬ ‫בוחר‬
$('#idSomeP').show(); ‫אותו‬ ‫ומציג‬ idSomeP ‫של‬ id ‫עם‬ ‫אלמנט‬ ‫בוחר‬
$(“.class1”).hide(); ‫אותו‬ ‫ומחביא‬ class1 ‫של‬ class ‫עם‬ ‫האלמנטים‬ ‫כל‬ ‫את‬ ‫בוחר‬
$('p , span').fadeOut(3000); ‫מילישניות‬ 3000 ‫תוך‬ ‫אותם‬ ‫ומעלים‬ span ‫ו‬ p ‫אלמנטי‬ ‫כל‬ ‫את‬ ‫בוחר‬

JQuery ‫מאורע‬
‫בקורס‬ ‫שראינו‬ ‫כפי‬ HTML‫ה‬ ‫דף‬ ‫עם‬ ‫המשתמש‬ ‫של‬ ‫אינטראקציה‬ ‫עקב‬ ‫מתרחשים‬ ‫מאורעות‬
.Javascript
.‫מאורע‬ ‫לאותו‬ ‫מתיחסים‬ ‫הם‬ ‫אולם‬ javascript ‫ב‬ ‫משמם‬ ‫שונים‬ JQuery ‫ב‬ ‫המאורעות‬ ‫שמות‬
‫בעזרת‬ ‫מוגדרת‬ ‫היא‬ JQuery‫ב‬ ‫ואילו‬ onclick ‫בעזרת‬ js ‫ב‬ ‫הוגדרה‬ ‫אלמנט‬ ‫על‬ ‫לחיצה‬ ,‫לדוגמא‬
‫הבאה‬ ‫בצורה‬ click
$("div").click(function(){
// handling click is done here using e.g. $(selector).action()
});
click , keyup,mousedown , hover : ‫למאורעות‬ ‫דוגמה‬
6
element
selector
‫מאורע‬ ‫שם‬
handler ‫הגדרת‬
‫על‬ click ‫למאורע‬
div ‫אלמנט‬ ‫כל‬

JQuery ‫אפקטים‬
: JQuery ‫ב‬ ‫לעשות‬ ‫שניתן‬ ‫מענינים‬ actions
7
‫תיאור‬ actions
‫והסתרה‬ ‫הצגה‬ show() , hide()
‫עם‬ ‫הדרגתית‬ ‫והסתרה‬ (‫מוסתר‬ ‫למצב‬ ‫)ביחס‬ ‫הצגה‬
fade ‫אפקט‬
fadeIn() , fadeOut()
‫עם‬ ‫הדרגתית‬ ‫והסתרה‬ (‫מוסתר‬ ‫למצב‬ ‫)ביחס‬ ‫הצגה‬
slide ‫אפקט‬
slideDown(),slideUp()
‫אנימציה‬ animate() , stop()

JQuery HTML
JQuery ‫ב‬ ‫פונקציות‬ ‫בעזרת‬ HTML ‫אלמנטי‬ ‫על‬ setget ‫פעולות‬ ‫לעשות‬ ‫אפשר‬
‫לדוגמא‬ css ‫פונקצית‬ ‫בעזרת‬ ‫עיצוב‬ ‫לשנות‬ ‫אפשר‬
8
JQuery ‫פונקציה‬ Javascript ‫מאפיין‬
html() innerHTML
text() innerText
val() value

JQuery callback
‫האפקט‬ ‫לאחר‬ ‫קוד‬ ‫לבצע‬ ‫ניתן‬ . hide() ‫לדוגמא‬ jQuery ‫ב‬ ‫האפקטים‬ ‫את‬ ‫קודמים‬ ‫בשקפים‬ ‫ראינו‬
‫לדוגמא‬ callback ‫נקרא‬ ‫וזה‬
<body><p>click -> i will fadeout </p>
<script>
$(document).ready(function () {
$('p').fadeOut(3000, function () {
alert("The paragraph is now hidden after fadeOut");});});
</script>
</body>
9
‫וזה‬ callback ‫ה‬ ‫זה‬
‫ה‬ ‫שאפקט‬ ‫אחרי‬ ‫יופעל‬
‫יסתיים‬ fadeOut

JQuery callback - ‫נוספת‬ ‫הצגה‬
: ‫הבאה‬ ‫האקויולנטית‬ ‫בצורה‬ ‫כשרושמים‬ callback ‫להבין‬ ‫נוח‬ ‫לפעמים‬
var callback = function () {
alert("The paragraph is now hidden after fadeOut");
}
$('p').fadeOut(3000, callback);
10
‫לאחר‬ ‫תקרא‬ callback ‫הפונקציה‬
‫יסתיים‬ ‫שהאפקט‬

JQuery

Recommandé

Recommandé

Contenu connexe

Plus de Nathan Krasney

Plus de Nathan Krasney (11)

JQuery