jQuery (4)

[Fauda]

Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!

​

jQuery - 4​

JAVASCRİPT !​

-​

JavaScript'e Giriş ! ​

​

Manipülasyon ! ​

DOM'deki öğeleri seçmek ve geçiş yapmak, jQuery'nin sunduğu şeyin yalnızca bir parçasıdır, diğer bir önemli bölüm, bir kez bulunduğunda bu öğelerle mümkün olandır. Bir olasılık, nitelikleri veya stilleri okuyarak, ekleyerek veya değiştirerek bu öğeleri manipüle etmektir.
Ek olarak, DOM'da öğeler, yerleşimleri değiştirilerek, kaldırılarak, yeni öğeler eklenerek ve benzeri şekilde değiştirilebilir.
Genel olarak, öğeleri manipüle etme seçenekleri oldukça geniştir.
​

Alma ve Ayarlama ! ​

İzlenecek manipülasyon yöntemleri, en yaygın olarak, bilgi alma veya ayarlama olan iki yönergeden birinde kullanılır.
Bilgi almak, hangi bilgi parçasının alınacağını belirlemek için bir yönteme ek olarak bir seçici kullanma etrafında döner.
Ek olarak, bir bilgi parçasını ayarlamak için aynı seçici ve yöntem de kullanılabilir.
​

1 2 3 4 5 6​

// Gets the value of the alt attribute $('img').attr('alt'); // Sets the value of the alt attribute $('img').attr('alt', 'Wild kangaroo');​

Örneklerde ve parçacıklarda izlenecek yöntemler öncelikle bir ayar modunda kullanılacaktır, ancak aynı zamanda bir alma modunda da kullanılabilirler.
​

Özellik Manipülasyonu ! ​

İncelenebilen ve manipüle edilebilen öğelerin bir kısmı niteliklerdir. Birkaç seçenek, bir özniteliği veya değerini ekleme, kaldırma veya değiştirme yeteneğini içerir. Aşağıdaki örneklerde .addClass()yöntem, tüm çift liste öğelerine bir sınıf eklemek için kullanılır, .removeClass()yöntem herhangi bir paragraftan tüm sınıfları çıkarmak için kullanılır ve son olarak .attr()yöntem, titleherhangi bir abbröğenin özniteliğinin değerini bulmak ve ona ayarlamak için kullanılır. Hello World.
​

1 2 3 4​

$('li:even').addClass('even-item'); $('p').removeClass(); $('abbr').attr('title', 'Hello World');​

​

Nitelik Manipülasyon Yöntemleri ! ​

• .addClass()​
• .attr()​
• .hasClass()​
• .prop()​
• .removeAttr()​
• .removeClass()​
• .removeProp()​
• .toggleClass()​
• .val()​

Stil Manipülasyonu ! ​

Niteliklerin manipüle edilmesinin yanı sıra, bir elemanın stili de çeşitli yöntemler kullanılarak manipüle edilebilir.
Bir öğenin yüksekliğini, genişliğini veya konumunu okurken veya ayarlarken bir avuç özel yöntem mevcuttur ve diğer tüm stil manipülasyonları için .css()yöntem herhangi bir CSS değişikliğini işleyebilir.

.css()Özellikle yöntem, bir özellik ya da bir çok ve her değişir sözdizimini ayarlamak için kullanılabilmektedir.
Bir özelliği ayarlamak için, özellik adı ve değeri tırnak içinde olmalı ve virgülle ayrılmalıdır. Birden çok özelliği ayarlamak için, özellikler, deve durumunda özellik adıyla, gerektiğinde kısa çizgileri kaldırarak, ardından iki nokta üst üste ve ardından alıntılanan değerle birlikte küme parantezlerinin içine yerleştirilmelidir.
Özellik ve değer çiftlerinin her birinin virgülle ayrılması gerekir.

Yükseklik, genişlik veya konum yöntemlerinin tümü varsayılan olarak piksel değerlerini kullanır, ancak diğer ölçü birimleri de kullanılabilir.
Aşağıda görüldüğü gibi, ölçü birimini değiştirmek için değeri tanımlayın, ardından bir artı işareti ve ardından belirtilen ölçü birimini kullanın.
​

1 2 3 4 5 6 7 8​

$('h1 span').css('font-size', 'normal'); $('div').css({ fontSize: '13px', background: '#f60' }); $('header').height(200); $('.extend').height(30 + 'em');​

​

Stil Manipülasyon Yöntemleri !​

