Javascript Programcıları için JQuery Temel Kılavuzu

İlan

JQuery gezegendeki en popüler JavaScript kitaplıklarından biridir (JavaScript nedir JavaScript Nedir ve İnternet Onsuz Var Olabilir mi?JavaScript, pek çok kişinin kabul ettiği şeylerden biridir. Herkes kullanıyor. Daha fazla oku ). Başlangıçta JavaScript ( JS buradan) çok farklı bir yerdeydi. 14 Ocak 2006, jQuery'nin BarCampNYC. JS hala bir şekilde eksikti - tarayıcıların tüm parçaları destekleniyordu, ancak uyumluluk için birçok hack ve geçici çözümün uygulanması gerekiyordu.

JQuery geldi ve her şeyi değiştirdi. JQuery, tarayıcı uyumlu kod yazmayı çok kolaylaştırdı. Bilgisayar biliminde derece olmadan animasyonlu web sayfaları olabilir - yaşasın! On yıl sonra, jQuery hala kral ve daha önce hiç kullanmadıysanız, onunla ne yapabilirsiniz?

JavaScript becerilerinizi geliştirmeye ek olarak, bazılarını okumak isteyebilirsiniz HTML ve CSS eğiticileri Bu Adım Adım Eğiticiler ile HTML ve CSS öğreninHTML, CSS ve JavaScript'i mi merak ediyorsunuz? Web sitelerini sıfırdan nasıl oluşturacağınızı öğrenmek için bir ustalığınız olduğunu düşünüyorsanız - burada denemeye değer birkaç harika adım adım öğretici var.

Daha fazla oku İlk olarak, onlara aşina değilseniz.

Sahibiz jQuery tanıttı Web'i Etkileşimli Hale Getirme: jQuery'ye GirişjQuery, neredeyse her modern web sitesinin kullandığı bir istemci tarafı komut dosyası kitaplığıdır - web sitelerini etkileşimli hale getirir. Tek Javascript kütüphanesi değil, ancak en gelişmiş, en desteklenen ve en yaygın kullanılan kütüphanedir ... Daha fazla oku Daha önce, bu JQuery kılavuzu aslında kodlamaya odaklanacaktır.

Başlangıç

JS'yi Belge Nesne Modeli'nden kimlik seçmenin yollarını biliyor olabilirsiniz (DOM):

Document.getElementById ( 'foo');

JQuery bunu bir adım daha ileri götürüyor. Sınıfları, kimlikleri veya birden çok öğeyi seçmek için farklı yöntemler çağırmanız gerekmez. Kimliği nasıl seçeceğiniz aşağıda açıklanmıştır:

$ ( '# Çubuğu');

Kolay değil mi? Neredeyse tüm DOM öğelerini seçmek tamamen aynı sözdizimidir. Sınıfları nasıl seçeceğiniz aşağıda açıklanmıştır:

$ ( 'Baz.');

Ayrıca gerçek bir güç için yaratıcı olabilirsiniz. Bu hepsini seçer td içindeki elemanlar tablo ilki hariç.

$ ('table td'). değil (': ilk');

Seçici adlarının neredeyse CSS benzerleriyle nasıl eşleştiğine dikkat edin. Nesneleri atayabilirsiniz düzenli JS değişkenleri:

var xyzzy = $ ('# parent .child');

Veya jQuery değişkenlerini kullanabilirsiniz:

var $ xyzzy = $ ('# üst .child');

Dolar işareti sadece bu değişkenin bir jQuery nesnesi olduğunu göstermek için kullanılır, bu karmaşık projelerde çok yararlıdır.

Bir öğenin üst öğesini seçebilirsiniz:

$ ( 'Çocuk') parent ().;

Veya kardeşler:

$ ( 'Çocuk') kardeşleri ().;

Tarayıcı hazır olduğunda kodunuzu yürütmeniz gerekir. Bunu şu şekilde yapabilirsiniz:

$ (document) .ready (function () {console.log ('hazır!'); });

Daha fazla güç

Şimdi temelleri bildiğinize göre, biraz daha karmaşık şeylere geçelim. Bir html tablosu verildi:

Yapmak
model
Renk


Ford
Eskort
Siyah


Mini
şarapçı
Kırmızı


Ford
Cortina
Beyaz

Diğer tüm satırları farklı bir renk yapmak istediğinizi varsayalım ( Zebra Çizgileri). Şimdi bunun için CSS kullanabilirsiniz:

#cars tr: nth-child (çift) {arka plan rengi: kırmızı; }

Bu jQuery ile elde edilebilir:

$ ('tr: even'). addClass ('even');

