Geçen hafta, jQuery'nin Web İnteraktif Yapmanın Ne Kadar Önemli Olduğunu Konuştum: jQuery'e Giriş Web İnteraktif Yapma: jQuery'e Giriş jQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kütüphanesidir - web sitelerini etkileşimli kılar. Bu tek Javascript kütüphanesi değil, fakat herhangi bir modern web geliştiricisine en gelişmiş, en çok desteklenen ve en çok kullanılan… neden harika. Bu hafta bence bazı kodlarla ellerimizi kirletme ve projelerimizde jQuery'den nasıl faydalanabileceğimizi öğrenmenin zamanı geldi..

Bunu şimdi söyleyeceğim - jQuery kullanmak için Javascript öğrenmenize gerek yok. JQuery'yi Javascript'in bir evrimi olarak düşünmek - bunun daha iyi bir yolu - sadece işlevsellik katan bir kütüphane yerine, en iyisidir. İhtiyacınız olan herhangi bir Javascript yolda alınacaktır. Bununla birlikte, bir web geliştiricisi olarak HTML ve CSS hakkında oldukça iyi bir bilgiye sahip olduğunuz varsayılmaktadır (ve işte size yararlı olmayan ücretsiz xHTML kılavuzu!).

Belge Nesnesi Modeli

jQuery tamamen geçiş ve manipülasyon hakkında DOM - Document ONesne Model. DOM, tüm HTML kodunu okuduktan sonra tarayıcılar tarafından oluşturulan sayfanın hiyerarşik bir ağaç temsilidir. JQuery, gibi terminoloji kullanacağız ebeveyn, çocuklar, ve kardeşler oldukça sık, bu yüzden DOM ile ilgili olarak bunun ne anlama geldiği hakkında bir fikriniz olmalı.

W3schools'un bu basit diyagramı kavramları oldukça iyi açıklıyor. Öğenin ebeveyni olduğunu görebilmeniz gerekirken, öğenin hemen

kardeş.

Başlarken: jQuery ekleme

JQuery'nin en son sürümü, sıkıştırıldığında yaklaşık 91 KB'dir, bu nedenle küçük bir fotoğraf veya ekran görüntüsü ile aynı sayfa ağırlığını ekler. Projenize jQuery'yi dahil etmenin en kolay yolu, en son barındırılan sürüme bir referansı site başlık bölümünüze yapıştırmaktır:

Ancak, eğer WordPress kullanıyorsanız, bunun jQuery kütüphanesinin kendi kopyasına sahip olduğundan sorunlara yol açabileceğini unutmayın. Eklentiler bunun yüklenmesini talep edebilir ve WordPress, kaç tane eklenti talep ettiğinden bağımsız olarak, yalnızca bir kez jQuery'i akıllıca yükler..

Aşağıdaki satırı eklemek functions.php tema dosyasında, eklenmesi için başka bir istek ekleyeceksiniz. Temanız aktif ise WordPress her zaman onu yüklemeyi bilir.

wp_enqueue_script ( "jquery");

Akılda tutulması gereken ikinci şey, standart yöntem kullanılarak jQuery eklendiğinde, $. JQuery ile yaptığınız her şeyden önce bu $ gelecektir:

$ .ajax

veya

$ ( "# Başlığı")

Ancak, jQuery WordPress aracılığıyla yüklendiğinde, her şey $ yerine jQuery değişkeni kullanılarak yapılır, örneğin:

jQuery ( "# başlığı")

Bu, kendi kodunuzu yazarken çok büyük bir sorun olmasa da, web'de bulduğunuz jQuery parçacıklarını kesmek ve yapıştırmak yerine, jQuery yerine jQuery kullanmak için çevrilmesi gerektiği anlamına gelir. $ - bu kadar.

Bunun etrafındaki yollardan biri, şöyle bulacağınız $ -style kodunu silmektir:

