Ìwé

JQuery, kini o jẹ ati ohun ti a le ṣe pẹlu ikawe JavaScript

jQuery jẹ iyara, iwuwo fẹẹrẹ ati ẹya-ara-ọlọrọ JavaScript ti o da lori ipilẹ naa "Kọ kere si, ṣe diẹ sii" . JQuery API jẹ irọrun iṣakoso ati itọju awọn iwe HTML, iṣakoso iṣẹlẹ, fifi awọn ipa ere idaraya kun oju-iwe wẹẹbu kan O ni ibamu pẹlu gbogbo awọn aṣawakiri pataki bii Chrome, Firefox, Safari, Edge.

Ṣiṣẹda ohun elo orisun Ajax di irọrun pupọ ati iyara pẹlu jQuery.

jQuery ni akọkọ ti a ṣẹda nipasẹ John Resig ni ibẹrẹ 2006. Ise agbese jQuery ti wa ni itọju lọwọlọwọ ati itọju nipasẹ ẹgbẹ ti o pin kaakiri bi iṣẹ akanṣe orisun ṣiṣi.

O le ṣafipamọ akoko pupọ ati igbiyanju pẹlu jQuery. Nitorinaa ṣafikun aaye yii si awọn ayanfẹ rẹ ki o tẹsiwaju kika

Ohun ti o le se pẹlu jQuery

Ọpọlọpọ awọn nkan diẹ sii ti o le ṣe pẹlu jQuery.

  • O le ni rọọrun yan awọn eroja oju-iwe HTML, lati ka tabi yipada awọn abuda;
  • O le ni rọọrun ṣẹda awọn ipa bii iṣafihan tabi tọju awọn eroja, awọn iyipada, awọn yipo ati bẹbẹ lọ;
  • O le ni rọọrun ṣẹda awọn ohun idanilaraya CSS eka pẹlu awọn laini koodu diẹ;
  • O le ni rọọrun ṣe afọwọyi awọn eroja DOM ati awọn abuda wọn;
  • O le ni rọọrun ṣe Ajax lati ṣe paṣipaarọ data asynchronous laarin alabara ati olupin;
  • O le ni rọọrun kọja gbogbo igi DOM lati wa eyikeyi nkan;
  • O le ni rọọrun ṣe awọn iṣe lọpọlọpọ lori nkan kan pẹlu laini koodu kan;
  • O le ni rọọrun gba tabi ṣeto iwọn awọn eroja HTML.

Awọn akojọ ko ni pari nibẹ, nibẹ ni o wa ọpọlọpọ awọn miiran itura ohun ti o le se pẹlu jQuery.

Awọn anfani ti lilo jQuery

Awọn anfani pupọ lo wa idi ti ọkan yẹ ki o jade fun lilo jQuery:

  • Fi akoko pipọ pamọ: O le ṣafipamọ akoko pupọ ati igbiyanju nipa lilo awọn ipa-itumọ ti jQuery ati awọn ayanfẹ ati idojukọ lori awọn ẹya miiran ti idagbasoke;
  • Ṣe irọrun awọn iṣẹ-ṣiṣe JavaScript ti o wọpọ - jQuery jẹ ki awọn iṣẹ-ṣiṣe JavaScript ti o wọpọ di irọrun pupọ. Bayi o le ni rọọrun ṣẹda ẹya-ara-ọlọrọ ati awọn oju-iwe wẹẹbu ibaraenisepo, pẹlu awọn laini koodu diẹ. Apeere aṣoju jẹ imuse ti Ajax lati sọ akoonu ti oju-iwe kan sọtun, laisi itunu rẹ;
  • Ayedero: jQuery rọrun pupọ lati lo. Ẹnikẹni ti o ni oye iṣẹ ipilẹ ti HTML, CSS, ati JavaScript le bẹrẹ idagbasoke pẹlu jQuery;
  • Ni ibamu pẹlu gbogbo awọn aṣawakiri: jQuery ni a ṣẹda pẹlu awọn aṣawakiri ode oni ni lokan ati pe o ni ibamu pẹlu gbogbo awọn aṣawakiri ode oni pataki bi Chrome, Firefox, Safari, Edge;
  • Egba Ọfẹ - Ati apakan ti o dara julọ ni pe o ni ọfẹ ọfẹ lati ṣe igbasilẹ ati lo.

