๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JQuery

์ œ์ด์ฟผ๋ฆฌ : ์†์„ฑ ๊ด€๋ จ ๋ฉ”์„œ๋“œ

by ์ฝ”ํŒŒ์นด 2022. 9. 4.
728x90

์ œ์ด์ฟผ๋ฆฌ : ์†์„ฑ ๊ด€๋ จ ๋ฉ”์„œ๋“œ

์˜ค๋Š˜์€ JQuery์˜ ์ฃผ์š” ๋ฉ”์„œ๋“œ๋“ค ์ค‘, ์†์„ฑ๊ณผ ๊ด€๋ จ๋œ ๋ฉ”์„œ๋“œ๋ฅผ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.


1. attr() ๋ฉ”์„œ๋“œ

์„ ํƒํ•œ ์š”์†Œ์˜ attribute(์†์„ฑ)๋ฅผ ์„ ํƒ, ์ƒ์„ฑ, ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‹คํ–‰ ๋ถ„๋ฅ˜ ํ˜•์‹
์ทจ๋“ $("a").attr("href");
์ƒ์„ฑ, ๋ณ€๊ฒฝ $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank");
$("a").attr({href: "http://icoxpublish.com", target: "_blank"});
์ฝœ๋ฐฑ ํ•จ์ˆ˜ $("a").attr("href", function(index, h) {
    // index๋Š” ๊ฐ a ์š”์†Œ์˜ index 0, 1, 2
    // h๋Š” ๊ฐ a ์š”์†Œ href ์†์„ฑ
    return attribute(์†์„ฑ) // ๊ฐ a ์š”์†Œ์˜ ์†์„ฑ์„ ์ƒ์„ฑ ๋ฐ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
});
....
<a href="http://www.daum.net" target="_blank" title="์ƒˆ์ฐฝ">๋‹ค์Œ</a>
<a href="http://www.naver.net" target="_blank" title="์ƒˆ์ฐฝ">๋„ค์ด๋ฒ„</a>
<a href="http://www.nate.net" target="_blank" title="์ƒˆ์ฐฝ">๋„ค์ดํŠธ</a>

๋‹ค์Œ์€ attr() ๋ฉ”์„œ๋“œ์˜ ์‚ฌ์šฉ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค.

2. prop() ๋ฉ”์„œ๋“œ

attr() ๊ฐ€ html attribute(์†์„ฑ)์— ๊ด€๋ จ๋œ ๋ฉ”์„œ๋“œ๋ผ๋ฉด prop()๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ property(ํ”„๋กœํผํ‹ฐ)์— ๊ด€๋ จ๋œ ๋ฉ”์„œ๋“œ์ž…๋‹ˆ๋‹ค. prop() ๋ฉ”์„œ๋“œ๋Š” ์š”์†Œ์˜ ์†์„ฑ์„ true, false๋กœ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ์€ attr() ๋ฉ”์„œ๋“œ์˜ ์‚ฌ์šฉ ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. attr() ๋ฉ”์„œ๋“œ๋Š” checked ์†์„ฑ์ด ์š”์†Œ์— ์ถ”๊ฐ€๋˜๋Š” ๋ฐ˜๋ฉด prop() ๋ฉ”์„œ๋“œ์˜ true๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ํ”„๋กœํผํ‹ฐ๋กœ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค.

728x90
๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๐Ÿฆ™

CSS
๊ด‘๊ณ  ์ค€๋น„์ค‘