JQuery

 Javascripti daha kısa ve kolay kullanmamızı sağlayan kütüphane.

CDN üzerinden google cdn tercih ediliyor.

en çok google üzerinden cdn kullanılıyor. 

$ ve json aynı görevde ve birbirinin yerine kullanılabiliyor.

$("h1")=> h1 etiketi olan tüm elementleri seçer.

$("h1").css("color","red")=> h1 etiketli elemanı seçer ve color propertysine red değeri atar.

console.log($("h1").css("color"))=> h1in color rengini öğrenebiliriz.

Özet: parantez içinde 2 değer varsa atama yapar, tek değer versa varolan değeri geri döner.

Ama js içinde css yapmak uygun değil. bu yüzden csste classlar tanımlayıp js içinde bu classları değiştirmeliyiz. separation of concerns.

$("h1").addClass("yeniClass")=>h1e yeni class tanımını ekler.

$("h1").removeClass("yeniClass")=> yeni class tanımını siler.

$("h1").addClass("yeniClass digerClass")=> birden fazla class, boşluk bırakılarak ekelenebilir.

$("h1").hasClass("yeniClass")=> bu sınıf var mı kontrol eder boolean döner.

$("h1").text("Bye")=> h1in textini değiştirir.

js deki innerHTML yerine jq de html kullanıyorum.

$("button").html("<em>Bye</em>")=> html de etiketleri de değiştirebilirim.

$("img").attr("src")=>attributeları get yapar, getirir.

$("a").attr("class")=> a nın tüm classlarını getirir.

$("h1").click()=> event listener ekliyor.

$("button").click(function(){

$("h1").css("color","red")

}) sayfadaki tüm butonlara bu özeeliği atar, her hangi birine basılınca bütün h1lerin rengi kırmızı olur.

$("input").keypress(function(event){

console.log(event.key);

}) => basılan tuşu tespit eden kod.

Tüm döküman seçilmek istenirse tırnağa gerek yok.

$(document).click() gibi.

$("h1").on("mouseover",function(){} => h1 üzerine gelince istenen fonksiyon çalışır.

$("h1").before("<button>New</button>")=> h1 den önce bir buton yaratır.

before yerine after yazarak sonrasında da oluşturabiliriz.

prepend ve append de önüne ve arkasına ekler ama tagların içine hemen içeriktte önceye ekler. Ör, yani, <h1>den sonra, texten önce.

$("button").remove()=> tüm butnları kaldırır. 

$().hide()=> elementi gizler. show()=> gösterir. toggle()=> görünür yapar ve gizler. dönüşümlü çalışır.

fadeOut()=> hide,show ve toggle ani çalışır. yavaşça solark yok olması için fadeout kullanırım.

fadeIn()=> yavaşça görünür yapar. fadeToggle()=> dönüşümlü açar/kapar.

slideUP(),slideDown(),slideToggle()=>kaydırarak açar, kapatır ve dönüşümlü yapar.

ön tanımlı yerine kendi animasyonumuzu yapabiliriz:

$().animate({opacity:0.5})=> opcityi %50 düşürür.