ארטיקלען

JQuery, וואָס עס איז און וואָס מיר קענען טאָן מיט די דזשאַוואַסקריפּט ביבליאָטעק

jQuery איז אַ שנעל, לייטווייט און שטריך-רייַך דזשאַוואַסקריפּט ביבליאָטעק באזירט אויף דעם פּרינציפּ "שרייב ווייניקער, טאָן מער" . JQuery אַפּיס פאַרפּאָשעטערן די פאַרוואַלטונג און וישאַלט פון HTML דאָקומענטן, געשעעניש פאַרוואַלטונג, אַדינג אַנאַמיישאַן יפעקץ צו אַ וועב בלאַט. עס איז קאַמפּאַטאַבאַל מיט אַלע הויפּט בראַוזערז אַזאַ ווי קראָום, פירעפאָקס, סאַפאַרי, עדזש.

קריייטינג אַן Ajax-באזירט אַפּלאַקיישאַן ווערט זייער פּשוט און שנעל מיט jQuery.

דזשקווערי איז ערידזשנאַלי באשאפן דורך John Resig אין פרי 2006. די דזשקווערי פּרויעקט איז דערווייַל מיינטיינד און מיינטיינד דורך אַ פונאנדערגעטיילט גרופּע פון ​​דעוועלאָפּערס ווי אַן אָפֿן מקור פּרויעקט.

איר קענען שפּאָרן אַ פּלאַץ פון צייט און מי מיט jQuery. אַזוי לייג דעם פּלאַץ צו דיין פאַוואָריטעס און פאָרזעצן לייענען

וואָס איר קענען טאָן מיט jQuery

עס זענען פילע מער טינגז איר קענען טאָן מיט jQuery.

  • איר קענען לייכט אויסקלייַבן HTML בלאַט עלעמענטן, צו לייענען אָדער מאָדיפיצירן אַטריביוץ;
  • איר קענען לייכט מאַכן יפעקץ ווי ווייַזן אָדער באַהאַלטן עלעמענטן, טראַנזישאַנז, סקראָולז און אַזוי אויף;
  • איר קענען לייכט שאַפֿן קאָמפּלעקס CSS אַנאַמיישאַנז מיט ווייניקערע שורות פון קאָד;
  • איר קענען לייכט מאַניפּולירן DOM עלעמענטן און זייער אַטריביוץ;
  • איר קענען לייכט ינסטרומענט Ajax צו געבן ייסינגקראַנאַס דאַטן וועקסל צווישן קליענט און סערווער;
  • איר קענען לייכט דורכפאָר אַלע די DOM בוים צו געפֿינען קיין עלעמענט;
  • איר קענען לייכט דורכפירן קייפל אַקשאַנז אויף אַן עלעמענט מיט אַ איין שורה פון קאָד;
  • איר קענען לייכט באַקומען אָדער שטעלן די גרייס פון HTML עלעמענטן.

די רשימה טוט נישט סוף דאָרט, עס זענען פילע אנדערע קיל טינגז מיט jQuery.

די בענעפיץ פון ניצן jQuery

עס זענען עטלעכע אַדוואַנטידזשיז וואָס איר זאָל אַפּט פֿאַר ניצן jQuery:

  • שפּאָרן אַ פּלאַץ פון צייט: איר קענען שפּאָרן אַ פּלאַץ פון צייט און מי דורך ניצן jQuery ס געבויט-אין יפעקץ און סעלעקטאָרס און פאָקוס אויף אנדערע אַספּעקץ פון אַנטוויקלונג;
  • פאַרפּאָשעטערן פּראָסט דזשאַוואַסקריפּט טאַסקס - jQuery סימפּלאַפייז זייער פּראָסט דזשאַוואַסקריפּט טאַסקס. איצט איר קענען לייכט שאַפֿן שטריך-רייַך און ינטעראַקטיוו וועב זייַטלעך, מיט ווייניקערע שורות פון קאָד. דער טיפּיש בייַשפּיל איז די ימפּלאַמענטיישאַן פון Ajax צו דערפרישן די אינהאַלט פון אַ בלאַט, אָן רעפרעשינג עס;
  • סימפּליסיטי: jQuery איז זייער גרינג צו נוצן. ווער עס יז מיט אַ יקערדיק ארבעטן וויסן פון HTML, CSS און דזשאַוואַסקריפּט קענען אָנהייבן דעוועלאָפּינג מיט jQuery;
  • קאַמפּאַטאַבאַל מיט אַלע בראַוזערז: דזשקווערי איז באשאפן מיט מאָדערן בראַוזערז אין זינען און איז קאַמפּאַטאַבאַל מיט אַלע הויפּט מאָדערן בראַוזערז אַזאַ ווי קראָום, פירעפאָקס, סאַפאַרי, עדזש;
  • לעגאַמרע פריי - און דער בעסטער טייל איז אַז עס איז גאָר פריי צו אָפּלאָדירן און נוצן.

