Ajax əsaslı proqram yaratmaq jQuery ilə çox sadə və sürətli olur.
jQuery ilk olaraq 2006-cı ilin əvvəlində Con Resiq tərəfindən yaradılmışdır. jQuery layihəsi hazırda açıq mənbə layihəsi kimi paylanmış tərtibatçılar qrupu tərəfindən saxlanılır və saxlanılır.
jQuery ilə çox vaxt və səyə qənaət edə bilərsiniz. Beləliklə, bu saytı sevimlilərinizə əlavə edin və oxumağa davam edin
jQuery ilə edə biləcəyiniz daha çox şey var.
Siyahı bununla bitmir, jQuery ilə edə biləcəyiniz bir çox başqa gözəl şeylər var.
jQuery-dən istifadə etməyin bir neçə üstünlükləri var:
Başlamaq üçün gəlin əvvəlcə jQuery-nin bir nüsxəsini yükləyək və sonra onu layihəmizə daxil edək. Yükləmək üçün jQuery-nin iki versiyası mövcuddur: tələsik e sıxılmamışdır .
Sıxılmamış fayl inkişaf və ya sazlama üçün daha uyğundur; kiçildilmiş və sıxılmış fayl istehsal üçün tövsiyə olunur, çünki o, bant genişliyinə qənaət edir və daha kiçik fayl ölçüsü sayəsində performansını artırır.
jQuery-ni buradan yükləyə bilərik: https://jquery.com/download/
jQuery faylını yüklədikdən sonra onun js uzantısına malik olduğunu görə bilərsiniz, yəni JavaScript faylıdır. Əslində JQuery JavaScript kitabxanasından başqa bir şey deyil, ona görə də jQuery faylını elementlə HTML sənədinə daxil edə bilərsiniz. adi JavaScript fayllarını daxil etdiyiniz kimi.
<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>Xüsusi skriptlərdən əvvəl həmişə jQuery faylını daxil etməyi unutmayın; əks halda, jQuery kodunuz onlara daxil olmağa çalışdıqda jQuery API-ləri mövcud olmayacaq.
Bildiyiniz kimi, əvvəlki nümunədəki atributu atladıq type="text/javascript" etiketin içərisində . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 və bütün müasir brauzerlərdə tamamlandı.
Alternativ olaraq, faylı yükləməkdən çəkinsəniz, sərbəst mövcud olan CDN (Məzmun Çatdırılma Şəbəkəsi) bağlantıları vasitəsilə jQuery-ni sənədinizə daxil edə bilərsiniz.
CDN-lər yükləmə müddətini azaldaraq performans üstünlüyü təklif edə bilər, çünki onlar jQuery-ni dünya üzrə bir çox serverdə yerləşdirirlər və istifadəçi faylı tələb etdikdə o, ən yaxın serverdən xidmət göstərəcək.
Bunun həm də üstünlüyü var ki, əgər sizin veb səhifə ziyarətçiniz başqa saytlara daxil olarkən eyni CDN-dən jQuery-nin surətini artıq yükləyibsə, o, artıq brauzerinin ön yaddaşında olduğundan onu yenidən yükləməli olmayacaq.
Bu vəziyyətdə yazmalısınız:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jQuery layihəsi tərəfindən təmin edilən CDN-ə əlavə olaraq, jQuery vasitəsilə daxil edə bilərsiniz google e microsoft cdn.
jQuery kitabxanasının məqsədlərini və onu sənədinizə necə daxil edəcəyinizi gördükdən sonra indi jQuery-ni praktikada tətbiq etməyin vaxtıdır.
İndi başlıq mətninin rəngini əvvəlki rəngdən dəyişdirərək sadə jQuery əməliyyatı edəkdefiqaradan yaşıl rəngə boyanmışdır.
<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 başlığın, yəni elementin rəngini dəyişdirərək sadə jQuery əməliyyatı həyata keçirdik jQuery elementinin selektorundan və sənəd hazır olduqda css() metodundan istifadə etməklə, sənəd hazır hadisə kimi tanınır.
jQuery bəyanatı adətən dollar işarəsi ilə başlayır ( $) və nöqtəli vergüllə bitir ( ;).
jQuery-də dollar işarəsi ( $) jQuery üçün sadəcə ləqəbdir. Ən sadə jQuery ifadəsini nümayiş etdirən aşağıdakı nümunə kodu nəzərdən keçirin.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Nümunə sadəcə xəbərdarlıq mesajını göstərir "Hello I'm a JQuery sign” istifadəçiyə. Bəzi xüsusiyyətlərə baxaq:
<script>: jQuery sadəcə JavaScript kitabxanasıdır, jQuery kodu elementin içərisinə yerləşdirilə bilər <script>və ya onu xarici JavaScript faylına qoya bilərsiniz;$(document).ready(handler); hazır hadisə kimi tanınır. O haradadır handler bu, sənəd hazır olan kimi, yəni DOM iyerarxiyası tamamilə qurulduqda, icra ediləcək metoda ötürülən funksiyadır.jQuery metodu ready() adətən anonim funksiya ilə istifadə olunur. Beləliklə, yuxarıdakı nümunə stenoqrafiya ilə də belə yazıla bilər:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Funksiya daxilində siz əsas sintaksisdən sonra istənilən hərəkəti yerinə yetirmək üçün jQuery ifadələrini yaza bilərsiniz, məsələn:
$(selector).action();O haradadır, $(selector) o, əsasən DOM ağacından HTML elementlərini seçir ki, manipulyasiya olunsun və action() seçilmiş elementlər üzərində bəzi hərəkətləri tətbiq etmək, məsələn, CSS xüsusiyyətinin dəyərini dəyişdirmək və ya elementin məzmununu təyin etmək və s.
İndi paraqraf mətnini təyin edən başqa bir nümunəyə baxaq:
<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 nümunəsi seçiciyə aiddir p, və bu, bütün paraqrafları, sonra metodu seçir text() paraqrafın mətn məzmununu “ ilə təyin edinHello World!".
Əvvəlki nümunədəki paraqraf mətni sənəd hazır olduqda avtomatik olaraq dəyişdirilir. Amma gəlin görək, əgər siz jQuery kodunu işə salmadan əvvəl hansısa bir hərəkəti yerinə yetirmək istəsəniz, paraqrafın mətnini əvəz etmək üçün bunu necə edəcəyik.
Son bir misala nəzər salaq:
<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>Bu misalda paraqraf mətni yalnız düymədə klik hadisəsi baş verdikdə dəyişdirilir.Replace Text", bu sadəcə istifadəçinin bu düyməni klikləməsi deməkdir.
Siz səhifədə unikal ID ilə bir elementi seçmək üçün ID seçicisindən istifadə edə bilərsiniz.
Məsələn, aşağıdakı jQuery kodu ID atributuna malik elementi seçəcək və vurğulayacaq id="markid", sənəd hazır olduqda.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Sinif seçicisi müəyyən bir sinfi olan elementləri seçmək üçün istifadə edilə bilər.
Məsələn, aşağıdakı jQuery kodu sinif atributuna malik elementləri seçəcək və vurğulayacaq class="markclass", sənəd hazır olduqda.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Element seçicisi element adı ilə elementləri seçmək üçün istifadə edilə bilər.
Məsələn, aşağıdakı jQuery kodu bütün paraqrafı, yəni elementləri seçəcək və vurğulayacaq "<p>" sənəd hazır olduqda.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Siz link atributu kimi HTML atributlarından birinə əsaslanan elementi seçmək üçün atribut seçicisindən istifadə edə bilərsiniz. targetvə ya girişin atributu typevə s.
Məsələn, aşağıdakı jQuery kodu elementlər kimi bütün mətn daxiletmələrini seçəcək və vurğulayacaq "<input>" ilə type="text", sənəd hazır olduqda.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Seçiminizi daha dəqiq etmək üçün CSS seçicilərini də birləşdirə bilərsiniz.
Məsələn, müəyyən növə və sinfə malik olan sənəddə elementləri tapmaq üçün sinif seçicisini element seçicisi ilə birləşdirə bilərsiniz.
<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>Seçicilərə əlavə olaraq defiBundan əlavə, jQuery səhifədəki elementləri seçmək imkanlarını daha da artırmaq üçün öz fərdi seçicisini təqdim edir.
<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>Hadisələr tez-tez istifadəçinin veb səhifə ilə qarşılıqlı əlaqəsi nəticəsində baş verir, məsələn, keçid və ya düyməni kliklədikdə, giriş qutusuna və ya mətn sahəsinə mətn daxil edərkən, seçim qutusunda seçim edərkən, klaviaturada düyməni basarkən, siçan göstəricisini hərəkət etdirərkən. və s. Bəzi hallarda brauzerin özü səhifənin yüklənməsi və endirilməsi hadisələri kimi hadisələri işə sala bilər.
jQuery əksər yerli brauzer hadisələri üçün hadisə metodlarını təklif etməklə hadisələrin əsas idarə edilməsi mexanizmlərini təkmilləşdirir, bu üsullardan bəziləri bunlardır. ready(), click(), keypress(), focus(), blur(), change()və s.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Ümumiyyətlə, hadisələri dörd əsas qrupa bölmək olar:
Siçan hadisəsi istifadəçi elementə kliklədikdə, siçan göstəricisini hərəkət etdirdikdə və s.
Siçan hadisələrini idarə etmək üçün bir neçə ümumi istifadə olunan jQuery üsulları bunlardır.
click()Metod click() hadisə üçün seçilmiş elementlərə hadisə idarəedici funksiyası əlavə edin "click“. Əlaqədar funksiya istifadəçi həmin elementə klik etdikdə yerinə yetirilir. Aşağıdakı nümunə elementləri gizlədəcək <p> kliklədikdə bir səhifədə.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Metod dblclick() hadisə üçün seçilmiş elementlərə hadisə idarəedici funksiyası əlavə edin "dblclick“. Əlaqədar funksiya istifadəçi həmin elementi iki dəfə kliklədikdə yerinə yetirilir. Aşağıdakı nümunə elementləri gizlədəcək <p> onlara iki dəfə kliklədiyiniz zaman.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Metod hover() siçan göstəricisi elementlərin içərisinə və xaricinə hərəkət etdikdə icra olunan seçilmiş elementlərə bir və ya iki hadisə idarəedici funksiyasını əlavə edin. Birinci funksiya istifadəçi siçan göstəricisini elementin üzərinə qoyanda, ikinci funksiya isə istifadəçi siçan göstəricisini həmin elementdən çıxardıqda işləyir.
Aşağıdakı nümunə elementləri vurğulayacaqdır <p> kursoru onun üzərinə qoyduğunuzda, kursoru çıxardığınız zaman vurğu silinəcək.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Metod mouseenter() siçan elementə daxil olduqda yerinə yetirilən seçilmiş elementlərə hadisə idarəedici funksiyasını əlavə edin. Aşağıdakı nümunə elementə sinif işıqlandırmasını əlavə edəcək <p> kursoru onun üzərinə qoyduğunuzda.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Metod mouseleave() siçan elementi tərk etdikdə işləyən seçilmiş elementlərə hadisə idarəedici funksiyasını əlavə edin. Aşağıdakı nümunə elementdən sinifin vurğulanmasını aradan qaldıracaq <p> kursoru ondan çıxardığınız zaman.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>İstifadəçi klaviaturada düyməni basdıqda və ya buraxdıqda klaviatura hadisəsi yaranır. Klaviatura hadisələrini idarə etmək üçün istifadə olunan bəzi jQuery üsullarına nəzər salaq.
keypress()Metod keypress() brauzer istifadəçidən klaviatura daxiletməsini qəbul edərkən işləyən seçilmiş elementlərə (adətən forma nəzarəti) hadisələrin idarə edilməsi funksiyasını əlavə edir. Aşağıdakı nümunədə hadisə başlandıqda bir mesaj göstərilir keypress və klaviaturada düyməni basdığınız zaman neçə dəfə işə salınır.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Klaviaturanın basılması hadisəsi düymələrin aşağı salınması hadisəsinə bənzəyir, yalnız Shift, Esc, Backspace və ya Delete kimi dəyişdirici və çap olunmayan düymələr, ox düymələri və s. onlar düymələrin basılması hadisələrini yandırırlar, lakin düymələrə basma hadisələrini deyil.
keydown()Metod keydown() seçilmiş elementlərə (adətən forma nəzarəti) hadisənin idarə edilməsi funksiyasını əlavə edir və istifadəçi klaviaturada düyməni ilk dəfə basdıqda yerinə yetirilir. Aşağıdakı nümunədə hadisə başlandıqda bir mesaj göstərilir keydown və klaviaturada düyməni basdığınız zaman neçə dəfə işə salınır.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Metod keyup() istifadəçi klaviaturada düyməni buraxdıqda yerinə yetirilən seçilmiş elementlərə (adətən forma nəzarəti) hadisələrin idarə edilməsi funksiyasını əlavə edin. Aşağıdakı nümunədə hadisə başlandıqda bir mesaj göstərilir keyup və klaviaturanızda bir düyməni basıb buraxdığınız zaman neçə dəfə işə salınır.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Forma nəzarəti fokus aldıqda və ya itirdikdə və ya istifadəçi mətn daxiletməsinə mətn yazmaq, seçim qutusunda seçim seçmək və s. kimi forma nəzarət dəyərini dəyişdikdə, forma hadisəsi tetiklenir. Forma hadisələrini idarə etmək üçün bir neçə ümumi istifadə olunan jQuery üsulları bunlardır.
change()Metod change() elementlərə hadisə idarəedici funksiyasını əlavə edin <input> və dəyəri dəyişdikdə yerinə yetirilir. Aşağıdakı nümunə açılan seçim qutusunda seçim seçərkən xəbərdarlıq mesajı göstərəcək.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Klik qutuları, onay qutuları və radio düymələri üçün hadisə istifadəçi siçan seçimi etdikdə dərhal işə düşür, lakin mətn daxiletmə və mətn sahəsi üçün hadisə element fokusunu itirdikdən sonra işə düşür.
focus()Metod focus() seçilmiş elementlərə (adətən nəzarət edir və forma bağlamaları) hadisə idarəedici funksiyasını əlavə edir ki, bu da diqqət mərkəzində olduqda yerinə yetirilir. Aşağıdakı nümunə mətn daxiletməsi diqqəti aldıqda bir mesaj göstərəcəkdir.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Metod blur() kimi elementləri formalaşdırmaq üçün hadisə idarəedici funksiyasını əlavə edin <input>, <textarea>, <select> diqqəti itirdikdə yerinə yetirilir. Aşağıdakı nümunə mətn daxiletmə fokusunu itirdikdə mesaj göstərəcək.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Metod submit() elementlərə hadisə idarəedici funksiyasını əlavə edin <form> istifadəçi forma təqdim etməyə çalışdıqda işləyir. Aşağıdakı nümunə formanı təqdim etməyə cəhd edərkən daxil edilmiş dəyərə əsaslanan mesajı göstərəcək.
<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>Hadisələr həmçinin DOM (Sənəd Obyekt Modeli) səhifəsinin hazır olduğu və ya istifadəçi brauzer pəncərəsinin ölçüsünü dəyişdikdə və ya sürüşdürdükdə və s. Bu cür hadisələri idarə etmək üçün istifadə olunan bəzi jQuery üsulları buradadır.
ready()Metod ready() DOM tam yükləndikdə yerinə yetiriləcək funksiyanı təyin edir.
Aşağıdakı nümunə DOM iyerarxiyası tam qurulan və manipulyasiyaya hazır olan kimi paraqraf mətnini əvəz edəcək.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Metod resize() brauzer pəncərəsinin ölçüsü dəyişdikdə işləyən pəncərə elementinə hadisə idarəedici funksiyasını əlavə edin.
Aşağıdakı nümunədə brauzer pəncərəsinin künclərini sürükləyərək ölçüsünü dəyişməyə çalışdığınız zaman onun cari eni və hündürlüyü göstəriləcək.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Metod scroll() hadisə idarəedici funksiyasını pəncərəyə və ya pəncərəyə əlavə edin iframe və elementin sürüşdürmə mövqeyi dəyişdikdə işləyən sürüşdürülə bilən elementlər.
Aşağıdakı nümunə brauzer pəncərəsini sürüşdürərkən bir mesaj göstərəcəkdir.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Böyük Britaniyanın CMA süni intellekt bazarında Big Tech-in davranışı ilə bağlı xəbərdarlıq edib. Orada…
Avropa İttifaqı tərəfindən binaların enerji səmərəliliyini artırmaq üçün tərtib edilən "Yaşıl Evlər" Fərmanı qanunvericilik prosesini yekunlaşdırdı ...
Casaleggio Associati-nin İtaliyada e-ticarət üzrə illik hesabatı təqdim olunub. “AI-Commerce: Süni intellektlə elektron ticarətin sərhədləri” başlıqlı hesabat.
Daimi texnoloji yeniliklərin və ətraf mühitə və insanların rifahına bağlılığın nəticəsi. Bandalux Airpure® çadırını təqdim edir...