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

์ œ์ด์ฟผ๋ฆฌ5

[JQUERY] ํƒ์ƒ‰ ์„ ํƒ์ž Jquery : ํƒ์ƒ‰ ์„ ํƒ์ž ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ jquery ํƒ์ƒ‰ ์„ ํƒ์ž์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๐Ÿ˜† #1. jquery ํƒ์ƒ‰ ์„ ํƒ์ž ๋‹ค์Œ์€ ์ œ์ด์ฟผ๋ฆฌ์˜ ํƒ์ƒ‰ ์„ ํƒ์ž๋ฅผ ์ •๋ฆฌํ•ด๋†“์€ ๊ฒƒ์ž…๋‹ˆ๋‹ค! ํ•จ๊ป˜ ํƒ์ƒ‰ ์„ ํƒ์ž ์ข…๋ฅ˜๋ฅผ ์•Œ์•„๋ณผ๊นŒ์š”?! ์„ ํƒ์ž ์ข…๋ฅ˜ ์„ค๋ช… children() $("div").children() div ์š”์†Œ์˜ ์ž์‹ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. parent() $("p").parent() p ์š”์†Œ์˜ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. parents() $("p").parent("div") p ์š”์†Œ์˜ ๋ถ€๋ชจ๊ฐ€ ๋˜๋Š” ๋ชจ๋“  div ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. closest() $("p").closest("div") p ์š”์†Œ์˜ ๋ถ€๋ชจ๊ฐ€ ๋˜๋Š” ์ฒซ๋ฒˆ์งธ div ์š”์†Œ๋ฅผ ์ฐพ์Šต๋‹ˆ๋‹ค. next() $("div.m").next() div.m ์š”์†Œ์˜ .. 2022. 8. 31.
[JQUERY] ํ•„ํ„ฐ ์„ ํƒ์ž Jquery : ํ•„ํ„ฐ ์„ ํƒ์ž ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ jquery ํ•„ํ„ฐ ์„ ํƒ์ž์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๐Ÿ˜† #1. jquery ๊ธฐ๋ณธ ํ•„ํ„ฐ ์„ ํƒ์ž ํ•„ํ„ฐ ์„ ํƒ์ž๋Š” ์„ ํƒ์ž์— : (ํด๋ก )์ด ๋ถ™์€ ์„ ํƒ์ž๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ์˜ ํ‘œ๋ฅผ ๋ณด๋ฉฐ ํ•„ํ„ฐ ์„ ํƒ์ž์˜ ์ข…๋ฅ˜๋ฅผ ์•Œ์•„๋ด…์‹œ๋‹ค! ์„ ํƒ์ž ์ข…๋ฅ˜ ์„ค๋ช… :even $("tr:even") tr ์š”์†Œ ์ค‘ ์ง์ˆ˜ ํ–‰๋งŒ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. :odd $("tr:odd") tr ์š”์†Œ ์ค‘ ํ™€์ˆ˜ ํ–‰๋งŒ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. :first $("td:first") ์ฒซ๋ฒˆ์งธ td ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. :last $("td:last") ๋งˆ์ง€๋ง‰ td ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. :header $(":header") ํ—ค๋”ฉ(h1~h6) ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. :eq $("li:eq(0)") index๊ฐ€ 0์ธ li ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. **in.. 2022. 8. 31.
[JQUERY] jQuery ์†์„ฑ ์„ ํƒ์ž Jquery : ์†์„ฑ ์„ ํƒ์ž ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ jquery ์†์„ฑ ์„ ํƒ์ž์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๐Ÿ˜† #1. jquery ์†์„ฑ ์„ ํƒ์ž ๋‹ค์Œ์€ ์†์„ฑ ์„ ํƒ์ž์˜ ์ข…๋ฅ˜ ์ž…๋‹ˆ๋‹ค. ํ‘œ์™€ ์˜ˆ์ œ๋ฅผ ๋ณด๊ณ  ์ดํ•ดํ•ด๋ด…์‹œ๋‹ค! ์„ ํƒ์ž ์ข…๋ฅ˜ ์„ค๋ช… ์š”์†Œ[์†์„ฑ] $("p[class]") p ์š”์†Œ ์ค‘ class ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์š”์†Œ[์†์„ฑ='๊ฐ’'] $("p[class='abc']") p ์š”์†Œ ์ค‘ class๊ฐ€ 'abc'์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์š”์†Œ[์†์„ฑ!='๊ฐ’'] $("p[class!='abc']") p ์š”์†Œ ์ค‘ class๊ฐ€ 'abc'๊ฐ€ ์•„๋‹Œ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์š”์†Œ[์†์„ฑ='๊ฐ’'] $("p[class~='abc']") p ์š”์†Œ ์ค‘ class๊ฐ€ 'abc'์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ 'abc' ์•ž ๋’ค๋กœ ์—ฐ๊ฒฐ๋œ ๋ฌธ์ž.. 2022. 8. 30.
[JQUERY] jQuery ๊ธฐ๋ณธ ์„ ํƒ์ž jQuery : ๊ธฐ๋ณธ ์„ ํƒ์ž ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ jQuery ๊ธฐ๋ณธ ์„ ํƒ์ž์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๐Ÿ˜† #1. jQuery ๊ธฐ๋ณธ ์„ ํƒ์ž jquery์—์„œ๋Š” html์š”์†Œ์™€ ๊ด€๋ จ๋œ ๊ธฐ๋Šฅ ๊ตฌํ˜„์ด ๋งŽ๊ธฐ ๋–„๋ฌธ์— CSS์™€ ๋ฐ€์ ‘ํ•œ ๊ด€๊ณ„๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์˜ ํ‘œ์™€ ํ•จ๊ป˜ ๊ธฐ๋ณธ ์„ ํƒ์ž์˜ ์ข…๋ฅ˜๋ฅผ ์•Œ์•„๋ด…์‹œ๋‹ค! ๐Ÿ˜‡ ์„ ํƒ์ž ์ข…๋ฅ˜ ์„ค๋ช… ํƒœ๊ทธ ์„ ํƒ์ž $("p") p ํƒœ๊ทธ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. id ์„ ํƒ์ž $("#section") id๊ฐ€ section์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. class ์„ ํƒ์ž $(".section") class๊ฐ€ section์ธ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์ž์‹ ์„ ํƒ์ž $("#section > ul > li") #section์˜ ์ž์‹ ์š”์†Œ ์ค‘ li๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ์ธ์ ‘ ์„ ํƒ์ž $("#section + #content") #section์˜.. 2022. 8. 30.
[JAVASCRIPT] JQUERY ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ž€? ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ : Jquery ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ธ jquery์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๐Ÿ˜† #1. Jquery๋ž€? JQuery๋กœ HTML์˜ ์š”์†Œ๋“ค์„ ์‰ฝ๊ฒŒ ์กฐ์ž‘ํ•˜๊ณ  ํŽธ๋ฆฌํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ Javascript๋ฅผ ๋ฏธ๋ฆฌ ์ž‘์„ฑํ•ด๋‘” ๊ฒƒ์ž…๋‹ˆ๋‹ค. Javascript๋กœ ๊ธธ๊ณ  ๋ณต์žกํ•˜๊ฒŒ ์จ์•ผ ํ•˜๋Š” ๊ฒƒ์„ JQuery๋กœ ๋ณด๋‹ค ์งง๊ณ  ์ง๊ด€์ ์œผ๋กœ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. $ ๊ธฐํ˜ธ๋Š” ์ œ์ด์ฟผ๋ฆฌ๋ฅผ ์˜๋ฏธํ•˜๊ณ , ์ œ์ด์ฟผ๋ฆฌ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์‹๋ณ„์ž์ž…๋‹ˆ๋‹ค. ์„ ํƒ์ž๋ฅผ ์ด์šฉํ•˜์—ฌ ์›ํ•˜๋Š” HTML ์š”์†Œ๋ฅผ ์„ ํƒํ•˜๊ณ , ๋™์ž‘ ํ•จ์ˆ˜๋ฅผ ์ •์˜ํ•˜์—ฌ ์„ ํƒ๋œ ์š”์†Œ์— ์›ํ•˜๋Š” ๋™์ž‘์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. โœ๏ธ jquery ํ™œ์šฉ ์˜ˆ์‹œ ๐Ÿ’ก $(์„ ํƒ์ž).๋™์ž‘ํ•จ์ˆ˜(); )//Javascript document.querySelector(".sl.. 2022. 8. 30.
728x90
๋ฐ˜์‘ํ˜•
Lucky Charms Rainbow
js

JAVASCRIPT

๋ณด๋Ÿฌ ๊ฐ€๊ธฐ
html

HTML

๋ณด๋Ÿฌ ๊ฐ€๊ธฐ
css

CSS

๋ณด๋Ÿฌ ๊ฐ€๊ธฐ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”