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 API'лери сиздин jQuery кодуңуз аларга кирүүгө аракет кылганда жеткиликтүү болбойт.
Сиз байкагандырсыз, биз мурунку мисалдагы атрибутту өткөрүп жибердик type="text/javascript" теги ичинде . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 жана бардык заманбап браузерлерде бүттү.
Альтернатива катары, сиз файлды жүктөөдөн качкыңыз келсе, эркин жеткиликтүү CDN (Content Delivery Network) шилтемелери аркылуу документиңизге jQuery кыстарсаңыз болот.
CDN'лер жүктөө убактысын кыскартуу менен иштөө артыкчылыгын сунуштай алат, анткени алар jQueryди дүйнө жүзү боюнча бир нече серверлерде жайгаштырышат жана колдонуучу файлды сураганда, ал эң жакын серверден тейленет.
Мунун дагы бир артыкчылыгы бар, эгерде сиздин веб-баракчага кирүүчү башка сайттарга киргенде ошол эле CDNден jQuery көчүрмөсүн жүктөп алган болсо, ал браузеринин кэшинде болгондуктан, аны кайра жүктөөнүн кереги жок.
Бул учурда сиз жазуу керек:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jQuery долбоору тарабынан берилген CDNден тышкары, сиз jQuery аркылуу кошо аласыз Гугл 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>" менен 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 жүрүм-туруму жөнүндө эскертүү берди. Ал жерде…
Имараттардын энергетикалык натыйжалуулугун жогорулатуу үчүн Европа Биримдиги тарабынан иштелип чыккан "Case Green" Декрети өзүнүн мыйзам чыгаруу процессин аяктады ...