jQuery gbigba lati ayelujara

Lati bẹrẹ, jẹ ki a kọkọ ṣe igbasilẹ ẹda jQuery kan lẹhinna fi sii ninu iṣẹ akanṣe wa. Awọn ẹya meji ti jQuery wa fun igbasilẹ: ni iyara e ko fisinuirindigbindigbin .

Faili ti ko ni iṣipopada dara julọ fun idagbasoke tabi n ṣatunṣe aṣiṣe; lakoko, faili ti o dinku ati fisinuirindigbindigbin ni a ṣe iṣeduro fun iṣelọpọ nitori pe o fipamọ bandiwidi ati ilọsiwaju iṣẹ nitori iwọn faili kekere.

A le ṣe igbasilẹ jQuery lati ibi: https://jquery.com/download/

Ni kete ti o ba ṣe igbasilẹ faili jQuery o le rii pe o ni itẹsiwaju js, ie o jẹ faili JavaScript kan. Ni otitọ JQuery kii ṣe nkankan bikoṣe iwe-ikawe JavaScript, nitorinaa o le fi faili jQuery sinu iwe HTML pẹlu eroja. gẹgẹ bi o ṣe pẹlu awọn faili JavaScript deede.

<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>

Ranti nigbagbogbo pẹlu faili jQuery ṣaaju awọn iwe afọwọkọ aṣa; bibẹẹkọ, awọn jQuery API kii yoo wa nigbati koodu jQuery rẹ gbiyanju lati wọle si wọn.

Bi o ṣe le ṣe akiyesi, a fo abuda naa ni apẹẹrẹ ti tẹlẹ type="text/javascript" inu tag . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiti pari ni HTML5 ati ni gbogbo awọn aṣawakiri ode oni.

jQuery lati CDN

Gẹgẹbi yiyan, o le fi jQuery sinu iwe rẹ nipasẹ awọn ọna asopọ CDN ti o wa larọwọto (Nẹtiwọki Ifijiṣẹ Akoonu), ti o ba fẹ kuku yago fun gbigba faili naa.

Awọn CDN le funni ni anfani iṣẹ nipasẹ idinku akoko fifuye, nitori wọn gbalejo jQuery lori awọn olupin pupọ ni ayika agbaye, ati nigbati olumulo kan ba beere faili naa, yoo wa lati ọdọ olupin to sunmọ.

Eyi tun ni anfani pe ti olubẹwo oju-iwe wẹẹbu rẹ ti ṣe igbasilẹ ẹda jQuery tẹlẹ lati CDN kanna lakoko ti o ṣabẹwo si awọn aaye miiran, wọn kii yoo ni lati ṣe igbasilẹ lẹẹkansii nitori o ti wa tẹlẹ ninu kaṣe aṣawakiri wọn.

Ni ọran yii iwọ yoo ni lati kọ:

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

Ni afikun si CDN ti a pese nipasẹ iṣẹ akanṣe jquery, o le pẹlu jQuery nipasẹ Google e Microsoft cdn.

Oju-iwe wẹẹbu akọkọ ti o da lori jQuery

Lẹhin ti o ti rii awọn ibi-afẹde ti ile-ikawe jQuery ati bii o ṣe le ṣafikun rẹ sinu iwe rẹ, ni bayi ni akoko lati fi jQuery sinu adaṣe.

Bayi jẹ ki a ṣe iṣiṣẹ jQuery ti o rọrun nipa yiyipada awọ ọrọ akọsori lati awọ iṣaajudefinished dudu to alawọ ewe awọ.

