JQuery'ye Giriş (Bölüm 2): Yöntemler ve İşlevler

İlan

Bu, jQuery web programlama serisine devam eden yeni başlayanların bir parçasıdır. Bölüm 1 jQuery temellerini ele aldı jQuery Eğitimi - Başlarken: Temel Bilgiler ve SeçicilerGeçen hafta, jQuery'nin herhangi bir modern web geliştiricisi için ne kadar önemli olduğunu ve neden harika olduğunu anlattım. Bu hafta, sanırım ellerimizi bir kodla kirletip nasıl öğrendiğimizi ... Daha fazla oku projenize nasıl dahil edeceğinizi ve seçicileri. Bölüm 2'de, bu DOM öğelerinde gerçekleştirebileceğiniz bazı yöntemlere ve daha fazla dil temeline baktığımızda temel kullanıma devam edeceğiz.

$(selektör).yöntem();

Ders 1'den hatırlarsanız, bu jQuery'de bir DOM manipülasyonunun temel yapısıdır. DOM manipülasyonu elbette jQuery ile yapabileceğiniz tek şey değil, ancak başlamak için en kolay ve en yaygın yer, bu yüzden onu seçtik.

Hızlı bir şekilde özetlemek gerekirse, selektör bu ifadenin bir kısmı, DOM'un bölümlerini bulmak için CSS benzeri öğe adlarını, sınıfları veya kimlikleri kullanmanızı sağlar. Örneğin, tüm sınıf adı ile .gizli, kullanırdık:

$ ( 'Div.hidden')

Bu denklemin ikinci kısmı yöntem bulduktan sonra bu DIV'lerde performans göstermek (eğer varsa); veya yalnızca bir "eşleşen" öğe olabilir). Unutmayın, jQuery kimlik seçimleri için yalnızca bir öğe döndürür, çünkü kimlikler benzersiz öğelere başvurmalıdır. Bir şeyden daha fazlasına sahip olacaksanız, CSS'de bir sınıf olarak tanımlanmalıdır.

O zaman yöntemlere; Zaten DOM unsurlarıyla ne yapabilirsiniz?

Öncelikle, sizi .css yöntemini son kez test edin, böylece test için kullanabilirsiniz. Biçim basit:

Css (niteliği ', 'değeri');

CSS tarafından tanımlanabilir herhangi bir şey bu nedenle jQuery - renkler, saydamlık, konum, boyut - adıyla ancak birkaçıyla ayarlanabilir. Değişiklik hemen gerçekleşir.

CSS değişikliklerini canlandırmayı tercih ederseniz, size harika haberlerim var; bir yöntem de var .animate (). Yine de biraz daha karmaşık:

.animate ({niteliği ': 'değeri'}, hız);

Örnek olarak:

.animate ({ 'opaklık': '0.25', height: '100 piksel'} 'hızlı');

Bu noktada, kıvırcık parantezlerin ne için olduğunu merak ediyor olabilirsiniz; bunlara "nesne değişmezi" denir ve genellikle aşağıdakilerin bir listesini oluşturmak için kullanılır mülk değeri çiftler gibi dizinlenmiş dizi diğer dillerden geliyorsanız. Onları jQuery'de çok kullanacaksınız, bu yüzden tekrar söyleyeceğim - kapalı parantez ve parantezleri doğru bir şekilde kontrol etmeye alışın!

Çıkış yapmak bu sayfa animate yönteminin birçok çalışma örneği için.

Bir şeyin CSS özelliklerini değiştirmenin yanı sıra, içeriğinin .text (), .html () ve .val () yöntemleri de (val, form öğelerinin içeriği içindir). Bu yöntemler hem Ayarlamakters ve almakters; bir değer belirtmezseniz, geçerli değeri alırlar. Bir değer belirtirseniz, bunlar geçerli değerin yerini alır.

İşte bazı hızlı örnekler:

Yorum alanındaki ad alanının geçerli değerini alın ve bir değişkene atayın comment_name:

var commenter_name = $ (# yorum-formu #name) .val ();

Değerini ayarlayın yakalanan değere COMMENTER_NAME:

$ ('span.name'). metin (yorumcu_adı);

Ardından, DOM'un parçalarını klonlamak, hareket etmek, eklemek veya silmek için çok çeşitli yöntemler var. Hayal gücünüz gerçekten sınır.

Diyelim ki her üç ayda bir dinamik olarak bir reklam resim bloğu eklemek istiyorsunuz sütununu içeriyor, ancak ilk sayfa yüklemesinin olabilmesi için Javascript'te yapıyorsunuz temiz tutulması. Kulağa oldukça karmaşık geliyor, değil mi? Zorlukla…

$('div # contentp: n'inci çocuk (3n)').sonra('');

Bunu bozmak için jQuery'den:

1. "İçerik" kimliğine sahip div'i bulun
2. Bu div içindeki p'leri bulun
3. Her 3 p'ye bir filtre nth-child sözde seçici kullanarak (burada daha fazlası)
4. Sonra keyfi bir img ekle eşleşen her öğe

Burada tüm yöntemleri listeleyemiyorum ve bunu da okumak istemezsiniz. Mesele şu ki, manipülasyon söz konusu olduğunda aklınıza gelebilecek her şeyi yapmak için bir yöntem var, bu yüzden API'yı kontrol et biri için kullanabilirsiniz.

Ayrıca, bir şey yapmanın birden fazla yolu olabileceğini unutmayın. Örneğin, doğru nesneyi InsertAfter (), belki de Sonraki çocuk aşağı ve kullanma insertBefore () yerine.

Yöntem Zinciri

Son olarak, bugün yöntem zincirleme hakkında kısaca söz edelim, temelde harika olduğu için. İlk olarak, aşağıdaki kod satırlarını ele alalım:

$ ( 'Nav # menü') fadeIn ( 'hızlı').; $ ( 'Nav # menü') addClass ( 'beingShown.'); $ ( 'Nav # menü') css ( 'margin-right', '10px.');

Kulağa makul geliyor, değil mi? Ancak aynısını tek bir satırda yapabilirsiniz:

$ ( 'Nav # menü') fadeIn ( 'hızlı') addClass ( 'beingShown') css ( 'margin-right', '10px')...;

Bu tamamen aynı şeyi yapar ve denir yöntem zincirleme. Hemen hemen tüm jQuery yöntemleri bir jQuery nesnesini kendileri döndürdüğünden, her biri bir sonrakine beslenebilir. Bu, daha az kod anlamına gelir - bu her zaman iyi bir şeydir - ancak aslında daha hızlı çalışır.

Neden? Temel jQuery'yi her çağırışınızda $ komutunu ve seçicisini kullanarak, eşleşen bir öğe arayan DOM ağacında arama yapmasını istersiniz. Yöntemleri zincirlediğinizde, şu anda nerede olduklarını bildiğinden ve yöntemi anında gerçekleştirebildiğinden DOM'a başvurmaya devam etmeniz gerekmez.

Bugünlük bu kadar ve bence muhtemelen çok fazla iş yaptık. Şimdi oldukça ağır DOM manipülasyonları yapabilme yeteneğine sahip olmalısınız, bu yüzden bir deneyin, yöntemlerinizi bir araya getirin ve sayfanın gerçek bir karmaşasını yapın. Şimdilik, sayfanın geri kalanına yüklenme süresi vermek için komut dosyalarınızı altbilgiye yerleştirmek isteyeceksiniz. Gelecek hafta, jQuery'nin yalnızca her şey olaylarla doğru bir şekilde yüklendiğinde ve meraklı anonim işlevler durumunda bir şeyler yapması sorununu ele alacağız.

Bu gönderiye yeni girdiyseniz, muhtemelen bir tür web geliştiricisisiniz ve tüm sitemize göz atmak isteyebilirsiniz. WordPress ve Bloglama makaleler, hatta bizim En İyi WordPress Eklentileri En İyi WordPress Eklentileri Daha fazla oku sayfa.