דזשקווערי אראפקאפיע

צו אָנהייבן, לאָזן אונדז ערשטער אראפקאפיע אַ קאָפּיע פון ​​​​דזשקווערי און דעמאָלט אַרייַננעמען עס אין אונדזער פּרויעקט. צוויי ווערסיעס פון jQuery זענען בארעכטיגט פֿאַר אראפקאפיע: אין א יאגעניש e ניט קאַמפּרעסט .

די ונקאָמפּרעססעד טעקע איז בעסער פּאַסיק פֿאַר אַנטוויקלונג אָדער דיבאַגינג; בשעת, די מיניפיעד און קאַמפּרעסט טעקע איז רעקאַמענדיד פֿאַר פּראָדוקציע ווייַל עס סאַוועס באַנדווידט און ימפּרוווז פאָרשטעלונג רעכט צו דער קלענערער טעקע גרייס.

מיר קענען אראפקאפיע jQuery פֿון דאָ: https://jquery.com/download/

אַמאָל איר אראפקאפיע די jQuery טעקע איר קענען זען אַז עס האט אַ js פאַרלענגערונג, דאָס איז אַ דזשאַוואַסקריפּט טעקע. אין פאַקט, JQuery איז גאָרנישט אָבער אַ דזשאַוואַסקריפּט ביבליאָטעק, אַזוי איר קענען אַרייַננעמען די jQuery טעקע אין די HTML דאָקומענט מיט דעם עלעמענט פּונקט ווי איר אַרייַננעמען רעגולער דזשאַוואַסקריפּט טעקעס.

<head>
    <title>Simple HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

געדענקט צו שטענדיק אַרייַננעמען די jQuery טעקע איידער מנהג סקריפּס; אַנדערש, די דזשקווערי אַפּיס וועט נישט זיין בארעכטיגט ווען דיין דזשקווערי קאָד פרוווט צו אַקסעס זיי.

ווי איר קען האָבן באמערקט, מיר סקיפּט די אַטריביוט אין די פריערדיקע בייַשפּיל type="text/javascript" ין די קוויטל . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiפאַרטיק אין HTML5 און אין אַלע מאָדערן בראַוזערז.

jQuery פֿון CDN

ווי אַן אָלטערנאַטיוו, איר קענען ימבעד דזשקווערי אין דיין דאָקומענט דורך פרילי בנימצא CDN (Content Delivery Network) פֿאַרבינדונגען, אויב איר'ד אלא ויסמיידן דאַונלאָודינג די טעקע.

CDNs קענען פאָרשלאָגן אַ פאָרשטעלונג מייַלע דורך רידוסינג מאַסע צייט, ווייַל זיי באַלעבאָס jQuery אויף קייפל סערווערס אַרום די וועלט, און ווען אַ באַניצער ריקוועס די טעקע, עס וועט זיין געדינט פֿון די קלאָוסאַסט סערווער.

דאָס אויך האט די מייַלע אַז אויב דיין וועב בלאַט גאַסט האט שוין דאַונלאָודיד אַ קאָפּיע פון ​​jQuery פון דער זעלביקער CDN בשעת איר באַזוכן אנדערע זייטלעך, זיי וועלן נישט האָבן צו אָפּלאָדירן עס ווידער ווייַל עס איז שוין אין זייער בלעטערער קאַש.