<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>

Ninu koodu a ṣe iṣiṣẹ jQuery ti o rọrun nipa yiyipada awọ ti akọsori ie ano lilo jQuery element’s selector ati css () ọna nigbati iwe ti šetan, mọ bi iṣẹlẹ setan iwe. 

jQuery sintasi

Gbólóhùn jQuery maa n bẹrẹ pẹlu ami dola ( $) o si pari pẹlu semicolon ( ;).

Ni jQuery, aami dola ( $) jẹ inagijẹ fun jQuery nikan. Wo koodu apẹẹrẹ atẹle ti n ṣe afihan alaye jQuery ti o rọrun julọ.

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

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

Apẹẹrẹ n ṣafihan ifiranṣẹ ikilọ kan “Hello I'm a JQuery sign” si olumulo. Jẹ ki a wo diẹ ninu awọn ẹya:

  • Eroja <script>: jQuery jẹ iwe-ikawe JavaScript nikan, koodu jQuery ni a le gbe sinu eroja <script>, tabi o le fi sii sinu faili JavaScript ita;
  • Ila naa $(document).ready(handler); ni a mọ bi iṣẹlẹ ti o ṣetan. Nibo ni o wa handler o jẹ iṣẹ kan ti o kọja si ọna lati ṣiṣẹ, ni kete ti iwe-ipamọ ba ti ṣetan, ie nigbati a ti kọ ilana DOM patapata.

Ọna jQuery ready() a maa n lo pẹlu iṣẹ ailorukọ kan. Nitorinaa, apẹẹrẹ ti o wa loke tun le kọ ni akiyesi kukuru bi eleyi:

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

Awọn yiyan

Ninu iṣẹ kan o le kọ awọn alaye jQuery lati ṣe eyikeyi iṣe ni atẹle sintasi ipilẹ, bii:

$(selector).action();

Nibo ni o wa, $(selector) o yan awọn eroja HTML lati igi DOM ki o le ṣe ifọwọyi ati action() lo diẹ ninu awọn iṣe lori awọn eroja ti o yan, gẹgẹbi iyipada iye ohun-ini CSS, tabi ṣeto akoonu ti eroja, ati bẹbẹ lọ.

Bayi jẹ ki a wo apẹẹrẹ miiran ti o ṣeto ọrọ paragirafi:

<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>

Apẹẹrẹ jQuery tọka si oluyan p, ati pe eyi yan gbogbo awọn ìpínrọ, lẹhinna ọna naa text() ṣeto akoonu ọrọ ti paragirafi pẹlu "Hello World!".

Ọrọ paragira ninu apẹẹrẹ ti tẹlẹ ti rọpo laifọwọyi nigbati iwe ba ti ṣetan. Ṣugbọn jẹ ki a wo bii o ṣe le ṣe ni ọran ti o fẹ ṣe iṣe ṣaaju ṣiṣe koodu jQuery, lati rọpo ọrọ ti paragira naa. 

Jẹ́ ká gbé àpẹẹrẹ kan tó kẹ́yìn yẹ̀ wò:


<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>

Ninu apẹẹrẹ yii ọrọ paragira ti rọpo nikan nigbati iṣẹlẹ titẹ ba waye lori bọtini "Replace Text", eyi ti o rọrun tumọ nigbati olumulo kan tẹ bọtini yii.

Yiyan awọn ohun kan nipasẹ ID

O le lo oluyan ID lati yan ohun kan pẹlu ID alailẹgbẹ lori oju-iwe naa.

Fun apẹẹrẹ, koodu jQuery ti o tẹle yoo yan ati saami nkan kan pẹlu ẹya ID id="markid", nigbati iwe ba ti šetan.

<script>
$(document).ready(function(){
    // Highlight element with id markid
    $("#markid").css("background", "grey");
});
</script>
Yiyan eroja pẹlu kilasi orukọ

Aṣayan kilasi le ṣee lo lati yan awọn eroja pẹlu kilasi kan pato.

