Yakup KALEBAŞI

<p id="test1">Vermeyince Mabut,</p>
    <p id="test2">Vermeyince Mabut,</p>

    <p>Varsayılan Değer: <input type="text" id="test3" value="Vermeyince Mabut,"></p>

    <button id="btn1">Değer Ata Text</button>
    <button id="btn2">Değer Ata HTML</button>
    <button id="btn3">Değer Ata</button>

    <hr />
    <p><a href="https://www.yakupkalebasi.com" id="yami" title="test test">yakupkalebasi.com</a></p>
    <button id="btn4">Link değerini değiştir.</button>

$("#btn1").click(function () {
    $("#test1").text("Neylesin Mahmut");
});
$("#btn2").click(function () {
    $("#test2").html("<b>Neylesin Mahmut</b>");
});
$("#btn3").click(function () {
    $("#test3").val("Neylesin Mahmut");
});
$("btn4").click(function () {
    $("#yami").attr({
        "href": "https://www.yakupkalebasi.com/jquery",
        "title": "jQuery"
    });
});

<p id="test">vermeyince <b>mabut</b> neylesin kel <b>mahmut</b></p>

<button id="btn1">Yazıyı Göster</button>
<button id="btn2">Yazının HTML içeriğini göster</button>

<hr />
<p>Adınız: <input type="text" id="text3" value="Yakup"></p>

<button id="btn3">Değer Göster</button>

<hr />
<p><a href="https://www.yakupkalebasi.com" id="yami">yakupkalebasi.com</a></p>

<button id="btn4">Değer Göster</button>

$("#btn1").click(function () {
    alert("Text: " + $("#test").text());
});
$("#btn2").click(function () {
    alert("HTML: " + $("#test").html());
});
$("#btn3").click(function () {
    alert("Value: " + $("#text3").val());
});
$("#btn4").click(function () {
    alert($("#yami").attr("href"));
});

<button>Listedeki elemanları göster</button>

<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Soda</li>
</ul>

$("button").click(function(){
        $("li").each(function(){
            alert($(this).text())
        });
    });

.add() : Seçili olan nesneye yeni bir özellik ekler.

<div class=’yazi’>Yakup KALEBAŞI</div>

Yukarıdaki yazdi div’ e color rengini eklemek istersek

$('div').css('color','red');
$('.yazi').css('color','red');

Her iki satırda div ‘in rengini kırmızı yapacaktır.

.children() : Seçilen nesnenin içerisindeki alt nesnelere erişmeye yarar.

<ul>
    <li>
        Araçlar
        <ul id="seviye1_1">
            <li>Otobüs</li>
            <li>Taksi</li>
            <li>Kamyon</li>
        </ul>
    </li>
    <li>
        Meslekler
        <ul id="seviye1_2">
            <li>Avukat</li>
            <li>Doktor</li>
            <li>Öğretmen</li>
        </ul>
    </li>
</ul>

$('ul#seviye1_2').children().css('background-color', 'yellow');

.closest() : Girilen ifade ile seçici arasındaki en yakın blok nesneleri seçer.

<div id="level2">
    <span>Level 2</span>
    <div id="level1">
        <span>Level 1</span>
        <div id="level0">
            <div id="main">
                <span>Main</span>
            </div>
        </div>
    </div>
</div>

$('#main').closest('#level1').css('color', 'red');

.contents(): Belirtilen seçiciye göre verilen ifadenin aranan noktasına manüplasyon yapar.

<div><em>Merhaba Kullanıcı.....</em></div>

<button>"em" tag 'nın içeriğini bul ve "b" tagı arasına al</button><br>

$("button").click(function () {
                $("div").contents().filter("em").wrap("<b/>");
            });

.find() : Belirtilen seçicinin içerisindeki nesneyi seçmeye yarar.

<ul>
    Arabalar
    <li>
        BMW
        <span>M5</span>
        <strong>Spor</strong>
        <span>Harika</span>
    </li>
</ul>

$("ul").find("span").css({ "color": "red", "border": "2px solid red" });

.next() :  Bir nesneden sonraki nesyeyi seçer.

<ul>
    Aile
    <li>Anne</li>
    <li>Baba</li>
    <li class="cocuklari">cocuklarin dan sonra torun gelir.</li>
    <li>İlk torunum</li>
    <li>İkinci torunumuz</li>
</ul>

$("li.cocuklari").next().css({ "color": "red", "border": "2px solid red" });

.parent() : Belirtilen nesnenin üstündeki nesneye geçilir.

<div>
    <p>iç paragraf</p>
</div>  
<div id="div1">
    dış paragraf
</div>

$("p").parent().css('background', 'red');