Bu aynı şeyi başaracak, hatta CSS'de tanımlanan bir sınıftır. Sınıf adından önce tam duraklamanın nasıl gerekli olmadığına dikkat edin. Bunlar genelde sadece ana seçici için gereklidir. İdeal olarak, bunun başlaması için CSS'yi kullanırsınız, ancak çok da önemli değildir.

JQuery ayrıca satırları gizleyebilir veya kaldırabilir:

. $ ( '# Ford Cortina') hide ();. $ ( '# Ford Cortina') remove ();

Bir öğeyi kaldırmadan önce gizlemek zorunda değilsiniz.

Fonksiyonlar

JQuery işlevleri JS gibidir. Kıvırcık parantez kullanırlar ve argümanları kabul edebilirler. Gerçekten ilginç olduğu yer geri aramalar. Geri aramalar hemen hemen her jQuery fonksiyonuna uygulanabilir. Çekirdek eylem tamamlandığında çalıştırılacak bir kod parçası belirtirler. Bu büyük bir işlevsellik sağlar. Eğer mevcut değillerse ve kodunuzu doğrusal bir şekilde çalışmasını beklediyseniz, JS, bir öncekini beklerken bir sonraki kod satırını yürütmeye devam eder. Geri aramalar, kodun yalnızca orijinal görev tamamlandığında çalışmasını sağlar. İşte bir örnek:

$ ('table'). hide (function () {alert ('MUO kuralları!'); });

Dikkatli olun - bu kod her öğe için bir uyarı yürütür. Seçiciniz sayfada bir kereden fazla bir şeyse, birden fazla uyarı alırsınız.

Geri çağrıları diğer bağımsız değişkenlerle kullanabilirsiniz:

$ ('tr: even'). addClass ('even', function () {console.log ('Merhaba'); });

Kapatma parantezlerinden sonra nasıl bir yarım kolon olduğuna dikkat edin. Bir JS işlevi için bu normalde gerekli olmaz, ancak bu kod hala bir satırda kabul edilir (geri arama parantez içinde olduğu için).

Animasyon

JQuery, web sayfalarını canlandırmayı çok kolaylaştırır. Öğeleri içeri veya dışarı soldurabilirsiniz:

$ ( 'Fade1 ') fadeIn (' slow.'); $ ('# fade2'). fadeOut (500);

Üç hız (yavaş, orta, hızlı) veya milisaniye cinsinden hızı temsil eden bir sayı belirleyebilirsiniz (1000 ms = 1 saniye). Canlandırabilirsiniz neredeyse herhangi bir CSS öğesi. Bu, seçicinin genişliğini mevcut genişliğinden 250 piksele kadar canlandırır.

$ ('foo'). animate ({width: '250px'});

Renklere animasyon uygulamak mümkün değildir. Geri çağrıları animasyonla da kullanabilirsiniz:

$ ('bar'). animate ({height: '250px'}, işlev () {$ ('bar'). animate ({width: '50px'} });

döngüler

Döngüler jQuery'de gerçekten parlıyor. Her biri() belirli bir türdeki her öğeyi yinelemek için kullanılır:

$ ('li'). her biri (function () {console.log ($ (bu)); });

Ayrıca bir dizin de kullanabilirsiniz:

$ ('li'). her biri (işlev (i) {console.log (i + '-' + $ (bu)); });

Bu yazdırır 0, sonra 1 ve bunun gibi.

Ayrıca kullanabilirsiniz her biri() tıpkı JS'de olduğu gibi dizileri yinelemek için:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (arabalar, işlev (i, değer) {console.log (değer); });

Şu ekstra argümana dikkat edin: değer - bu dizi öğesinin değeridir.

Bunu belirtmeye değer her biri() Yapabilmek ara sıra vanilla JS döngülerinden daha yavaş olun. Bunun nedeni, jQuery'nin gerçekleştirdiği ekstra işlem yüküdür. Çoğu zaman, bu bir sorun değildir. Performans konusunda endişeleriniz varsa veya büyük veri kümeleriyle çalışıyorsanız, kodunuzu jsPerf ilk.

AJAX

Eşzamansız JavaScript ve XML veya AJAX jQuery ile gerçekten çok kolay. AJAX çok büyük miktarda İnternet'e güç veriyor ve bu bizim kapsadığımız bir şey bölüm 5 jQuery Eğitimi (Bölüm 5): AJAX Hepsini!JQuery mini eğitim serimizin sonuna yaklaştıkça, jQuery'nin en çok kullanılan özelliklerinden birine daha ayrıntılı bir şekilde bakmamızın zamanı geldi. AJAX bir web sitesinin iletişim kurmasını sağlar ... Daha fazla oku bizim jQuery öğreticisi 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 . Bir web sayfasını kısmen yüklemek için bir yol sağlar - örneğin, yalnızca futbol skorunu güncellemek istediğinizde tüm sayfayı yeniden yüklemek için bir neden yoktur. jQuery çeşitli AJAX yöntemlerine sahiptir, yük():

$ ( '# Baz') yük ( 'bazı / url / sayfa.html.');

Bu, belirtilen sayfaya bir AJAX çağrısı yapar (Bazı / url / sayfa.html) ve seçiciye veri aktarır. Basit!

Yapabilirsin HTTP GET istekleri:

$ .get ('some / url', function (sonuç) {console.log (sonuç); });

Ayrıca aşağıdakileri kullanarak veri gönderebilirsiniz: İLETİ:

$ .post ('some / other / url', {'make': 'Ford', 'model': 'Cortina'});

Form verilerini göndermek çok kolaydır:

$ .post ('url', $ ('form'). serialize (), işlev (sonuç) {console.log (sonuç); }

serialize () işlevi tüm form verilerini alır ve iletime hazırlar.

sözler

Ertelenmiş icra için vaatler kullanılır. Öğrenmeleri zor olabilir, ancak jQuery bunu biraz daha az zahmetli hale getirir. ECMAScript 6 JS'ye yerel vaatler sunuyor, ancak tarayıcı desteği en iyi ihtimalle lapa lapa. Şimdilik, jQuery vaatleri çapraz tarayıcı desteğinde çok daha iyi.

Bir söz neredeyse tam olarak göründüğü gibidir. Kod, tamamlandığında daha sonraki bir aşamada geri dönme sözü verecektir. JavaScript motorunuz başka bir kod yürütmeye devam edecektir. Bir kez söz giderir (döndürür), başka bir kod parçası çalıştırılabilir. Sözler geri aramalar gibi düşünülebilir. jQuery belgeleri daha detaylı açıklar.

İşte bir örnek:

// dfd == ertelendi. var dfd = $ .Deferred (); function doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); return dfd.promise (); } $ .when (doThing ()). sonra (function () {console.log ('YAY, bitti'); });

Sözün nasıl yapıldığına dikkat edin (dfd.promise ()) ve yalnızca AJAX çağrısı tamamlandığında çözümlenir. Birden fazla AJAX çağrısını takip etmek için bir değişken kullanabilir ve yalnızca başka bir görevi tamamlandıktan sonra tamamlayabilirsiniz.

Performans İpuçları

Tarayıcınızdan performansı sıkmanın anahtarı DOM'a erişimi sınırlamaktır. Bu ipuçlarının çoğu JS için de geçerli olabilir ve kodunuzun kabul edilemez derecede yavaş olup olmadığını görmek için profilinizi oluşturmak isteyebilirsiniz. Yüksek performanslı JavaScript motorlarının mevcut çağında, koddaki küçük darboğazlar genellikle fark edilmeyebilir. Buna rağmen, yapabileceğiniz en hızlı performans kodunu yazmaya çalışmaya değer.

DOM'u her işlem için aramak yerine:

$ ('foo'). css ('arka plan rengi', 'kırmızı'); $ ('foo'). css ('renk', 'yeşil'); $ ('foo'). css ('genişlik', '100 piksel');

Nesneyi bir değişkende saklayın:

$ bar = $ ('foo'); $ bar.css ('arka plan rengi', 'kırmızı'); $ bar.css ('renk', 'yeşil'); $ bar.css ('genişlik', '100 piksel');

Döngülerinizi optimize edin. Döngü için bir vanilya verildi:

var cars = ['Mini', 'Ford', 'Jaguar']; için (int i = 0; i 

Doğası gereği kötü olmasa da, bu döngü daha hızlı yapılabilir. Her yineleme için, döngü cars dizisinin değerini hesaplamak zorundadır (cars.length). Bunu başka bir değişkende saklarsanız, özellikle büyük veri kümeleriyle çalışıyorsanız performans elde edilebilir:

için (int i = 0, j = cars.length; i 

Şimdi cars dizisinin uzunluğu j. Bunun artık her yinelemede hesaplanması gerekmez. Kullanıyorsanız her biri(), düzgün bir şekilde optimize edilmiş vanilya JS jQuery'den daha iyi performans göstermesine rağmen, bunu yapmanız gerekmez. JQuery'nin gerçekten parladığı yer, geliştirme ve hata ayıklama hızıdır. Büyük veriler üzerinde çalışmıyorsanız, jQuery genellikle daha hızlıdır.

Artık bir jQuery ninja olacak kadar temel bilgileri bilmelisiniz!

JQuery'yi düzenli olarak kullanıyor musunuz? Herhangi bir nedenle kullanmayı bıraktınız mı? Aşağıdaki yorumlarda düşüncelerinizi bizimle paylaşın!