אין דעם פאַל איר וועט האָבן צו שרייַבן:

<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>

אין אַדישאַן צו די CDN צוגעשטעלט דורך די jquery פּרויעקט, איר קענען אַרייַננעמען jQuery דורך גוגל e מייקראָסאָפֿט cdn.

ערשטער וועב בלאַט באזירט אויף jQuery

ווען איר האָט געזען די גאָולז פון די jQuery ביבליאָטעק און ווי צו אַרייַננעמען עס אין דיין דאָקומענט, איצט איז די צייט צו נוצן jQuery.

איצט לאָזן אונדז טאָן אַ פּשוט jQuery אָפּעראַציע דורך טשאַנגינג די כעדער טעקסט קאָליר פון די פאַר קאָלירןdefiשוואַרץ צו גרין קאָליר.

<head>
    <title>My First jQuery Web Page</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#00ff00");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

אין דעם קאָד מיר האָבן דורכגעקאָכט אַ פּשוט jQuery אָפּעראַציע דורך טשאַנגינג די קאָליר פון די כעדער, ד"ה די עלעמענט ניצן די סעלעקטאָר און css () אופֿן פון די jQuery עלעמענט ווען דער דאָקומענט איז גרייט, באקאנט ווי די דאָקומענט גרייט געשעעניש. 

דזשקווערי סינטאַקס

א jQuery סטאַטעמענט יוזשאַוואַלי סטאַרץ מיט אַ דאָלאַר צייכן ( $) און ענדס מיט אַ האַלבקייַלעך ( ;).

אין דזשקווערי, דער דאָלאַר צייכן ( $) איז נאָר אַן אַליאַס פֿאַר jQuery. באַטראַכטן די פאלגענדע מוסטער קאָד וואָס דעמאַנסטרייץ די סימפּלאַסט jQuery ויסזאָגונג.

<script>
    $(document).ready(function(){

        alert("Hello I'm a JQuery sign");
    });
</script>

דער ביישפּיל פשוט דיספּלייז אַ ווארענונג אָנזאָג "Hello I'm a JQuery sign"צו דער באַניצער. זאל ס זען עטלעכע פֿעיִקייטן:

  • דער עלעמענט <script>: דזשקווערי איז נאָר אַ דזשאַוואַסקריפּט ביבליאָטעק, דזשקווערי קאָד קענען זיין געשטעלט אין דעם עלעמענט <script>, אָדער איר קענען שטעלן עס אין אַ פונדרויסנדיק דזשאַוואַסקריפּט טעקע;
  • די שורה $(document).ready(handler); איז באקאנט ווי אַ גרייט געשעעניש. וואו איז עס handler עס איז אַ פֿונקציע וואָס איז דורכגעגאנגען צו דעם אופֿן צו זיין עקסאַקיוטאַד, ווי באַלד ווי דער דאָקומענט איז גרייט, ד"ה ווען די DOM כייעראַרקי איז גאָר געבויט.

די jQuery אופֿן ready() עס איז יוזשאַוואַלי געניצט מיט אַן אַנאָנימע באַנוצערס פֿונקציע. אַזוי, די ביישפּיל אויבן קענען אויך זיין געשריבן אין סטענאָגראַפיע נאָוטיישאַן ווי דאָס:

<script>
    $(function(){
        alert("Hello I'm a JQuery sign");
    });
</script>

סעלעקטערז

ין אַ פֿונקציע איר קענען שרייַבן jQuery סטייטמאַנץ צו דורכפירן קיין קאַמף נאָך יקערדיק סינטאַקס, ווי:

$(selector).action();

וואו איז עס, $(selector) עס בייסיקלי סאַלעקץ די HTML עלעמענטן פון די DOM בוים אַזוי עס קענען זיין מאַניפּיאַלייטיד און action() צולייגן עטלעכע אַקשאַנז אויף די אויסגעקליבן עלעמענטן, אַזאַ ווי טשאַנגינג די ווערט פון די CSS פאַרמאָג, אָדער באַשטעטיקן די אינהאַלט פון די עלעמענט, עטק.

איצט לאָזן אונדז קוק אין אן אנדער בייַשפּיל וואָס שטעלט פּאַראַגראַף טעקסט:

<head>
    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
</body>
</html>

די jQuery ביישפּיל רעפערס צו די סעלעקטאָר p, און דאָס סאַלעקץ אַלע די פּאַראַגראַפס, און דער אופֿן text() שטעלן די טעקסט אינהאַלט פון דעם פּאַראַגראַף מיט "Hello World!".

דער פּאַראַגראַף טעקסט אין די פריערדיקע בייַשפּיל איז אויטאָמאַטיש ריפּלייסט ווען די דאָקומענט איז גרייט. אָבער לאָמיר זען ווי צו טאָן דאָס אין פאַל איר ווילן צו דורכפירן אַן אַקציע איידער איר לויפן די jQuery קאָד, צו פאַרבייַטן דעם טעקסט פון דעם פּאַראַגראַף. 

לאמיר באטראכטן איין לעצטע ביישפיל:


<head>

    <title>jQuery Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.6.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">Replace Text</button>
</body>
</html>

אין דעם בייַשפּיל, די פּאַראַגראַף טעקסט איז ריפּלייסט בלויז ווען אַ קליק געשעעניש אַקערז אויף די קנעפּל "Replace Text", וואָס פשוט מיטל ווען אַ באַניצער גיט דעם קנעפּל.

סעלעקטינג זאכן לויט ID

איר קענט נוצן די ID סעלעקטאָר צו אויסקלייַבן אַ איין נומער מיט די יינציק שייַן אויף דעם בלאַט.

פֿאַר בייַשפּיל, די פאלגענדע jQuery קאָד וועט אויסקלייַבן און הויכפּונקט אַן עלעמענט מיט די ID אַטריביוט id="markid", ווען דער דאָקומענט איז גרייט.

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>
סעלעקטינג עלעמענטן מיט קלאַס נאָמען

די קלאַס סעלעקטאָר קענען ווערן גענוצט צו אויסקלייַבן עלעמענטן מיט אַ ספּעציפיש קלאַס.

פֿאַר בייַשפּיל, די פאלגענדע jQuery קאָד וועט אויסקלייַבן און הויכפּונקט עלעמענטן מיט די קלאַס אַטריביוט class="markclass", ווען דער דאָקומענט איז גרייט.

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>
סעלעקטינג זאכן לויט נאָמען

די נומער סעלעקטאָר קענען ווערן גענוצט צו אויסקלייַבן זאכן לויט נומער נאָמען.

פֿאַר בייַשפּיל, די פאלגענדע jQuery קאָד וועט אויסקלייַבן און הויכפּונקט אַלע די פּאַראַגראַף, ד"ה די עלעמענטן "<p>" פון דעם דאָקומענט ווען עס איז גרייט.

כידעש נוזלעטער
דו זאלסט נישט פאַרפירן די מערסט וויכטיק נייַעס וועגן כידעש. צייכן אַרויף צו באַקומען זיי דורך E- בריוו.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
סעלעקציע פון ​​עלעמענטן לויט אַטריביוט

איר קענען נוצן די אַטריביוט סעלעקטאָר צו אויסקלייַבן אַן עלעמענט באזירט אויף איינער פון זייַן HTML אַטריביוץ, אַזאַ ווי אַ לינק אַטריביוט targetאָדער די אַטריביוט פון אַ אַרייַנשרייַב type, א.א.וו.

פֿאַר בייַשפּיל, די פאלגענדע דזשקווערי קאָד וועט אויסקלייַבן און הויכפּונקט אַלע טעקסט ינפּוץ, אַזאַ ווי עלעמענטן "<input>" מיט type="text", ווען דער דאָקומענט איז גרייט.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
עלעמענט סעלעקציע דורך קאַמפּאַונד CSS סעלעקטאָר

איר קענט אויך פאַרבינדן CSS סעלעקטאָרס צו מאַכן דיין סעלעקציע אפילו מער גענוי.

פֿאַר בייַשפּיל, איר קענען פאַרבינדן די קלאַס סעלעקטאָר מיט אַן עלעמענט סעלעקטאָר צו געפֿינען עלעמענטן אין אַ דאָקומענט וואָס האָבן אַ זיכער טיפּ און קלאַס.