Fun apẹẹrẹ, koodu jQuery atẹle yoo yan ati ṣe afihan awọn eroja pẹlu abuda kilasi class="markclass", nigbati iwe ba ti šetan.

<script>
$(document).ready(function(){
    // Highlight elements with class markclass
    $(".markclass").css("background", "grey");
});
</script>
Yiyan awọn ohun kan nipa orukọ

Aṣayan ohun kan le ṣee lo lati yan awọn ohun kan nipasẹ orukọ ohun kan.

Fun apẹẹrẹ, koodu jQuery atẹle yoo yan ati saami gbogbo paragira, ie awọn eroja "<p>" ti iwe-ipamọ nigbati o ba ṣetan.

Iwe iroyin Innovation
Maṣe padanu awọn iroyin pataki julọ lori isọdọtun. Forukọsilẹ lati gba wọn nipasẹ imeeli.
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
Asayan ti awọn eroja nipa ikalara

O le lo oluyan abuda lati yan ipin kan ti o da lori ọkan ninu awọn abuda HTML rẹ, gẹgẹbi abuda ọna asopọ targettabi awọn abuda ti ohun input type, abbl.

Fun apẹẹrẹ, koodu jQuery atẹle yoo yan ati ṣe afihan gbogbo awọn igbewọle ọrọ, gẹgẹbi awọn eroja "<input>" con type="text", nigbati iwe ba ti šetan.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
Aṣayan eroja nipasẹ oluyanju CSS agbo

O tun le darapọ awọn yiyan CSS lati ṣe yiyan rẹ paapaa kongẹ diẹ sii.

Fun apẹẹrẹ, o le darapọ oluyan kilasi pẹlu oluyan eroja lati wa awọn eroja ninu iwe kan ti o ni iru ati kilasi kan.

<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>
jQuery Custom Selector

Ni afikun si awọn yiyan definiti, jQuery n pese yiyan aṣa tirẹ lati mu ilọsiwaju siwaju si awọn agbara ti yiyan awọn eroja lori oju-iwe kan.

<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>

iṣẹlẹ

Awọn iṣẹlẹ nigbagbogbo nfa nipasẹ ibaraenisepo olumulo pẹlu oju-iwe wẹẹbu, gẹgẹbi nigbati o ba tẹ ọna asopọ kan tabi bọtini, titẹ ọrọ sinu apoti igbewọle tabi agbegbe ọrọ, ṣe yiyan ninu apoti yiyan, tẹ bọtini kan lori keyboard, gbe itọka Asin , ati be be lo. Ni awọn igba miiran, ẹrọ aṣawakiri funrararẹ le fa awọn iṣẹlẹ, bii fifuye oju-iwe ati awọn iṣẹlẹ igbasilẹ.

jQuery ṣe ilọsiwaju lori awọn ilana mimu iṣẹlẹ ipilẹ nipa fifun awọn ọna iṣẹlẹ fun ọpọlọpọ awọn iṣẹlẹ aṣawakiri abinibi, diẹ ninu awọn ọna wọnyi jẹ ready(), click(), keypress(), focus(), blur(), change(), abbl.

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

Ni gbogbogbo, awọn iṣẹlẹ le pin si awọn ẹgbẹ akọkọ mẹrin: 

  • awọn iṣẹlẹ asin,
  • awọn iṣẹlẹ keyboard,
  • iṣẹlẹ module ed
  • iwe / window iṣẹlẹ. 

Awọn iṣẹlẹ Asin

Iṣẹlẹ Asin kan nfa nigbati olumulo ba tẹ ohun kan, gbe itọka Asin, ati bẹbẹ lọ.

Eyi ni diẹ ninu awọn ọna jQuery ti o wọpọ lati mu awọn iṣẹlẹ asin mu.

Ọna naa click()

