Javascript İle Nesne Birleştirme (Each) - Ders 4

V

vBasic

Misafir
Herkese merhabalar, bu dersimizde Jquery ile nesnelerden veri almayı ve birleştirmeyi inceleyeceğiz, ben örnek olarak sizlere sırasız bir liste oluşturacağım. Bu listenin içerisinde ki elemanlara tek tek nasıl erişebileceğimizi ve istediğimiz yere nasıl aktarabileceğimizi göreceğiz. Derse başlamadan önce kullanacağımız fonksiyonların anlamlarına göz atalım:

fHfUPS


İlk olarak temel HTML sayfamızı yine oluşturalım ben bir isim listesi oluşturmayı uygun gördüm siz dilediğiniz şekilde değiştirerek örneğe devam edebilirsiniz.
PHP:
<html>
<head>
<title>Javascript Ders 4 - WMArşiv</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>

<body>
<ul>
    <li>Ahmet</li>
    <li>Veli</li>
    <li>Ayşe</li>
    <li>Fathma</li>
</ul><br>
<input type="button" value="İsimleri Yazdır">
</body>
</html>

Bu listede bulunan isimleri butona tıklandığı zaman ekrana yazdırmak istiyoruz bunun için kodumuzu oluşturmaya başlıyoruz.
PHP:
$(document).ready (function() {
    $('input').click (function(){
        $('li').each (function(){
           alert ($(this).text());
        });
    });
});
Şimdi sırayla bu satırları inceleyelim.
- $(document).ready Bu adımda sayfamız tamamen yüklendiği zaman kodu çalıştırması gerektiğini söyledik.
- $('input').click İnput nesnesine tıklandığı zaman süslü parantez ( { ) içerisinde bulunan kodu çalıştırmasını belirttik. Şuanda formumuz da bir tane input nesnesi olduğu için sorun olmayacaktır.
- $('li').each Listemizde bulunan nesnelerin her biri anlamına gelmektedir. Yani listeye eklenen tüm elemanları sırayla gezecektir.
- alert ($(this).text()) Alert, Javascript'in temel ekrana yazdırma komutuydu, this ise bu demek yani seçili olan anlamına gelmekte. Seçili olan elemanın text değerini aldık.
Sonuç olarak butona tıklandığı zaman isimler sırayla ekrana yazdırılacaktır.

Listeden elemanları seçmeyi öğrendiysek farklı örneklerle devam edelim. Bu sefer listenen alanın isimleri arasına virgül koyarak bir paragrafa renkli şekilde yazdıralım. Bunun butonumuzun altına için formumuza içi boş paragraf <p></p> ekliyorum. Daha sonra li.each fonksiyonumun içerisine şu kodu ekliyorum:
PHP:
$('p').append ($(this).text());
Bu sayede listemden alınan değeri boş paragrafımın içerisine ekleye bildim ancak yazılar bitişik ve okunuşu zor olarak geldi bu sorunu ortadan kaldırabilmem için arasına virgül ve boşluk koymam gerekiyor bunun için text değerimiz sonuna birleştirme operatörü olan + işaretini ekleyerek tek tırnak veya çift tırnak içerisinde değerimi belirtiyorum:
PHP:
$('p').append ($(this).text() + ', ');
Artık listenen eklenen isimler daha okunaklı ve anlaşılır hale geldi. Daha önceki derslerimizde de görmüştük, Jquery ve Javascript kodları içerisinde HTML kodlarını da çalıştırılabiliyordu. O zaman bizde eklenen bu isimlerin renkleriyle oynayalım ve kalınlaştıralım. Kodumu şu şekilde düzenliyorum:
PHP:
$('p').append ('<b style="color:red;">' + $(this).text() + '</b>, ');
Artık listeden aldığım tüm elemanlar belirgin ve anlaşılır bir şekilde paragrafıma ekleniyor. Ekran görüntüsü şu şekilde olacak:
admin-albums-javascript-picture32-ders-5-1.png


Genel kod yapımı şu şekilde oldu:
PHP:
<html>
<head>
<title>Javascript Ders 5 - WMArşiv</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script>
$(document).ready (function() {
    $('input').click (function(){
        $('li').each (function(){
           $('p').append ('<b style="color:red;">' + $(this).text() + '</b>, ');
        });
    });
});
</script>

<body>
<ul>
        <li>Ahmet</li>
        <li>Veli</li>
        <li>Ayşe</li>
        <li>Fathma</li>
</ul><br>
<input type="button" value="İsimleri Yazdır">
<br>
<p></p>
</body>
</html>
 

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur.

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5

Elektronik Sigara Cicisex Porno
Üst