<script>
$(document).ready(function(){
    // Highlight only paragraph elements with class mark
    $("p.mark").css("background", "yellow");
  
    // Highlight only span elements inside the element with ID mark
    $("#mark span").css("background", "yellow");
  
    // Highlight li elements inside the ul elements
    $("ul li").css("background", "red");
  
    // Highlight li elements only inside the ul element with id mark
    $("ul#mark li").css("background", "yellow");
  
    // Highlight li elements inside all the ul element with class mark
    $("ul.mark li").css("background", "green");
  
    // Highlight all anchor elements with target blank
    $('a[target="_blank"]').css("background", "yellow");
});
</script>
דזשקווערי מנהג סעלעקטאָר

אין דערצו צו די סעלעקטאָרס definiti, jQuery גיט זיין אייגענע מנהג סעלעקטאָר צו פאַרבעסערן די קייפּאַבילאַטיז פון סעלעקטינג עלעמענטן אויף אַ בלאַט.

<script>
$(document).ready(function(){
    // Highlight table rows appearing at odd places
    $("tr:odd").css("background", "yellow");
  
    // Highlight table rows appearing at even places
    $("tr:even").css("background", "orange");
  
    // Highlight first paragraph element
    $("p:first").css("background", "red");
  
    // Highlight last paragraph element
    $("p:last").css("background", "green");
  
    // Highlight all input elements with type text inside a form
    $("form :text").css("background", "purple");
  
    // Highlight all input elements with type password inside a form
    $("form :password").css("background", "blue");
  
    // Highlight all input elements with type submit inside a form
    $("form :submit").css("background", "violet");
});
</script>

געשעענישן

געשעענישן זענען אָפט טריגערד דורך באַניצער ינטעראַקשאַן מיט די וועב בלאַט, אַזאַ ווי ווען קליקינג אַ לינק אָדער קנעפּל, אַרייַן טעקסט אין אַ אַרייַנשרייַב קעסטל אָדער טעקסט געגנט, מאַכן אַ סעלעקציע אין אַ סעלעקציע קעסטל, דריקן אַ שליסל אויף די קלאַוויאַטור, מאַך די מויז טייַטל אאז"ו ו אין עטלעכע קאַסעס, דער בלעטערער זיך קענען צינגל געשעענישן, אַזאַ ווי בלאַט לאָדן און אראפקאפיע געשעענישן.

jQuery ימפּרוווז די יקערדיק געשעעניש האַנדלינג מעקאַניזאַמז דורך פאָרשלאָגן געשעעניש מעטהאָדס פֿאַר רובֿ געבוירן בלעטערער געשעענישן, עטלעכע פון ​​​​די מעטהאָדס זענען ready(), click(), keypress(), focus(), blur(), change(), א.א.וו.

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

אין אַלגעמיין, געשעענישן קענען זיין קלאַסאַפייד אין פיר הויפּט גרופּעס: 

  • מויז געשעענישן,
  • קלאַוויאַטור געשעענישן,
  • events module ed
  • דאָקומענט / פֿענצטער געשעענישן. 

מויז געשעענישן

א מויז געשעעניש איז טריגערד ווען דער באַניצער קליקס אויף אַ נומער, מאָוועס די מויז טייַטל, אאז"ו ו.

דאָ זענען עטלעכע קאַמאַנלי געוויינט jQuery מעטהאָדס צו שעפּן מויז געשעענישן.

דער שיטה click()

דער אופֿן click() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו די אויסגעקליבן עלעמענטן פֿאַר די געשעעניש "click". די לינגקט פֿונקציע עקסאַקיוטאַד ווען דער באַניצער קליקס אויף דעם נומער. די פאלגענדע בייַשפּיל וועט באַהאַלטן די עלעמענטן <p> אויף אַ בלאַט ווען קליקט.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
דער שיטה dblclick()

דער אופֿן dblclick() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו די אויסגעקליבן עלעמענטן פֿאַר די געשעעניש "dblclick". די לינגקט פֿונקציע עקסאַקיוטאַד ווען דער באַניצער טאָפּל קליקס דעם נומער. די פאלגענדע בייַשפּיל וועט באַהאַלטן די עלעמענטן <p> ווען איר טאָפּל-גיט זיי.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
דער שיטה hover()