• .css()​
• .height()​
• .innerHeight()​
• .innerWidth()​
• .offset()​
• .outerHeight()​
• .outerWidth()​
• .position()​
• .scrollLeft()​
• .scrollTop()​
• .width()​

DOM Manipülasyonu !​

Son olarak, DOM'yi inceleyebilir ve değiştirebilir, öğelerin yerleşimini değiştirebilir, öğeleri ekleyip kaldırabilir ve ayrıca öğeleri tamamen değiştirebiliriz. Buradaki seçenekler, DOM içinde yapılabilecek olası değişikliklere izin verecek şekilde derin ve çeşitlidir.

Her bağımsız DOM işleme yönteminin kendi sözdizimi vardır, ancak bunlardan birkaçı aşağıda özetlenmiştir. .prepend()Yöntem yeni ekliyor h3herhangi sadece iç elemanı section, .after()yöntem yeni ekliyor emhemen linke sonra elemanını ve .text()yöntem herhangi metnini değiştiriliyor h1metinle elemanları Hello World.
​

1 2 3 4​

$('section').prepend('<h3>Featured</h3>'); $('a[target="_blank"]').after('<em>New window.</em>'); $('h1').text('Hello World');​

​

DOM Manipülasyon Yöntemleri !​

• .after()​
• .append()​
• .appendTo()​
• .before()​
• .clone()​
• .detach()​
• .empty()​
• .html()​
• .insertAfter()​
• .insertBefore()​
• .prepend()​
• .prependTo()​
• .remove()​
• .replaceAll()​
• .replaceWith()​
• .text()​
• .unwrap()​
• .wrap()​
• .wrapAll()​
• .wrapInner()​

Olaylar !​

jQuery'nin güzelliklerinden biri, yalnızca belirli bir olay veya eylem gerçekleştiğinde çağrılan yöntemler olan olay işleyicilerini kolayca ekleme yeteneğidir . Örneğin, bir öğeye sınıf ekleme yöntemi, yalnızca o öğeye tıklandığında gerçekleşecek şekilde ayarlanabilir.

Aşağıda, tüm liste öğelerini alan standart bir seçici bulunmaktadır. .click()Olay yöntemi herhangi bir liste öğesi tıklayarak üzerine gerçekleşecek bir eylem kurma, liste öğesi seçicisi bağlıdır. İçinde .click()olay yöntemiyle olay yöntemi içinde herhangi bir işlem icra edileceği sağlayan bir fonksiyonudur. İşlevden hemen sonra gelen parantezler event, bu örnekte nesnenin kullanıldığı işlev için parametreleri iletmek için kullanılabilir.

İşlevin içinde, kendisine .addClass()bağlı yönteme sahip başka bir seçici bulunur . Şimdi, o liste öğesinde bir liste öğesi tıklandığında, thisanahtar kelime aracılığıyla , sınıfını alır saved-item.
​

1 2 3 4​

$('li').click(function(event){ $(this).addClass('saved-item'); });​

​

Etkinlik Esnekliği !​

.click()Etkinliği yöntemi, diğer olay yöntemleri bir avuç ile birlikte, aslında bir kestirme yöntemi kullanan .on()jQuery 1.7 tanıtılan yöntem. .on()Yöntem dinamik sayfaya eklenen olsun elemanlar için otomatik yetkisinin kullanılmasına, esneklik biraz sağlar.

Yapılması kullanımı .on()ikinci bağımsız olayı işleyicisi işlevi olması gerekirken yöntem ilk bağımsız doğal olay adı olmalıdır. Daha önceki örneğe bakıldığında, .on()yöntem yerine yöntem çağrılır .click(). Şimdi clickolay adı, .on()olay işleyici işlevi öncekiyle aynı kalacak şekilde , yöntemin içindeki ilk argüman olarak iletilir .
​

1 2 3 4​

$('li').on('click', function(event){ $(this).addClass('saved-item'); });​

​

Yuvalama Etkinlikleri !​

Birden çok olay işleyicisi ve tetikleyicisi iç içe geçmiş durumda olabilir. Örnek olarak, .on()olay yönteminin altında hoverargüman iletilir , bu nedenle sınıfına sahip herhangi bir öğenin üzerine gelindiğinde çağrılır pagination. Çağrı üzerine .on()olay .click()olay ile çapa denir upkimliği.
​

1 2 3 4​

$('.pagination').on('hover', function(event){ $('a#up').click(); });​

Etkinlik Demosu !​