(function ($) // buraya $ kod yapıştırın) (jQuery);

Bu alır jQuery değişkeni ve onu isimsiz bir işleve aktarır. $. Bir dahaki sefere anonim işlevleri açıklayacağım - şimdilik, biraz jQuery kodunun temel yapısını öğrenelim.

Kodunuzu bir HTML veya PHP sayfasına eklemek için, herşeyi etiketlerin içine koyun, şunun gibi:

 // jQuery code burada kodları 

$ ( 'Seçici') yöntemi (.);

İşte, başlıkta. DOM'u değiştirmek için tek bir jQuery kodunun temel yapısı budur. Kolay değil mi?

Seçici, jQuery'ye bu kurala uyan şeyleri bulmasını söyler.,ve CSS seçicileriyle aynıdır (ve daha sonra biraz üstte). Yani, tıpkı CSS’de olduğu gibi tüm bağlantılara stil uygularsınız

bir 

Aynısı jQuery’de olduğu gibi

$ ( 'A')

Bu herhangi bir HTML elemanı için yapılabilir - div, h1, span - herneyse. Daha spesifik olmak için CSS sınıflarını ve kimliklerini de kullanabilirsiniz..

Örneğin, sınıfla olan tüm bağlantıları bulmak için “beni Bul”, kullanırsın:

$ ( 'A.findme')

Her seferinde öğe türünü belirtmeniz gerekmez - ancak yaparsanız, kuralı daha belirgin hale getirir. Sadece söyleyebilirdin

$ ( 'Findme')

hangi sınıf ile her şeyi eşleşir beni Bul, bir bağlantı olup olmadığı.

Adlandırılmış bir ID öğesini kullanmak için, # yerine işareti. Buradaki en önemli fark, bir kimlik seçicinin yalnızca bir nesneyi seçeceği ve bir sınıf seçicisinin birden fazla bulduğu.

$ ( '# Şey')

Temel olarak eğer CSS'de yapabilirseniz jQuery de yapar. Aslında, bazı oldukça karmaşık CSS3 tarzı sözde seçiciler de yapabilirsiniz: ilk

$ ('önce vücut p: ilk') '

Hangi sayfa paragrafı kapmak olurdu. Siz de belli özelliklere sahip elemanlar bulursunuz. Bu örneği düşünün; Sayfada dahili olarak gösterilen tüm bağlantıları bulmak istiyoruz faydalanmak ve onları bir şekilde vurgulayın. İşte onları nasıl bulacağımız:

$ ( 'A [href * = "makeuseof"]')

Bu iyi değil mi? Bence öyle.

Bir sonraki arama portunuz, seçicilerin jQuery API dokümantasyonu olmalıdır. Kullanılabilecek tüm farklı seçicilerin listesi ve bunların hepsini öğrenmenizi kimse beklemiyor..

Denklemin bir sonraki kısmı yöntemdir - hepsini bulduktan sonra bunlarla ne yapılması gerektiği - ama bundan sonraki ders için bırakacağız. Şimdi farklı seçiciler denemeye başlamak istiyorsanız, aşağıdaki css yöntemine bağlı kalmanızı öneririm. Bu iki parametre alır - bir CSS mülkiyet adı, ve yeni değer bu özelliğe atamak için. Böylece, tüm bağlantılara kırmızı bir arka plan rengi vermek için şunları yaparsınız:

. $ ( 'A') css ( 'background-color', 'kırmızı');

Yeterince basit! Bu herhangi bir pratik kullanım olmasa da, seçicilerinizi kullanarak bulunan herhangi bir öğeyi kolayca görmenize izin verecektir. Şimdi devam edin ve seçin - DOM sizi bekliyor.

Umarım bu eğitim sizin için yararlı olmuştur; Bunu mümkün olduğunca kolay anlaşılması kolay hale getirmeye çalıştım. Herhangi bir sorunuz sormakta veya geri bildirim bırakmakta özgürsünüz, ancak kesinlikle elit jQuery ninja olmadığımı unutmayın.