JQuery Eğitimi (Bölüm 4)

İlan

Bugün bir çentik açacağız ve gerçekten jQuery'nin nerede parladığını göstereceğiz - Etkinlikler. Geçmişteki eğiticileri takip ettiyseniz, artık eğitim hakkında oldukça iyi bir anlayışa sahip olmalısınız. jQuery temel kod yapısı 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 (ve onunla birlikte gelen tüm korkunç kıvırcık ayraçlar), ayrıca DOM ve onları manipüle etmek için yapabileceğiniz bazı şeyler JQuery'ye Giriş (Bölüm 2): Yöntemler ve İşlevlerBu, jQuery web programlama serisine devam eden yeni başlayanların bir parçasıdır. Bölüm 1, projenize ve seçicilerinize nasıl dahil edeceğinizin jQuery temellerini ele aldı. 2. bölümde, devam edeceğiz ... Daha fazla oku . Size nasıl erişeceğinizi de gösterdim. Chrome'daki geliştirici konsolu Chrome Geliştirici Araçları veya Firebug ile Web Sitesi Sorunlarını Anlama

Şimdiye kadar jQuery öğreticilerimi takip ettiyseniz, bazı kod sorunlarıyla zaten karşılaşmış olabilirsiniz ve bunları nasıl çözeceğinizi bilmiyor olabilirsiniz. İşlevsel olmayan bir kod parçasıyla karşılaştığında, çok ... Daha fazla oku ve jQuery kodunuzda hata ayıklamak için nasıl kullanabilirsiniz.

Etkinlikler - diğer kullanımların yanı sıra - sayfada gerçekleşen şeylere ve kullanıcı etkileşimlerine - tıklama, kaydırma ve tüm bu süslü şeylere tepki vermenizi sağlar.

Zaten Etkinlik Nedir?

Bir tür grafiksel arayüz içeren programlamaya yeni başlayanlar için olaylar, kullanıcı ve uygulama arasındaki her türlü etkileşimi ifade eder; veya dahili olarak başka bir işlemle üretilebilir. Uygulamalar hangi olayların “dinleneceğini” seçer ve bu olay tetiklendiğinde bir şekilde tepki verebilirler.

Örneğin, iPhone ekranınıza dokunmak, tam olarak dokunduğunuz yerin x, y koordinatına sahip tek bir "dokunma etkinliği" oluşturur. Düğme gibi belirli bir nesneye dokunduysanız, düğmenin o etkinliği dinlemesi muhtemeldir ve buna göre bazı işlemler gerçekleştirir. Arayüzün sadece boş bir parçası olsaydı, etkinliğe hiçbir şey eklenmedi ve bu yüzden hiçbir şey olmayacak.

Parmağınızı ekran boyunca sürüklemek, sürükleme hareketinin başlangıç ​​ve bitiş noktası ile belki de hız hakkında bilgi içeren başka bir olay oluşturur. Etkinlikler bize kolay bir yol sağlar olan şeylere tepki ver.

Kolay: Tıklama

Belki de dinlenmesi en kolay olay, bir kullanıcı bir öğeyi tıkladığında tetiklenen tıklama olayıdır. Bunun belirli bir “düğme” olması gerekmez - ekrandaki herhangi bir şeye olay dinleyicisi ekleyebilirsiniz, ancak bir web geliştiricisi olarak bunu açıkça sezgisel hale getirmeniz gerekir. Harfden yalancı düğme oluşturma bir bir metin paragrafının içine gizlenmiş olabilir, ama biraz aptalca.

Bir olay dinleyicisi ekleme yöntemleri, jQuery geliştikçe yıllar içinde önemli ölçüde değişmiştir, ancak bu, şu anda kabul edilen geçerli yöntemdir. () üzerinde:

$(selektör).üzerinde(Etkinlik,aksiyon);

“Tıklayın"Sınıfındaki herhangi bir öğede etkinlik .beni tıkla, ve ardından konsoldaki bir iletiyi Metin tıklandığında, şunları yaparsınız:

$ ( "ClickMe "). (Fonksiyonu" tıklama" ile ilgili () { console.log ($ (this) .text ()); });

