Javascript – jQuery hakkında kod parçaları ve tanımlar.
:first-child
Girilen seçiciye göre barındırılan ilk nesneyi verir. Her zaman ki gibi daha iyi anlaşılır olabilmesi için basit bir örnek verelim.
HTML Kodlarımız
|
1 2 3 4 5 6 7 8 9 10 |
<div> <span>Ozan</span> <span>Erkan</span> <span>Emin</span> </div> <div> <span>OZAN</span> <span>ERKAN</span> <span>EMİN</span> </div> |
Okumaya devam et jQuery :first-child nedir ? nasıl kullanılır ?
İçerisinde girilen nesneye sahip olan nesneleri seçer.
$(“ul”).has(“li”) fonksiyonu $(“ul:has(li)”) filtresinden daha hızlı sonuç verir.
HTML Kodlarımız
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> <li>Mercedes <span>candır</span></li> <li>TOFAŞ </li> <li>BMW <span>candır</span></li> <li>AUDI <span>candır</span></li> <li>İRENO</li> <li>VOLVO <span>candır</span></li> <li>PEGEOUT</li> <li>JAGUAR <span>candır</span> </li> <li>Huyundaaayy</li> </ul> <button>Can Olanları göster</button> |
Girilen indeks numaralı nesneyi seçer.
Örneğin: 5 adet nesne içerisinde .eq(-1) yazdığımızda alttan 5. nesne seçilir.
Yani üstten 0,1,2,3,4,5 alttan ise -1,-2,-3,-4,-5 diye nesneler sıralanır.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div> <span>Fizik</span> <span>Kimya</span> <span>Biyoloji</span> <span>Matematik</span> <span>Geometri</span> </div> <br> <button class="bir"> $('span').eq(2); </button> <button class="iki"> $('span').eq(-1); </button> <button class="uc"> $('span').eq(-2); </button> |
Merhaba Arkadaşlar
Bugün üzerinde duracağım konu sitemizde bulunan nesnelerin özelliklerini bir seçici tarafından nasıl değiştirebileceğimiz olacak.
Her zaman ki örnekler göstererek daha iyi anlamanızı istiyorum ve html kodlarımı yazıyorum.
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<body> <p id="Meyve">Meyve Türleri aşağıdaki gibidir.</p> <div> Meyveler <ul id="liste"> <li class="e1">Erik</li> <li class="e2">Elma</li> <li class="e3">Çilek</li> <li class="e4">Kavun</li> <li class="e5">Portakal</li> </ul> </div> <p class="p1">Sebze Türleri Aşağıdaki Gibidir.</p> <p class="p2">Tahıl Ürünleri Aşağıdaki Gibidir.</p> </body> |
jQuery .attr() = attribute’larla işlem yapmamızı sağlıyor. // attiribute’nin TR’ye geçmiş tam karşılığı nedir bilmiyorum ama şöyle açıklayacak olursak
|
1 |
<input name="adınız" value="aycan" /> |
Burada name ve value bir attribute’dur. jQuery .attr() ile bu attribute’ler üzerinde değişiklik yapıyoruz.
|
1 2 3 |
$('.button1').click(function(){ $('input').attr('value','.attr() ile içerik değiştirdik'); }); |
Yukarıda .attr() ile seçtiğimiz value attribute’sine yeni değer atadık.
|
1 2 3 4 5 6 |
$('.button2').click(function(){ $('input').attr({ value :'çoklu attr ekliyoruz', disabled : 'disabled' }); }); |
Burada ise obje şeklinde çoklu attribute ekledik / güncelledik.
Değer atayabildiğimiz gibi var olan attribute değerlerinede .attr() yardımı ile okuyabiliyoruz.
|
1 2 3 |
$('.button3').click(function(){ alert($('input').attr('value') ) }); |
See the Pen jQuery .attr() nedir? nasıl kullanılır? by Aycan BÜLBÜL (@AycanB) on CodePen.
Yedek olsun diye kodları burada da tutalım 🙂
|
1 2 3 4 |
<input type="text" value="deneme"/> <button class="button1">attr ekle</button> <button class="button2">çoklu attr ekle</button> <button class="button3">attr ile değer almak</button> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$('.button1').click(function(){ $('input').attr('value','.attr() ile içerik değiştirdik'); }); $('.button2').click(function(){ $('input').attr({ value :'çoklu attr ekliyoruz', readonly : 'readonly' }); }); $('.button3').click(function(){ alert($('input').attr('value') ) }); |
