<\/div>\n

Web sayfalar\u0131nda Client tabanl\u0131 programlamay\u0131 JQuery ile ger\u00e7ekle\u015ftiriyorsak e\u011fer HTML Componentlerine ula\u015fabilmemiz gerekmektedir.Lakin ben buna ula\u015fma yerine se\u00e7me terimini daha uygun buluyorum.JQuery ile se\u00e7ti\u011fimiz HTML nesnesi \u00fczerinde istedi\u011fimiz i\u015flemleri asenkron bir yap\u0131da ger\u00e7ekle\u015ftirebiliyoruz.
\n
\nJQuery ile HTML sayfa elemanlar\u0131n\u0131 se\u00e7ebilmek i\u00e7in birbirinden ba\u011f\u0131ms\u0131z be\u015f y\u00f6ntem bulunmaktad\u0131r.\u015eimdi s\u0131ras\u0131yla bu y\u00f6ntemleri inceleyelim.
\n# Se\u00e7icisi<\/strong><\/span>
\nSayfa elemanlar\u0131n\u0131 “ID” ya da “Name” \u00f6zellikleri ile se\u00e7memizi sa\u011flar.
\n\u00d6rnek olarak a\u015fa\u011f\u0131daki kod blo\u011funu inceleyiniz.<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <title><\/title>\r\n\/\/JQuery k\u00fct\u00fcphanesini sayfam\u0131za entegre ediyoruz.\r\n    <script src="http:\/\/code.jquery.com\/jquery-2.0.2.min.js" type="text\/javascript"><\/script>\r\n\r\n    <script type="text\/javascript">\r\n        $(document).ready(\r\n            function ()\r\n            {\r\n                $("#Ornek").html("Bu bir \u00f6rnek uygulamad\u0131r.");\r\n                $("#Ornek2").val("Gen\u00e7ay Y\u0131ld\u0131z");\r\n            }\r\n            );\r\n    <\/script>\r\n\r\n<\/head>\r\n<body>\r\n    <div id="Ornek"><\/div>\r\n    <input type="text" id="Ornek2" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu izah etmem gerekirse e\u011fer,
\n“$(document).ready();<\/em>” metoduyla, kodumuzun sayfa y\u00fcklenirken \u00e7al\u0131\u015faca\u011f\u0131n\u0131 belirtiyoruz.
\nRead metodunun i\u00e7ine “function (){}<\/em>” fonksiyonunu olu\u015fturuyoruz ve i\u00e7ine “$(“#Ornek”)<\/em>” komutuyla se\u00e7ilecek olan HTML nesnesinin idsini veriyoruz.
\nDikkat ederseniz # i\u015faretiyle bu i\u015flemi ger\u00e7ekle\u015ftiriyoruz.
\n.Class Se\u00e7icisi<\/strong><\/span>
\nSayfa elemanlar\u0131n\u0131 class \u00f6zelli\u011fi ile se\u00e7memize yarar.
\n\u00d6rnek olarak a\u015fa\u011f\u0131daki kod blo\u011funu inceleyiniz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">\r\n<head>\r\n    <title><\/title>\r\n    <script src="http:\/\/code.jquery.com\/jquery-2.0.2.min.js" type="text\/javascript"><\/script>\r\n    <script type="text\/javascript">\r\n        $(document).ready(\r\n            function () {\r\n                $(".dis").css("background-color", "yellow");\r\n                $(".ic").css("color", "blue");\r\n            }\r\n            );\r\n    <\/script>\r\n<\/head>\r\n<body>\r\n    <div class="dis" style="text-align:center;">\r\n        <div class="ic">Fenerbah\u00e7e<\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki kod blo\u011funu incelersek e\u011fer, class isimleri “dis” ve “ic” olan Div’lere, sayfa y\u00fcklenirken JQuery taraf\u0131ndan se\u00e7ilip, CSS de\u011fi\u015fikli\u011fi ger\u00e7ekle\u015ftiriliyor.
\n[] \u00d6z Nitelik(Attribute) Se\u00e7icisi<\/strong><\/span>
\nSayfa elemanlar\u0131ndaki Attribute’lar arac\u0131l\u0131\u011f\u0131yla se\u00e7im yapar.Lakin d\u00f6rt farkl\u0131 se\u00e7im prosed\u00fcr\u00fc mevcuttur.
\nBu d\u00f6rt farkl\u0131 se\u00e7im prosed\u00fcr\u00fcn\u00fc a\u015fa\u011f\u0131daki html nesneleri \u00fczerinde \u00f6rneklendirerek inceleyelim.<\/p>\n
\r\n    <div hidden="bu birinci attribute">\u00d6rnek 1<\/div>\r\n    <div hidden="bu ikinci attribute">\u00d6rnek 2<\/div>\r\n    <div hidden="bu \u00fc\u00e7\u00fcnc\u00fc attributem">\u00d6rnek 3<\/div>\r\n    <div hidden="bu d\u00f6rd\u00fcnc\u00fc attribute">\u00d6rnek 4<\/div>\r\n<\/pre>\n1. Prosed\u00fcr<\/strong><\/em><\/p>\n
\r\n        $(document).ready(\r\n            function () {\r\n                $("div[hidden='bu birinci attribute']").css("color", "red");\r\n            }\r\n            );\r\n<\/pre>\nBu prosed\u00fcrde direkt “=” operat\u00f6r\u00fcyle i\u015flem yap\u0131yoruz.”hidden” isimli Attribute i\u00e7indeki de\u011fer t\u0131rnaklar i\u00e7indeki de\u011ferle e\u015fit ise css de\u011fi\u015fikli\u011fi ger\u00e7ekle\u015ftiriyor.Haliyle i\u00e7inde “\u00d6rnek 1” yazan div nesnemiz etkilenecektir.<\/p>\n
2. Prosed\u00fcr<\/strong><\/em><\/p>\n
\r\n        $(document).ready(\r\n            function () {\r\n                $("div[hidden^='bu']").css("color", "blue");\r\n            }\r\n            );\r\n<\/pre>\nBir di\u011fer prosed\u00fcr\u00fcm\u00fcz “^=” operat\u00f6r\u00fcyle ger\u00e7ekle\u015ftirilmektedir.Mant\u0131ksal olarak verilen Attribute’un de\u011feri t\u0131rnak i\u00e7ine verilen de\u011fer ile ba\u015fl\u0131yorsa, o nesne \u00fczerinde i\u015flemler ger\u00e7ekle\u015ftirilmektedir.Bu \u00f6rne\u011fimizde de t\u00fcm div nesnelerinin i\u00e7indeki de\u011ferler “bu” kelimesi ile ba\u015flad\u0131\u011f\u0131ndan dolay\u0131 hepsi etkilenecektir.<\/p>\n
3. Prosed\u00fcr<\/strong><\/em><\/p>\n
\r\n        $(document).ready(\r\n            function () {\r\n                $("div[hidden$='attributem']").css("color", "grey");\r\n            }\r\n            );\r\n<\/pre>\n\u015eimdi ise “$=” operat\u00f6r\u00fcyle kar\u015f\u0131la\u015ft\u0131k.Bu \u015fekilde de Attribute’un de\u011ferinin sonu, t\u0131rna\u011fa verilen de\u011fere e\u015fit oldu\u011fu durumlarda ki sayfa elemanlar\u0131n\u0131 etkilemektedir.Burada g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi “hidden” isimli Attribute’unun sonu “attributem” olarak biten eleman bir tek i\u00e7inde “\u00d6rnek3” de\u011feri yazan div nesnemizdir.<\/p>\n
4. Prosed\u00fcr<\/strong><\/em><\/p>\n
\r\n        $(document).ready(\r\n            function () {\r\n                $("div[hidden*='d\u00f6rd\u00fcnc\u00fc']").css("color", "yellow");\r\n            }\r\n            );\r\n<\/pre>\nSon olarak “*=” operat\u00f6r\u00fc kal\u0131yor.Bu operat\u00f6r, Attribute i\u00e7ine yaz\u0131lan de\u011fer i\u00e7inde verilen de\u011feri aramaktad\u0131r.Bu \u00f6rnekte etkilenecek olan nesnemiz “\u00d6rnek4” de\u011ferini ta\u015f\u0131yan html nesnemizdir.<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar diliyorum…<\/p>\n","protected":false},"excerpt":{"rendered":"
Web sayfalar\u0131nda Client tabanl\u0131 programlamay\u0131 JQuery ile ger\u00e7ekle\u015ftiriyorsak e\u011fer HTML Componentlerine ula\u015fabilmemiz gerekmektedir.Lakin ben buna ula\u015fma yerine se\u00e7me terimini daha uygun buluyorum.JQuery ile se\u00e7ti\u011fimiz HTML nesnesi \u00fczerinde istedi\u011fimiz i\u015flemleri asenkron bir yap\u0131da ger\u00e7ekle\u015ftirebiliyoruz.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,19],"tags":[289,748],"class_list":["post-2264","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","tag-html","tag-jquery"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=2264"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2264\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}