JQuery

Bu yazımızda neler var?

• Sayfaya kod olarak jquery’nin eklenmesi.
• Sayfada bir nesnenin seçilmesi
• Sayfanın yüklenmesi fonksiyonu

Bir Java kütüphanesi olan JQuery ile CSS değerleri atamamızı sağlar.

Javaquery kütüphanesini sayfamıza eklemek için aşağıdaki kodu sayfamıza eklemeliyiz.

<script src="jquery-3.2.1.min.js"></script> 

Bir nesneyi seçerek o nesne üzerinde değişiklik yapmak ve o nesne için fonksiyonlar çalıştırmak için

// $(secici).metotAdi(); Secici ile secilen bir elemente metotAdi ile belirtilen metodu uygula..

            /*
                $(".box");
                $("div.box");
                $("div");
                $("body");
                $("a");
                $("button[name='save']");
                $("#container");
                $("#container .author");
             */

Hazırlanan olayların çalışması için sayfanızın yüklenmesi şart ise ki genelde böyle kullanılıyor. $(document).ready() fonksiyonu kullanılır.

<script type="text/javascript">


$(document).ready(function(){

    // bu alana yazılacak kodlar sayfa yüklendikten sonra çalışacaktır.

 })

</script>

Text Metodu

Seçili nesne içine değer yazma ve seçili nesne içindeki değerleri okumak amacıyla kullanılır. İçine yazılı değerler istenen nesne içinde görünse de html olarak işlenmez. Yazılan html tag’leri dahi düz bir biçimde görüntülenecektir.

İçindeki değeri okumak için

alert($("p").text());

İçine değer atamak için ise

$(“p”).text(“Yeni Değerler”);

Val Metodu

Bu metod. Form nesneleri üzerindeki değerleri almak ve değer yüklemek için kullanılır. Değer almak için,

var data = $("input").val();
alert(data);

Değer yüklemek için kullanımı ise,

$("input").val("Gökhan Kandemir");

Append Metodu
Seçili olan nesnenin içine ekleme yapmak amacıyla kullanılır.

 $(".kutu").append("<p>Eklenecek html ifadeleri yazılır.</p>");

Animasyon Metodları :

fadeIn(): opacity değerini ayarlayarak nesneyi görünür kılar.
fadeOut() : opacity değerini ayarlayarak nesneyi görünmez kılar.
fadeToogle() : fade değerini In ise Out’a, Out ise In’e değiştirir.
fadeTo(“kaç milisaniye”,”opacity”,”olay bitince çalışacak fonksiyon”)
$(“kutu”).fadeTo(1000, .8, function(){alert(“işlem tamam”)})
slideDown() : Aşağı slide açılışı
slideUp() : Yukarı slide kapanışı
show(): Göster
hide() : Gizle

Animasyon metotlarına parametre olarak slow, fast değerleri girilebilir. Ayrıca milisaniye cinsinden değerde girilebilir.
$(“nesne”).fadeIn(“slow”);
$(“nesne”).fadeIn(3000);

CSS Metodu:
Seçtiğimiz nesneye istediğimiz CSS özelliğini atamamızı sağlar.
$(“nesneyi_seçelim”).css(“color”, “red”); yada
$(“nesneyi_seçelim”).css({ “color”: “red”, “border”, “10px”});

Attr Metodu:
Seçtiğimiz nesneye atribute atamamızı yada var olan atribute’i okumamızı sağlar.
Değer atamak için:
$(“nesneyi_seçelim”).attr(“id”,”id_değeri”);

Değer okumak için :
$(“nesneyi_seçelim”).attr(“id”);

RemoveAttr Metodu:
Seçtiğimiz nesnenin içinden atribute silinmesini sağlar.
$(“nesneyi_seçelim”).removeAttr(“data”);

After Metodu:
Seçilen elementin hemen sonuna element ekler.

Before Metodu:
Seçilen elementin hemen önüne element ekler.
$(“secilen_nesne”).before(“<p>Eklenen</p>”);

Show Metodu:
width ve height ayarlayarak nesneyi gösterir.

Clone Metodu:
Nesneyi klonlamak için kullanılır.
$(“p”).clone().appendTo(“body”);

AppendTo Metodu:
Nesneyi istenen nesneye eklemek için kullanılır.