<\/div>\n

Web projelerinde i\u015fleyi\u015f genellikle web tasar\u0131mlar\u0131yla ba\u015flamakta ard\u0131ndan yaz\u0131l\u0131msal olarak devam etmektedir.Haliyle tasarlanan tema renksel ve yap\u0131sal olarak statik bir fizilsellik g\u00f6stermektedir.Baz\u0131 durumlarda site temalar\u0131nda dinamik olarak renksel ya da yap\u0131sal de\u011fi\u015fiklikler olmas\u0131 gerekmektedir.Eee s\u0131rf b\u00f6yle bir i\u015flem i\u00e7in Server Hide’da kod yaz\u0131p sunucuya a\u011f\u0131rl\u0131k vermektense JQuery k\u00fct\u00fcphanesinin bizlere verdi\u011fi nimetten yararlanmak hem i\u015ften hem de performanstan kazand\u0131racakt\u0131r.\u015eimdi gelin JQuery ile Client tabanl\u0131 olarak HTML taglar\u0131nda style yap\u0131s\u0131na nas\u0131l m\u00fcdahale ediliyormu\u015f beraber, teferruatl\u0131ca inceleyelim.
\n<\/p>\n

\u00d6ncelikle bu makalede JQuery ile HTML taglar\u0131nda style yap\u0131s\u0131na m\u00fcdahaleyi irdeleyelim derken, bir web sitesinin kaynak kodunda bulunan b\u00fct\u00fcn HTML kodlar\u0131na m\u00fcdahaleden bahsediyorum.<body>, <p>, <div>, <span> vs. HTML kodlar\u0131na JQuery ile style m\u00fcdahalesini kast etti\u011fimi belirtmek isterim.<\/p>\n

jQuery \u0130le HTML taglar\u0131n style yap\u0131s\u0131na ula\u015fmam\u0131z\u0131 sa\u011flayan kodun prototipi a\u015fa\u011f\u0131daki gibidir.<\/p>\n

\r\n\t$("tag").css("css \u00f6zelli\u011fi","de\u011fer")\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi bir taga CSS style m\u00fcdahalesinde bulunurken o tag\u0131n CSS \u00f6zelli\u011fini yaz\u0131p, ard\u0131ndan de\u011ferini vermemiz yeterli olacakt\u0131r.Bu \u015fekilde kod \u00e7al\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131 zaman \u00f6nceki style yap\u0131s\u0131n\u0131 taray\u0131c\u0131 ezecek ve yeni verilen style \u00f6zellikleri ekranda g\u00f6sterilecektir.<\/p>\n
\r\n<html>\r\n<head>\r\n<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>\r\n<script type="text\/javascript" src="js\/jquery-2.0.2.min.js"><\/script>\r\n<script type="text\/javascript">\r\nfunction Uygula()\r\n{\r\n\t$("p").css("color","Orange");\r\n\t}\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<p>\r\nBu bir paragraft\u0131r.\r\n<\/p>\r\n<br \/>\r\n<input type="submit" value="Uygula" onclick="Uygula()" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nYukar\u0131daki kod par\u00e7ac\u0131\u011f\u0131ndan g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Uygula isimli fonksiyon tetiklendi\u011fi anda <p> tag\u0131n\u0131n style yap\u0131s\u0131 de\u011fi\u015ftirilecek ve i\u00e7indeki yaz\u0131n\u0131n rengi turuncu olacakt\u0131r.
\nE\u011fer sayfada birden fazla <p> tag\u0131 mevcutsa bu i\u015flem hepsi i\u00e7in ge\u00e7erli olacakt\u0131r.
\nE\u011fer <p> tag\u0131na birden fazla sitil de\u011fi\u015fikli\u011fi uygulamak istiyorsak a\u015fa\u011f\u0131daki gibi i\u015flem ger\u00e7ekle\u015ftirebiliriz.<\/p>\n
\r\nfunction Uygula()\r\n{\r\n\t$("p").css("color","Orange");\r\n\t$("p").css("width","200px");\r\n    $("p").css("text-align","center");\r\n\t}\r\n<\/pre>\nE\u011fer ki sayfam\u0131zda hem <p> hemde <body> taglar\u0131n\u0131n sitillerine m\u00fcdahale etmek istersek a\u015fa\u011f\u0131daki\u00a0gibi kod yazabiliriz.<\/p>\n
\r\nfunction Uygula()\r\n{\r\n\t$("p").css("color","Orange");\r\n\t$("p").css("width","200px");\r\n    $("p").css("text-align","center");\r\n\t$("body").css("background-color","Black");\r\n\t}\r\n<\/pre>\nBurada g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi Uygula fonksiyonu tetiklendi\u011fi zaman farkl\u0131 taglara sitil de\u011fi\u015fikli\u011fi uygulanacakt\u0131r.Lakin bu taglar d\u0131\u015f\u0131nda kalan taglar\u0131n hi\u00e7birinde de\u011fi\u015fiklik s\u00f6z konusu olmayacakt\u0131r.<\/p>\n
jQuery ile HTML taglar\u0131n\u0131n style yap\u0131lar\u0131na bu \u015fekilde basit i\u015flemlerle m\u00fcdahale edebiliyoruz.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Web projelerinde i\u015fleyi\u015f genellikle web tasar\u0131mlar\u0131yla ba\u015flamakta ard\u0131ndan yaz\u0131l\u0131msal olarak devam etmektedir.Haliyle tasarlanan tema renksel ve yap\u0131sal olarak statik bir fizilsellik g\u00f6stermektedir.Baz\u0131 durumlarda site temalar\u0131nda dinamik olarak renksel ya da yap\u0131sal de\u011fi\u015fiklikler olmas\u0131 gerekmektedir.Eee...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[289,748,595],"class_list":["post-2647","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-html","tag-jquery","tag-style"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2647","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=2647"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2647\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}