Հոդվածներ

JQuery, ինչ է դա և ինչ կարող ենք անել JavaScript գրադարանի հետ

jQuery-ն արագ, թեթև և առանձնահատկություններով հարուստ JavaScript գրադարան է, որը հիմնված է սկզբունքի վրա «Քիչ գրիր, ավելի շատ արա» . JQuery API-ները պարզեցնում են HTML փաստաթղթերի կառավարումն ու սպասարկումը, իրադարձությունների կառավարումը, վեբ էջի վրա անիմացիոն էֆեկտներ ավելացնելը: Այն համատեղելի է բոլոր հիմնական բրաուզերների հետ, ինչպիսիք են Chrome, Firefox, Safari, Edge:

Ajax-ի վրա հիմնված հավելվածի ստեղծումը jQuery-ով դառնում է շատ պարզ և արագ:

jQuery-ն ի սկզբանե ստեղծվել է Ջոն Ռեսիգի կողմից 2006 թվականի սկզբին: jQuery նախագիծը ներկայումս պահպանվում և պահպանվում է մշակողների բաշխված խմբի կողմից որպես բաց կոդով նախագիծ:

Դուք կարող եք խնայել շատ ժամանակ և ջանք jQuery-ի միջոցով: Այսպիսով, ավելացրեք այս կայքը ձեր ընտրյալների մեջ և շարունակեք կարդալ

Ինչ կարող եք անել jQuery-ի հետ

