Ajax tabanlı bir uygulama oluşturmak, jQuery ile çok basit ve hızlı hale geliyor.
jQuery ilk olarak 2006'nın başlarında John Resig tarafından oluşturuldu. jQuery projesi şu anda bir açık kaynak projesi olarak dağıtılmış bir geliştirici grubu tarafından sürdürülmekte ve sürdürülmektedir.
jQuery ile zamandan ve emekten çok tasarruf edebilirsiniz. O halde bu siteyi favorilerinize ekleyin ve okumaya devam edin.
jQuery ile yapabileceğiniz daha birçok şey var.
Liste burada bitmiyor, jQuery ile yapabileceğiniz daha pek çok harika şey var.
Kişinin jQuery kullanmayı tercih etmesinin birkaç avantajı vardır:
Başlamak için önce bir jQuery kopyası indirelim ve ardından onu projemize dahil edelim. jQuery'nin iki sürümü indirilebilir: sıkıştırmak e sıkıştırılmamış .
Sıkıştırılmamış dosya, geliştirme veya hata ayıklama için daha uygundur; Küçültülmüş ve sıkıştırılmış dosya, bant genişliğinden tasarruf sağladığı ve daha küçük dosya boyutu nedeniyle performansı iyileştirdiği için üretim için önerilir.
JQuery'i buradan indirebiliriz: https://jquery.com/download/
JQuery dosyasını indirdikten sonra, bir js uzantısına sahip olduğunu, yani bir JavaScript dosyası olduğunu görebilirsiniz. Aslında JQuery bir JavaScript kitaplığından başka bir şey değildir, bu nedenle jQuery dosyasını öğeyle birlikte HTML belgesine dahil edebilirsiniz. tıpkı normal JavaScript dosyalarını eklediğiniz gibi.
<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 dosyasını her zaman özel betiklerden önce eklemeyi unutmayın; aksi takdirde, jQuery kodunuz bunlara erişmeye çalıştığında jQuery API'leri kullanılamaz.
Fark etmiş olabileceğiniz gibi, önceki örnekte niteliği atladık. type="text/javascript" etiketin içinde . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5'te ve tüm modern tarayıcılarda tamamlandı.
Alternatif olarak, dosyayı indirmekten kaçınmak istiyorsanız, jQuery'i ücretsiz olarak kullanılabilen CDN (İçerik Dağıtım Ağı) bağlantıları aracılığıyla belgenize gömebilirsiniz.
CDN'ler, jQuery'i dünya çapında birden çok sunucuda barındırdıkları ve bir kullanıcı dosyayı istediğinde, dosyaya en yakın sunucudan sunulacağı için yükleme süresini azaltarak performans avantajı sunabilir.
Bunun ayrıca, web sayfası ziyaretçiniz diğer siteleri ziyaret ederken aynı CDN'den jQuery'nin bir kopyasını zaten indirmişse, zaten tarayıcılarının önbelleğinde olduğu için onu tekrar indirmesi gerekmeyeceği avantajı da vardır.
Bu durumda şunu yazmanız gerekecek:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery projesi tarafından sağlanan CDN'ye ek olarak, jQuery'i şu yolla dahil edebilirsiniz: Google e Microsoft cdn.
jQuery kitaplığının amaçlarını ve onu belgenize nasıl ekleyeceğinizi gördükten sonra şimdi jQuery'i uygulamaya koymanın zamanı geldi.
Şimdi başlık metni rengini ön renkten değiştirerek basit bir jQuery işlemi yapalım.defibitmiş siyahtan yeşil renge.
<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, yani öğenin rengini değiştirerek basit bir jQuery işlemi gerçekleştirdik. belge hazır olduğunda jQuery öğesinin seçicisini ve css() yöntemini kullanma, belge hazır olayı olarak bilinir.
Bir jQuery deyimi genellikle dolar işaretiyle başlar ( $) ve noktalı virgülle ( ;).
JQuery'de dolar işareti ( $) sadece jQuery için bir takma addır. En basit jQuery deyimini gösteren aşağıdaki örnek kodu göz önünde bulundurun.
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>Örnek, basitçe bir uyarı mesajı görüntüler "Hello I'm a JQuery sign” kullanıcıya. Bazı özellikleri görelim:
<script>: jQuery sadece bir JavaScript kitaplığıdır, jQuery kodu öğenin içine yerleştirilebilir <script>veya harici bir JavaScript dosyasına koyabilirsiniz;$(document).ready(handler); hazır olay olarak bilinir. Nerede handler belge hazır olur olmaz, yani DOM hiyerarşisi tamamen oluşturulduğunda, yürütülecek yönteme iletilen bir işlevdir.jQuery yöntemi ready() genellikle anonim bir işlevle birlikte kullanılır. Dolayısıyla, yukarıdaki örnek şu şekilde kısa gösterimle de yazılabilir:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>Bir işlevin içinde, aşağıdaki gibi temel sözdizimini izleyen herhangi bir eylemi gerçekleştirmek için jQuery ifadeleri yazabilirsiniz:
$(selector).action();Nerede, $(selector) temel olarak DOM ağacından HTML öğelerini seçer, böylece manipüle edilebilir ve action() CSS özelliğinin değerini değiştirmek veya öğenin içeriğini ayarlamak gibi seçili öğelere bazı eylemler uygulayın.
Şimdi paragraf metnini ayarlayan başka bir örneğe bakalım:
<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 örneği, seçiciyi ifade eder p, ve bu, tüm paragrafları ve ardından yöntemi seçer text() paragrafın metin içeriğini “ ile ayarlayınHello World!".
Önceki örnekteki paragraf metni, belge hazır olduğunda otomatik olarak değiştirilir. Ancak, paragrafın metnini değiştirmek için jQuery kodunu çalıştırmadan önce bir eylem gerçekleştirmek istemeniz durumunda bunu nasıl yapacağınıza bakalım.
Son bir örneği ele alalım:
<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 örnekte, paragraf metni yalnızca " düğmesinde bir tıklama olayı meydana geldiğinde değiştirilir.Replace Text", bu sadece bir kullanıcı bu düğmeyi tıkladığında anlamına gelir.
Sayfadaki benzersiz kimliğe sahip tek bir öğeyi seçmek için kimlik seçiciyi kullanabilirsiniz.
Örneğin, aşağıdaki jQuery kodu, ID özelliğine sahip bir öğeyi seçecek ve vurgulayacaktır. id="markid", belge hazır olduğunda.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>Sınıf seçici, belirli bir sınıfa sahip öğeleri seçmek için kullanılabilir.
Örneğin, aşağıdaki jQuery kodu, class niteliğine sahip öğeleri seçecek ve vurgulayacaktır. class="markclass", belge hazır olduğunda.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>Öğe seçici, öğeleri öğe adına göre seçmek için kullanılabilir.
Örneğin, aşağıdaki jQuery kodu tüm paragrafı, yani öğeleri seçecek ve vurgulayacaktır. "<p>" belge hazır olduğunda.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>Bağlantı özelliği gibi HTML özniteliklerinden birine dayalı bir öğe seçmek için öznitelik seçiciyi kullanabilirsiniz. targetveya bir girdinin özniteliği type, vb.
Örneğin, aşağıdaki jQuery kodu, öğeler gibi tüm metin girişlerini seçecek ve vurgulayacaktır. "<input>" ile type="text", belge hazır olduğunda.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>Seçiminizi daha da hassas hale getirmek için CSS seçicilerini de birleştirebilirsiniz.
Örneğin, bir belgede belirli bir tür ve sınıfa sahip öğeleri bulmak için sınıf seçiciyi bir öğe seçiciyle birleştirebilirsiniz.
<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çicilere ek olarak definiti'de jQuery, bir sayfadaki öğeleri seçme yeteneklerini daha da geliştirmek için kendi özel seçicisini sağlar.
<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>Olaylar genellikle, örneğin bir bağlantıya veya düğmeye tıklamak, bir giriş kutusuna veya metin alanına metin girmek, bir seçim kutusunda seçim yapmak, klavyede bir tuşa basmak, fare imlecini hareket ettirmek gibi web sayfasıyla kullanıcı etkileşimi tarafından tetiklenir. , vesaire. Bazı durumlarda tarayıcının kendisi sayfa yükleme ve indirme olayları gibi olayları tetikleyebilir.
jQuery, çoğu yerel tarayıcı olayı için olay yöntemleri sunarak temel olay işleme mekanizmalarını geliştirir; bu yöntemlerden bazıları şunlardır: ready(), click(), keypress(), focus(), blur(), change(), vb.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>Genel olarak, olaylar dört ana gruba ayrılabilir:
Kullanıcı bir öğeye tıkladığında, fare imlecini hareket ettirdiğinde vb. bir fare olayı tetiklenir.
Fare olaylarını işlemek için yaygın olarak kullanılan bazı jQuery yöntemlerini burada bulabilirsiniz.
click()Yöntem click() " olayı için seçilen öğelere bir olay işleyici işlevi ekleyinclick“. Bağlantılı işlev, kullanıcı o öğeye tıkladığında yürütülür. Aşağıdaki örnek öğeleri gizleyecektir <p> tıklandığında bir sayfada
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()Yöntem dblclick() " olayı için seçilen öğelere bir olay işleyici işlevi ekleyindblclick“. Bağlantılı işlev, kullanıcı o öğeyi çift tıklattığında yürütülür. Aşağıdaki örnek öğeleri gizleyecektir <p> onları çift tıklattığınızda.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()Yöntem hover() seçili öğelere, fare işaretçisi öğelerin içine ve dışına hareket ettiğinde yürütülen bir veya iki olay işleyici işlevi ekleyin. İlk işlev, kullanıcı fare işaretçisini bir öğenin üzerine getirdiğinde çalışır, ikinci işlev ise kullanıcı fare işaretçisini o öğeden kaldırdığında çalışır.
Aşağıdaki örnek öğeleri vurgulayacaktır <p> imleci üzerine getirdiğinizde, imleci kaldırdığınızda vurgu kaldırılacaktır.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()Yöntem mouseenter() seçilen öğelere, fare bir öğeye girdiğinde yürütülen bir olay işleyici işlevi ekleyin. Aşağıdaki örnek, öğeye sınıf vurgulaması ekleyecektir. <p> imleci üzerine getirdiğinizde.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()Yöntem mouseleave() fare bir öğeden ayrıldığında çalışan seçili öğelere bir olay işleyici işlevi ekleyin. Aşağıdaki örnek, sınıf vurgusunu öğeden kaldıracaktır. <p> imleci ondan kaldırdığınızda.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>Kullanıcı klavyede bir tuşa bastığında veya bıraktığında bir klavye olayı başlatılır. Klavye olaylarını işlemek için yaygın olarak kullanılan bazı jQuery yöntemlerine bakalım.
keypress()Yöntem keypress() tarayıcı kullanıcıdan klavye girişi aldığında çalışan seçili öğelere (genellikle form denetimleri) bir olay işleme işlevi ekler. Aşağıdaki örnek, olay tetiklendiğinde bir mesaj görüntüleyecektir. keypress ve klavyenizdeki tuşa bastığınızda kaç kez tetiklendiğini.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Tuşa basma olayı, tuşa basma olayına benzer, ancak Shift, Esc, Backspace veya Delete gibi değiştirici ve yazdırılmayan tuşlar, ok tuşları vb. tuşa basma olaylarını tetiklerler ancak tuşa basma olaylarını tetiklemezler.
keydown()Yöntem keydown() kullanıcı klavyede bir tuşa ilk bastığında yürütülen seçili öğelere (tipik olarak form kontrolleri) bir olay işleme işlevi ekler. Aşağıdaki örnek, olay tetiklendiğinde bir mesaj görüntüleyecektir. keydown ve klavyenizdeki tuşa bastığınızda kaç kez tetiklendiğini.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()Yöntem keyup() kullanıcı klavyede bir tuş bıraktığında yürütülen seçili öğelere (tipik olarak form denetimleri) bir olay işleme işlevi ekleyin. Aşağıdaki örnek, olay tetiklendiğinde bir mesaj görüntüleyecektir. keyup ve klavyenizdeki bir tuşa basıp bıraktığınızda kaç kez tetiklendiğini.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>Bir form denetimi odağı aldığında veya kaybettiğinde ya da kullanıcı bir metin girişine metin yazmak, seçim kutusunda bir seçeneği belirlemek vb. gibi bir form denetimi değerini değiştirdiğinde bir form olayı tetiklenir. Form olaylarını işlemek için yaygın olarak kullanılan bazı jQuery yöntemlerini burada bulabilirsiniz.
change()Yöntem change() öğelere bir olay işleyici işlevi ekleyin <input> ve değeri değiştiğinde yürütülür. Aşağıdaki örnek, açılır seçim kutusunda bir seçenek seçildiğinde bir uyarı mesajı görüntüleyecektir.
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>Tıklama kutuları, onay kutuları ve radyo düğmeleri için, kullanıcı bir fare seçimi yaptığında olay hemen tetiklenir, ancak metin girişi ve metin alanı için olay, öğe odağı kaybettikten sonra tetiklenir.
focus()Yöntem focus() Odaklandığında yürütülen seçili öğelere (tipik olarak kontroller ve form bağlamaları) bir olay işleyici işlevi ekler. Aşağıdaki örnek, metin girişi odaklandığında bir mesaj görüntüler.
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()Yöntem blur() gibi öğeleri oluşturmak için bir olay işleyici işlevi ekleyin. <input>, <textarea>, <select> odağı kaybettiğinde yürütülür. Aşağıdaki örnek, metin girişi odağı kaybettiğinde bir mesaj görüntüleyecektir.
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()Yöntem submit() öğelere bir olay işleyici işlevi ekleyin <form> kullanıcı bir form göndermeye çalıştığında çalışır. Aşağıdaki örnek, formu göndermeye çalışırken girilen değere dayalı bir mesaj görüntüler.
<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>Olaylar ayrıca DOM (Belge Nesne Modeli) sayfasının hazır olduğu bir durumda veya kullanıcı tarayıcı penceresini yeniden boyutlandırdığında veya kaydırdığında vb. tetiklenir. İşte bu tür olayları işlemek için yaygın olarak kullanılan bazı jQuery yöntemleri.
ready()Yöntem ready() DOM tamamen yüklendiğinde yürütülecek bir işlevi belirtir.
Aşağıdaki örnek, DOM hiyerarşisi tam olarak oluşturulduğunda ve manipüle edilmeye hazır olduğunda paragraf metninin yerini alacaktır.
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()Yöntem resize() tarayıcı penceresinin boyutu değiştiğinde çalışan pencere öğesine bir olay işleyici işlevi ekleyin.
Aşağıdaki örnek, köşelerini sürükleyerek yeniden boyutlandırmaya çalıştığınızda tarayıcı penceresinin geçerli genişliğini ve yüksekliğini gösterecektir.
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()Yöntem scroll() pencereye veya pencereye bir olay işleyici işlevi ekleyin. iframe ve öğenin kaydırma konumu değiştiğinde çalışan kaydırılabilir öğeler.
Aşağıdaki örnek, tarayıcı penceresini kaydırırken bir mesaj görüntüler.
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Boyama yoluyla ince motor becerilerini geliştirmek, çocukları yazma gibi daha karmaşık becerilere hazırlar. Renklendirmek…
Denizcilik sektörü, 150 milyarlık bir pazara doğru yol alan gerçek bir küresel ekonomik güçtür...
Geçen Pazartesi Financial Times, OpenAI ile bir anlaşma yaptığını duyurdu. FT, birinci sınıf gazeteciliğine lisans veriyor…
Milyonlarca insan aylık abonelik ücreti ödeyerek akış hizmetleri için ödeme yapıyor. Yaygın kanaat şu ki…