{"id":260,"date":"2012-11-09T15:02:35","date_gmt":"2012-11-09T12:02:35","guid":{"rendered":"http:\/\/ulviercan.com\/teknoblog\/?p=260"},"modified":"2015-01-05T19:04:03","modified_gmt":"2015-01-05T16:04:03","slug":"jquery-ve-seciciler-selectors","status":"publish","type":"post","link":"https:\/\/www.ulviercan.com\/teknoblog\/jquery\/jquery-ve-seciciler-selectors\/","title":{"rendered":"jQuery ve Se\u00e7iciler (Selectors)"},"content":{"rendered":"

\"\"<\/p>\n

\u00d6ncelikle merhaba. T\u00fcm yaz\u0131l\u0131m geli\u015ftiricilerinin ve kod severlerin ge\u00e7mi\u015f Cumhuriyet ve Kurban Bayramlar\u0131n\u0131 en i\u00e7ten dileklerimle kutluyorum.<\/p>\n

Araya giren tatiller, s\u0131navlar vs. dolas\u0131yla yakla\u015f\u0131k 3 haftad\u0131r yazam\u0131yordum. Bu haftaki konumuz jQuery Se\u00e7iciler (Selectors) olacak. CSS’in i\u00e7inde g\u00f6m\u00fcl\u00fc olarak gelen se\u00e7icilerin jQuery ile birle\u015fmesi sonucu ortaya \u00e7\u0131kan g\u00fc\u00e7l\u00fc arac\u0131 inceleyece\u011fiz.<\/p>\n

<\/div>\n
<\/div>\n

Bu g\u00fc\u00e7l\u00fc ara\u00e7tan baz\u0131 \u00f6rnekler vermek gerekirse, ‘JQuery’ nesnesi yerine ‘$’ kullanarak \u00e7ok k\u0131sa kodlarla b\u00fcy\u00fck i\u015fler yapabiliyoruz. ‘$’ kullan\u0131m\u0131n\u0131 \u015fu \u015fekilde \u00f6zetleyebiliriz. Ayn\u0131 CSS s\u0131n\u0131f (class) de\u011ferlerine sahip elementleri $(‘.sinif_adi’) \u015feklinde se\u00e7ebiliyoruz. ID se\u00e7mek i\u00e7in ise $(‘#element_idsi’) kullan\u0131m\u0131 yeterli oluyor. $(‘a’) \u015feklinde t\u00fcm <a> elementlerini se\u00e7ebiliyoruz. Yine ayn\u0131 \u015fekilde ‘:’ operat\u00f6r\u00fcn\u00fc kullanarak filtreleme i\u015flemlerini ger\u00e7ekle\u015ftirebiliyoruz. Mesela, $(‘a:even’) ile \u00e7ift s\u0131rada olan linkleri se\u00e7ebiliyoruz.<\/p>\n

\u015eimdi bunun gibi bir\u00e7ok avantaj\u0131 olan bu nimetin derinliklerine inelim. \u015eimdiden \u00e7ok faydal\u0131 ve okumas\u0131 zevkli bir yaz\u0131 olaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcyorum.<\/p>\n

jQuery(‘*’) \/ $(‘*’)<\/h1>\n

T\u00fcm elementleri se\u00e7er.<\/p>\n

\r\nvar elementSayisi = $("*").css("border","3px solid green").length;\r\n<\/pre>\n
Bu kullan\u0131m\u0131 tavsiye etmiyorum. Bu \u015fekilde head, body vs. k\u0131s\u0131mlar\u0131 da dahil edecektir. E\u011fer taray\u0131c\u0131n\u0131zda <script> veya <link> \u015feklinde DOM kayna\u011f\u0131na eklemeler yapan bir eklenti var ise onlar\u0131 da dahil edecektir.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/uLSLF\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  h3 { margin: 0; }\r\n  div,span,p {\r\n    width: 80px;\r\n    height: 40px;\r\n    float:left;\r\n    padding: 10px;\r\n    margin: 10px;\r\n    background-color: #EEEEEE;\r\n  }\r\n  #test {\r\n    width: auto; height: auto; background-color: transparent;\r\n  }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div id="test">\r\n  <div>DIV<\/div>\r\n  <span>SPAN<\/span>\r\n  <p>P <button>Buton<\/button><\/p>\r\n<\/div>\r\n<script>\r\nvar elementSayisi = $("#test").find("*").css("border","3px solid green").length;\r\n$("body").prepend("<h3>" + elementSayisi + " element bulundu<\/h3>");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Kodumuz #test ID’sine sahip div elementinin \u00e7ocu\u011fu olan t\u00fcm elementlere 3 piksellik ye\u015fil kenarl\u0131k veriyor. Bu kullan\u0131m\u0131, <body> i\u00e7indeki elementleri se\u00e7mek i\u00e7in en ideal y\u00f6ntem olarak g\u00f6r\u00fcyorum.<\/p>\n
jQuery(‘:animated’)<\/h1>\n
Se\u00e7ici \u00e7al\u0131\u015ft\u0131\u011f\u0131 anda devam eden t\u00fcm animasyonlar\u0131 se\u00e7er.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/hCGUU\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }\r\n  div.renkli { background:green; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <button id="calistir">\u00c7al\u0131\u015ft\u0131r<\/button>\r\n\r\n  <div><\/div>\r\n  <div id="hareketli"><\/div>\r\n  <div><\/div>\r\n<script>\r\n\r\n    $("#calistir").click(function(){\r\n      $("div:animated").toggleClass("renkli");\r\n    });\r\n    function hareketlendir() {\r\n      $("#hareketli").slideToggle("slow", hareketlendir);\r\n    }\r\n    hareketlendir();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Kodumuz taray\u0131c\u0131 \u00fczerinde \u00e7al\u0131\u015ft\u0131\u011f\u0131 anda hareketlendir fonksiyonumuz \u00e7al\u0131\u015f\u0131yor ve id si hareketli olan kutumuza slideToggle komutunu \u00f6zyinelemeli olarak, yani sonsuz defa uyguluyor. S\u00fcrekli hareket halinde olan kutumuzu div:animated se\u00e7icisiyle se\u00e7ip rengini de\u011fi\u015ftiriyoruz.<\/p>\n
jQuery(‘[attribute|=”value”]’)<\/h1>\n
Niteli\u011fi ve niteli\u011fin de\u011feri verildi\u011fi gibi olan veya “-” i\u015fareti taraf\u0131ndan takip edilen t\u00fcm elementleri se\u00e7er. Tan\u0131m biraz kafa kar\u0131\u015ft\u0131r\u0131c\u0131 gibi. \u00d6rne\u011fi incelerseniz daha iyi anlayaca\u011f\u0131n\u0131za eminim.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/mzn6j\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\na { display: inline-block; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n  <a href="#" hreflang="tr">Bu bir yaz\u0131d\u0131r<\/a>\r\n\r\n  <a href="#" hreflang="tr-TR">Bu da bir yaz\u0131d\u0131r<\/a>\r\n\r\n  <a href="#" hreflang="trkye">Bu se\u00e7ilmeyecek bir yaz\u0131d\u0131r<\/a>\r\n\r\n<script>\r\n$('a[hreflang|="tr"]').css('border','3px dotted green');\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Kodumuzda da g\u00f6rebilece\u011finiz \u00fczere se\u00e7icimiz, hreflang niteli\u011findeki “tr” ve “tr-” yi i\u00e7eren elementleri se\u00e7iyor ve etraf\u0131na 3 piksellik noktal\u0131 ve ye\u015fil kenarl\u0131k veriyor.<\/p>\n
jQuery(‘[attribute*=”value”]’)<\/h1>\n
Verilen string ifadede se\u00e7ici taraf\u0131nda verilen substring ifadeyi arar. En yayg\u0131n kullan\u0131ma sahip se\u00e7icilerden biridir.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/HrgeF\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <input name="guner-ler" \/>\r\n\r\n  <input name="guner" \/>\r\n  <input name="birguner" \/>\r\n  <input name="alakasizgu" \/>\r\n<script>$('input[name*="gun"]').val('i\u00e7inde gun var');<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Name niteli\u011findeki string ifadede “gun” substringini i\u00e7eren t\u00fcm elementleri se\u00e7iyor.<\/p>\n
jQuery(‘[attribute~=”value”]’)<\/h1>\n
Belirlenen nitelikte, verilen string ifade sadece bo\u015fluklar ile s\u0131n\u0131rland\u0131r\u0131lm\u0131\u015fsa elemeti se\u00e7er.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/zRm54\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <input name="adam-haberleri" \/>\r\n  <input name="sut adam" \/>\r\n  <input name="yaziciadam2" \/>\r\n  <input name="yenisut" \/>\r\n<script>$('input[name~="adam"]').val('Say\u0131n adam bulundu!');<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere etraf\u0131nda bo\u015fluk karakterleri olan metinleri se\u00e7iyor. Daha do\u011frusu ona ba\u011fl\u0131 DOM elementimizi se\u00e7iyor.<\/p>\n
jQuery(‘[attribute$=”value”]’)<\/h1>\n
Belirlenen niteli\u011fin sadece son k\u0131sm\u0131nda arama yap\u0131yor. Yani aranacak kelime, nitelik de\u011ferinin sonunda ise elementi se\u00e7iyor.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/CtZw6\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <input name="haberbulteni" \/>\r\n\r\n  <input name="sutadam" \/>\r\n  <input name="ganyanbulteni" \/>\r\n<script>$('input[name$="bulteni"]').val('bir b\u00fclten');<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Aranan kelimeyi verilen niteli\u011fin sonunda ar\u0131yor. Bulursa DOM elementini se\u00e7iyor.<\/p>\n
jQuery(‘[attribute=”value”]’)<\/h1>\n
Verilen nitelik ve de\u011feri aranan de\u011fere tam olarak e\u015fitse elementi se\u00e7iyor.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/UfeKz\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>\r\n    <label>\r\n      <input type="radio" name="haberbulteni" value="S\u0131cak \u015eeyz" \/>\r\n      <span>ad\u0131 ne?<\/span>\r\n    <\/label>\r\n  <\/div>\r\n  <div>\r\n    <label>\r\n      <input type="radio" name="haberbulteni" value="So\u011fuk Bir\u015feyz" \/>\r\n      <span>de\u011fer ne?<\/span>\r\n    <\/label>\r\n  <\/div>\r\n  <div>\r\n    <label>\r\n      <input type="radio" name="haberbulteni" value="K\u00f6t\u00fc planlar" \/>\r\n      <span>de\u011fer ne?<\/span>\r\n    <\/label>\r\n  <\/div>\r\n<script>$('input[value="S\u0131cak \u015eeyz"]').next().text(" S\u0131cak \u015eeyz");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Value de\u011ferimiz tam olarak “S\u0131cak \u015eeyz” ile e\u015fle\u015fti\u011fi i\u00e7in, bir sonraki elementi yani <span> elementini .next() metodu ile se\u00e7ip i\u00e7eri\u011fini “S\u0131cak \u015eeyz” olarak ayarl\u0131yor.<\/p>\n
Query(‘[attribute!=”value”]’)<\/h1>\n
Verilen de\u011fere e\u015fit olmayan nitelik de\u011ferlerine ba\u011fl\u0131 elementi se\u00e7er.<\/p>\n
Bu se\u00e7inin e\u015fleni\u011fi olan kullan\u0131m \u015fu \u015fekildedir: “:not([attr=”value”])”<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/KYudC\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>\r\n\r\n    <input type="radio" name="haberbulteni" value="S\u0131cak \u015eeyz" \/>\r\n    <span>ad\u0131m\u0131z bir haber b\u00fcltenidir<\/span>\r\n\r\n  <\/div>\r\n  <div>\r\n    <input type="radio" value="So\u011fuk f\u00fczyon" \/>\r\n    <span>isim yok<\/span>\r\n\r\n  <\/div>\r\n  <div>\r\n    <input type="radio" name="kabul" value="k\u00f6t\u00fc planlar" \/>\r\n\r\n    <span>isim kabul edildi<\/span>\r\n  <\/div>\r\n<script>$('input[name!="haberbulteni"]').next().append('<b>; haber b\u00fclteni de\u011fildir<\/b>');<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Verilen de\u011ferlere e\u015fit olmayan niteliklere ba\u011fl\u0131 elementleri se\u00e7tikten sonra, bir sonraki element olan <span> i\u00e7eriklerine “haber b\u00fclteni de\u011fildir” ifadesini .append() metodu ile ekliyor.<\/p>\n
jQuery(‘[attribute^=”value”]’)<\/h1>\n
Nitelik tam olarak verilen ifade ile ba\u015fl\u0131yorsa, niteli\u011fe ba\u011fl\u0131 elementi se\u00e7iyor.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/zQrQz\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <input name="haberbulteni" \/>\r\n  <input name="sutadam" \/>\r\n  <input name="haberadami" \/>\r\n<script>$('input[name^="haber"]').val('Haber burada!');<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Kodumuzdan da rahat bir \u015fekilde anla\u015f\u0131laca\u011f\u0131 gibi, elementi ad\u0131 “haber” ile ba\u015flayan t\u00fcm elementlerin de\u011ferlerini “Haber burada!” yap\u0131yor.<\/p>\n
jQuery(‘parent > child’)<\/h1>\n
Parent ile \u00fcst seviyesindeki elementi belirtilmi\u015f ve bu elementin alt\u0131ndaki elementi child ile belirtilmi\u015f olan elementi se\u00e7er. San\u0131r\u0131m \u00f6rnekle daha iyi a\u00e7\u0131klam\u0131\u015f olaca\u011f\u0131m.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/JMrYZ\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\nbody { font-size:14px; }\r\n<\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<ul class="topnav">\r\n    <li>Madde 1<\/li>\r\n    <li>Madde 2\r\n        <ul><li>\u0130\u00e7i\u00e7e Madde 1<\/li><li>\u0130\u00e7i\u00e7e Madde 2<\/li><li>\u0130\u00e7i\u00e7e Madde 3<\/li><\/ul>\r\n       <\/li>\r\n    <li>Madde 3<\/li>\r\n<\/ul>\r\n\r\n<script>$("ul.topnav > li").css("border", "3px double blue");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
$(“ul.topnav > li”) Bu ifadeyi konu\u015fma diline \u00e7evirecek olursak, atas\u0131 “<ul>” elementi ve bu atan\u0131n s\u0131n\u0131f\u0131 “.topnav” olan atan\u0131n alt\u0131ndaki t\u00fcm “<li>” elementlerini se\u00e7iyor.<\/p>\n
jQuery(‘.class’)<\/h1>\n
Kullan\u0131m\u0131 olduk\u00e7a yayg\u0131n olan bu se\u00e7ici, belirtilen s\u0131n\u0131f de\u011ferine sahip olan t\u00fcm elementleri se\u00e7er.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/YQnRp\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div,span {\r\n    width: 130px;\r\n    height: 40px;\r\n    float:left;\r\n    padding: 10px;\r\n    margin: 10px;\r\n    background-color: #EEEEEE;\r\n  }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div class="BeniSev">div class="BeniSev"<\/div>\r\n\r\n  <div class="benimSinifim">div class="benimSinifim"<\/div>\r\n  <span class="benimSinifim">span class="benimSinifim"<\/span>\r\n<script>$(".benimSinifim").css("border","3px solid blue");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Kodumuz, rahatl\u0131kla g\u00f6rebilece\u011finiz \u00fczere class niteli\u011fi “benimSinifim” olan t\u00fcm elementleri se\u00e7iyor ve etraf\u0131na 3 piksellik mavi kenarl\u0131k veriyor.<\/p>\n
jQuery(‘#id’)<\/h1>\n
Belirtilen ID’ye sahip tek bir elementi se\u00e7er. Kurallara g\u00f6re her ID d\u00f6k\u00fcman i\u00e7erisinde tek olmal\u0131d\u0131r. E\u011fer birden fazla element ayn\u0131 ID’ye sahipse ilk elementi se\u00e7er.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/Dj5hj\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div {\r\n    width: 90px;\r\n    height: 90px;\r\n    float:left;\r\n    padding: 5px;\r\n    margin: 5px;\r\n    background-color: #EEEEEE;\r\n  }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div id="bendegilim"><p>id="bendegilim"<\/p><\/div>\r\n\r\n  <div id="benim">id="benim"<\/div>\r\n<script>$("#benim").css("border","3px solid blue");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Se\u00e7icimiz “benim” ID’sine sahip olan elementi se\u00e7iyor.<\/p>\n
jQuery(‘element’)<\/h1>\n
Belirtilen tipteki t\u00fcm elementleri se\u00e7er. JavaScript’teki getElementsByTagName() metoduyla ayn\u0131 i\u015fi yap\u0131yor.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/AqNGr\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div,span {\r\n    width: 60px;\r\n    height: 60px;\r\n    float:left;\r\n    padding: 10px;\r\n    margin: 10px;\r\n    background-color: #EEEEEE;\r\n  }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>DIV1<\/div>\r\n\r\n  <div>DIV2<\/div>\r\n  <span>SPAN<\/span>\r\n<script>$("div").css("border","15px solid blue");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
$(“div”) ile t\u00fcm div elementlerini se\u00e7ip, 15 piksellik mavi kenarl\u0131k verdik.<\/p>\n
jQuery(‘:contains(text)’)<\/h1>\n
Bir nevi arama fonksiyonu diyebiliriz. Belirtilen metin ifadeyi ar\u0131yor ve bu ifadeye sahip olan t\u00fcm elementleri se\u00e7iyor. B\u00fcy\u00fck\/k\u00fc\u00e7\u00fck harf duyarl\u0131d\u0131r.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/8JAY6\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div>Ali Ulvi El\u00f6ve<\/div>\r\n<div>Ulvi ERCAN<\/div>\r\n<div>ulvi<\/div>\r\n<div>Be\u015fikta\u015fl\u0131ulvi<\/div>\r\n\r\n<script>\r\n$("div:contains('Ulvi')").css("text-decoration", "underline");\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Tam olarak “Ulvi” ifadesini i\u00e7eren elementleri se\u00e7iyor.<\/p>\n
jQuery(‘ancestor descendant’)<\/h1>\n
Ancestor: Ata
\ndescendant: O\u011ful<\/p>\n
\u00d6rnek verecek olursak: jQuery(‘form input’)
\nBu kod form elementinin alt\u0131ndaki t\u00fcm input elementlerini se\u00e7er.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/zETeE\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n\r\n  body { font-size:14px; }\r\n  form { border:2px blue solid; padding:2px; margin:0;\r\n         background:#efe; }\r\n  div { color:green; }\r\n  fieldset { margin:1px; padding:3px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <div>Form mavi kenarl\u0131kla \u00e7evrelenmi\u015ftir<\/div>\r\n    <label>O\u011ful:<\/label>\r\n    <input name="isim" \/>\r\n\r\n    <fieldset>\r\n      <label>Torun:<\/label>\r\n      <input name="haber" \/>\r\n    <\/fieldset>\r\n\r\n  <\/form>\r\n  Karde\u015f form: <input name="none" \/>\r\n<script>$("form input").css("border", "2px dotted red");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Form i\u00e7indeki t\u00fcm input elementlerinin etraf\u0131n\u0131 k\u0131rm\u0131z\u0131 ve noktal\u0131 kenarl\u0131k ile kaplad\u0131k.<\/p>\n
jQuery(‘:enabled’)<\/h1>\n
T\u00fcm aktif edilmi\u015f elementleri se\u00e7er.<\/p>\n
S\u00f6zde s\u0131n\u0131f se\u00e7icisi olan “:” ile ba\u015flayan ifadeler kullan\u0131ld\u0131\u011f\u0131nda, evrensel se\u00e7ici olan “*” uygulanacakt\u0131r. Bir ba\u015fka deyi\u015fle:<\/p>\n
\r\n$(':enabled') == $('*:enabled')\r\n<\/pre>\n
Bu kullan\u0131m yerine<\/p>\n
\r\n$('input:enabled')\r\n<\/pre>\n
tarz\u0131ndaki kullan\u0131m daha uygun olacakt\u0131r.<\/p>\n
\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/Awdc9\/<\/a><\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n\r\n    <input name="email" disabled="disabled" \/>\r\n    <input name="id" \/>\r\n  <\/form>\r\n<script>$("input:enabled").val("\u0130\u015fte budur");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
Nitelik k\u0131sm\u0131nda disabled=”disabled” olmayan input elementlerini se\u00e7ip, de\u011ferini “\u0130\u015fte budur” olarak ayarl\u0131yor.<\/p>\n
jQuery(‘:visible’)<\/h1>\n
G\u00f6r\u00fcnebilir olan t\u00fcm elementleri se\u00e7er.<\/p>\n
    \n
  1. D\u00f6k\u00fcmanda yer kaplayan her bir element visible olarak de\u011ferlendirilir.<\/li>\n
  2. visibility: hidden veya opacity: 0 t\u00fcm elementler de d\u00f6k\u00fcmanda yer kaplayaca\u011f\u0131ndan visible olarak de\u011ferlendirilir.<\/li>\n
  3. G\u00f6r\u00fcn\u00fcr bir elementi gizleyen animasyon tamamlanana kadar g\u00f6r\u00fcn\u00fcr yani visible olarak de\u011ferlendirilecektir.<\/li>\n
  4. Gizli bir elementi g\u00f6steren animasyon ba\u015flad\u0131\u011f\u0131 anda visible olarak kabul edilecektir.<\/li>\n<\/ol>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/Zyn3S\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }\r\n  .gizli_olarak_baslat{ display:none; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <button>De\u011fi\u015fmediklerini g\u00f6rmek i\u00e7in gizli elementleri g\u00f6ster<\/button>\r\n  <div><\/div>\r\n  <div class="gizli_olarak_baslat"><\/div>\r\n  <div><\/div>\r\n\r\n  <div><\/div>\r\n  <div style="display:none;"><\/div>\r\n<script>\r\n    $("div:visible").click(function () {\r\n      $(this).css("background", "yellow");\r\n    });\r\n    $("button").click(function () {\r\n      $("div:hidden").show("fast");\r\n    });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    G\u00f6rd\u00fc\u011f\u00fcn\u00fcz \u00fczere show() metodu, elementimizin visible niteli\u011fini de\u011fi\u015ftirmiyor. Bu y\u00fczden ba\u015flang\u0131\u00e7ta display:none olan elementlere t\u0131klad\u0131\u011f\u0131m\u0131zda herhangi bir de\u011fi\u015fiklik olmuyor.<\/p>\n
    jQuery(‘:disabled’)<\/h1>\n
    T\u00fcm disabled yani devre d\u0131\u015f\u0131 b\u0131rak\u0131lm\u0131\u015f elementleri se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/P8TDS\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n\r\n    <input name="email" disabled="disabled" \/>\r\n    <input name="id" \/>\r\n  <\/form>\r\n<script>$("input:disabled").val("i\u015fte budur");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Nitelik k\u0131sm\u0131nda disabled=”disabled” olan input elementini se\u00e7ip, de\u011ferini “\u0130\u015fte budur” olarak ayarl\u0131yor.<\/p>\n
    jQuery(‘:empty’)<\/h1>\n
    Herhangi bir \u00e7ocu\u011fu olmayan elementleri se\u00e7er. “:parent” ifadesinin tam tersidir.
    \nDikkatli olunmas\u0131 gereken bir nokta var. Text nodes yani metin bloklar\u0131n\u0131 da kapsar. \u0130\u00e7ine herhangi bir metin girilmemi\u015f olan elementleri de se\u00e7ecektir.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/7N9cr\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n\r\n  td { text-align:center; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table border="1">\r\n    <tr><td>TD #0<\/td><td><\/td><\/tr>\r\n    <tr><td>TD #2<\/td><td><\/td><\/tr>\r\n    <tr><td><\/td><td>TD#5<\/td><\/tr>\r\n  <\/table>\r\n<script>$("td:empty").text("Bo\u015f!").css('background', 'rgb(255,220,200)');<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    \u00d6rne\u011fimizde g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi <td> elementimiz hi\u00e7 bir \u00e7ocuk veya metin i\u00e7ermiyor. O y\u00fczden kodumuz i\u00e7erisine “Bo\u015f!” ifadesini yazd\u0131r\u0131yor.<\/p>\n
    jQuery(‘:eq(index)’)<\/h1>\n
    Se\u00e7ilen elementler i\u00e7erisinde N numaral\u0131 elementi se\u00e7er. \u0130ndeksleme i\u015flemi s\u0131f\u0131rdan ba\u015flar.<\/p>\n
    \u0130ndeks temelli se\u00e7iciler: (:eq(), :lt(), :gt(), :even,:odd)<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/36zY5\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table border="1">\r\n  <tr><td>TD #0<\/td><td>TD #1<\/td><td>TD #2<\/td><\/tr>\r\n  <tr><td>TD #3<\/td><td>TD #4<\/td><td>TD #5<\/td><\/tr>\r\n  <tr><td>TD #6<\/td><td>TD #7<\/td><td>TD #8<\/td><\/tr>\r\n<\/table>\r\n<script>$("td:eq(2)").css("color", "red");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    3. s\u0131radaki <td> elementini se\u00e7iyor.<\/p>\n
    jQuery(‘:lt(index)’)<\/h1>\n
    Less than yani k\u00fc\u00e7\u00fck ise se\u00e7icisi. Ad\u0131 \u00fczerinde, se\u00e7ilen elementlerin i\u00e7inden indeksi verilenden daha k\u00fc\u00e7\u00fck olanlar\u0131 se\u00e7er.
    \n\u00d6rnek uygulama ->     https:\/\/jsfiddle.net\/icntfan\/BKX3Z\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table border="1">\r\n\r\n  <tr><td>TD #0<\/td><td>TD #1<\/td><td>TD #2<\/td><\/tr>\r\n  <tr><td>TD #3<\/td><td>TD #4<\/td><td>TD #5<\/td><\/tr>\r\n\r\n  <tr><td>TD #6<\/td><td>TD #7<\/td><td>TD #8<\/td><\/tr>\r\n<\/table>\r\n<script>$("td:lt(4)").css("color", "red");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Se\u00e7ilenlerden indeks numaras\u0131 d\u00f6rtten k\u00fc\u00e7\u00fck olanlar\u0131 se\u00e7iyor.<\/p>\n
    jQuery(‘:gt(index)’)<\/h1>\n
    Greater than yani b\u00fcy\u00fck ise se\u00e7icisi. Ad\u0131 \u00fczerinde, se\u00e7ilen elementlerin i\u00e7inden indeksi verilenden daha b\u00fcy\u00fck olanlar\u0131 se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/GPgpS\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table border="1">\r\n\r\n    <tr><td>TD #0<\/td><td>TD #1<\/td><td>TD #2<\/td><\/tr>\r\n    <tr><td>TD #3<\/td><td>TD #4<\/td><td>TD #5<\/td><\/tr>\r\n\r\n    <tr><td>TD #6<\/td><td>TD #7<\/td><td>TD #8<\/td><\/tr>\r\n  <\/table>\r\n<script>$("td:gt(4)").css("text-decoration", "line-through");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Se\u00e7ilenlerden indeks numaras\u0131 d\u00f6rtten b\u00fcy\u00fck olanlar\u0131 se\u00e7iyor.<\/p>\n
    jQuery(‘:even’)<\/h1>\n
    Se\u00e7ilen elementlerden \u00e7ift indeksli olanlar\u0131 se\u00e7iyor. S\u0131f\u0131rdan ba\u015flar. “:odd” \u015feklinde kullan\u0131m ise tek indeksli elementleri se\u00e7ecektir.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/y7apf\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n\r\n  table {\r\n    background:#eeeeee;\r\n  }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table border="1">\r\n    <tr><td>Indeks #0<\/td><\/tr>\r\n    <tr><td>Indeks #1<\/td><\/tr>\r\n\r\n    <tr><td>Indeks #2<\/td><\/tr>\r\n    <tr><td>Indeks #3<\/td><\/tr>\r\n  <\/table>\r\n<script>$("tr:even").css("background-color", "#bbbbff");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Kodumuz #0 ve #2 inci sat\u0131rlar\u0131 renklendiriyor<\/p>\n
    jQuery(‘:odd’)<\/h1>\n
    Se\u00e7ilen elementlerden tek indeksli olanlar\u0131 se\u00e7iyor. S\u0131f\u0131rdan ba\u015flar. \u201c:even\u201d \u015feklinde kullan\u0131m ise \u00e7ift indeksli elementleri se\u00e7ecektir.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/Dh8F3\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n\r\n  table {\r\n    background:#eeeeee;\r\n  }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table border="1">\r\n    <tr><td>Indeks #0<\/td><\/tr>\r\n    <tr><td>Indeks #1<\/td><\/tr>\r\n\r\n    <tr><td>Indeks #2<\/td><\/tr>\r\n    <tr><td>Indeks #3<\/td><\/tr>\r\n  <\/table>\r\n<script>$("tr:odd").css("background-color", "#bbbbff");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    #1 ve #3 numaral\u0131 sat\u0131rlar\u0131 yeniden renklendiriyor.<\/p>\n
    jQuery(‘:first-child’)<\/h1>\n
    Belirtilen elementler i\u00e7in t\u00fcm ilk \u00e7ocuklar\u0131 se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/zL7ms\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  span { color:#008; }\r\n  span.deneme { color:green; font-weight: bolder; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>\r\n    <span>Ahmet,<\/span>\r\n    <span>Mehmet,<\/span>\r\n    <span>Burak<\/span>\r\n\r\n  <\/div>\r\n  <div>\r\n    <span>Ay\u015fe,<\/span>\r\n    <span>Fatma,<\/span>\r\n    <span>Emine<\/span>\r\n\r\n  <\/div>\r\n<script>\r\n    $("div span:first-child")\r\n        .css("text-decoration", "underline")\r\n        .hover(function () {\r\n              $(this).addClass("deneme");\r\n            }, function () {\r\n              $(this).removeClass("deneme");\r\n            });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    \u0130lk eleman\u0131 se\u00e7tikten sonra yaz\u0131lan hover fonksiyonu incelersek, this anahtar kelimesini ta\u015f\u0131d\u0131\u011f\u0131n\u0131 g\u00f6r\u00fcr\u00fcz. Metodumuzun i\u00e7ine yaz\u0131lan bu kelime $(“div span:first-child”) ile se\u00e7ilen, yani ilk kelimeleri ifade ediyor.<\/p>\n
    jQuery(‘:first’)<\/h1>\n
    \u0130lk e\u015fle\u015fen eleman\u0131 se\u00e7er. “:eq(0)” ile e\u015fleniktir.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/dErFa\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n\r\n  td { color:blue; font-weight:bold; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table>\r\n    <tr><td>Sat\u0131r 1<\/td><\/tr>\r\n    <tr><td>Sat\u0131r 2<\/td><\/tr>\r\n    <tr><td>Sat\u0131r 3<\/td><\/tr>\r\n  <\/table>\r\n<script>$("tr:first").css("font-style", "italic");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    $(“tr”) T\u00fcm sat\u0131rlar\u0131 se\u00e7er, ancak $(“tr:first”) t\u00fcm sat\u0131rlar i\u00e7erisinden sadece ilk sat\u0131r\u0131 se\u00e7er.<\/p>\n
    jQuery(‘:last-child’)<\/h1>\n
    Atalar\u0131n\u0131n son s\u0131ras\u0131ndaki \u00e7ocuklar\u0131 olan elementi se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/x2Neg\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  span.deneme{ text-decoration:line-through; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>\r\n    <span>Ali,<\/span>\r\n    <span>Ahmet,<\/span>\r\n    <span>Mehmet,<\/span>\r\n    <span>Samet<\/span>\r\n  <\/div>\r\n  <div>\r\n    <span>Ay\u015fe,<\/span>\r\n    <span>Fatma,<\/span>\r\n    <span>Emine,<\/span>\r\n    <span>Ne\u015fe<\/span>\r\n  <\/div>\r\n<script>\r\n    $("div span:last-child")\r\n        .css({color:"red", fontSize:"80%"})\r\n        .hover(function () {\r\n              $(this).addClass("deneme");\r\n            }, function () {\r\n              $(this).removeClass("deneme");\r\n            });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html\u200b\r\n<\/pre>\n
    Her bir div’in i\u00e7erisindeki son span elementini se\u00e7iyor ve \u00fcst\u00fcne gelince \u00fcst\u00fc \u00e7izili hale getiriyor.<\/p>\n
    jQuery(‘:last’)<\/h1>\n
    Se\u00e7ilen elementlerin sonuncusunu se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/JY5vZ\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table>\r\n\r\n    <tr><td>\u0130lk Sat\u0131r<\/td><\/tr>\r\n    <tr><td>Orta Sat\u0131r<\/td><\/tr>\r\n    <tr><td>SonSat\u0131r<\/td><\/tr>\r\n\r\n  <\/table>\r\n<script>$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    $(“tr”) ile t\u00fcm sat\u0131rlar\u0131 se\u00e7iyoruz, $(“tr:last”) ile bu se\u00e7ilen sat\u0131rlar\u0131n sonuncusunu se\u00e7iyoruz.<\/p>\n
    jQuery(‘:focus’)<\/h1>\n
    Odaklan\u0131lm\u0131\u015f (focused) herhangi bir element varsa onu se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/MgkYr\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n.odaklan{\r\n    background: #abcdef;\r\n}\r\n<\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id="content">\r\n    <input tabIndex="1">\r\n    <input tabIndex="2">\r\n    <select tabIndex="3">\r\n        <option>Se\u00e7ici<\/option>\r\n    <\/select>\r\n<\/div>\r\n\r\n<script>\r\n$( "#content" ).delegate( "*", "focus blur", function( event ) {\r\n    var elem = $( this );\r\n    setTimeout(function() {\r\n       elem.toggleClass( "odaklan", elem.is( ":focus" ) );\r\n    }, 0);\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Kodumuzu konu\u015fma diline \u00e7evirecek olursak, content kutusu i\u00e7erisindeki herhangi bir elementteki focus ya da blur olaylar\u0131nda elemente “odaklan” s\u0131n\u0131f\u0131n\u0131 ata, e\u011fer zaten atanm\u0131\u015fsa atanm\u0131\u015f s\u0131n\u0131f\u0131 kald\u0131r.<\/p>\n
    jQuery(‘[attribute]’)<\/h1>\n
    Verilen niteli\u011fe sahip olan t\u00fcm elementleri de\u011feri g\u00f6zetmeksizin se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/tx9PR\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>id yok[t\u0131kla]<\/div>\r\n  <div id="bubirid">id ile[t\u0131kla]<\/div>\r\n\r\n  <div id="budabirid">ID si var[t\u0131kla]<\/div>\r\n  <div>hop[t\u0131kla]<\/div>\r\n<script>\r\n\r\n    $('div[id]').one('click', function(){\r\n      var idString = $(this).text() + ' = ' + $(this).attr('id');\r\n      $(this).text(idString);\r\n    });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    T\u0131klanan kutulara, o kutular\u0131n ID niteli\u011fini ekliyor.<\/p>\n
    jQuery(‘:has(selector)’)<\/h1>\n
    Se\u00e7icide belirtilen element en bir adet bulunuyorsa, se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/3gTs4\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  .test{ border: 3px inset red; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div><p>Paragraf<\/p><\/div>\r\n\r\n  <div>Merhaba! (paragraf yok)<\/div>\r\n<script>$("div:has(p)").addClass("test");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    <p> elementine sahip olan, <div> elementimize test CSS s\u0131n\u0131f\u0131n\u0131 ekliyor.<\/p>\n
    jQuery(‘:header’)<\/h1>\n
    H1,H2,H3…. \u015eeklindeki t\u00fcm ba\u015fl\u0131klar\u0131 se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/ubk2d\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  body { font-size: 10px; font-family: Arial; }\r\n  h1, h2 { margin: 13px; font-size: 16px;}\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <h1>Ba\u015fl\u0131k 1<\/h1>\r\n\r\n  <p>\u0130\u00e7erik 1<\/p>\r\n  <h2>Ba\u015fl\u0131k 2<\/h2>\r\n  <p>\u0130\u00e7erik 2<\/p>\r\n<script>$(":header").css({ background:'#CCC', color:'blue' });<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    <h1> ve <h2> ba\u015fl\u0131klar\u0131n\u0131 se\u00e7ip arka plan rengini ve ba\u015fl\u0131\u011f\u0131n rengini de\u011fi\u015ftiriyor.<\/p>\n
    jQuery(‘[attributeFilter1][attributeFilter2][attributeFilterN]’)<\/h1>\n
    Bu kullan\u0131m birden fazla filtre uygulamam\u0131za yard\u0131mc\u0131 oluyor.
    \n\u00d6rnek uygulama ->     https:\/\/jsfiddle.net\/icntfan\/X9Yqw\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <input id="haberleradam" name="adam-haberler" \/>\r\n\r\n  <input name="sutadam" \/>\r\n  <input id="yaziadam" name="yazi-adam" \/>\r\n  <input name="yenisut" \/>\r\n<script>$('input[id][name$="adam"]').val('sadece bu se\u00e7ildi');<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Kodumuz id niteli\u011fi olan ve ad\u0131 “adam” olan inputumuzu se\u00e7iyor.<\/p>\n
    jQuery(‘selector1, selector2, selectorN’)<\/h1>\n
    Bu kullan\u0131m belirtilen se\u00e7icilere sahip olan elementleri se\u00e7iyor.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/jRZU7\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n\r\n  div,span,p {\r\n    width: 150px;\r\n    height: 60px;\r\n    float:left;\r\n    padding: 3px;\r\n    margin: 2px;\r\n    background-color: #EEEEEE;\r\n    font-size:14px;\r\n  }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>div<\/div>\r\n\r\n  <p class="benimsinifim">p class="benimsinifim"<\/p>\r\n  <p class="benimsinifimdegil">p class="benimsinifimdegil"<\/p>\r\n  <span>span<\/span>\r\n<script>$("div,span,p.benimsinifim").css("border","3px solid blue");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Elementler herhangi biri se\u00e7ici i\u00e7erisinde belirtilen “div,span ve p.benimsinifim” se\u00e7icilerinden biri ise 3 piksellik mavi kenarl\u0131k veriyoruz.<\/p>\n
    jQuery(‘prev + next’)<\/h1>\n
    Next ile belirtilmi\u015f olan ve karde\u015fi prev ile belirtilmi\u015f olan t\u00fcm elementleri se\u00e7er. Dikkat edilmesi gereken nokta next ve prev olarak belirtilen bu iki elementin ayn\u0131 ataya sahip olmas\u0131d\u0131r.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/CwQRk\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n\r\n    <label>Ad:<\/label>\r\n    <input name="ad" \/>\r\n    <fieldset>\r\n      <label>Haber:<\/label>\r\n\r\n      <input name="haber" \/>\r\n    <\/fieldset>\r\n  <\/form>\r\n  <input name="yok" \/>\r\n<script>$("label + input").css("color", "blue").val("etiketlendi!")<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Next: input ve prev: label olarak d\u00fc\u015f\u00fcn\u00fcrsek label ve input ikilisine sahip t\u00fcm inputlar\u0131 se\u00e7ip, i\u00e7ine “etiketlendi!” yazd\u0131r\u0131yor.<\/p>\n
    jQuery(‘prev ~ siblings’)<\/h1>\n
    Prev’den sonra gelen ve siblings ile se\u00e7ilen t\u00fcm karde\u015f elementleri se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/mpusR\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n\r\n  div,span {\r\n    display:block;\r\n    width:80px;\r\n    height:80px;\r\n    margin:5px;\r\n    background:#bbffaa;\r\n    float:left;\r\n    font-size:14px;\r\n  }\r\n  div#small {\r\n    width:60px;\r\n    height:25px;\r\n    font-size:12px;\r\n    background:#fab;\r\n  }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>#prev den \u00f6nce geldi\u011fi i\u00e7in se\u00e7ilmiyor<\/div>\r\n  <span id="prev">span#prev<\/span>\r\n  <div>karde\u015f div<\/div>\r\n\r\n  <div>karde\u015f div<div id="small">div niece<\/div><\/div>\r\n  <span>karde\u015f span(div de\u011fil)<\/span>\r\n  <div>karde\u015f div<\/div>\r\n<script>$("#prev ~ div").css("border", "3px groove blue");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    Kod blo\u011funda yer alan a\u00e7\u0131klamalara ek olarak<\/p>\n
    \r\n<div>karde\u015f div<div id="small">div niece<\/div><\/div>\r\n<\/pre>\n
    small ID’sine sahip div di\u011ferinin bir alt seviyesi oldu\u011fu i\u00e7in se\u00e7ilmiyor.<\/p>\n
    jQuery(‘:not(selector)’)<\/h1>\n
    Se\u00e7ide belirtilenlerin d\u0131\u015f\u0131nda kalan t\u00fcm elementleri se\u00e7er.<\/p>\n
    \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/SatLx\/<\/a><\/p>\n
    \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>\r\n  <input type="checkbox" name="a" \/>\r\n  <span>Deneme<\/span>\r\n<\/div>\r\n\r\n<div>\r\n  <input type="checkbox" name="b" \/>\r\n  <span>bune<\/span>\r\n\r\n<\/div>\r\n<div>\r\n  <input type="checkbox" name="c" checked="checked" \/>\r\n  <span>Yok<\/span>\r\n<\/div>\r\n<script>\r\n  $("input:not(:checked) + span").css("background-color", "yellow");\r\n  $("input").attr("disabled", "disabled");\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
    \u0130\u015faretli olmayan ve sonras\u0131nda <span> elementi i\u00e7eren t\u00fcm <span> elementlerinin arka plan\u0131n\u0131 sar\u0131 yap\u0131yor.<\/p>\n
    jQuery(‘:nth-child(index\/even\/odd\/equation)’)<\/h1>\n
    Belirtilen eleman\u0131 se\u00e7er. Parametre:<\/p>\n
      \n
    1. 1 ile ba\u015flayan indeks numaras\u0131<\/li>\n
    2. “even” \u00c7ift say\u0131l\u0131 indeksler<\/li>\n
    3. “odd” tek say\u0131l\u0131 indeksler<\/li>\n
    4. “equation” bir denklem<\/li>\n<\/ol>\n
      olabilir.<\/p>\n
      \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/6n2Vc\/<\/a><\/p>\n
      \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n\r\n  div { float:left; }\r\n  span { color:blue; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div><ul>\r\n    <li>Ali<\/li>\r\n    <li>Ahmet<\/li>\r\n    <li>Mehmet<\/li>\r\n\r\n  <\/ul><\/div>\r\n  <div>\r\n  <ul style="margin: 0 30px;">\r\n    <li>Veli<\/li>\r\n  <\/ul>\r\n <\/div>\r\n\r\n  <div><ul>\r\n    <li>Ay\u015fe<\/li>\r\n    <li>Ay\u00e7a<\/li>\r\n    <li>Merve<\/li>\r\n\r\n    <li>Murat<\/li>\r\n  <\/ul><\/div>\r\n<script>$("ul li:nth-child(2)").append("<span> - 2inci!<\/span>");<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
      $(“ul li:nth-child(2)”) se\u00e7icisi ile ul elementinin i\u00e7erisinde olan li elementlerinden 2. s\u0131rada olan\u0131n\u0131 se\u00e7iyoruz.<\/p>\n
      jQuery(‘:only-child’)<\/h1>\n
      Sahip olduklar\u0131 atan\u0131n tek \u00e7ocu\u011fu olan t\u00fcm elementleri se\u00e7er.<\/p>\n
      \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/zerWw\/<\/a><\/p>\n
      \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div { width:100px; height:80px; margin:5px; float:left; background:#a9e }\r\n<\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <div>\r\n  <button>Karde\u015f!<\/button>\r\n  <button>Karde\u015f!<\/button>\r\n<\/div>\r\n\r\n<div>\r\n  <button>Karde\u015f!<\/button>\r\n<\/div>\r\n<div>\r\n  Yok\r\n<\/div>\r\n\r\n<div>\r\n  <button>Karde\u015f!<\/button>\r\n  <button>Karde\u015f!<\/button>\r\n  <button>Karde\u015f!<\/button>\r\n\r\n<\/div>\r\n<div>\r\n  <button>Karde\u015f!<\/button>\r\n<\/div>\r\n<script>\r\n  $("div button:only-child").text("Yaln\u0131z").css("border", "2px blue solid");\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
      Kodumuzu inceledi\u011fimizde g\u00f6rebilece\u011fimiz \u00fczere tek sahip oldu\u011fu atan\u0131n tek \u00e7ocu\u011fu olan elementlerin text niteli\u011fini “yaln\u0131z” olarak at\u0131yor.<\/p>\n
      jQuery(‘:parent’)<\/h1>\n
      Herhangi bir elementin atas\u0131 olan t\u00fcm elementleri se\u00e7iyor. Metin bloglar\u0131 da dahildir. “:empty” kullan\u0131m\u0131n\u0131n tam tersidir.<\/p>\n
      \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/t4jNj\/<\/a><\/p>\n
      \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  td { width:40px; background:green; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <table border="1">\r\n\r\n  <tr><td>De\u011fer 1<\/td><td><\/td><\/tr>\r\n  <tr><td>De\u011fer 2<\/td><td><\/td><\/tr>\r\n\r\n<\/table>\r\n<script>$("td:parent").fadeTo(1500, 0.3);<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
      \u0130\u00e7eri\u011finde “De\u011fer 1” ve “De\u011fer 2” olan <td> elementlerine .fadeTo() i\u015flemi uyguluyor.<\/p>\n
      jQuery(‘:hidden’)<\/h1>\n
      Gizli olan t\u00fcm elementleri se\u00e7er.<\/p>\n
      Elementler bir ka\u00e7 sebepten dolay\u0131 gizli olabilir.<\/p>\n
        \n
      1. CSS Display de\u011ferleri none olarak belirtilmi\u015ftir.<\/li>\n
      2. Type=”hidden” olarak belirtilmi\u015f form elementidir.<\/li>\n
      3. Width ve Height de\u011ferleri a\u00e7\u0131k\u00e7a 0 (s\u0131f\u0131r) olarak belirtilmi\u015ftir.<\/li>\n
      4. Ata elementi gizli ise, kendisi sayfada g\u00f6z\u00fckmeyece\u011finden, gizli olarak ele al\u0131n\u0131r<\/li>\n<\/ol>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/t3kpJ\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }\r\n  span { display:block; clear:left; color:red; }\r\n  .baslangicta_gizli{ display:none; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <span><\/span>\r\n  <div><\/div>\r\n  <div style="display:none;">Gizli!<\/div>\r\n  <div><\/div>\r\n\r\n  <div class="baslangicta_gizli">Gizli!<\/div>\r\n  <div><\/div>\r\n  <form>\r\n    <input type="hidden" \/>\r\n\r\n    <input type="hidden" \/>\r\n    <input type="hidden" \/>\r\n  <\/form>\r\n  <span>\r\n\r\n  <\/span>\r\n<script>\r\n\/\/ baz\u0131 taray\u0131c\u0131larda :hidden k\u0131sm\u0131 \u015funlar\u0131 da i\u00e7erir -> head, title, script, vs...\r\nvar hiddenEls = $("body").find(":hidden").not("script");\r\n\r\n$("span:first").text("Bulunan " + hiddenEls.length + " adet gizli element var.");\r\n$("div:hidden").show(3000);\r\n$("span:last").text("Bulunan " + $("input:hidden").length + " gizli input var.");\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        Kodumuzdaki .not(“script”) metodu baz\u0131 taray\u0131c\u0131lardaki gizli olarak tan\u0131mlanan head, title, script elementlerini se\u00e7mesini engellemek i\u00e7indir. Yukar\u0131da sayd\u0131\u011f\u0131m 4 adet gizli olma ko\u015fullar\u0131n\u0131 kod i\u00e7erisinde sa\u011flamaya \u00e7al\u0131\u015ft\u0131m. \u00d6rne\u011fin, ba\u015flang\u0131\u00e7ta baz\u0131 div bloklar\u0131n\u0131 hidden yani gizli olarak ba\u015flatt\u0131m. Dikkat ederseniz de, gizli tipte inputlar\u0131m\u0131z da var. Toplam g\u00f6rd\u00fc\u011f\u00fcm\u00fcz 6 rakam\u0131, bu 4 ko\u015fuldaki ihtimaller dahilinde olan element say\u0131s\u0131d\u0131r.<\/p>\n
        jQuery(‘:image’)<\/h1>\n
        T\u00fcm image tipindeki elementleri se\u00e7er. E\u015flenik kullan\u0131m\u0131 [type=”image”] \u015feklindedir.
        \n\u00d6rnek uygulama ->         https:\/\/jsfiddle.net\/icntfan\/AFR9x\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:45px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" \/>\r\n    <input type="reset" \/>\r\n\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n    <select><option>Se\u00e7enek<option\/><\/select>\r\n\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n  <div>\r\n  <\/div>\r\n<script>\r\n    var input = $("input:image").css({background:"yellow", border:"3px red solid"});\r\n    $("div").text("\u015eu kadar bulundu: " + input.length + ".")\r\n            .css("color", "red");\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        Form i\u00e7erisnde yer alan 1 adet image tipindeki inputumuzu se\u00e7iyor.<\/p>\n
        jQuery(‘:input’)<\/h1>\n
        \u015eu elementleri se\u00e7er: input, textarea, select ve button<\/p>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/Zd5GV\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:25px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" \/>\r\n    <input type="reset" \/>\r\n\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n    <select><option>Se\u00e7enek<\/option><\/select>\r\n\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n  <div id="messages">\r\n  <\/div>\r\n<script>\r\n\r\n    var allInputs = $(":input");\r\n    var formChildren = $("form > *");\r\n    $("#messages").text("Bulunan " + allInputs.length + " adet input ve formda " +\r\n                             formChildren.length + " tane \u00e7ocuk var.");\r\n\r\n    \/\/ so it won't submit\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        Giri\u015f elementi (input) olarak alg\u0131lanan input, textarea, select ve button elementlerinin toplamdaki say\u0131s\u0131n\u0131 ekrana bas\u0131yoruz.<\/p>\n
        jQuery(‘:password’)<\/h1>\n
        Tipi password olan t\u00fcm elementleri se\u00e7er. E\u015flenik kullan\u0131m\u0131 \u015fu \u015fekildedir.<\/p>\n
        \r\n$('[type=password]')\r\n<\/pre>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/hbXpS\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:45px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" \/>\r\n    <input type="reset" \/>\r\n\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n    <select><option>Se\u00e7enek<option\/><\/select>\r\n\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n  <div>\r\n  <\/div>\r\n<script>\r\n\r\n    var input = $("input:password").css({background:"yellow", border:"3px red solid"});\r\n    $("div").text("\u015eu kadar bulundu: " + input.length + ".")\r\n            .css("color", "red");\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        $(“input:password”) se\u00e7icisi ile se\u00e7ilen, tipi \u015fifre olan giri\u015f eleman\u0131m\u0131za sar\u0131 arka plan ve 3 piksellik k\u0131rm\u0131z\u0131 kenarl\u0131k veriyoruz.<\/p>\n
        jQuery(‘:radio’)<\/h1>\n
        Tipi radio olan t\u00fcm elementleri se\u00e7er. E\u015flenik kullan\u0131m\u0131 \u015fu \u015fekildedir.<\/p>\n
        \r\n$('[type=radio]')\r\n<\/pre>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/MECCd\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:25px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" name="asdf" \/>\r\n    <input type="radio" name="asdf" \/>\r\n\r\n    <input type="reset" \/>\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n\r\n    <select><option>Se\u00e7enek<option\/><\/select>\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n\r\n  <div>\r\n  <\/div>\r\n<script>\r\n\r\n    var input = $("form input:radio").wrap('<span><\/span>').parent().css({background:"yellow", border:"3px red solid"});\r\n    $("div").text("\u015eu kadar bulundu: " + input.length + ".")\r\n            .css("color", "red");\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        $(“form input:radio”) se\u00e7icisi ile se\u00e7ilen, radyo butonunun bir \u00fcst\u00fcne eklenen span elementine sar\u0131 arka plan ve 3 piksellik k\u0131rm\u0131z\u0131 kenarl\u0131k veriyoruz.<\/p>\n
        jQuery(‘:reset’)<\/h1>\n
        Tipi reset olan t\u00fcm elementleri se\u00e7er. E\u015flenik kullan\u0131m\u0131 \u015fu \u015fekildedir.<\/p>\n
        \r\n$('[type=reset]')\r\n<\/pre>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/fdpqP\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:45px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" \/>\r\n    <input type="reset" \/>\r\n\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n    <select><option>Se\u00e7enek<option\/><\/select>\r\n\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n  <div>\r\n  <\/div>\r\n<script>\r\n\r\n    var input = $("input:reset").css({background:"yellow", border:"3px red solid"});\r\n    $("div").text("\u015eu kadar bulundu: " + input.length + ".")\r\n            .css("color", "red");\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        $(“input:reset”) se\u00e7icisi ile se\u00e7ilen, tipi reset olan giri\u015f eleman\u0131m\u0131za sar\u0131 arka plan ve 3 piksellik k\u0131rm\u0131z\u0131 kenarl\u0131k veriyoruz.<\/p>\n
        jQuery(‘:selected’)<\/h1>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/eHYdX\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div { color:red; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <select name="bahce" multiple="multiple">\r\n\r\n    <option>\u00c7i\u00e7ekler<\/option>\r\n    <option selected="selected">\u00c7al\u0131l\u0131klar<\/option>\r\n    <option>A\u011fa\u00e7lar<\/option>\r\n    <option selected="selected">Otluklar<\/option>\r\n\r\n    <option>\u00c7imler<\/option>\r\n    <option>\u00c7amur<\/option>\r\n  <\/select>\r\n  <div><\/div>\r\n<script>\r\n\r\n    $("select").change(function () {\r\n          var str = "";\r\n          $("select option:selected").each(function () {\r\n                str += $(this).text() + " ";\r\n              });\r\n          $("div").text(str);\r\n        })\r\n        .trigger('change');\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        Select elementimizin her bir change olay\u0131nda se\u00e7ilen elemanlar :selected ile se\u00e7ip ekrana bast\u0131r\u0131yoruz.<\/p>\n
        jQuery(‘:submit’)<\/h1>\n
        Submit tipindeki t\u00fcm elementleri se\u00e7er.
        \n\u00d6rnek uygulama ->         https:\/\/jsfiddle.net\/icntfan\/y4Uch\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:25px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" name="asdf" \/>\r\n    <input type="radio" name="asdf" \/>\r\n\r\n    <input type="reset" \/>\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n\r\n    <select><option>Se\u00e7enek<option\/><\/select>\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n\r\n  <div>\r\n  <\/div>\r\n<script>\r\n\r\n    var input = $("form input:submit").wrap('<span><\/span>').parent().css({background:"yellow", border:"3px red solid"});\r\n    $("div").text("\u015eu kadar bulundu: " + input.length + ".")\r\n            .css("color", "red");\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        $(“form input:submit”) se\u00e7icisi ile se\u00e7ilen g\u00f6nderici butonunun bir \u00fcst\u00fcne eklenen span elementine sar\u0131 arka plan ve 3 piksellik k\u0131rm\u0131z\u0131 kenarl\u0131k veriyoruz.<\/p>\n
        jQuery(‘:text’)<\/h1>\n
        Text tipindeki t\u00fcm elementleri se\u00e7er.<\/p>\n
        \u015eu iki kullan\u0131m\u0131n fark\u0131n\u0131 a\u015fa\u011f\u0131da g\u00f6rebilirsiniz: $(‘:text’) ve $(‘[type=text]’)<\/p>\n
        \r\n$('<input>').is('[type=text]'); \/\/ false\r\n$('<input>').is(':text'); \/\/ true\r\n<\/pre>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/ECNYC\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:25px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" \/>\r\n    <input type="reset" \/>\r\n\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n    <select><option>Se\u00e7enek<\/option><\/select>\r\n\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n  <div>\r\n  <\/div>\r\n<script>\r\n\r\n    var input = $("form input:text").css({background:"yellow", border:"3px red solid"});\r\n    $("div").text("\u015eu kadar bulundu: " + input.length + ".")\r\n            .css("color", "red");\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        $(“form input:text”) se\u00e7icisi ile se\u00e7ilen, tipi metin olan giri\u015f eleman\u0131m\u0131za sar\u0131 arka plan ve 3 piksellik k\u0131rm\u0131z\u0131 kenarl\u0131k veriyoruz.<\/p>\n
        jQuery(‘:button’)<\/h1>\n
        D\u00f6k\u00fcman \u00fczerinde yer alan butonlar\u0131 se\u00e7er.
        \nE\u015flenik kullan\u0131m\u0131 \u015fu \u015fekildedir: “$(“button, input[type=’button’]”)”<\/p>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/FfFAN\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:35px; }\r\n  div { color: red; }\r\n  fieldset { margin: 0; padding: 0; border-width: 0; }\r\n  .isaretli{ background-color: yellow; border: 3px red solid; }\r\n<\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n  <fieldset>\r\n    <input type="button" value="Giri\u015f Butonu"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" \/>\r\n    <input type="reset" \/>\r\n\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n    <select><option>Se\u00e7enek<option\/><\/select>\r\n\r\n    <textarea><\/textarea>\r\n    <button>D\u00fc\u011fme veya buton<\/button>\r\n  <\/fieldset>\r\n<\/form>\r\n\r\n<div>\r\n<\/div>\r\n<script>\r\n  var input = $(":button").addClass("isaretli");\r\n  $("div").text( "\u015eu kadar bulundu: " + input.length + "." );\r\n  $("form").submit(function () { return false; });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        Kodumuz, butonlara isaretli isimli CSS s\u0131n\u0131f\u0131n\u0131 ekliyor.<\/p>\n
        jQuery(‘:checkbox’)<\/h1>\n
        D\u00f6k\u00fcmandaki t\u00fcm checkboxlar\u0131 se\u00e7er.<\/p>\n
        E\u015flenik kullan\u0131m\u0131 \u015fu \u015fekildedir: “$(‘[type=checkbox]’)”<\/p>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/U7npG\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:25px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="checkbox" \/>\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n\r\n    <input type="image" \/>\r\n    <input type="password" \/>\r\n    <input type="radio" \/>\r\n\r\n    <input type="reset" \/>\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n\r\n    <select><option>Se\u00e7enek<option\/><\/select>\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n\r\n  <div>\r\n  <\/div>\r\n<script>\r\n\r\n    var input = $("form input:checkbox").wrap('<span><\/span>').parent().css({background:"yellow", border:"3px red solid"});\r\n    $("div").text("\u015eu kadar bulundu: " + input.length + ".")\r\n            .css("color", "red");\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        Kodumuz, checkboxlar\u0131n etraf\u0131n\u0131 <span> ile kaplad\u0131ktan sonra, <span> elementine kenarl\u0131k ve sar\u0131 bir arka plan uyguluyor.<\/p>\n
        jQuery(‘:checked’)<\/h1>\n
        D\u00f6k\u00fcmandaki se\u00e7ili elemanlar\u0131 se\u00e7er. Radio ve Checkbox tipindeki form elemanlar\u0131 i\u00e7in \u00e7al\u0131\u015f\u0131r. Select elementleri i\u00e7in “:selected” kullan\u0131n\u0131z.<\/p>\n
        \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/gtx7U\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  div { color:red; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<form>\r\n  <p>\r\n    <input type="checkbox" name="haber" checked="checked" value="Hourly" \/>\r\n\r\n    <input type="checkbox" name="haber" value="G\u00fcnl\u00fck" \/>\r\n    <input type="checkbox" name="haber" value="Haftal\u0131k" \/>\r\n\r\n    <input type="checkbox" name="haber" checked="checked" value="Ayl\u0131k" \/>\r\n    <input type="checkbox" name="haber" value="Y\u0131ll\u0131k" \/>\r\n  <\/p>\r\n<\/form>\r\n<div><\/div>\r\n\r\n<script>\r\nfunction countChecked() {\r\n  var n = $("input:checked").length;\r\n  $("div").text(n +  " tane i\u015faretlendi!");\r\n}\r\ncountChecked();\r\n$(":checkbox").click(countChecked);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        Sayfadaki t\u00fcm checkboxlar\u0131n click yani, t\u0131klama olay\u0131nda countChecked() fonksiyonunu \u00e7a\u011f\u0131r\u0131yor ve se\u00e7ilen checkbox say\u0131s\u0131 length niteli\u011fi sayesinde ekrana bast\u0131r\u0131yor.<\/p>\n
        jQuery(‘:file’)<\/h1>\n
        File tipindeki t\u00fcm elementleri se\u00e7er. E\u015flenik kullan\u0131m\u0131 [type=”file”]
        \n\u00d6rnek uygulama ->         https:\/\/jsfiddle.net\/icntfan\/vZwWp\/<\/a><\/p>\n
        \r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <style>\r\n  textarea { height:45px; }\r\n  <\/style>\r\n  <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n  <form>\r\n    <input type="button" value="Giri\u015f D\u00fc\u011fmesi"\/>\r\n    <input type="checkbox" \/>\r\n\r\n    <input type="file" \/>\r\n    <input type="hidden" \/>\r\n    <input type="image" \/>\r\n\r\n    <input type="password" \/>\r\n    <input type="radio" \/>\r\n    <input type="reset" \/>\r\n\r\n    <input type="submit" \/>\r\n    <input type="text" \/>\r\n    <select><option>Se\u00e7enek<option\/><\/select>\r\n\r\n    <textarea><\/textarea>\r\n    <button>Buton<\/button>\r\n  <\/form>\r\n  <div>\r\n  <\/div>\r\n<script>\r\n\r\n    var input = $("input:file").css({background:"yellow", border:"3px red solid"});\r\n    $("div").text("\u015eu kadar bulundu: " + input.length + ".")\r\n            .css("color", "red");\r\n    $("form").submit(function () { return false; });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n
        Tipi file olan input elementini se\u00e7ip arka plan\u0131n\u0131 sar\u0131 yap\u0131p, 3 piksellik k\u0131rm\u0131z\u0131 kenarl\u0131k veriyor.<\/p>\n
        Faydalan\u0131lan kaynaklar:
        \n1-) JQuery documentation -> Selectors |         https:\/\/api.jquery.com\/category\/selectors\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
        \u00d6ncelikle merhaba. T\u00fcm yaz\u0131l\u0131m geli\u015ftiricilerinin ve kod severlerin ge\u00e7mi\u015f Cumhuriyet ve Kurban Bayramlar\u0131n\u0131 en i\u00e7ten dileklerimle kutluyorum. Araya giren tatiller, s\u0131navlar vs. dolas\u0131yla yakla\u015f\u0131k 3 haftad\u0131r yazam\u0131yordum. Bu haftaki konumuz jQuery Se\u00e7iciler (Selectors) olacak. CSS’in i\u00e7inde g\u00f6m\u00fcl\u00fc olarak gelen se\u00e7icilerin jQuery ile birle\u015fmesi sonucu ortaya \u00e7\u0131kan g\u00fc\u00e7l\u00fc arac\u0131 inceleyece\u011fiz.<\/p>\n","protected":false},"author":3,"featured_media":261,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[41,21,28,26,27],"class_list":["post-260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-javascript","tag-jquery-2","tag-jquery-selectors","tag-seciciler","tag-selectors"],"_links":{"self":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/comments?post=260"}],"version-history":[{"count":91,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"predecessor-version":[{"id":697,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/posts\/260\/revisions\/697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media\/261"}],"wp:attachment":[{"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ulviercan.com\/teknoblog\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}