Ọna naa click() so iṣẹ olutọju iṣẹlẹ kan si awọn eroja ti a yan fun iṣẹlẹ naa "click“. Iṣẹ ti o sopọ mọ ṣiṣẹ nigbati olumulo ba tẹ nkan naa. Apẹẹrẹ atẹle yoo tọju awọn eroja <p> loju iwe nigba ti a tẹ.

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).slideUp();
    });
});
</script>
Ọna naa dblclick()

Ọna naa dblclick() so iṣẹ olutọju iṣẹlẹ kan si awọn eroja ti a yan fun iṣẹlẹ naa "dblclick“. Iṣẹ ti o sopọ mọ ṣiṣẹ nigbati olumulo ba tẹ nkan naa lẹẹmeji. Apẹẹrẹ atẹle yoo tọju awọn eroja <p> nigbati a tẹ wọn lẹẹmeji.

<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).slideUp();
    });
});
</script>
Ọna naa hover()

Ọna naa hover() so awọn iṣẹ oluṣakoso iṣẹlẹ kan tabi meji pọ si awọn eroja ti o yan ti o ṣiṣẹ nigbati itọka asin n gbe sinu ati jade ninu awọn eroja. Iṣẹ akọkọ n ṣiṣẹ nigbati olumulo ba gbe itọka asin sori ohun kan, lakoko ti iṣẹ keji nṣiṣẹ nigbati olumulo ba yọ itọka Asin kuro ni nkan yẹn.

Apẹẹrẹ atẹle yoo ṣe afihan awọn nkan <p> nigbati o ba gbe kọsọ lori rẹ, aami yoo yọ kuro nigbati o ba yọ kọsọ naa kuro.

<script>
$(document).ready(function(){
    $("p").hover(function(){
        $(this).addClass("highlight");
    }, function(){
        $(this).removeClass("highlight");
    });
});
</script>
Ọna naa mouseenter()

Ọna naa mouseenter() so iṣẹ oluṣakoso iṣẹlẹ kan si awọn eroja ti o yan eyiti o ṣiṣẹ nigbati asin ba wọ inu nkan kan. Apẹẹrẹ atẹle yoo ṣafikun ifamisi kilasi si eroja <p> nigbati o ba gbe kọsọ lori rẹ.

<script>
$(document).ready(function(){
    $("p").mouseenter(function(){
        $(this).addClass("highlight");
    });
});
</script>
Ọna naa mouseleave()

Ọna naa mouseleave() so iṣẹ oluṣakoso iṣẹlẹ kan si awọn ohun ti o yan ti o nṣiṣẹ nigbati asin ba fi ohun kan silẹ. Apẹẹrẹ atẹle yoo yọ ifojusọna kilasi kuro ni eroja <p> nigbati o ba yọ kọsọ kuro ninu rẹ.

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

Awọn iṣẹlẹ bọtini itẹwe

Iṣẹlẹ keyboard kan dide nigbati olumulo ba tẹ tabi tu bọtini kan jade lori keyboard. Jẹ ki a wo diẹ ninu awọn ọna jQuery ti o wọpọ lati mu awọn iṣẹlẹ keyboard ṣiṣẹ.

Ọna naa keypress()

Ọna naa keypress() so iṣẹ mimu-iṣẹlẹ pọ si awọn eroja ti o yan (awọn iṣakoso fọọmu deede) ti o nṣiṣẹ nigbati ẹrọ aṣawakiri ba gba igbewọle keyboard lati ọdọ olumulo. Apeere atẹle yoo ṣe afihan ifiranṣẹ nigbati iṣẹlẹ naa ba ti ṣiṣẹ keypress ati bi ọpọlọpọ igba ti o ti wa ni jeki nigbati o ba tẹ awọn bọtini lori rẹ keyboard.

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

Iṣẹlẹ titẹ bọtini jẹ iru si iṣẹlẹ isale bọtini, ayafi ti iyipada ati awọn bọtini ti kii ṣe titẹ gẹgẹbi Shift, Esc, Backspace tabi Parẹ, awọn bọtini itọka, ati bẹbẹ lọ. wọn ina awọn iṣẹlẹ bọtini isalẹ ṣugbọn kii ṣe awọn iṣẹlẹ titẹ bọtini.

