Javascript – jQuery – Sayfa 3 – aycan.net

jQuery .slice() nedir ? nasıl kullanılır ?

Merhaba Arkadaşlar

Bugun ki konumuzda .slice() fonksiyonun kullanımını inceliycez.

.slice() fonksiyonun en basit tanımı olarak iki adet indeks noktası arasındaki nesnelerini seçtiğini söylebiliriz.

Aşağıdaki örnek güzel bir örnek olduğu için jquery.com‘dan aldım ve biraz türkçeleştirdim.

HTML Kodlarımız

  <p>
    <button>Kutu Seçmek İçin Tıklayın</button>
    <span>Butona Tıkla !</span>
  </p>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

<p>

<button>Kutu Seçmek İçin Tıklayın</button>

<span>Butona Tıkla !</span>

</p>

Okumaya devam et jQuery .slice() nedir ? nasıl kullanılır ?

jQuery :first-child nedir ? nasıl kullanılır ?

: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

<div>
  <span>Ozan</span>
  <span>Erkan</span>
  <span>Emin</span>
</div>
<div>
  <span>OZAN</span>
  <span>ERKAN</span>
  <span>EMİN</span>
</div>

<div>

<span>Erkan</span>

</div>

<div>

<span>ERKAN</span>

</div>

Okumaya devam et jQuery :first-child nedir ? nasıl kullanılır ?

jQuery .has() 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

<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>

<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>

Okumaya devam et jQuery .has() nedir ? nasıl kullanılır ?

jQuery .eq() nedir ? nasıl kullanılır ?

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ı

<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>

<div>

<span>Fizik</span>

<span>Kimya</span>

<span>Biyoloji</span>

<span>Matematik</span>

<span>Geometri</span>

</div>

<br>

$('span').eq(2);

</button>

$('span').eq(-1);

</button>

$('span').eq(-2);

</button>

Okumaya devam et jQuery .eq() nedir ? nasıl kullanılır ?

Seçiciler ~ Selectors

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

<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>

<body>

<p id="Meyve">Meyve Türleri aşağıdaki gibidir.</p>

<div>

Meyveler

<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>

TAG SEÇİCİLER

Okumaya devam et Seçiciler ~ Selectors