Geçen hafta, jQuery'nin herhangi bir modern web geliştiricisi için ne kadar önemli olduğundan ve neden harika olduğundan bahsetmiştim. Bu hafta, sanırım biraz kodla ellerimizi kirletmemizin ve projelerimizde jQuery'den gerçekten nasıl yararlanacağımızı öğrenmemizin zamanı geldi.

Bunu şimdi söyleyeceğim - jQuery kullanmak için Javascript öğrenmenize gerek yok. JQuery'yi Javascript'in bir evrimi olarak düşünürseniz - bunu yapmanın daha iyi bir yolu - işlevsellik ekleyen bir kitaplıktan daha iyi olabilir. İhtiyacınız olan herhangi bir Javascript yolda alınacaktır. Bununla birlikte, bir web geliştiricisi olarak oldukça iyi bir HTML ve CSS bilgisine sahip olduğunuz varsayılmaktadır (ve eğer değilse, işte size yardımcı olacak ücretsiz xHTML kılavuzu! ).

Belge Nesnesi Modeli

jQuery, tamamen geçiş ve manipülasyonla ilgilidir. KARAR - NS NS oküment VEYA nesne m odel. DOM, tüm HTML kodunu okuduktan sonra tarayıcılar tarafından oluşturulan, sayfanın hiyerarşik bir ağaç temsilidir. jQuery'de şöyle bir terminoloji kullanacağız: ebeveyn , çocuklar , ve Kardeşler oldukça sık, bu nedenle DOM ile ilgili olarak bunun ne anlama geldiğine dair bir fikriniz olmalıdır.

Bu basit diyagramdanw3okullarıkavramları oldukça iyi açıklar. Öğenin ebeveyninin olduğunu görebilmeniz gerekirken, elemanın aciliyeti var

jQuery code codes here`

$('seçici').yöntem();

İşte bu, oradaki başlıkta. DOM'yi işlemek için tek bir jQuery kodu parçasının temel yapısı budur. Kolay değil mi?

NSseçicijQuery'ye bu kurala uyan şeyleri bulmasını söyler, ve CSS seçicileri ile aynıdır (ve ardından biraz daha fazlası). Bu nedenle, tıpkı CSS'de olduğu gibi, tüm bağlantılara stil verirsiniz.

a { }

Aynısı jQuery'de şu şekilde yapılacaktı:

$('a')

Bu, herhangi bir HTML öğesi için yapılabilir - div, h1, span - ne olursa olsun. Daha spesifik olmak için CSS sınıflarını ve kimliklerini de kullanabilirsiniz.

Örneğin, 'findme' sınıfıyla tüm bağlantıları bulmak için şunları kullanırsınız:

$('a.findme')

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

$('.findme')

sınıfla her şeyi eşleştirecek olan beni Bul , bir bağlantı olup olmadığı.

Adlandırılmış bir kimlik öğesi kullanmak için # yerine imzala. Buradaki temel fark, bir sınıf seçicinin birden fazla nesne bulabilmesine karşın, bir kimlik seçicinin yalnızca bir nesneyi seçmesidir.

usb sürücü nasıl yeniden biçimlendirilir

$('#something')

Temel olarak, CSS'de yapabiliyorsanız, jQuery de yapacaktır. Aslında, :first gibi oldukça karmaşık CSS3 stili sözde seçicileri de kullanabilirsiniz.

$('body p:first')

Hangi sayfanın paragrafını alırdı. Belirli niteliklere sahip öğeler de bulursunuz. Bu örneği düşünün; sayfadaki dahili olarak işaret eden tüm bağlantıları bulmak istiyoruz. faydalanmak ve onları bir şekilde vurgulayın. Bunları şu şekilde bulabiliriz:

$('a[href*='makeuseof']')

Bu harika değil mi? Bence öyle.

Bir sonraki bağlantı noktanız seçiciler için jQuery API belgeleri . Kullanılabilecek tüm farklı seçicilerin büyük bir listesidir ve hiç kimse sizin hepsini öğrenmenizi beklemez.

Denklemin bir sonraki kısmıyöntem- hepsini bulduktan sonra bu şeylerle ne yapmalı - ama bunu bir sonraki derse bırakacağız. Şimdi çeşitli seçicileri 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. Bu nedenle, tüm bağlantılara kırmızı bir arka plan rengi vermek için şunları yaparsınız:

$('a').css('background-color','red');

Yeterince basit! Bu herhangi bir pratik kullanım olmasa da, seçicilerinizi kullanarak bulunan herhangi bir öğeyi kolayca görmenizi sağlar. Şimdi ilerleyin ve seçin - DOM sizi bekliyor.

Umarım bu eğitim sizin için faydalı olmuştur; Mümkün olduğunca kolay anlaşılır hale getirmeye çalıştım. Herhangi bir sorunuzu sormaktan veya geri bildirim bırakmaktan çekinmeyin, ancak kesinlikle seçkin bir jQuery ninja olmadığımı unutmayın.

Paylaş Paylaş Cıvıldamak E-posta VirtualBox Linux Makinelerinizi Güçlendirmek için 5 İpucu

Sanal makinelerin sunduğu düşük performanstan bıktınız mı? İşte VirtualBox performansınızı artırmak için yapmanız gerekenler.

Sonrakini Oku İlgili konular

Web Kültürü
Web Geliştirme
JavaScript
Programlama
jQuery

Yazar hakkında James Bruce(707 Makale Yayınlandı)

James, Yapay Zeka alanında lisans derecesine sahiptir ve CompTIA A+ ve Network+ sertifikalıdır. Donanım İncelemeleri Editörü olarak meşgul olmadığı zamanlarda LEGO, VR ve masa oyunlarından hoşlanır. MakeUseOf'a katılmadan önce aydınlatma teknisyeni, İngilizce öğretmeni ve veri merkezi mühendisiydi.

James Bruce'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın