jquery - jquery-ui - Css המשך - JS המשך

jquery

jQuery זו ספרייה של JavaScript שיכולה לייצר הרבה פונקציונליות במעט קוד

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

כמובן שעם jQuery נוכל גם לשנות את ה CSS של האלמנטים בדף – או להגדיר

לדוגמה, נניח שיש לנו דף HTML המכיל אלמנט div בשם yelloDiv שמכיל טקסט כלשהו הקוד הבא ישנה את צבע הרקע של אובייקט ה- div בעל הזיהוי "yellowDiv" לצבע צהוב בעזרת JavaScript סטנדרטי:

var theDiv = document.getElementById("yellowDiv");

theDiv.style.backgroundColor = "yellow";

לעומת זאת, אותה פעולה ב- jQuery תראה כך:

$("#yellowDiv").css({ "background-color": "yellow" });

ניתן לראות שהכתיבה קצרה ופשוטה יותר, וכן קלה יותר להבנה

Reference

ע"מ להשתמש ב jquery נדרש להוסיף הפניה (reference) לקובץ הקוד של jQuery (ספרייה) - את הקובץ ניתן להוריד מהאינטרנט ולשמור אותו כחלק מקבצי האתר שלנו.

>script src="jquery.js "></script>

דוג' לפקודה בסיסית

$(document).ready(function(){

$("#begin_button").click(function(){

    $(location).attr('href','submarine1.html');

})

})

הסבר

