JQuery, açık kaynak kodlu ve oldukça popüler JavaScript kütüphanelerinden birisidir. JQuery ile daha az zahmetle, anlaşılır, daha az hataya sahip ve tarayıcıdan bağımsız JavaScript kodları yazmak mümkündür.

En sık kullandığım JQuery ifadeleri aşağıda listelendi.

Örnek HTML içerik. Bu içerik üzerinde aşağıdaki JQuery metotları uygulanacak.

 <div id="container">
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 2</a>
    <input type="text" />
</div>

JQuery metotları

Sayfaya JQuery kütüphanesi eklemek için (CDN üzerinden)

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

$(document).ready(function () { // Sayfa yüklenmesi bittikten sonra çalışacak JavaScript kodu });

$("#container"); // id değeri 'container' olan elaman seçiliyor.
$(".link"); // class değeri 'link' olan elamanlar seçiliyor.
$("input"); // Tüm input elamanları seçiliyor.
$("input[type='text']"); // Attribute kullanılarak elamanlar seçiliyor.
$("#container, .link, input"); // Birden fazla elaman aynı anda seçiliyor.
$("div > .link"); // Parent -> child ilişkisi (örnekte, div içerisinde .link sınıfına sahip tüm elemanlar seçiliyor)
$("div .link"); // Parent -> child ilişkisi (sadece bir alt seviye değil, tüm seviyelerdeki elemanlar seçiliyor)
$(".link").hide(); // Elemanları gizle
$(".link").show(); // Gizlenmiş elemanları görünür yap
$(".link").text(); // Eleman metnini al
$(".link").text("Link new text"); // Eleman metnini al
$("#container").html(); // Eleman HTML içeriğini al
$("#container").html("<a href='#'>new HTML content</a>"); // Eleman HTML içeriğini değiştir.
$("input").val(); // Eleman değeri alınıyor. (bu örnekte input metni)
$("input").val("newValue"); // Eleman değeri değiştiriliyor.
$(".link").attr("href"); // Elemanın özelliğini al (href özelliği alınıyor)
$(".link").attr("href", "http://www..."); // Elemanın bir özelliğini değiştir. Yoksa özelliği ekler.
$(".link").removeAttr("href"); // Elemanın özelliğini siliniyor.
$(".link").addClass("className"); // CSS sınıfı ekler
$(".link").removeClass("className"); // CSS sınıfını kaldırır
$(".link").hasClass("className"); // Eleman belirtilen CSS sınıfına sahip mi?
$("#container").css("propertyName"); // CSS style özelliğini geri döndürür. (örneğin, color)
$("#container").css("propertyName", "value"); // CSS style özelliği değiştiriliyor.
$("#container").width(); // Elemanın genişliği
$("#container").height(); // Elemanın yüksekliği,
$("#container").empty(); // Elemanın tüm içeriğini temizler
$(".link").remove(); // Elemanı siler
$(".link").wrap("<div class='new'></div>"); // Seçilen elemanların her birini, parametre olarak verilen elemanın içine koyar. (örnekte, .link sınıfına sahip her bir elemanı div içerisine alıyor.)
$(".link").wrapAll("<div class='new'></div>"); // Seçilen elemanların tümünü, parametre olarak verilen elemanın içine koyar. (örnekte, .link sınıfına sahip tüm elemanları div içerisine alıyor.)
$(".link").unwrap(); // Seçilen elemanların parent elemanını siler. (örnekte, .link sınıfının yer aldığı div siliniyor.)
$("#container").append("<div class='new'></div>"); // Seçilen elemanların içerisine yeni bir eleman ekler.
$("#container").after("<div class='new'></div>"); // Seçilen elemanın peşine yeni bir eleman ekler.
$("#container").before("<div class='new'></div>"); // Seçilen elemanın öncesine yeni bir eleman ekler.
$(".link").parent(); // Seçilen elemanın içerisinde bulunduğu elaman alınıyor. (örnekte, .link sınıfına ait elamanların yer aldığı div)
$("#container").children(); // Seçilen elemanın tüm alt elemanları alınıyor. Sadece birinci seviyedeki elemanlar alınır.
$("#container").next(); // Sonraki eleman alınır.
$("#container").prev(); // Önceki eleman alınır.
$("#container").find("a"); // Seçilen elemanın, verilen kritere alt elemanları alınıyor. Tüm seviyedeki elemanlar alınır. (örnekte, div içerisindeki tüm a elamanları alınıyor)
$(".link").first(); // Seçilen elemanların ilki alınıyor.
$(".link").eq(1); // .link sınıfına ait ikinci eleman seçiliyor. (zero based index)
$(".link").slice(1, 2); // Seçilen elemanlardan sadece verilen aralıktakiler alınıyor. (örnekte, 2. ve 3. eleman alınıyor. üst sınır verilmezse, 2. elemandan itibaren tüm elemanlar alınır.)
$(".link").add("#container"); // Seçilen elemanlara yeni elemanlar ekler.
$(".link").filter(function () { return $(this).css("display") == "none"; }); // Filtre şartına uyan elemanlar seçiliyor. (örnek, .link sınıfına sahip ve gizlenmemiş tüm elemanlar seçiliyor)
$(".link").each(function (index) { return $(this).hide(); }); // Seçilen elemanların her biri için, verilen fonksiyondaki işlemi uygular.
$(".link").click(function () { alert(1); }); // Seçilen elemana tıklanıyor
$(".link").mouseover(function () { $(this).text("mouse over"); }); // Fare ile elemanın üzerine gelindi
$(".link").mouseout(function () { $(this).text("mouse out"); }); // Fare elemanın üzerinden ayrıldı
$(".link").first().focus(); // Seçilen elemana odaklan
$(window).resize(function () { alert(1); }); // Ekran büyültüldü ya da küçültüldü