Ọna naa keydown()

Ọna naa keydown() so iṣẹ mimu-iṣẹlẹ pọ si awọn ohun ti a yan (awọn iṣakoso fọọmu ni igbagbogbo) ti o ṣiṣẹ nigbati olumulo kọkọ tẹ bọtini kan lori keyboard. Apeere atẹle yoo ṣe afihan ifiranṣẹ nigbati iṣẹlẹ naa ba ti ṣiṣẹ keydown ati bi ọpọlọpọ igba ti o ti wa ni jeki nigbati o ba tẹ awọn bọtini lori rẹ keyboard.

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

Ọna naa keyup() so iṣẹ mimu-iṣẹlẹ pọ si awọn eroja ti o yan (awọn iṣakoso fọọmu ni igbagbogbo) ti o ṣiṣẹ nigbati olumulo ba tu bọtini kan silẹ lori keyboard. Apeere atẹle yoo ṣe afihan ifiranṣẹ nigbati iṣẹlẹ naa ba ti ṣiṣẹ keyup ati iye igba ti o nfa nigbati o tẹ ati tu bọtini kan silẹ lori keyboard rẹ.

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

Awọn iṣẹlẹ fọọmu

Iṣẹlẹ fọọmu kan nfa nigbati iṣakoso fọọmu kan gba tabi padanu idojukọ, tabi nigbati olumulo ba yipada iye iṣakoso fọọmu kan, gẹgẹbi titẹ ọrọ sinu titẹ ọrọ, yiyan aṣayan ninu apoti yiyan, ati bẹbẹ lọ. Eyi ni diẹ ninu awọn ọna jQuery ti o wọpọ lati mu awọn iṣẹlẹ fọọmu mu.

Ọna naa change()

Ọna naa change() so iṣẹ oluṣakoso iṣẹlẹ si awọn eroja <input> ati ki o ti wa ni executed nigbati awọn oniwe-iye ayipada. Apẹẹrẹ atẹle yoo ṣe afihan ifiranṣẹ ikilọ nigbati o ba yan aṣayan kan ninu apoti yiyan silẹ si isalẹ.

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

Fun awọn apoti tẹ, awọn apoti ayẹwo, ati awọn bọtini redio, iṣẹlẹ naa n jo lẹsẹkẹsẹ nigbati olumulo ba ṣe yiyan Asin, ṣugbọn fun titẹ ọrọ ati agbegbe ọrọ iṣẹlẹ naa n tan lẹhin ti eroja naa padanu idojukọ.

Ọna naa focus()

Ọna naa focus() so iṣẹ oluṣakoso iṣẹlẹ kan si awọn eroja ti o yan (awọn iṣakoso deede ati awọn ọna asopọ fọọmu) ti o ṣiṣẹ nigbati o ba ni idojukọ. Apeere atẹle yoo ṣe afihan ifiranṣẹ nigbati kikọ ọrọ ba gba idojukọ.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Ọna naa blur()

Ọna naa blur() so iṣẹ oluṣakoso iṣẹlẹ kan lati ṣẹda awọn eroja bii <input><textarea><select> eyi ti o ti wa ni executed nigba ti o padanu idojukọ. Apeere atẹle yoo ṣe afihan ifiranṣẹ nigbati kikọ ọrọ ba padanu idojukọ.

<script>
$(document).ready(function(){
    $("input").blur(function(){
        $(this).next("span").show().fadeOut("slow");
    });
});
</script>
Ọna naa submit()

Ọna naa submit() so iṣẹ oluṣakoso iṣẹlẹ si awọn eroja <form> eyiti o nṣiṣẹ nigbati olumulo ba gbiyanju lati fi fọọmu kan silẹ. Apẹẹrẹ atẹle yoo ṣe afihan ifiranṣẹ ti o da lori iye ti a tẹ sii nigbati o n gbiyanju lati fi fọọmu naa silẹ.