Bir uyarı mesajını demo olarak kullanarak, aşağıdaki kod parçacıkları, bir uyarı mesajının nasıl oluşturulacağını ve ardından kapat simgesine tıklayarak bu mesajın nasıl kaldırılacağını gösterir.​

HTML​

1 2 3 4 5​

<div class="notice-warning"> <div class="notice-close">&#215;</div> <strong>Warning!</strong> I`m about to lose my cool. </div>​

JavaScript​

1 2 3 4​

$('.notice-close').on('click', function(event){ $('.notice-warning').remove(); });​

Olay Yöntemleri !​

jQuery, tümü tarayıcıyla etkileşime girerken kullanıcı davranışlarını kaydetmeye dayanan birkaç yöntem sunar. Bu yöntemler, en popüler olarak, ancak bunlarla sınırlı olmamak üzere, tarayıcı, form, klavye ve fare olayları olmak üzere birkaç olayı kaydeder. Bu yöntemlerden en popüler olanları şunlardır:
​

Tarayıcı Etkinlikleri​

• .resize()​
• .scroll()​

Belge Yükleme​

• .ready()​

Olay İşleyici Eki​

• .off()​
• .on()​
• .one()​
• jQuery.proxy()​
• .trigger()​
• .triggerHandler()​
• .unbind()​
• .undelegate()​

Olay Nesnesi​

• event.currentTarget​
• event.preventDefault()​
• event.stopPropagation()​
• event.target​
• event.type​

Form Etkinlikleri​

• .blur()​
• .change()​
• .focus()​
• .select()​
• .submit()​

Klavye Etkinlikleri​

• .focusin()​
• .focusout()​
• .keydown()​
• .keypress()​
• .keyup()​

Fare Olayları​

• .click()​
• .dblclick()​
• .focusin()​
• .focusout()​
• .hover()​
• .mousedown()​
• .mouseenter()​
• .mouseleave()​
• .mousemove()​
• .mouseout()​
• .mouseover()​
• .mouseup()​

Etkileri​

Etkinliklerin yanında jQuery ayrıca bir dizi özelleştirilebilir efekt sağlar. Bu efektler, içeriği göstermek ve gizlemek, içeriği açıp kapatmak veya içeriği yukarı ve aşağı kaydırmak için olay yöntemleri dahil olmak üzere farklı yöntemlerle gelir. Bunların hepsi kullanıma hazır yöntemlerdir ve en uygun şekilde özelleştirilebilir.

Her efekt yönteminin kendi sözdizimi vardır, bu nedenle her yöntemin etrafındaki belirli sözdizimi için jQuery efekt belgelerine başvurmak en iyisidir . En yaygın olarak, efektler genellikle bir süreyi, hareket hızını ve bir geri arama işlevi belirtme yeteneğini kabul eder.
​

jQuery CSS Animasyonları !​

Farklı CSS özelliklerinin özel animasyonları jQuery'de gerçekleştirilebilir, ancak bu biraz daha az alakalıdır, çünkü CSS artık animasyonların kendisini işleyebilir. CSS animasyonları, tarayıcı işleme açısından daha iyi performans sunar ve mümkün olduğunda tercih edilir. jQuery animasyon efektleri, Modernizr'in yardımıyla, CSS animasyonlarını desteklemeyen tüm tarayıcılar için mükemmel bir yedekleme çözümü oluşturur.​

Etki Süresi !​

Kullanarak .show(), örnek olarak bir yöntem, mevcut birinci parametre isteğe yönteme geçmesi için bir anahtar kelime ya da milisaniye değeri kullanılarak gerçekleştirilebilir süresi vardır. Anahtar kelime slowvarsayılan olarak 600milisaniye, anahtar kelime ise fastvarsayılan olarak 200milisaniyedir. Bir anahtar kelime değeri kullanmak iyidir, ancak milisaniye değerleri doğrudan iletilebilir. Anahtar kelime değerleri alıntılanmalı, milisaniye değerleri alıntılanmamalıdır.
​

1 2 3 4​

$('.error').show(); $('.error').show('slow'); $('.error').show(500);​

​

Efekt Kolaylaştırma !​

Bir efektin yer alacağı sürenin ayarlanmasına ek olarak, animasyon içinde farklı zamanlarda bir animasyonun ilerleme hızı veya hareket hızı da ayarlanabilir. Varsayılan olarak jQuery, yumuşatma için iki anahtar kelime değerine sahiptir; varsayılan değer, swingek değerdir linear. Varsayılan swingdeğer, animasyonu yavaş bir hızda başlatır, animasyon sırasında hızlanır ve tamamlanmadan önce tekrar yavaşlar. linearDeğer süreleri boyunca değişmeyen tek tempoda animasyon çalışır.
​