Buraya yerleştirdiğimiz işlemin, bu işlemi kullanan anonim bir işlev olduğunu görebilmeniz gerekir. bu seçici (jQuery şu anda ilgilenen her nesneyi ifade eder) - bu durumda, tıklanan şey. Daha sonra, tıklanan nesnenin metnini çıkarır ve konsola kaydederiz. Kolay değil mi?

Varsayılan Eylemi Durdur:

Bir noktada, genellikle başka bir şey yapan bir bağlantı veya form gönderme düğmesi gibi bir şeye eklemek istersiniz. Bu durumda, orijinal eylemin gerçekleştirilmesini istemeyebilirsiniz - bunun yerine bazı süslü AJAX veya özel jQuery büyüsü yapmak istersiniz.

Bu varsayılan eylemin gerçekleşmesini önlemek için, cancelDefault adlı kullanışlı bir yöntemimiz var. Açıkçası. Bir form için gönder düğmesi ile uğraşırken bunun nasıl işe yarayacağını görelim

$ ("# myForm"). açık ("gönder", işlev (etkinlik) { console.log (olay); event.preventDefault (); yanlış döndür; });

Burada birkaç değişiklik - öncelikle, Sunmak etkinlik yerine tıklayın. Bu, kullanıcının alabileceği gibi bir formla uğraşırken daha uygundur sekme boşluk, vurmak girişveya Sunmak düğmesi - tümü formun varsayılan işlemini tetikler. Ayrıca olay değişkenini anonim işleve geçiriyoruz. Böylece, olay verisi. Daha sonra event.preventDefault () ile bütünlüğünde yanlış döndür olağan eylemlerin tamamlanmasını durdurmak için.

Bu durumda, etkinliği yalnızca konsola kaydeder, ancak gerçekte burada muhtemelen bir sonraki derste ele alacağımız bir AJAX işleyiciniz olur.

Olaylar Sizin Tarafınızdan Tetiklenebilir

Son iki örnekte, bir etkinliği dinlemek için on yöntemini kullandık, ancak bir etkinliği yöntem olarak çağırarak manuel olarak da tetikleyebilirsiniz. Bunu bir "tıklamayı" zorlamak için neden kullanabileceğinizi görmek zordur, ancak odak olayına bakarsak daha anlamlı olur.

Odak, tipik olarak, kullanıcı metin girmek için kutuyu tıklattığında (örneğin, kullanılacak formatta bir talimat mesajı) bir mesajı kapatmak için giriş alanlarıyla birlikte kullanılır. Ancak, sayfa yüklendiğinde kullanıcıyı kullanıcı adı alanına zorlamak için de kullanabilirsiniz; böylece giriş bilgilerini hemen yazmaya başlayabilirler.

$ (belge) .ready (function () { $ ( '# Username'.focus (); });

Bu kullanıcı adı alanına bir odak olay dinleyicisi de eklediyseniz, odaklamayı zorladığınızda da tetiklenir. Bu nedenle olaylar hem tetiklenebilir hem de dinlenebilir.

Şimdilik, sayfadaki çeşitli etkinliklere ekleyerek alıştırma yapın - tüm etkinliklerin tam bir listesini bulabilirsiniz. burada bulunan etkinlikler - bir bağlantı veya düğme ise preventDefault'u kullanmayı unutmayın ve etkinlik verileri hakkında konsoldan hangi çıktıyı aldığınızı görün.

Bu mini dizi jQuery derslerinin sonuna yaklaştığımız için bugün orada bırakacağım. Sonunda, sayfanıza bazı jQuery atmak ve bir şeyler yapmak için yeterince emin olmalısınız. Gelecek hafta, modern web'in, kullanıcıyı kesintiye uğratmadan arka planda istek yüklemenize ve göndermenize olanak tanıyan önemli bir parçası olan AJAX'a bakacağız.

Her zamanki gibi, geri bildirim, sorular, yorumlar ve sorunlar aşağıda hoş geldiniz.

Resim kredisi: Dokunmatik ekran Shutterstock aracılığıyla