<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>

Iwe / Window Events

Awọn iṣẹlẹ naa tun wa ni ina ni ipo nibiti oju-iwe DOM (Awoṣe Ohun elo Iwe) ti ṣetan tabi nigbati olumulo ba ṣe iwọn tabi yi window ẹrọ aṣawakiri, ati bẹbẹ lọ. Eyi ni diẹ ninu awọn ọna jQuery ti o wọpọ lati mu iru iṣẹlẹ yii.

Ọna naa ready()

Ọna naa ready() pato iṣẹ kan lati ṣiṣẹ nigbati DOM ti kojọpọ ni kikun.

Apẹẹrẹ atẹle yoo rọpo ọrọ paragira ni kete ti awọn ilana DOM ti kọ ni kikun ati ti ṣetan lati ṣe ifọwọyi.

<script>
$(document).ready(function(){
    $("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
Ọna naa resize()

Ọna naa resize() so iṣẹ oluṣakoso iṣẹlẹ kan si eroja window ti o nṣiṣẹ nigbati iwọn window ẹrọ aṣawakiri ba yipada.

Apẹẹrẹ atẹle yoo ṣe afihan iwọn ti isiyi ati giga ti window ẹrọ aṣawakiri nigba ti o ba gbiyanju lati ṣe iwọn rẹ nipa fifa awọn igun rẹ.

<script>
$(document).ready(function(){
    $(window).resize(function() {
        $(window).bind("resize", function(){ 
            $("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
        });
    });
});
</script>
Ọna naa scroll()

Ọna naa scroll() so iṣẹ oluṣakoso iṣẹlẹ si window tabi si awọn iframe ati awọn ohun elo yiyi ti o nṣiṣẹ nigbakugba ti ipo yipo ohun naa ba yipada.

Apẹẹrẹ atẹle yoo ṣe afihan ifiranṣẹ kan nigbati o ba lọ kiri ni window ẹrọ aṣawakiri naa.

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

Ercole Palmeri

.

Iwe iroyin Innovation
Maṣe padanu awọn iroyin pataki julọ lori isọdọtun. Forukọsilẹ lati gba wọn nipasẹ imeeli.

Awọn iwe ti o ṣẹṣẹ

Awọn olutẹwe ati OpenAI fowo si awọn adehun lati ṣe ilana ṣiṣan ti alaye ti a ṣe ilana nipasẹ Imọran Artificial

Ni ọjọ Aarọ to kọja, Awọn akoko Iṣowo kede adehun kan pẹlu OpenAI. FT ṣe iwe-aṣẹ iwe-akọọlẹ agbaye rẹ…

30 Kẹrin 2024

Awọn sisanwo ori ayelujara: Eyi ni Bii Awọn iṣẹ ṣiṣanwọle jẹ ki o sanwo lailai

Awọn miliọnu eniyan sanwo fun awọn iṣẹ ṣiṣanwọle, san awọn idiyele ṣiṣe alabapin oṣooṣu. O jẹ ero ti o wọpọ pe o…

29 Kẹrin 2024

Veeam ṣe ẹya atilẹyin okeerẹ julọ fun ransomware, lati aabo si esi ati imularada

Coveware nipasẹ Veeam yoo tẹsiwaju lati pese awọn iṣẹ esi iṣẹlẹ ikọlu cyber. Coveware yoo funni ni awọn oniwadi ati awọn agbara atunṣe…

23 Kẹrin 2024

Alawọ ewe ati Iyika oni-nọmba: Bawo ni Itọju Asọtẹlẹ ti n Yipada Ile-iṣẹ Epo & Gaasi

Itọju isọtẹlẹ jẹ iyipada ti eka epo & gaasi, pẹlu imotuntun ati ọna imudani si iṣakoso ọgbin.…

22 Kẹrin 2024