1 2 3​

$('.error').show('slow', 'linear'); $('.error').show(500, 'linear');​

​

jQuery kullanıcı arabirimi !​

jQuery ile gelen iki hareket hızı değeri, ek değerler sunabilen farklı eklentilerin kullanımıyla genişletilebilir. En popüler eklentilerden biri jQuery UI paketidir.
JQuery UI, yeni hareket hızı değerlerine ek olarak, göz atmaya değer çok sayıda başka etkileşim, efekt, pencere öğesi ve diğer yararlı kaynaklar da sağlar.​

Efekt Geri Arama !​

Bir animasyon tamamlandığında, geri çağırma işlevi adı verilen başka bir işlevi çalıştırmak mümkündür. Geri arama işlevi, varsa süre veya hareket hızından sonra yerleştirilmelidir. Bu işlevin içine, her biri kendi gerekli sözdizimini izleyen yeni olaylar veya efektler yerleştirilebilir.
​

1 2 3 4​

$('.error').show('slow', 'linear', function(event){ $('.error .status').text('Continue'); });​

​

Efekt Sözdizimi​

Daha önce belirtildiği gibi, her efekt yönteminin, jQuery

Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.

bulunabilen kendi sözdizimi vardır . Burada özetlenen süre, hareket hızı ve geri arama parametreleri yaygındır, ancak her yöntemde mevcut değildir. Herhangi bir sorunuz varsa, bir yöntemin sözdizimini gözden geçirmek en iyisidir.
​

Efekt Demosu​

Aynı olay demosunu yukarıdan alarak, .remove()yöntem artık yöntem üzerindeki bir geri çağırma işlevinin parçası olarak kullanılmaktadır .fadeOut(). .fadeOut()Yöntemi kullanmak, uyarı mesajının hızla kaybolmak yerine yavaş yavaş kaybolmasına ve ardından animasyon tamamlandıktan sonra DOM'den kaldırılmasına olanak tanır.​

HTML​

1 2 3 4 5​

<div class="notice-warning"> <div class="notice-close">&#215;</div> <strong>Warning!</strong> I`m about to lose my cool. </div>​

JavaScript​

1 2 3 4 5 6​

$('.notice-close').on('click', function(event){ $('.notice-warning').fadeOut('slow', function(event){ $(this).remove(); }); });​

Demo​

​

Temel Efektler​

• .hide()​
• .show()​
• .toggle()​

Özel Efektler​

• .animate()​
• .clearQueue()​
• .delay()​
• .dequeue()​
• jQuery.fx.interval​
• jQuery.fx.off​
• .queue()​
• .stop()​

Solma Etkileri​

• .fadeIn()​
• .fadeOut()​
• .fadeTo()​
• .fadeToggle()​

Sürgülü Efektler​

• .slideDown()​
• .slideToggle()​
• .slideUp()​

Slayt Demosu​

HTML​

1 2 3 4 5​

<div class="panel"> <div class="panel-stage"></div> <a href="#" class="panel-tab">Open <span>&#9660;</span></a> </div>​

JavaScript​

1 2 3 4 5 6 7 8 9 10 11​

$('.panel-tab').on('click', function(event){ event.preventDefault(); $('.panel-stage').slideToggle('slow', function(event){ if($(this).is(':visible')){ $('.panel-tab').html('Close <span>&#9650;</span>'); } else { $('.panel-tab').html('Open <span>&#9660;</span>'); } }); });​

Demo​

​

Sekmeler Demosu​

HTML​

1 2 3 4 5 6 7 8 9​

<ul class="tabs-nav"> <li><a href="#tab-1">Features</a></li> <li><a href="#tab-2">Details</a></li> </ul> <div class="tabs-stage"> <div id="tab-1">...</div> <div id="tab-2">...</div> </div>​

JavaScript​

1 2 3 4 5 6 7 8 9 10 11 12 13 14​

// Show the first tab by default $('.tabs-stage div').hide(); $('.tabs-stage div:first').show(); $('.tabs-nav li:first').addClass('tab-active'); // Change tab class and display content $('.tabs-nav a').on('click', function(event){ event.preventDefault(); $('.tabs-nav li').removeClass('tab-active'); $(this).parent().addClass('tab-active'); $('.tabs-stage div').hide(); $($(this).attr('href')).show(); });​