jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme

Save this PDF as:

WORD PNG TXT JPG

Ebat: px

Şu sayfadan göstermeyi başlat:

Download "jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme"

Esen Togan
8 ay önce
İzleme sayısı:

Transkript

1 az kod, çok iş!

Javascript ile yapmak istediğimiz bir uygulama için yazmamız gereken kodlar onlarca satır

2 jquery bir JavaScript kütüphanesidir 2006 yılında, John Resig adlı bir JavaScript geliştiricisi tarafından yazılmaya başlanmıştır. Javascript ile yapmak istediğimiz bir uygulama için yazmamız gereken kodlar onlarca satır olabilecekken, JQuery ile birkaç satır kod ile aynı uygulamayı yapmamız mümkün olabilmektedir. jquery ile HTML elemanları seçilir (query) ve bu elemanlarla olaylar gerçekleştirilir.

3 Bütün modern browserlarla uyumlu HTML elemanlarını seçme (selection) HTML elemanlarını yenide düzenleme (manipulation) CSS düzenleme ve değiştirme HTML olaylarına bağlı fonksiyonlar JavaScript Efekt ve animasyonları HTML DOM (Document Object Model) olayları AJAX kullanımı Çok Sayıda Plugin

4 jquery kütüphanesini sayfaya eklemek için iki yöntem vardır. 1. Direkt jquery nin sitesinden ekleme <script type="text/javascript" src=" "> </script> 2. Belirtilen adresten download edip yerel dosyadan kullanma <script type="text/javascript" src="js/jquery js"> </script>

5 jquery ile HTML eleman(lar)ı seçilir ve bu eleman(lar)la belli olaylar meydana getirilir. Temel syntax : $(selector).action() dolar işareti ($) qquery i tanımlar. (selector) "(query)" belirtilen HTML elemanını ifade eder. action() seçilen eleman üzerinde istenen olayı meydana getirir.

6 $(this).hide() belirtilen elmanı gizler. $("#test").hide() id="test" olan elemanı gizler. $("p").hide() bütün <p> leri gizler. $("p.test").hide() class="test" olan bütün <p> leri gizler. $(".test").hide() class="test" olan bütün elemanları gizler.

7 Bütün jquery fonksiyonları (methodları), document.ready() fonksiyonu içerisinde bulunur. $(document).ready(function(){ }); // jquery fonksiyonları burada yazılır...

8 $("*") bütün elemanları seç. $("p") bütün<p> leri seç. $("p.intro") class="intro" olan bütün <p> ler $("p#intro") id="intro" olan bütün <p> ler $(":button") bütün <button> ları seç. $(":even") bütün çift elemanları. $(":odd") bütün tek.

9 Olay yakalama fonksiyonları jquer in temel elemanlarıdır. Olay yakalama HTML de belli bir olay meydana geldiğinde bu olayla ilgili ne yapılacağını belirtir. Örnek olaylar Sayfanın yüklenmesi Mouse tıklama Mouse hareketi Text kutusunu doldurma gibi Bu fonksiyonlar HTML in <head> bloğunda yazılır.

10 Fonksiyonlar $(document).ready(function) $(selector).click(function) $(selector).dblclick(function) $(selector).focus(function) $(selector).mouseover(function) Tanımı Fonksiyon dökümandaki olayları yakalamaya hazır Seçilen elemana tıklanmasıyla b başlatılacak veya çağrılacak fonksiyon Seçilen elemana çift tıklanmasıyla Seçilen eleman aktif hale geldiğinde Mouse bir elemanın üzerine geldiğinde

12 Üzerine tıkladığımız div ortadan kayboluyor

13 jquery css() Method jquery CSS stillerini değiştirmek için css() fonksiyonunu kullanır. css() farklı görevleir yerine getirmek için 3 farklı yazım kuralına sahiptir. css(name) : Belirtilen elemanın özellik değerini (property value) döndürür. css(name,value) : Belirtilen elemanın CSS özelliğini ve değerini değiştirir. css({properties}) : Birden fazla CSS özelliğini ve değerini değiştiri.

14 CSS Özelliğini Döndürme $(this).css("background-color"); mevcut elemanın arka plan rengini döndürür.

15 CSS Özelliğini Belirleme $("p").css("background-color","yellow"); Paragrafların arka plan rengini sarı yap.

16 Birden Fazla CSS Özelliğini Belirleme $("p").css({"background-color":"yellow","fontsize":"24pt"}); Paragrafların arka plan rengini sarı ve font büyüklüğünü 24pt yap.

18 Ajax uygulaması geliştirmek için jquery birçok fonksiyona sahiptir. $(document).ready(function(){ }); $("#btn1").click(function(){ $("div").load('sayfa1.html'); }); $("#btn2").click(function(){ $("div").load('sayfa2.html'); });

19 AJAX : Asynchronous JavaScript And XML AJAX hızlı ve dinamik bir web sayfası geliştirme tekniğidir. AJAX web sayfalarının asenkron bir şekilde güncellenmesini ve daha küçük miktarlarda verinin sunucudan yüklenmesini sağlar. Bu da sayfanın bütününü yüklemeye göre daha üstün bir performans sağlar.

20 Bir uygulama geliştirme tarzıdır. Birden fazla teknolojiyi kullanır. XHTML ve CSS DOM ve JavaScript XMLHTTPRequest XMLHTTPRequest i kullanarak asenkron iletişimi sağlar. Güncel tüm web tarayıcıları tarafından desteklenmektedir.

Benzer belgeler

YZM 3215 İleri Web Programlama

YZM 3215 İleri Web Programlama Yrd. Doç. Dr. Deniz KILINÇ Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi Yazılım Mühendisliği 1 BÖLÜM - 3 jquery II. Bölüm Bu bölümde; Jquery II. Bölüm