$ -  כל פקודה תתחיל עם סימן ה-$ - השימוש בסימן $ הוא קיצור לשימוש באובייקט jQuery  לחילופין ניתן לכתוב

  jQuery(document).ready(function ()

 

Ready – רק אחרי שהמסמך נטען - בניגוד לOnload  – שממתין עד שיעלה כל הדף כולל המקורות (תמונות\קבצים) Ready – אומר שהסקריפט ירוץ אחרי שכל האלמנטים (DOM) נטענו 

שורה 2 – כשילחצו על האלמנט שכתבנו תריץ פונקציה (אנונימית) שנמצאת בשורה 3 

סלקטור

הסלקטורים בעצם מאפשרים לנו לבחור אלמנטים מתוך ה-DOM (דף האינטרנט) ללא מאמץ 

ID – לבחירת אלמנט באמצעות id נשתמש בסולמית (#) ואז שם ה-id,

Class – לבחירת קלאס (אוסף אלמנטים) במקום # נשים נקודה (.)

Element – לבחירת כל האלמנטים מאותו הסוג לדוג' כל הכותרת נכתוב את שם האלמנט במרכאות

$("h1").click(function () {

ניתן לשלב כמה סלקטורים עם פסיק בניהם

$("p, ul, #example").click(function () {

דוג' נוספת

   $("#h1").css({color: "red"})

תשתמש ב jQuery  על אלמנט עם הID H1  - ותבצע עליו פקודת  css

This

This = האובייקט שקרא לפונקציה. הגדרנו מספ' כפתורים עם אותו class  וכשלוחצים על אחד מהם הוא this

בדג' יש אובייקט בשם images ואנחנו משנים את המאפיינים שלו  שה src  יהיה הID  של האובייקט שנלחץ + jpg

 $("#images").attr({src: this.id+".jpg"})

יצירת אלמנט

ב js

var new Div = document.createElement("div");

לעומת זאת בjQuery  ניתן לייצר אובייקט ללא צורך בפקודה$("<div/>") =   

.appendTo("body") – תכניס את האובייקט שיצרת לתוך האלמנט שצוין

הפונקציה ()css

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

background-image:url("background_submarine.jpg"); - תמונת רקע לדף 

location

הפניה לדף חדש – לפי המאפיינים שהוזנו

בדוג' בלחיצה על כפותר תופעל הפונקציה שתעביר לדף אחר

$(document).ready(function(){

$("#begin_button").click(function(){

    $(location).attr('href','submarine1.html');

jquery-ui

ספרייה נוספת של JQ המשמשת בעיקר לאפקטים והנפשות

ניתן לבצע הפניה לקובץ כמו שביצענו לקובץ JQ  הרגיל אך זה לא מומלץ מכיוון שהקובץ מאוד גדול וטעינת הקובץ לאתר תגרום לאתר לעלות לאט לכן נבצע הפניה לאתר של הקובץ  

<script src=https://code.jquery.com/ui/1.12.1/jquery-ui.js> </script>

-    Hide/show

באמצעות קוד js ניתן להסתיר או להציג אלמנטים על הדף  הJQ  מאפשר לעשות את זה באפקט

דוג – הסתרה בצורה סולידית ישירות לצד שמאל (או up\right) במהירות של 1000 מילישניות (שניה אחת)

דוג' 2 – שימוש באפקט מלהיב

 

 $("#images").hide("slide",{ direction: "left"}, 1000)

    $("#show").show("explode", 1000)

Css המשך

כפי שלמדנו בעבר Css  זוהי שפה לעיצוב הדף - HTML משמשת להגדרת מבנה התוכן. CSS משמשת לעיצוב תוכן מובנה.

יש מספר דרכים לממש את העיצוב

1.              In-Line (בתוך-השורה (– בתוך התג פתיחה של האובייקט נגדיר את העיצוב באמצעות המאפיין style

<h3 style="background-color:aqua;">

2.              Internal פנימי – פתיחת מקטע <style> - ב head ושם להגדיר את העיצוב בצורה מרוכזת עבור כל האלמנטים

3.               Externalחיצוני - קובץ נפרד בסיומת CSS עם הפניה מתוך דף הHTML

השיטה השלישית היא המומלצת ביותר מכיוון שקובץ אחד משפיע על מספר דפים וכך בשינוי אחד נוכל לשנות בכל המערכת

select3.setAttribute("size", 5);

ביצירת select ניתן להגדיר כמה שורות יוצגו למשתמש ללא צורך בגלילה – שאר השורות יופיעו לאחר גלילת הרשימה 

background-repeat :no-repeat  - כברירת מחדל התמונה מתחילה מהפינה השמאלית של האלמנט ובמידה והתמונה לא בגודל של המסך היא תיחתך או תחזור על עצמה  

  position: absolute; - בבניית הדף הדפדפן בונה את האלמנטים לפי הסדר – הפקודה הזאת מנתקת את האלמנט מזרימת עבודה של הדף וכך נוכל למקם את האלמנט איפה שאנחנו רוצים

 

    display: none; - אובייקט שנרצה להציג בהמשך לפי קוד נגדיר אותו כלא נראה ובהמשך נציג אותו

הסתרה בקוד של JQ      באמצעות פקודת CSS

 $("#image").css({ display: "none" });

JS המשך

setTimeout – קריאה לפונקציה אחרת אחרי X  ז מן 

במידה ונכניס את הפונקציה לתוך משתנה נוכל לבצע פעולה של הפסקה על הפונקציה

timeout = setTimeout(randomColor, 300);

clearTimeout – הפסק את הפונקציה

option.addEventListener('click', function() {

addEventListener – הוספת אפשרות להגיב לארוע לאלמנט רגיל

כמו שיוצרים כפתור – לוקחים אלמנט מכל סוג ומוסיפים לו את האפשרות להאזנה לאירועים

               

Class

לכל אלמנט יש ID ייחודי שדרכו ניתן לאתר אותו בדף ולבצע עליו שינויים Class מאפשר להגדיר מחלקה של אלמנטים מאותו הסוג לחבילה אחת ע"מ לבצע עליהם שינויים\הגדרות בצורה מרוכזת

>div class="button_div" id="button_div1"></div<

>div class="button_div" id="button_div2"></div<

כשנגדיר עיצוב ל button_div זה ישפיע על כל האלמנטים שהוגדרו ב Class

Border – הגדרת מסגרת לאלמנט

border: solid 2px white;

  

overflow – במידה והתוכן שהכנסנו לתוך האלמנט גדול יותר מהאלמנט ב=כברירת מחדל הוא גולש החוצה. באמצעות הפקודה overflow נגדיר אפשריות אחרות 

Hidden – תסתיר את התוכן העודף

Scroll – התוכן יוצג לפי גודל האלמנט אך עם אפשרות גלילה.

overflow-y:scroll – הגלילה תהיה כלפי מטה (ציר Y/z)