<\/div>\n

Bir \u00f6nceki jQuery – HTML Tag\u0131n Style Yap\u0131s\u0131na M\u00fcdahale<\/a> ba\u015fl\u0131kl\u0131 makalemde jQuery ile HTML taglar\u0131n style yap\u0131s\u0131na m\u00fcdahaleyi irdelemi\u015ftik.Bu yaz\u0131m\u0131zda ise herhangi bir id de\u011ferinin style yap\u0131s\u0131na m\u00fcdahale etmeyi inceleyece\u011fiz.Hat\u0131rlarsan\u0131z e\u011fer yukar\u0131da belirtti\u011fim yaz\u0131mda HTML tag\u0131na style yap\u0131land\u0131rmas\u0131 uygularken, o sayfa(document) i\u00e7erisinde ki b\u00fct\u00fcn ilgili HTML taglar\u0131 bu yap\u0131land\u0131rmadan etkileniyordu.Lakin idlerin style yap\u0131land\u0131rmas\u0131nda ise sadece ilgili id de\u011ferine sahip nesne etkilenecektir.\u015eimdi gelin bu olay\u0131 teknik olarak inceleyelim.
\n
\nKonuya girmeden \u00f6ncelikle a\u015fa\u011f\u0131daki HTML kodunu inceleyiniz.<\/p>\n

\r\n<html>\r\n<head>\r\n<\/head>\r\n<body>\r\n<p id="paragraf">\r\nBu bir paragraft\u0131r.\r\n<\/p>\r\n<br \/>\r\n<input type="submit" value="Uygula" \/>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi yukar\u0131daki kod blo\u011funda <p> tag\u0131na “paragraf” isimli bir id de\u011feri atanm\u0131\u015ft\u0131r.\u0130\u015fte jQuery ile “paragraf” id de\u011ferine sahip nesnenin style yap\u0131s\u0131na m\u00fcdahale etme i\u015fini yapaca\u011f\u0131z.<\/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$("#paragraf").css("width","150px");\r\n\t$("#paragraf").css("height","150px");\r\n\t$("#paragraf").css("background-color","#CCC");\r\n\t}\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<p id="paragraf">\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\u0131n\u0131 incelerseniz e\u011fer “paragraf” id de\u011ferine sahip nesnenin style yap\u0131s\u0131na jQuery ile m\u00fcdahale etmi\u015f bulunmaktay\u0131z.Uygula fonksiyonu tetiklendi\u011fi anda sayfadaki(document) id de\u011feri “paragraf” olan HTML nesnesi etkilenecek di\u011fer\u00a0nesneler\u00a0bu i\u015fleyi\u015ften muaf tutulacakt\u0131r.Burada ek bilgi olarak jQuery ile bir HTML nesnesine id de\u011ferinden ula\u015f\u0131rken ‘$(“#id de\u011feri”)’ \u015feklinde ula\u015fmaktay\u0131z.(id oldu\u011fu i\u00e7in # i\u015faretini koymay\u0131 unutmamak laz\u0131m<\/em>)<\/p>\n
\u015eimdide a\u015fa\u011f\u0131daki kodu incelemenizi istiyorum<\/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$("#paragraf").css("width","150px");\r\n\t$("#paragraf").css("height","150px");\r\n\t$("#paragraf").css("background-color","#CCC");\r\n\t}\r\n<\/script>\r\n<\/head>\r\n<body>\r\n<p id="paragraf">\r\nBu bir paragraft\u0131r.\r\n<\/p>\r\n<p id="paragraf">\r\nBu ikinci 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 blo\u011funu incelediyseniz e\u011fer idsi “paragraf” olan iki adet <p> tag\u0131 mevcuttur.Acaba Uygula fonksiyonu tetiklendi\u011fi zaman hangisi i\u015fleyi\u015fe tabii tutulacakt\u0131r.<\/p>\n\n\n\nUygulama Fonksiyonu Tetiklenmeden \u00d6nce<\/th>\n Uygulama Fonksiyonu Tetiklendikten Sonra<\/th>\n<\/tr>\n
<\/a><\/td>\n <\/a><\/td>\n<\/tr>\n<\/table>\nYukar\u0131daki g\u00f6r\u00fcnt\u00fclerde g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi sat\u0131rsal olarak \u00f6ncelikli olan <p> tag\u0131 i\u015fleyi\u015fe tabii tutulmu\u015ftur.Bunun sebebi de temel bir CSS bilgisine dayanmaktad\u0131r.HTML sayfalar\u0131nda bir isimde tek id de\u011feri olmaktad\u0131r.Yani id de\u011feri “paragraf” olan iki HTML nesnesi teknik olarak m\u00fcmk\u00fcn de\u011fildir.Haliyle b\u00f6yle bir teknik hatayla kar\u015f\u0131la\u015fan jQuery mimarisi sat\u0131rsal olarak \u00f6ncelikli olan nesneye i\u015flevini ger\u00e7ekle\u015ftirmekte ve di\u011fer idsi ayn\u0131 olan nesnelere m\u00fcdahale etmemektedir.<\/p>\n
Vee b\u00f6ylece bu yaz\u0131m\u0131z\u0131nda sonuna gelmi\u015f bulunmaktay\u0131z.
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
Bir \u00f6nceki jQuery – HTML Tag\u0131n Style Yap\u0131s\u0131na M\u00fcdahale ba\u015fl\u0131kl\u0131 makalemde jQuery ile HTML taglar\u0131n style yap\u0131s\u0131na m\u00fcdahaleyi irdelemi\u015ftik.Bu yaz\u0131m\u0131zda ise herhangi bir id de\u011ferinin style yap\u0131s\u0131na m\u00fcdahale etmeyi inceleyece\u011fiz.Hat\u0131rlarsan\u0131z e\u011fer yukar\u0131da belirtti\u011fim yaz\u0131mda...<\/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":[251,289,748,595],"class_list":["post-2660","post","type-post","status-publish","format-standard","hentry","category-jquery","tag-css","tag-html","tag-jquery","tag-style"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2660","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=2660"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/2660\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=2660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=2660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=2660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}