Ajax-ga asoslangan dastur yaratish jQuery bilan juda oddiy va tez bo'ladi.
jQuery dastlab Jon Resig tomonidan 2006 yilning boshida yaratilgan. jQuery loyihasi hozirda ochiq manbali loyiha sifatida taqsimlangan ishlab chiquvchilar guruhi tomonidan qo'llab-quvvatlanadi va qo'llab-quvvatlanadi.
JQuery bilan ko'p vaqt va kuchingizni tejashingiz mumkin. Shunday qilib, ushbu saytni sevimlilaringizga qo'shing va o'qishni davom eting
jQuery bilan yana ko'p narsalarni qilishingiz mumkin.
Ro'yxat shu bilan tugamaydi, jQuery bilan boshqa ko'plab ajoyib narsalarni qilishingiz mumkin.
JQuery-dan foydalanishni tanlashning bir qancha afzalliklari bor:
Boshlash uchun keling, avval jQuery nusxasini yuklab olamiz va keyin uni loyihamizga kiritamiz. JQuery-ning ikkita versiyasini yuklab olish mumkin: shoshib e siqilmagan .
Siqilmagan fayl ishlab chiqish yoki disk raskadrovka uchun ko'proq mos keladi; Shu bilan birga, kichiklashtirilgan va siqilgan fayl ishlab chiqarish uchun tavsiya etiladi, chunki u tarmoqli kengligini tejaydi va kichikroq fayl hajmi tufayli ish faoliyatini yaxshilaydi.
jQuery-ni bu yerdan yuklab olishimiz mumkin: https://jquery.com/download/
JQuery faylini yuklab olganingizdan so'ng uning js kengaytmasi borligini ko'rishingiz mumkin, ya'ni bu JavaScript fayli. Aslida JQuery JavaScript kutubxonasidan boshqa narsa emas, shuning uchun jQuery faylini element bilan HTML hujjatiga kiritishingiz mumkin. xuddi oddiy JavaScript fayllarini o'z ichiga olganingiz kabi.
<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 faylini har doim maxsus skriptlardan oldin qo'shishni unutmang; aks holda jQuery kodingiz ularga kirishga harakat qilganda jQuery API lari mavjud bo‘lmaydi.
Siz sezgan bo'lsangiz kerak, biz oldingi misoldagi atributni o'tkazib yubordik type="text/javascript" teg ichida . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 va barcha zamonaviy brauzerlarda tugallangan.
Shu bilan bir qatorda, faylni yuklab olishdan qochmoqchi bo'lsangiz, jQuery-ni hujjatingizga bepul CDN (Content Delivery Network) havolalari orqali joylashtirishingiz mumkin.
CDN'lar yuklash vaqtini qisqartirish orqali ishlash ustunligini taklif qilishi mumkin, chunki ular jQuery-ni butun dunyo bo'ylab bir nechta serverlarda joylashtiradi va foydalanuvchi faylni so'raganda, u eng yaqin serverdan xizmat ko'rsatadi.
Buning afzalligi shundaki, agar sizning veb-sahifangizga tashrif buyuruvchi boshqa saytlarga tashrif buyurganida bir xil CDN-dan jQuery nusxasini yuklab olgan bo'lsa, u allaqachon brauzer keshida bo'lgani uchun uni qayta yuklab olishga majbur bo'lmaydi.
Bunday holda siz yozishingiz kerak bo'ladi:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>JQuery loyihasi tomonidan taqdim etilgan CDN ga qo'shimcha ravishda jQuery orqali ham qo'shishingiz mumkin Google e Microsoft cdn.
JQuery kutubxonasining maqsadlari va uni hujjatingizga qanday kiritish kerakligini ko'rganingizdan so'ng, endi jQuery-ni amalda qo'llash vaqti keldi.
Endi sarlavha matn rangini oldingi rangdan o'zgartirib, oddiy jQuery operatsiyasini bajaramizdefiqoradan yashil rangga bo'yalgan.
<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>Kodda biz sarlavha, ya'ni element rangini o'zgartirish orqali oddiy jQuery operatsiyasini bajardik Hujjat tayyor bo'lganda jQuery elementi selektori va css() usuli yordamida hujjat tayyor hodisasi deb nomlanadi.
JQuery bayonoti odatda dollar belgisi bilan boshlanadi ( $) va nuqta-vergul bilan tugaydi ( ;).
jQuery da dollar belgisi ( $) faqat jQuery uchun taxallusdir. Eng oddiy jQuery bayonotini ko'rsatadigan quyidagi namuna kodini ko'rib chiqing.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Misol oddiygina ogohlantirish xabarini ko'rsatadi "Hello I'm a JQuery sign” foydalanuvchiga. Keling, ba'zi xususiyatlarni ko'rib chiqaylik:
<script>: jQuery shunchaki JavaScript kutubxonasi, jQuery kodi element ichiga joylashtirilishi mumkin <script>, yoki uni tashqi JavaScript fayliga qo'yishingiz mumkin;$(document).ready(handler); tayyor hodisa sifatida tanilgan. U qayerda handler bu hujjat tayyor bo'lishi bilanoq, ya'ni DOM ierarxiyasi to'liq qurilganida, bajariladigan usulga o'tkaziladigan funktsiyadir.jQuery usuli ready() odatda anonim funksiya bilan ishlatiladi. Shunday qilib, yuqoridagi misolni stenografiyada ham shunday yozish mumkin:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Funktsiya ichida siz asosiy sintaksisga rioya qilgan holda har qanday amalni bajarish uchun jQuery iboralarini yozishingiz mumkin, masalan:
$(selector).action();U qayerda, $(selector) u asosan DOM daraxtidan HTML elementlarini tanlaydi, shuning uchun uni manipulyatsiya qilish mumkin va action() tanlangan elementlarga ba'zi amallarni qo'llang, masalan, CSS xususiyati qiymatini o'zgartirish yoki element tarkibini o'rnatish va hokazo.
Endi paragraf matnini o'rnatuvchi boshqa misolni ko'rib chiqamiz:
<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 misoli selektorga ishora qiladi p, va bu barcha paragraflarni, keyin usulni tanlaydi text() paragrafning matn mazmunini “ bilan belgilangHello World!".
Hujjat tayyor bo'lgach, oldingi misoldagi paragraf matni avtomatik ravishda almashtiriladi. Ammo keling, jQuery kodini ishga tushirishdan oldin biror amalni bajarmoqchi bo'lsangiz, paragraf matnini almashtirish uchun buni qanday qilishni ko'rib chiqamiz.
Keling, oxirgi misolni ko'rib chiqaylik:
<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>Ushbu misolda paragraf matni faqat tugmani bosish hodisasi sodir bo'lganda almashtiriladi "Replace Text", bu shunchaki foydalanuvchi ushbu tugmani bosganini anglatadi.
Sahifadagi noyob identifikatorga ega bitta elementni tanlash uchun ID selektoridan foydalanishingiz mumkin.
Masalan, quyidagi jQuery kodi ID atributiga ega elementni tanlaydi va ta'kidlaydi id="markid", hujjat tayyor bo'lganda.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Sinf selektori muayyan sinfga ega elementlarni tanlash uchun ishlatilishi mumkin.
Masalan, quyidagi jQuery kodi sinf atributiga ega elementlarni tanlaydi va ajratib ko'rsatadi class="markclass", hujjat tayyor bo'lganda.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Element selektori element nomi bo'yicha elementlarni tanlash uchun ishlatilishi mumkin.
Masalan, quyidagi jQuery kodi barcha paragraflarni, ya'ni elementlarni tanlaydi va ta'kidlaydi "<p>" hujjat tayyor bo'lganda.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Siz HTML atributlaridan biriga, masalan, havola atributiga asoslangan elementni tanlash uchun atribut selektoridan foydalanishingiz mumkin. targetyoki kirish atributi type, va boshqalar.
Masalan, quyidagi jQuery kodi barcha matn kiritishlarni, masalan, elementlarni tanlaydi va ta'kidlaydi "<input>" con type="text", hujjat tayyor bo'lganda.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Tanlovingizni yanada aniqroq qilish uchun siz CSS selektorlarini ham birlashtira olasiz.
Masalan, ma'lum turdagi va sinfga ega bo'lgan hujjatdagi elementlarni topish uchun sinf selektorini element selektori bilan birlashtira olasiz.
<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>Selektorlarga qo'shimcha ravishda definiti, jQuery sahifadagi elementlarni tanlash imkoniyatlarini yanada yaxshilash uchun o'zining shaxsiy selektorini taqdim etadi.
<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>Voqealar ko'pincha foydalanuvchining veb-sahifa bilan o'zaro ta'siri natijasida yuzaga keladi, masalan, havola yoki tugmani bosish, kiritish maydoniga yoki matn maydoniga matn kiritish, tanlash maydonida tanlov qilish, klaviaturadagi tugmachani bosish, sichqoncha ko'rsatkichini harakatlantirish. , va boshqalar. Ba'zi hollarda brauzerning o'zi sahifa yuklash va yuklab olish hodisalari kabi hodisalarni ishga tushirishi mumkin.
jQuery ko'pgina mahalliy brauzer voqealari uchun hodisa usullarini taklif qilish orqali hodisalarni boshqarishning asosiy mexanizmlarini yaxshilaydi, bu usullardan ba'zilari ready(), click(), keypress(), focus(), blur(), change(), va boshqalar.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Umuman olganda, voqealarni to'rtta asosiy guruhga bo'lish mumkin:
Sichqoncha hodisasi foydalanuvchi biror narsani bosganda, sichqoncha ko'rsatkichini harakatlantirganda va hokazolarda ishga tushadi.
Bu erda sichqoncha hodisalarini boshqarish uchun tez-tez ishlatiladigan jQuery usullari mavjud.
click()Usul click() hodisa uchun tanlangan elementlarga hodisani qayta ishlash funksiyasini biriktirish "click“. Bog'langan funksiya foydalanuvchi ushbu elementni bosganida amalga oshiriladi. Quyidagi misol elementlarni yashiradi <p> bosilganda sahifada.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Usul dblclick() hodisa uchun tanlangan elementlarga hodisani qayta ishlash funksiyasini biriktirish "dblclick“. Bog'langan funksiya foydalanuvchi ushbu elementni ikki marta bosganida ishlaydi. Quyidagi misol elementlarni yashiradi <p> ularni ikki marta bosganingizda.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Usul hover() sichqoncha ko‘rsatkichi elementlar ichida va tashqarisida harakat qilganda bajariladigan tanlangan elementlarga bir yoki ikkita hodisa ishlov beruvchi funksiyalarini biriktiring. Birinchi funktsiya foydalanuvchi sichqoncha ko'rsatgichini element ustiga qo'yganda ishlaydi, ikkinchi funksiya esa foydalanuvchi sichqoncha ko'rsatgichini ushbu elementdan olib tashlaganida ishlaydi.
Quyidagi misol elementlarni ajratib ko'rsatadi <p> kursorni uning ustiga qo'yganingizda, kursorni olib tashlaganingizda ta'kidlash o'chiriladi.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Usul mouseenter() sichqoncha elementga kirganda bajariladigan tanlangan elementlarga hodisani qayta ishlash funksiyasini biriktirish. Quyidagi misol elementga sinfni ajratib ko'rsatishni qo'shadi <p> kursorni uning ustiga qo'yganingizda.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Usul mouseleave() sichqoncha elementni tark etganda ishlaydigan tanlangan elementlarga hodisani qayta ishlash funksiyasini biriktirish. Quyidagi misol elementdan sinfni ajratib ko'rsatishni olib tashlaydi <p> kursorni undan olib tashlaganingizda.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Klaviatura hodisasi foydalanuvchi klaviaturadagi tugmachani bosganda yoki qo'yib yuborganda paydo bo'ladi. Keling, klaviatura hodisalarini boshqarish uchun ba'zi tez-tez ishlatiladigan jQuery usullarini ko'rib chiqaylik.
keypress()Usul keypress() Brauzer foydalanuvchidan klaviatura kiritishini qabul qilganda ishlaydigan tanlangan elementlarga (odatda shakl boshqaruvi) hodisalarni boshqarish funksiyasini biriktiradi. Quyidagi misol voqea ishga tushirilganda xabarni ko'rsatadi keypress va klaviaturangizdagi tugmani bosganingizda u necha marta ishga tushadi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Klaviaturani bosish hodisasi tugmani pastga tushirish hodisasiga o'xshaydi, faqat o'zgartiruvchi va chop etmaydigan tugmalar, masalan, Shift, Esc, Backspace yoki Delete, o'q tugmalari va boshqalar. ular tugmani bosish hodisalarini ishga tushiradilar, lekin tugmachalarni bosish hodisalarini emas.
keydown()Usul keydown() foydalanuvchi klaviaturadagi tugmachani birinchi bosganida bajariladigan tanlangan elementlarga (odatda shakl boshqaruvi) hodisalarni boshqarish funksiyasini biriktiradi. Quyidagi misol hodisa ishga tushirilganda xabarni ko'rsatadi keydown va klaviaturangizdagi tugmani bosganingizda u necha marta ishga tushadi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Usul keyup() foydalanuvchi klaviaturada tugmachani bo'shatganda bajariladigan tanlangan elementlarga (odatda shakl boshqaruvi) hodisalarni boshqarish funktsiyasini biriktirish. Quyidagi misol voqea ishga tushirilganda xabarni ko'rsatadi keyup va klaviaturangizdagi tugmachani bosganingizda va qo'yib yuborganingizda u necha marta ishga tushadi.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Shakl hodisasi forma boshqaruvi fokusni qabul qilganda yoki yo'qotganda yoki foydalanuvchi shaklni boshqarish qiymatini o'zgartirganda, masalan, matn kiritishga matn kiritish, tanlash oynasida variantni tanlash va hokazolarda ishga tushiriladi. Shakl hodisalarini boshqarish uchun ba'zi tez-tez ishlatiladigan jQuery usullari.
change()Usul change() elementlarga hodisalarni qayta ishlash funksiyasini biriktirish <input> va uning qiymati o'zgarganda bajariladi. Quyidagi misol ochiladigan tanlash oynasida variantni tanlashda ogohlantirish xabarini ko'rsatadi.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Bosish katakchalari, belgilash katakchalari va radio tugmalari uchun hodisa foydalanuvchi sichqonchani tanlaganda darhol ishga tushadi, lekin matn kiritish va matn maydoni uchun hodisa element fokusni yo'qotgandan so'ng yonadi.
focus()Usul focus() tanlangan elementlarga hodisani qayta ishlash funksiyasini biriktiradi (odatda nazorat qiladi va shakl bog'laydi), u diqqat markazida bo'lganda ishlaydi. Quyidagi misol matn kiritish fokusni olganida xabarni ko'rsatadi.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Usul blur() kabi elementlarni shakllantirish uchun hodisa ishlov beruvchi funksiyasini biriktiring <input>, <textarea>, <select> diqqatni yo'qotganda bajariladi. Quyidagi misol matn kiritish fokusni yo'qotganda xabarni ko'rsatadi.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Usul submit() elementlarga hodisalarni qayta ishlash funksiyasini biriktirish <form> foydalanuvchi ariza topshirishga harakat qilganda ishlaydi. Quyidagi misol shaklni yuborishga urinayotganda kiritilgan qiymatga asoslangan xabarni ko'rsatadi.
<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>Hodisalar, shuningdek, DOM (Hujjat ob'ekt modeli) sahifasi tayyor bo'lganda yoki foydalanuvchi brauzer oynasining o'lchamini o'zgartirganda yoki aylantirganda va hokazolarda ishga tushiriladi. Ushbu turdagi hodisalarni boshqarish uchun ba'zi tez-tez ishlatiladigan jQuery usullari.
ready()Usul ready() DOM to'liq yuklanganda bajarilishi kerak bo'lgan funktsiyani belgilaydi.
Quyidagi misol, DOM ierarxiyasi to'liq qurilgan va boshqarishga tayyor bo'lgach, paragraf matnini almashtiradi.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Usul resize() brauzer oynasining o'lchami o'zgarganda ishlaydigan oyna elementiga hodisani qayta ishlash funksiyasini biriktiring.
Quyidagi misolda brauzer oynasining burchaklarini sudrab oʻlchamini oʻzgartirishga harakat qilganingizda joriy kengligi va balandligi koʻrsatiladi.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Usul scroll() oynaga yoki hodisaga ishlov beruvchi funksiyasini biriktiring iframe va ob'ektning aylantirish pozitsiyasi har doim o'zgarganda ishlaydigan aylantiriladigan elementlar.
Quyidagi misol brauzer oynasini aylantirganda xabarni ko'rsatadi.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Casaleggio Associati kompaniyasining Italiyada elektron tijorat bo'yicha yillik hisoboti taqdim etildi. “AI-Commerce: sun’iy intellekt bilan elektron tijoratning chegaralari” deb nomlangan hisobot.…
Doimiy texnologik innovatsiyalar va atrof-muhit va odamlar farovonligiga sodiqlik natijasi. Bandalux Airpure® chodirini taqdim etadi ...
Dizayn naqshlari dasturiy ta'minotni loyihalashda takrorlanadigan muammolarni hal qilishning o'ziga xos past darajadagi echimlari. Dizayn naqshlari ...
Magica - bu iPhone ilovasi bo'lib, u transport vositalarini boshqarishni sodda va samarali qiladi, haydovchilarga tejash va…