Ajax негізіндегі қосымшаны жасау jQuery көмегімен өте қарапайым және жылдам болады.
jQuery бастапқыда 2006 жылдың басында Джон Ресигпен жасалған. jQuery жобасын қазіргі уақытта ашық бастапқы жоба ретінде бөлінген әзірлеушілер тобы қолдайды және қолдайды.
Сіз jQuery арқылы көп уақыт пен күш үнемдей аласыз. Сондықтан бұл сайтты таңдаулыларыңызға қосып, оқуды жалғастырыңыз
jQuery арқылы жасауға болатын тағы да көп нәрсе бар.
Тізім мұнымен бітпейді, jQuery арқылы жасауға болатын басқа да көптеген керемет нәрселер бар.
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 коды оларға қол жеткізуге тырысқанда, jQuery API интерфейстері қолжетімді болмайды.
Сіз байқаған боларсыз, біз алдыңғы мысалдағы атрибутты өткізіп жібердік type="text/javascript" тегтің ішінде . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 және барлық заманауи браузерлерде аяқталды.
Балама ретінде, файлды жүктеп алудан аулақ болғыңыз келсе, еркін қол жетімді CDN (Content Delivery Network) сілтемелері арқылы құжатқа jQuery ендіруге болады.
CDNs жүктеу уақытын қысқарту арқылы өнімділік артықшылығын ұсына алады, себебі олар jQuery-ді дүние жүзіндегі бірнеше серверлерде орналастырады және пайдаланушы файлды сұраған кезде, ол ең жақын серверден қызмет көрсетеді.
Бұл сондай-ақ артықшылығы бар, егер сіздің веб-бетке кіруші басқа сайттарға кірген кезде сол CDN-ден jQuery көшірмесін жүктеп алған болса, ол браузердің кэшінде болғандықтан, оны қайта жүктеп алудың қажеті жоқ.
Бұл жағдайда сізге жазу керек:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jQuery жобасымен қамтамасыз етілген CDN-ге қосымша, jQuery арқылы қосуға болады Google e Microsoft cdn.
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 мәлімдемесін көрсететін келесі үлгі кодын қарастырыңыз.
<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 селекторын пайдалануға болады.
Мысалы, келесі 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>" Con type="text", құжат дайын болғанда.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Сондай-ақ таңдауыңызды дәлірек ету үшін 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>Жалпы, оқиғаларды төрт негізгі топқа бөлуге болады:
Тінтуір оқиғасы пайдаланушы элементті басқанда, тінтуір меңзерін жылжытқанда және т.б.
Мұнда тінтуір оқиғаларын өңдеу үшін жиі қолданылатын 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
.
Veeam ұсынған Coveware кибербопсалау оқиғаларына жауап беру қызметтерін көрсетуді жалғастырады. Coveware криминалистикалық және қалпына келтіру мүмкіндіктерін ұсынады ...
Болжалды техникалық қызмет көрсету зауытты басқаруға инновациялық және белсенді көзқараспен мұнай және газ секторында төңкеріс жасайды.…
Ұлыбританияның CMA жасанды интеллект нарығындағы Big Tech әрекеті туралы ескерту жасады. Ана жерде…
Ғимараттардың энергия тиімділігін арттыру үшін Еуропалық Одақ тұжырымдаған «Жасыл үйлер» жарлығы өзінің заң шығару процесін аяқтады ...