Կան շատ այլ բաներ, որոնք դուք կարող եք անել jQuery-ի հետ:

  • Դուք կարող եք հեշտությամբ ընտրել HTML էջի տարրեր, ատրիբուտները կարդալու կամ փոփոխելու համար;
  • Դուք կարող եք հեշտությամբ ստեղծել էֆեկտներ, ինչպիսիք են ցուցադրել կամ թաքցնել տարրերը, անցումները, ոլորումները և այլն;
  • Դուք կարող եք հեշտությամբ ստեղծել բարդ CSS անիմացիաներ ավելի քիչ տողերով կոդի;
  • Դուք կարող եք հեշտությամբ շահարկել DOM տարրերը և դրանց ատրիբուտները.
  • Դուք կարող եք հեշտությամբ ներդնել Ajax-ը` հաճախորդի և սերվերի միջև տվյալների ասինխրոն փոխանակումը հնարավոր դարձնելու համար.
  • Դուք կարող եք հեշտությամբ անցնել ամբողջ DOM ծառը՝ ցանկացած տարր գտնելու համար.
  • Դուք կարող եք հեշտությամբ կատարել մի քանի գործողություններ տարրի վրա մեկ տողով կոդը;
  • Դուք կարող եք հեշտությամբ ստանալ կամ սահմանել HTML տարրերի չափը:

Ցուցակը դրանով չի ավարտվում, կան շատ այլ հետաքրքիր բաներ, որոնք կարող եք անել jQuery-ի հետ:

jQuery-ի օգտագործման առավելությունները

Կան մի քանի առավելություններ, թե ինչու պետք է ընտրել jQuery-ի օգտագործումը.

  • Խնայեք շատ ժամանակ. Դուք կարող եք խնայել շատ ժամանակ և ջանք՝ օգտագործելով jQuery-ի ներկառուցված էֆեկտներն ու ընտրիչները և կենտրոնանալով զարգացման այլ ասպեկտների վրա.
  • Պարզեցրեք JavaScript-ի ընդհանուր առաջադրանքները. jQuery-ն մեծապես պարզեցնում է JavaScript-ի ընդհանուր առաջադրանքները: Այժմ դուք կարող եք հեշտությամբ ստեղծել հնարավորություններով հարուստ և ինտերակտիվ վեբ էջեր՝ ավելի քիչ կոդերի տողերով: Տիպիկ օրինակը Ajax-ի իրականացումն է էջի բովանդակությունը թարմացնելու համար՝ առանց այն թարմացնելու;
  • Պարզություն. jQuery-ն շատ հեշտ է օգտագործել: Յուրաքանչյուր ոք, ով տիրապետում է HTML, CSS և JavaScript-ի հիմնական աշխատանքային գիտելիքներին, կարող է սկսել զարգանալ jQuery-ով;
  • Համատեղելի է բոլոր բրաուզերների հետ. jQuery-ն ստեղծվել է ժամանակակից բրաուզերների հաշվին և համատեղելի է բոլոր հիմնական ժամանակակից բրաուզերների հետ, ինչպիսիք են Chrome, Firefox, Safari, Edge;
  • Բացարձակապես անվճար – Եվ ամենալավն այն է, որ այն լիովին անվճար է ներբեռնելու և օգտագործելու համար:

jQuery ներբեռնում

Սկսելու համար եկեք նախ ներբեռնենք jQuery-ի պատճենը և այն ներառենք մեր նախագծում: Ներբեռնման համար հասանելի է jQuery-ի երկու տարբերակ. շտապում է e սեղմված չէ .

Չսեղմված ֆայլը ավելի հարմար է մշակման կամ վրիպազերծման համար. մինչդեռ, փոքրացված և սեղմված ֆայլը առաջարկվում է արտադրության համար, քանի որ այն խնայում է թողունակությունը և բարելավում կատարումը ֆայլի ավելի փոքր չափի պատճառով:

Մենք կարող ենք ներբեռնել jQuery այստեղից. https://jquery.com/download/

JQuery ֆայլը ներբեռնելուց հետո կարող եք տեսնել, որ այն ունի js ընդլայնում, այսինքն՝ JavaScript ֆայլ է: Իրականում JQuery-ն ոչ այլ ինչ է, քան JavaScript գրադարան, այնպես որ դուք կարող եք ներառել jQuery ֆայլը HTML փաստաթղթում տարրով: ճիշտ այնպես, ինչպես դուք ներառում եք սովորական JavaScript ֆայլեր:

<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 ֆայլը հատուկ սկրիպտներից առաջ; հակառակ դեպքում, jQuery API-ները հասանելի չեն լինի, երբ ձեր jQuery կոդը փորձի մուտք գործել դրանք:

Ինչպես նկատեցիք, նախորդ օրինակում մենք բաց թողեցինք հատկանիշը type="text/javascript" պիտակի ներսում . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiավարտված է HTML5-ով և բոլոր ժամանակակից բրաուզերներում:

jQuery CDN-ից

Որպես այլընտրանք, դուք կարող եք տեղադրել jQuery-ն ձեր փաստաթղթում ազատ հասանելի CDN (Content Delivery Network) հղումների միջոցով, եթե նախընտրում եք խուսափել ֆայլը ներբեռնելուց:

CDN-ները կարող են առաջարկել կատարողականի առավելություն՝ նվազեցնելով բեռնման ժամանակը, քանի որ դրանք jQuery-ն հյուրընկալում են աշխարհի բազմաթիվ սերվերների վրա, և երբ օգտատերը խնդրում է ֆայլը, այն կսպասարկվի ամենամոտ սերվերից:

Սա նաև առավելություն ունի, որ եթե ձեր վեբ էջի այցելուն արդեն ներբեռնել է jQuery-ի պատճենը նույն CDN-ից այլ կայքեր այցելելիս, նա ստիպված չի լինի նորից ներբեռնել այն, քանի որ այն արդեն գտնվում է իր բրաուզերի քեշում:

Այս դեպքում դուք պետք է գրեք.

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

Բացի jquery նախագծի կողմից տրամադրված CDN-ից, դուք կարող եք ներառել jQuery-ի միջոցով Google e Microsoft 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 գործողություն՝ փոխելով վերնագրի գույնը, այսինքն՝ տարրի գույնը օգտագործելով jQuery տարրի ընտրիչը և css() մեթոդը, երբ փաստաթուղթը պատրաստ է, որը հայտնի է որպես փաստաթղթի պատրաստ իրադարձություն: 

jQuery շարահյուսություն

jQuery-ի հայտարարությունը սովորաբար սկսվում է դոլարի նշանով ( $) և ավարտվում է ստորակետով ( ;).

jQuery-ում դոլարի նշանը ( $) պարզապես jQuery-ի կեղծանունն է: Դիտարկենք հետևյալ օրինակելի կոդը, որը ցույց է տալիս ամենապարզ jQuery հայտարարությունը:

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

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

Օրինակը պարզապես ցուցադրում է նախազգուշական հաղորդագրություն «Hello I'm a JQuery sign» օգտագործողին: Եկեք տեսնենք որոշ առանձնահատկություններ.

  • Տարրը <script>jQuery-ն պարզապես JavaScript գրադարան է, jQuery կոդը կարող է տեղադրվել տարրի ներսում <script>, կամ կարող եք տեղադրել այն արտաքին JavaScript ֆայլում;
  • Գիծը $(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-ի ընտրիչը՝ էջի եզակի 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>" փաստաթուղթը, երբ այն պատրաստ է:

Նորարարության տեղեկագիր
Բաց մի թողեք նորարարության մասին ամենակարևոր նորությունները: Գրանցվեք դրանք էլփոստով ստանալու համար:
<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $("p").css("background", "grey");
});
</script>
Տարրերի ընտրություն ըստ հատկանիշի

Դուք կարող եք օգտագործել հատկանիշի ընտրիչը՝ ընտրելու տարր՝ հիմնվելով նրա HTML ատրիբուտներից մեկի վրա, ինչպիսին է հղման հատկանիշը targetկամ մուտքագրման հատկանիշը typeև այլն

Օրինակ, հետևյալ jQuery կոդը կընտրի և կընդգծի բոլոր տեքստային մուտքերը, օրինակ՝ տարրերը "<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>
jQuery Պատվերով ընտրիչ

Բացի սելեկտորներից 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>

Eventi

Իրադարձությունները հաճախ հրահրվում են վեբ էջի հետ օգտատերերի փոխազդեցությունից, օրինակ՝ հղման կամ կոճակի վրա սեղմելիս, տեքստ մուտքագրելիս մուտքագրման վանդակում կամ տեքստի տարածքում, ընտրություն կատարել ընտրության վանդակում, սեղմել ստեղնաշարի վրա ստեղնը, շարժել մկնիկի ցուցիչը։ և այլն։ Որոշ դեպքերում զննարկիչն ինքնին կարող է գործարկել իրադարձություններ, ինչպիսիք են էջի բեռնումը և ներբեռնումը:

jQuery-ն բարելավում է իրադարձությունների կառավարման հիմնական մեխանիզմները՝ առաջարկելով իրադարձությունների մեթոդներ բնիկ բրաուզերի իրադարձությունների համար, այդ մեթոդներից մի քանիսն են. ready(), click(), keypress(), focus(), blur(), change()և այլն

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

Ընդհանուր առմամբ, իրադարձությունները կարելի է դասակարգել չորս հիմնական խմբերի. 

  • մկնիկի իրադարձություններ,
  • ստեղնաշարի իրադարձություններ,
  • իրադարձությունների մոդուլի խմբ
  • փաստաթուղթ/պատուհան իրադարձություններ. 

Մկնիկի իրադարձություններ

Մկնիկի իրադարձությունը գործարկվում է, երբ օգտատերը կտտացնում է որևէ տարրի վրա, տեղափոխում մկնիկի ցուցիչը և այլն:

Ահա 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>

Ստեղնաշարի սեղմման իրադարձությունը նման է keydown իրադարձությանը, բացառությամբ, որ փոփոխող և չտպող ստեղները, ինչպիսիք են Shift, Esc, Backspace կամ Delete, սլաքների ստեղները և այլն: նրանք գործարկում են keydown իրադարձություններ, բայց ոչ keypress իրադարձություններ:

Մեթոդը 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 (Փաստաթղթի օբյեկտի մոդել) էջը պատրաստ է կամ երբ օգտատերը չափափոխում է կամ ոլորում է դիտարկիչի պատուհանը և այլն: Ահա որոշ 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

.

Նորարարության տեղեկագիր
Բաց մի թողեք նորարարության մասին ամենակարևոր նորությունները: Գրանցվեք դրանք էլփոստով ստանալու համար:

Վերջին հոդվածները

Veeam-ն ունի ամենաընդգրկուն աջակցություն փրկագինին՝ պաշտպանությունից մինչև պատասխան և վերականգնում

Veeam-ի Coveware-ը կշարունակի տրամադրել կիբեր շորթման միջադեպերի արձագանքման ծառայություններ: Coveware-ը կառաջարկի դատաբժշկական և վերականգնման հնարավորություններ…

23 Ապրիլ 2024

Կանաչ և թվային հեղափոխություն. Ինչպես է կանխատեսելի սպասարկումը փոխակերպում նավթի և գազի արդյունաբերությունը

Կանխատեսելի սպասարկումը հեղափոխություն է անում նավթի և գազի ոլորտում՝ կայանի կառավարման նորարարական և ակտիվ մոտեցմամբ:…

22 Ապրիլ 2024

Մեծ Բրիտանիայի հակամենաշնորհային կարգավորիչը բարձրացնում է BigTech-ի ահազանգը GenAI-ի վերաբերյալ

Մեծ Բրիտանիայի CMA-ն նախազգուշացում է տարածել արհեստական ​​ինտելեկտի շուկայում Big Tech-ի վարքագծի վերաբերյալ: Այնտեղ…

18 Ապրիլ 2024

Casa Green. էներգետիկ հեղափոխություն կայուն ապագայի համար Իտալիայում

Շենքերի էներգաարդյունավետության բարձրացման նպատակով Եվրոպական միության կողմից ձևակերպված «Քեյս Գրին» հրամանագիրը իր օրենսդրական գործընթացն ավարտել է…

18 Ապրիլ 2024

Կարդացեք նորարարությունը ձեր լեզվով

Նորարարության տեղեկագիր
Բաց մի թողեք նորարարության մասին ամենակարևոր նորությունները: Գրանցվեք դրանք էլփոստով ստանալու համար:

Հետեւեք մեզ