Öğreticiler • jQuery
jQuery - pek çok avantajı olan bir JavaScript çerçeve - Bölüm 1: "giriş seviyesi" - bir ilk küçük örneği
1996 ("web-Taş Çağı"), ilk Internet sitelerini oluşturmaya başlamışlardır - Ben bile yok bugünün olanakları hayal bir zaman.
Neredeyse 15 yıl sonra (tamam ben ne '"web grandma" am :-)) WWWelt büyük ölçüde değişti. (X) HTML, CSS (3) ve JavaScript ve ilgili tarayıcı desteği kombinasyonu görünüm ve işlevsellik açısından neredeyse sınırsız olanaklar sunuyoruz.
Büyük bir rahatlama ve yardım aynı zamanda çeşitli javascript çerçeveler vardır.
Üzerine bir yazı dizisi istendiğinde jQuery javascript çerçevesini
Bu mesajda bölümler:
<ornek> <html kodu> <CSS kodu> <jQuery kodu> <Download> <other Beispiele>
JavaScript çerçeve ve ne gibi avantajlar kullanıyor nedir?
Programlama veya betik dilleri, kütüphaneler açısından çerçeveler (çerçeve yapısı, perde, temel yapısı ...), temel und-/oder yinelenen görevleri fonksiyonları özetlenmiştir.
Bir çerçeve kullanımını kolaylaştırır ve sahip "tekerleği yeniden icat" olmadan önceden test edilmiş fonksiyonlar üzerinde çizebilir, çünkü kendi komut ve fonksiyonlarının gelişimini hızlandırır.
Javascript çerçeveler genellikle farklı tarayıcılar için tek bir fonksiyon uygulaması olması gerekir.
Bu geliştiricileri ve web tasarımcıları büyük bir rahatlama ve farklı web tarayıcılarında web test zaman tasarrufu sağlar.
Neden jQuery nedir?
Bu makale dizisinde benim için var jQuery JavaScript çerçevesinde onun performansı yanında aynı zamanda çok yüksek bir prevalansı vardır çünkü seçilmiş, bu şu avantajları beraberinde getirmektedir.:
- Doğrudan kullanılabilir eklentileri bitmiş, kullanışlı ücretsiz çeşitli (örneğin, görüntü kaymak, doğrulama formu, masa sorters, vb) vardır
- Yüksek oranları da sürekli iyileştirilmesi, (hata raporu) sağlar
- Bir çok bilgiye ve ilgili dersler vardır jQuery
- jQuery becerileri hızla ve kolayca öğrenmek için programlama olmayan insanlar için de
Yeni başlayanlar için, bu gözlerim (hızı ve fonksiyonelliği ile birlikte), en önemli üç yönü vardır. Ayrıca, tüm javascript çerçeveleri benzer bir ilke çalışır. Peki, kim uğraşıyor jQuery ve sağ evde daha farklı bir çerçeve umsteigt üzerinde öğreneceksiniz.
Şahsen, farklı çerçeveler (örneğin proje ve görev doğrultusunda çalışmaya extjs uygulama geliştirme ve intranet çözümleri için) fakat çoğu zaman müşteri ile ilişkili sitelerin yaratılmasında jQuery nedeniyle yayılan çok yüksek.
JQuery Başlamak için, ilk küçük örneği
<click HTML kodu> <click CSS kodu> <click jQuery kodu> <click download>
Bunu jQuery yapabilir ne fırsatlar hakkında bir fikir vermek için aşağıdaki ilk basit bir örnek sağlar.
JQuery kodu:
$ (Belge). Hazır (function () { $ ('# Demo_button1'). (Function () {tıklayın $ ('Div.demo_absatz1') addClass ('kahverengi') gösterisi ('slow') ..; }); });
DEMO - kod yürütmesine sıfırlama DEMO
DEMO butonunu tıklayınız görünür sonra Merhaba, ben sınıf "demo_absatz1" ile bir HTML DIV değilim.
Eğer Demo düğmesine tıklarsanız, yeni bir CSS sınıfı olsun Sen edeceğin ilk (kahverengi) ve sonunda yavaş bir animasyon görünür.
Görmedim? Sadece düğme "DEMO sıfırlamak" ve tekrar deneyin!
Detaylı bir şekilde kodu
Bu örnek, 3 parçalardan oluşur:
- HTML kodu (dosya demo1.html örneğin)
- Tasarım CSS kodunu (dosya demos.css olarak)
- JQuery kodu (de demos.js dosyasında)
Not:
Eğer hep birlikte asmak anlayabiliriz böylece tam kodu her örnekler bulacaksınız.
Ben bunları belgeye CSS ve JavaScript kodu yazmak için bir savunucusu değilim. Ayrı dosyalar kodu web projeleri Outsource.
HTML kodu
<click Beispiel> <click CSS kodu> <click jQuery kodu> <click download>
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http :/ / www.w3.org/1999/xhtml "dir =" ltr "lang =" tr "> İlk <head> jQueryBeispiel </ title> <link rel = 'stylesheet' href = '/ demos.css 'type = "text / css" medya = "all" /> </ head> <a id="demo_button1" class="demo_button" href="#"> DEMO - kod çalıştırmasına </ a > <div class="demo_absatz1"> <strong> Merhaba, görünür DEMO butonuna tıkladıktan sonra id "demo_absatz1" ile bir HTML DIV değilim. </ strong> </ p> Eğer Demo butonuna basarsanız, Seni. </ p> ilk (kahverengi) ve sonunda yavaş bir animasyon görünür görülen değil yeni bir CSS sınıfı olsun? "DEMO Reset" Sadece tıklayın ve tekrar deneyin </ p> </ div> <script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4. 2/jquery.min.js "> </ script> <script type='text/javascript' src='/demos.js'> </ script> </ body> </ html>
Biraz daha yakından HTML kodu göz önünde bulundurun:
Hat 5: dosyası yüklü demos.css dış kaynaklı CSS kod satırı. Dosyalarınızın depolandığı bağlı olarak, "src" URL henüz değişebilir ayarlamanız gerekir.
Gövde etiketleri içinde (çizgiler 8-14), aşağıdaki örneğe HTML etiketlerini görebilirsiniz.
Hat 8: id "demo_button1" atanmış olan bir "<a>" gün (link) ile başlar. Bu HTML belgesi benzersiz tanımlayıcı olarak bir kimliği olmalıdır. Bu kimlik bağlantıyı ilgili açıkça bulmak için jQuery kodu sonra olur.
Bağlantı da bir CSS sınıfı (sınıf) atanmıştır. Bu durumda "Demo_button". Bu sınıf öğesi oluşturmak için kullanılan CSS kodları olacaktır.
10/Zeile hattı 14: Burada CSS sınıfı "demo_absatz1" bir "<div>" gün (bir kutu) bulacaksınız atandı. Bu sınıf elemanı ve tanımlama için jQuery kod tasarımı için CSS kod kullanılır.
Satır 11-13: Burada daha sonra kutusunda gösterilir metindir. Bu 3 maddenin (<p>) içine biçimlendirilir. Bu CSS ve anlam jQuery kodu için değil saf içeriğidir.
Hat 16: Bir kez aktive çünkü İşte, jQuery çerçeve çok önemlidir. Google Libs entegre karar ile bu örnekte, çerçeve dışında yaşıyorum. Elbette, mevcut web kopyasını jQuery sürümü, ama buna göre "src" URL olabilir ve olmalıdır.
Hat 17: İşte jQuery kodu web sunucusundan yüklenen hangi javascript dosyası "demos.js" dir. Veri kaydedildiği yere bağlı olarak, "src" URL gerekirse ayarlamanız gerekir.
JQuery eylemler HTML ve CSS kodunu yükledikten sonra idam çünkü dosyaları, sonunda sadece yüklenir. Javascript dosyaları HTML belgesinin inşaat yükleme öncesi zamandan tasarruf sonuna kadar yükleniyor.
CSS kodu:
<click Beispiel> <click HTML kodu> <click jQuery kodu> <click download>
. Demo_absatz1 { display: none; padding: 10px 20px; border: 1px solid # ccc; color: # 000; -Moz-border-radius: 15px; -Webkit-border-radius: 15px; border-radius: 15px; } . Brown { color: # fff; background-color: # 847d6b; border-top: 15px solid # 212 421; } {A.demo_button padding: 4px 4px 8px 10px; background-color: # c6c700; color: # fff; font-weight: bold; border: 1px solid # ccc; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; text-decoration: none; }
Mikroskop altında CSS kodu:
Satır 1-10: Burada tanımlanan sınıf "demo_absatz1" dir. Tasarımına ek olarak 2. satırda ilgili bir girişi bulmak bağlıyor: "display: none". Bu, bu sınıfın ekranda tahsis edildiği tüm unsurları (HTML kodunda zaten) görünmez anlamına gelir.
Bizim kutusu ayrıca HTML belgeleri görünmez yükleniyor.
Satır 11-15: sınıfı "kahverengi" HTML belgede daha önce ortaya değildir. Daha sonra, daha belirgin olarak göster kutusu yerleştirmek için kullanılır.
Satır 16-28: Burada bağlantı tasarım özelliklerini bulacaksınız "DEMO - kod çalıştırmak" atanan sınıf "demo-butonu" dir.
Ben her şeyden önce istiyorsunuz bireysel tasarım özellikleri daha fazla gitmez. CSS acemiler www.css4you.de örneğin öznitelikleri bakabilirsiniz.
Bir kez daha jQuery kodu bir hatırlatma olarak
<click Beispiel> <click HTML kodu> <click CSS kodu> <click download>
$ (Belge). Hazır (function () { $ ('# Demo_button1'). (Function () {tıklayın $ ('Div.demo_absatz1') addClass ('kahverengi') gösterisi ('slow') ..; }); });
Şimdi ilginç olur: daha doğru kabul jQuery kodu:
JQuery sloganı eşdeğer "daha az yazın, daha do" - Peki, her kod nispeten kısa olduğunu hemen fark olasıdır.
jQuery Javascript olduğunu. Çerçeve tüm özellikler "jQuery" ya da kısaltması "$" ile başlayan olarak adlandırılır.
Hat 1 ve 5: ". $ (Belge) hazır" anlamına "belge yüklü ise (tüm HTML öğelerini) aşağıdaki işlevi yürütmek ..."
Bu fonksiyonda HTML belgesi anlamına gelir elemanları üzerinde tanımlı herhangi bir jQuery kodu dahil edilmelidir.
Hat 2 ve 4: demo_button1 "kimliği ile HTML öğesi ise" "tıklandığında, aşağıdaki işlevi yürütmek ..."
"# Demo_button1" bir seçici - Ben daha detaylı olarak bu yazı serisinin diğer bölümlerinde geçecek jQuery, bir sürü var bunlardan.
# Bir kimlik tespiti var
Bu seçim ile açıkça HTML kodu unsuru tespit edebilir.
Hat 3: "... sınıfı ile tüm Div kutuları" demo_absatz1 kahverengi "adında yeni bir CSS sınıfı olsun" "ve yavaş yavaş görünür."
Bu doğrultuda, daha seçici "div.demo_absatz1" kullanılır. Önceki aksine, bu benzersiz değil, bizim HTML belgesi ayrıca çeşitli kutular Div sınıf "demo_absatz1" (bu öyle değil, ama :-)) olabilir orada atanabilir.
Bu durumda, işlem, bu elemanların tamamı için de geçerlidir.
"AddClass'ı" için "kahverengi" (CSS kod satırı 11-15 bakınız) ve değişiklikler kutunun rengi olarak adlandırılan bir başka sınıfın elemanları buldu.
İşte bu kadar ...
Birkaç küçük değişiklikler ...
Etkisi ... ve bir başka!
Bunun yerine "gösteri" nin biz "SLIDEIN" kullanın
$ (Belge). Hazır (function () { $ ('# Demo_button2'). (Function () {tıklayın $ ('Div.demo_absatz2') addClass ('kahverengi') aşağı slayt ('slow') ..; }); });
DEMO - kod yürütmesine sıfırlama DEMO
DEMO butonunu tıklayınız görünür sonra Merhaba, ben sınıf "demo_absatz2" ile bir HTML DIV değilim.
Eğer Demo düğmesine tıklarsanız, yeni bir CSS sınıfı olsun Sen edeceğin ilk (kahverengi) ve sonunda yavaş bir animasyon görünür.
Görmedim? Sadece düğme "DEMO sıfırlamak" ve tekrar deneyin!
Bunun yerine "gösteri" nin biz "fadeIn" oyulduğunu edilir
$ (Belge). Hazır (function () { $ ('# Demo_button3'). (Function () {tıklayın $ ('Div.demo_absatz3') addClass ('kahverengi') fadeIn ('slow') ..; }); });
DEMO - kod yürütmesine sıfırlama DEMO
DEMO butonunu tıklayınız görünür sonra Merhaba, ben sınıf "demo_absatz3" ile bir HTML DIV değilim.
Eğer Demo düğmesine tıklarsanız, yeni bir CSS sınıfı olsun Sen edeceğin ilk (kahverengi) ve sonunda yavaş bir animasyon görünür.
Görmedim? Sadece düğme "DEMO sıfırlamak" ve tekrar deneyin!
"Bir kerede üç"
Bu örnekte 3 gizlenmiş her bölüm, aynı sınıfı "demo_absatz4" sahip olan vardır.
Bu nedenle "Run demo kodu" üzerinde tek bir tıklama ile seçici orada açın her üç sınıfı arar.
$ (Belge). Hazır (function () { $ ('# Demo_button4'). (Function () {tıklayın $ ('Div.demo_absatz4') addClass ('kahverengi') fadeIn ('slow') ..; }); });
DEMO - kod yürütmesine sıfırlama DEMO
Merhaba, ben ilk duyuyorum DEMO butonuna tıklandıktan sonra sınıf "demo_absatz4" ile HTML DIV görünür.
Eğer Demo düğmesine tıklarsanız, yeni bir CSS sınıfı olsun Sen edeceğin ilk (kahverengi) ve sonunda yavaş bir animasyon görünür.
Görmedim? Sadece düğme "DEMO sıfırlamak" ve tekrar deneyin!
Evet 2. nerede gizli satış?
Merhaba, ben 2. duyuyorum DEMO butonuna tıklandıktan sonra sınıf "demo_absatz4" ile HTML DIV görünür.
Evet 3. nerede gizli satış?
Merhaba, ben 3 değilim DEMO butonuna tıklandıktan sonra sınıf "demo_absatz4" ile HTML DIV görünür.
Görmedim? Sadece düğme "DEMO sıfırlamak" ve tekrar deneyin!
Sonuç:
<click Beispiel> <click HTML kodu> <click CSS kodu> <click jQuery kodu> <click download>
jQuery, CSS ve HTML yakından ilişkilidir ve ...
.... tüm bu zor değil 
Ben bu basit jQuery örneği ile sahip birkaç iyi fikir bulabilirsiniz, başında ve bazı değişim WWWelt gerçek avantajları vardır.
Download:
Siz yukarıdaki kodu bölümlerden kodu kullanabilirsiniz ya da doğrudan burada 3 dosyaları (. Html. Css ve. Js) ile bir zip dosyasına kopyalayabilirsiniz.
hpv24_jquery_beispiel1 (219)
Bir deneyin!
1 oy / s, ortalama puanı: max 6.00 yıldız. 6 olası yıldızlar
Yükleniyor ... 
