JQuery'e Giriş (Bölüm 2) Yöntem ve İşlevler

Bu, jQuery web programlama serisine devam eden yeni başlayanların tanıtımıdır. Bölüm 1, jQuery temellerini kapsamıştır jQuery Eğitimi - Başlarken: Temel Bilgiler ve Seçiciler jQuery Eğitimi - Başlarken: Temel Bilgiler ve Seçiciler Geçen hafta, jQuery'nin herhangi bir modern web geliştirici için ne kadar önemli olduğu ve neden harika olduğu hakkında konuştum. Bu hafta, sanırım bir kodla ellerimizi kirletme zamanı geldi ve bunu… projenize nasıl dahil edeceğinizi ve seçicileri öğrendik. 2. bölümde, bu DOM öğeleri üzerinde gerçekleştirebileceğiniz bazı yöntemlere ve bazı dil temellerine bakarken temel kullanıma devam edeceğiz.

$ (Seçici) .method ();

Ders 1'den hatırlıyorsanız, jQuery'deki DOM manipülasyonunun temel yapısı budur. DOM manipülasyonu elbette jQuery ile yapabileceğiniz tek şey değil, ama başlangıç ​​ve en yaygın olan en kolay yer bu yüzden seçtik..

Hızlıca yeniden özetlemek için, bu ifadenin seçici kısmı DOM parçalarını bulmak için CSS benzeri eleman adlarını, sınıfları veya kimlikleri kullanmanızı sağlar. Örneğin, tüm sınıf adına sahip .gizli, kullanırdık:

$ ( 'Div.hidden')

Bu denklemin ikinci kısmı, onları bulduktan sonra bu DIV'lerde gerçekleştirme yöntemidir (eğer varsalar; yoksa bunlar yalnızca bir olabilir) “eşleştirme” öğesi). Unutmayın, jQuery, ID seçimleri için yalnızca bir öğe döndürür, çünkü Kimlikler benzersiz öğelere atıfta bulunmalıdır. Birden fazla şeye sahip olacaksanız, CSS'de sınıf olarak tanımlanması gerekir..

Daha sonra yöntemlere; Yine de DOM unsurları ile neler yapabilirsiniz??

Öncelikle, sizi tanıttım .css Son kez test edin, böylece test etmek için kullanabilirsiniz. Format basittir:

.CSS (niteliği ', 'değeri');

Bu nedenle, CSS tarafından tanımlanabilir herhangi bir şey jQuery - renkler, şeffaflık, konum, boyut - ada göre ancak birkaçı ile ayarlanabilir. Değişiklik hemen.

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

.(: Hız,  'değeri' özelliği '); animasyon

Örnek olarak:

.(: '0.25', 'yüksekliği': 'donukluk '100 piksel' 'hızlı') animasyon;

Bu noktada, kaşlı ayraçların ne için olduğunu merak ediyor olabilirsiniz; onlar denir “değişmez nesne”, ve genellikle bir liste oluşturmak için kullanılır. mülk değeri çiftleri, bir tür dizine alınmış dizi eğer diğer dillerden geliyorsan. Onları jQuery'de çok kullanacaksınız, bu yüzden tekrar söyleyeceğim - kapalı parantez ve parantezleri doğru şekilde kontrol etmeye alışın!

Animate yönteminin birçok çalışma örneği için bu sayfaya göz atın.

Bir şeyin CSS özelliklerini değiştirmenin yanı sıra, içeriğini de .text (), .html () ve .val () yöntemlerinin de kullanımı (val, form öğelerinin içeriği içindir). Bu yöntemler her ikisi de gibi davranır setters ve almakters; bir değer belirtmezseniz, geçerli değeri alırlar. Bir değer belirtirseniz, geçerli değeri değiştirir.

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

İsim alanının geçerli değerini yorum formunda alın ve değişkene atayın comment_name:

var commenter_name = $ (# comment-form #name) .val ();

Değerini, alınan kapma değerine ayarlayın. COMMENTER_NAME:

. $ ( 'Span.name') Metin (COMMENTER_NAME);

O zaman DOM parçalarını klonlamak, dolaşmak, eklemek ya da silmek için çok çeşitli yöntemler var. Hayal gücünüzü sınır, gerçekten.

Diyelim ki içerik sütunundaki her 3. paragraftan sonra dinamik olarak bir reklam resim bloğu eklemek istediniz, ancak ilk sayfa yükünün temiz tutulması için Javascript'te yapıyorsunuz. Oldukça karmaşık geliyor değil mi? Zorlukla…

$ ('div # içerik p: nth-çocuk (3n)'). sonra ('
Ayrıca, bir şeyi yapmanın birden fazla yolu olabileceğini unutmayın. Örneğin, doğru nesneyi daraltamazsanız InsertAfter (), belki de bulmayı düşünüyorum Sonraki Çocuk aşağı ve kullanma insertBefore () yerine.
Yöntem Zincirleme
Son olarak bugün, yöntem zincirleme hakkında kısaca söz edelim, temelde sadece harika. İlk olarak, aşağıdaki kod satırlarını göz önüne alalım:
$ ( 'Nav # menü') fadeIn ( 'hızlı').; $ ( 'Nav # menü') addClass ( 'beingShown.'); $ ( 'Nav # menü') css ( 'margin-right', '10px.');
Bu yeterince makul geliyor değil mi? Ama aynı şeyi sadece bir satırda yapabilirsiniz:
$ ( 'Nav # menü') fadeIn ( 'hızlı') addClass ( 'beingShown') css ( 'margin-right', '10px')...;
Bu tamamen aynı şeyi yapar ve denir yöntem zinciri. Neredeyse tüm jQuery yöntemleri bir jQuery nesnesini kendileri döndürdüğü için, 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.
Niye ya? Temel jQuery'yi her çağırışınızda $ komut ve seçiciden, eşleşen bir öğe arayan DOM ağacında arama yapmasını istiyorsunuz. Yöntemleri zincirlediğinizde, DOM'a geri dönmeye devam etmenize gerek kalmaz, çünkü şimdi nerede olduklarını bilir ve yöntemi anında uygulayabilir.
Bugünlük bu kadar ve sanırım oldukça fazla yer kapladık. Şimdi oldukça ağır DOM manipülasyonları yapabilme yeteneğine sahip olmalısınız, bu yüzden bir yöntem hazırlayın, yöntemlerinizi birlikte zincirleyin ve sayfanın gerçek bir karmaşasını yapın. Şimdilik, sayfanın geri kalan kısmının yüklenmesine izin 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 anonim işlevlerin meraklı olayıyla yapılmasını sağlama konusunu ele alacağız.
Bu yayına yeni girdiyseniz, muhtemelen bir tür web geliştiricisisiniz ve tüm WordPress ve blog makalelerimizi ve hatta En İyi WordPress Eklentileri sayfamıza göz atmak isteyebilirsiniz..