דער אופֿן hover() צוטשעפּען איין אָדער צוויי געשעעניש האַנדלער פאַנגקשאַנז צו אויסגעקליבן עלעמענטן וואָס ויספירן ווען די מויז טייַטל באוועגט אין און אויס פון עלעמענטן. דער ערשטער פֿונקציע לויפט ווען דער באַניצער לייגט די מויז טייַטל איבער אַ נומער, בשעת די צווייטע פֿונקציע לויפט ווען דער באַניצער רימוווז די מויז טייַטל פון דעם נומער.

די פאלגענדע בייַשפּיל וועט הויכפּונקט זאכן <p> ווען איר שטעלן דעם לויפֿער אויף עס, דער הויכפּונקט וועט זיין אַוועקגענומען ווען איר אַראָפּנעמען דעם לויפֿער.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
דער שיטה mouseenter()

דער אופֿן mouseenter() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו די אויסגעקליבן עלעמענטן וואָס איז עקסאַקיוטאַד ווען די מויז גייט אריין אַן עלעמענט. די פאלגענדע ביישפּיל וועט לייגן קלאַס כיילייטינג צו דעם עלעמענט <p> ווען איר שטעלן דעם לויפֿער איבער אים.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
דער שיטה mouseleave()

דער אופֿן mouseleave() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו אויסגעקליבן זאכן וואָס לויפט ווען די מויז בלעטער אַ נומער. די פאלגענדע בייַשפּיל וועט אַראָפּנעמען די קלאַס הויכפּונקט פון דעם עלעמענט <p> ווען איר אַראָפּנעמען די לויפֿער פון עס.

<script>
$(document).ready(function(){
    $("p").mouseleave(function(){
        $(this).removeClass("highlight");
    });
});
</script>

קלאַוויאַטור געשעענישן

א קלאַוויאַטור געשעעניש איז אויפשטיין ווען דער באַניצער דריקט אָדער ריליסיז אַ שליסל אויף די קלאַוויאַטור. זאל ס קוק אין עטלעכע קאַמאַנלי געוויינט jQuery מעטהאָדס צו שעפּן קלאַוויאַטור געשעענישן.

דער שיטה keypress()

