JQuery Cheat Sheet

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.

JQuery

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ü
Etiketler:  JavaScript

LINQ Cheat Sheet

LINQ kod içerisinde SQL tarzı sorgular yapabilmemize olanak sağlayan bir teknolojidir.

lambda

Urun nesnelerinin ve tamsayı değerlerinin yer aldığı iki farklı dizi üzerinde sorgulama işlemleri gerçekleştirilecektir.

        public class Urun
        {
            public int Numara { get; set; }
            public string Ad { get; set; }
            public string Kategori { get; set; }
            public double Deger { get; set; }
        }

        var dizi = new[] { 2, 3, 7, 4, 5, 4, 9, 1, 3 };
        var urunler = new[]
        {
            new Urun { Numara = 1, Ad = "Kalem", Kategori = "Kırtasiye", Deger = 3 },
            new Urun { Numara = 2, Ad = "Elma", Kategori = "Manav", Deger = 4.2 }
        };

Süzme (Filter)

        // Değeri 3 olan dizi elemanları alınıyor
        var sonuc = (from c in dizi
                        where c == 3
                        select c);

        // 2 farklı kritere göre süzme
        var sonuc = (from c in urunler
                        where c.Kategori == "Manav" && c.Deger > 1
                        select c);

        // Lambda Syntax
        var sonuc = urunler.Where(c => c.Ad == "Elma");

Yansıtma (Projection)

        // Ürünlerin sadece belirli özellikleri listeleniyor.
        // Anonim tip geri döndürülüyor.
        var sonuc = (from c in urunler
                        select new
                        {
                            c.Numara,
                            c.Ad
                        });

        // Lambda Syntax
        var sonuc = urunler.Select(c => new
        {
            c.Numara,
            c.Ad
        });

Sıralama (Order)

        // Dizi tersten sıralanıyor.
        var sonuc = (from c in dizi
                        orderby c descending
                        select c);

        // Birden fazla alana göre sıralanıyor.
        // İlk olarak değere, daha sonra kategoriye göre sıralanır. (sondan başa doğru)
        var sonuc = (from c in urunler
                        orderby c.Kategori, c.Deger descending
                        select c);

        // Lambda Syntax
        var sonuc = urunler.OrderByDescending(c => c.Deger).ThenBy(c => c.Kategori);

Birleştirme (Join)

        // İki liste birleştirilerek, listelerin sadece belirli özellikleri alınıyor.
        var sonuc = (from c in dizi
                        join urun in urunler on c equals urun.Numara
                        select new
                        {
                            c,
                            urun.Ad
                        });

        // Left join
        var sonuc = (from c in dizi
                        join u1 in urunler on c equals u1.Numara into u2
                        from urun in u2.DefaultIfEmpty()
                        select new
                        {
                            c,
                            urun.Ad
                        });

Gruplama (Group)

        // Ürünler kategorilerine göre gruplanıyor.
        // Her bir kategori grubunda kaç adet ürün bulunduğu ve kategorinin toplam değeri listeleniyor.
        var sonuc = (from c in urunler
                        group c by c.Kategori into g
                        select new
                        {
                            Kategori = g.Key,
                            Adet = g.Count(),
                            ToplamDeger = g.Sum(k => k.Deger)
                        });

        // Birden fazla alana göre gruplama
        var sonuc = (from c in urunler
                        group c by new { c.Ad, c.Kategori } into g
                        select new
                        {
                            g.Key.Kategori,
                            Adet = g.Count(),
                            ToplamDeger = g.Sum(k => k.Deger)
                        });
Etiketler:  C#

Kategoriler

Algoritma (4), Cheat Sheet (2), İpucu (4), Kendime Not (1), Kod (5), Proje (4), Veritabanı (3), Workshop (3)

Etiketler

C# (10) HTML (1) JavaScript (2) SQL (3)

İngilizce / Türkçe

İngilizce / Türkçe kelime listesi kendime not