Мақолаҳо

JQuery, ин чист ва мо бо китобхонаи JavaScript чӣ кор карда метавонем

jQuery китобхонаи зуд, сабук ва дорои хусусияти JavaScript мебошад, ки бар асоси принсип асос ёфтааст "камтар нависед, бештар кор кунед" . API-ҳои JQuery идоракунӣ ва нигоҳдории ҳуҷҷатҳои 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 (Шабакаи интиқоли мундариҷа) ҷойгир кунед, агар шумо мехоҳед аз зеркашии файл худдорӣ кунед.

CDN-ҳо метавонанд бо кам кардани вақти боркунӣ бартарии иҷроишро пешниҳод кунанд, зеро онҳо jQuery-ро дар серверҳои сершумор дар саросари ҷаҳон ҷойгир мекунанд ва вақте ки корбар файлро дархост мекунад, он аз сервери наздиктарин хидмат хоҳад кард.

Ин инчунин бартарият дорад, ки агар меҳмони саҳифаи интернетии шумо ҳангоми боздид аз сайтҳои дигар нусхаи jQuery-ро аз ҳамон CDN аллакай бор карда бошад, онҳо набояд дубора зеркашӣ кунанд, зеро он аллакай дар кэши браузери онҳост.

Дар ин ҳолат шумо бояд нависед:

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

Илова ба CDN, ки лоиҳаи jQuery пешниҳод кардааст, шумо метавонед 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>

Достони

Ҳодисаҳо аксар вақт тавассути ҳамкории корбар бо саҳифаи веб ба амал меоянд, масалан ҳангоми пахш кардани истинод ё тугма, ворид кардани матн ба қуттии вуруд ё майдони матн, интихоб кардан дар қуттии интихоб, пахш кардани тугмаи клавиатура, ҳаракат додани нишоннамои муш , ва гайра. Дар баъзе ҳолатҳо, худи браузер метавонад рӯйдодҳоро ба вуҷуд орад, ба монанди боркунии саҳифа ва рӯйдодҳои зеркашӣ.

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>

Ҳодисаи пахши тугмаҳо ба ҳодисаи поёни клавиатура шабоҳат дорад, ба истиснои он, ки калидҳои тағирдиҳанда ва чопнашаванда ба монанди 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 (Модели объекти ҳуҷҷат) омода аст ё вақте ки корбар андозаи равзанаи браузерро тағир медиҳад ё ҳаракат мекунад ва ғ. Инҳоянд чанд усулҳои маъмулан 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

Tags: jqueryТаҳиягари нармафзортаҳияи нармафзорEngineering EngineeringОзмоиши нармафзор

22 январи соли 2023, соати 10:42

дигар Дорухатҳои алгоритмӣ барои апокалипсис »

Пурбаҳстаринҳо «Чӣ гуна зеҳни сунъӣ метавонад ба ҷаҳони мусиқӣ таъсир расонад

Мақолаҳои охирин

Мақолаҳо

Дахолати инноватсионӣ дар воқеияти васеъшуда бо тамошобини Apple дар поликлиникаи Катания

Дар поликлиникаи Катания амалиёти офтальмопластика бо истифода аз намоишгари тиҷоратии Apple Vision Pro анҷом дода шуд…

3 Май 2024

Мақолаҳо

Манфиатҳои ранг кардани саҳифаҳо барои кӯдакон - ҷаҳони ҷодугарӣ барои ҳама синну сол

Рушди малакаҳои хуби моторӣ тавассути рангкунӣ кӯдаконро ба малакаҳои мураккабтаре, ба мисли навиштан омода мекунад. Барои ранг кардан…

2 Май 2024

Мақолаҳо

Оянда ин аст: Чӣ гуна саноати боркашонӣ иқтисоди ҷаҳонро инқилоб мекунад

Бахши баҳрӣ як қудрати воқеии иқтисодии ҷаҳонӣ аст, ки ба бозори 150 миллиард доллар ҳаракат кардааст ...

1 Май 2024

Мақолаҳо

Ноширон ва OpenAI барои танзими ҷараёни иттилооте, ки тавассути зеҳни сунъӣ коркард мешаванд, созишнома имзо мекунанд

Рӯзи душанбеи гузашта рӯзномаи Financial Times бо OpenAI созишнома эълон кард. FT журналистикаи сатҳи ҷаҳонии худро иҷозатнома медиҳад…

30 апрел 2024

JQuery, ин чист ва мо бо китобхонаи JavaScript чӣ кор карда метавонем

Шумо бо jQuery чӣ кор карда метавонед

Манфиатҳои истифодаи jQuery

Зеркашии jQuery

jQuery аз CDN

Аввалин саҳифаи веб дар асоси jQuery

Синтаксиси jQuery

Интихобкунандагон

Интихоби ашё аз рӯи ID

Интихоби элементҳо бо номи синф

Интихоби ашё аз рӯи ном

Интихоби элементҳо аз рӯи атрибут

Интихоби элемент тавассути селектори мураккаби CSS

Интихобкунандаи фармоишии jQuery

Достони

Ҳодисаҳои муш

Усули click()

Усули dblclick()

Усули hover()

Усули mouseenter()

Усули mouseleave()

Ҳодисаҳои клавиатура

Усули keypress()

Усули keydown()

Усули keyup()

Ҳодисаҳоро ташкил кунед

Усули change()

Усули focus()

Усули blur()

Усули submit()

Ҳуҷҷат/ Ҳодисаҳои Тиреза

Усули ready()

Усули resize()

Усули scroll()

Мақолаҳои охирин

Дахолати инноватсионӣ дар воқеияти васеъшуда бо тамошобини Apple дар поликлиникаи Катания

Манфиатҳои ранг кардани саҳифаҳо барои кӯдакон - ҷаҳони ҷодугарӣ барои ҳама синну сол

Оянда ин аст: Чӣ гуна саноати боркашонӣ иқтисоди ҷаҳонро инқилоб мекунад

Ноширон ва OpenAI барои танзими ҷараёни иттилооте, ки тавассути зеҳни сунъӣ коркард мешаванд, созишнома имзо мекунанд

Мақолаҳои охирин

барчасбҳо

Усули `click(`)

Усули `dblclick()`

Усули `hover()`

Усули `mouseenter()`

Усули `mouseleave()`

Усули `keypress()`

Усули `keydown()`

Усули `keyup()`

Усули `change()`

Усули `focus()`

Усули `blur()`

Усули `submit()`

Усули `ready()`

Усули `resize()`

Усули `scroll()`