דער אופֿן keypress() אַטאַטשיז אַ געשעעניש האַנדלינג פֿונקציע צו אויסגעקליבן עלעמענטן (טיפּיקלי פאָרעם קאָנטראָלס) וואָס לויפט ווען דער בלעטערער נעמט קלאַוויאַטור אַרייַנשרייַב פון די באַניצער. די פאלגענדע בייַשפּיל וועט ווייַזן אַ אָנזאָג ווען די געשעעניש איז טריגערד keypress און ווי פילע מאָל עס איז טריגערד ווען איר דריקן די שליסל אויף דיין קלאַוויאַטור.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keypress(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

די קייפּרעס געשעעניש איז ענלעך צו די קיידאַון געשעעניש, אַחוץ די מאָדיפיער און ניט-פּרינטינג שליסלען אַזאַ ווי Shift, Esc, Backspace אָדער Delete, פייַל קיז, עטק. זיי פייערן קיידאַון געשעענישן אָבער נישט קייפּרעסס געשעענישן.

דער שיטה keydown()

דער אופֿן keydown() אַטאַטשיז אַ געשעעניש האַנדלינג פֿונקציע צו אויסגעקליבן זאכן (טיפּיקלי פאָרעם קאָנטראָלס) וואָס איז עקסאַקיוטאַד ווען דער באַניצער ערשטער דריקן אַ שליסל אויף די קלאַוויאַטור. די פאלגענדע בייַשפּיל וועט ווייַזן אַ אָנזאָג ווען די געשעעניש איז טריגערד keydown און ווי פילע מאָל עס איז טריגערד ווען איר דריקן די שליסל אויף דיין קלאַוויאַטור.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keydown(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>
דער שיטה keyup()

דער אופֿן keyup() צוטשעפּען אַ געשעעניש האַנדלינג פֿונקציע צו אויסגעקליבן עלעמענטן (טיפּיקלי פאָרעם קאָנטראָלס) וואָס איז עקסאַקיוטאַד ווען דער באַניצער ריליסיז אַ שליסל אויף די קלאַוויאַטור. די פאלגענדע בייַשפּיל וועט ווייַזן אַ אָנזאָג ווען די געשעעניש איז טריגערד keyup און ווי פילע מאָל עס איז טריגערד ווען איר דריקן און מעלדונג אַ שליסל אויף דיין קלאַוויאַטור.

<script>
$(document).ready(function(){
    var i = 0;
    $('input[type="text"]').keyup(function(){
        $("span").text(i += 1);
        $("p").show().fadeOut();
    });
});
</script>

פאָרעם געשעענישן

א פאָרעם געשעעניש איז טריגערד ווען אַ פאָרעם קאָנטראָל נעמט אָדער פארלירט פאָקוס, אָדער ווען דער באַניצער ענדערונגען אַ פאָרעם קאָנטראָל ווערט, אַזאַ ווי טייפּינג טעקסט אין אַ טעקסט אַרייַנשרייַב, סעלעקטינג אַן אָפּציע אין אַ אויסקלייַבן קעסטל, אאז"ו ו. דאָ זענען עטלעכע קאַמאַנלי געוויינט jQuery מעטהאָדס צו שעפּן פאָרעם געשעענישן.

דער שיטה change()

דער אופֿן change() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו עלעמענטן <input> און איז עקסאַקיוטאַד ווען זייַן ווערט ענדערונגען. די פאלגענדע בייַשפּיל וועט ווייַזן אַ ווארענונג אָנזאָג ווען סעלינג אַן אָפּציע אין די פאַלן אַראָפּ סעלעקציע קעסטל.

<script>
$(document).ready(function(){
    $("select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>

פֿאַר קליקינג באָקסעס, טשעק באָקסעס, און ראַדיאָ קנעפּלעך, די געשעעניש פירט גלייך ווען דער באַניצער מאכט אַ מויז סעלעקציע, אָבער פֿאַר טעקסט אַרייַנשרייַב און טעקסט שטח די געשעעניש פירז נאָך די עלעמענט פארלירט פאָקוס.

דער שיטה focus()

דער אופֿן focus() אַטאַטשיז אַ געשעעניש האַנדלער פֿונקציע צו אויסגעקליבן עלעמענטן (טיפּיקלי קאָנטראָלס און פאָרעם ביינדינגז) וואָס עקסאַקיוץ ווען עס געץ פאָקוס. די פאלגענדע בייַשפּיל וועט ווייַזן אַ אָנזאָג ווען טעקסט אַרייַנשרייַב נעמט פאָקוס.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
דער שיטה blur()

דער אופֿן blur() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו פאָרעם עלעמענטן אַזאַ ווי <input><textarea><select> וואָס איז עקסאַקיוטאַד ווען עס פארלירט פאָקוס. די פאלגענדע בייַשפּיל וועט ווייַזן אַ אָנזאָג ווען די טעקסט אַרייַנשרייַב פארלירט פאָקוס.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
דער שיטה submit()

דער אופֿן submit() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו עלעמענטן <form> וואָס לויפט ווען דער באַניצער פרוווט צו פאָרלייגן אַ פאָרעם. די פאלגענדע בייַשפּיל וועט ווייַזן אַ אָנזאָג באזירט אויף די ווערט אריין ווען איר פּרווון צו פאָרלייגן די פאָרעם.

<script>
$(document).ready(function(){
    $("form").submit(function(event){
        var regex = /^[a-zA-Z]+$/;
        var currentValue = $("#firstName").val();
        if(regex.test(currentValue) == false){
            $("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
            // Preventing form submission
            event.preventDefault();
        }
    });
});
</script>

דאָקומענט / פֿענצטער געשעענישן

די געשעענישן זענען אויך פייערד אין אַ סיטואַציע ווו די DOM (Document Object Model) בלאַט איז גרייט אָדער ווען דער באַניצער רעסיזעס אָדער סקראָללס די בלעטערער פֿענצטער, אאז"ו ו. דאָ זענען עטלעכע קאַמאַנלי געוויינט jQuery מעטהאָדס צו שעפּן דעם טיפּ פון געשעעניש.

דער שיטה ready()

דער אופֿן ready() ספּעציפיצירט אַ פֿונקציע צו ויספירן ווען די DOM איז גאָר לאָודיד.

די פאלגענדע בייַשפּיל וועט פאַרבייַטן פּאַראַגראַף טעקסט ווי באַלד ווי די DOM כייעראַרקי איז גאָר געבויט און גרייט צו זיין מאַניפּיאַלייטיד.

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
דער שיטה resize()

דער אופֿן resize() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו די פֿענצטער עלעמענט וואָס לויפט ווען די גרייס פון דעם בלעטערער פֿענצטער ענדערונגען.

די פאלגענדע ביישפּיל וועט ווייַזן די קראַנט ברייט און הייך פון דעם בלעטערער פֿענצטער ווען איר פּרובירן צו רעסיזע עס דורך שלעפּן די עקן.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
דער שיטה scroll()

דער אופֿן scroll() צוטשעפּען אַ געשעעניש האַנדלער פֿונקציע צו די פֿענצטער אָדער צו די iframe און סקראָלאַבלע ייטאַמז וואָס לויפט ווען די מעגילע שטעלע פון ​​די נומער ענדערונגען.

די פאלגענדע בייַשפּיל וועט ווייַזן אַ אָנזאָג ווען סקראָללינג די בלעטערער פֿענצטער.

<script>
$(document).ready(function(){
    $(window).scroll(function() {
        $("p").show().fadeOut("slow");
    });
});
</script>

Ercole Palmeri

.

כידעש נוזלעטער
דו זאלסט נישט פאַרפירן די מערסט וויכטיק נייַעס וועגן כידעש. צייכן אַרויף צו באַקומען זיי דורך E- בריוו.

לעצטע ארטיקלען

Veeam פֿעיִקייטן די מערסט פולשטענדיק שטיצן פֿאַר ראַנסאָמוואַרע, פֿון שוץ צו ענטפער און אָפּזוך

Coveware דורך Veeam וועט פאָרזעצן צו צושטעלן ענטפער באַדינונגס פֿאַר סייבער יקסטאָרשאַן אינצידענט. קאָוועוואַרע וועט פאָרשלאָגן פאָרענסיקס און רימעדייישאַן קייפּאַבילאַטיז ...

קסנומקס אפריל קסנומקס

גרין און דיגיטאַל רעוואלוציע: ווי פּרידיקטיוו וישאַלט איז טראַנספאָרמינג די אָיל און גאַז אינדוסטריע

פּרידיקטיוו וישאַלט איז רעוואַלושאַנייזינג די ייל & גאַז סעקטאָר, מיט אַן ינאַווייטיוו און פּראָואַקטיוו צוגאַנג צו פאַבריק פאַרוואַלטונג.…

קסנומקס אפריל קסנומקס

וק אַנטיטראַסט רעגולאַטאָר רייזאַז ביגטעטש שרעק איבער GenAI

די UK CMA האט ארויס אַ ווארענונג וועגן ביג טעק ס נאַטור אין די קינסטלעך סייכל מאַרק. דאָרט…

קסנומקס אפריל קסנומקס

Casa Green: ענערגיע רעוואָלוציע פֿאַר אַ סאַסטיינאַבאַל צוקונפֿט אין איטאליע

די "קאַסע גרין" דעקרעט, פארמולירט דורך די אייראפעישע יוניאַן צו פאַרבעסערן די ענערגיע עפעקטיווקייַט פון בנינים, האט פארענדיקט זיין לעגיסלאַטיווע פּראָצעס מיט ...

קסנומקס אפריל קסנומקס

לייענען כידעש אין דיין שפּראַך

כידעש נוזלעטער
דו זאלסט נישט פאַרפירן די מערסט וויכטיק נייַעס וועגן כידעש. צייכן אַרויף צו באַקומען זיי דורך E- בריוו.

גיי אונדז