λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

JQuery8

제이쿼리 : μŠ€νƒ€μΌ κ΄€λ ¨ λ©”μ„œλ“œ 제이쿼리 : μŠ€νƒ€μΌ κ΄€λ ¨ λ©”μ„œλ“œ μ˜€λŠ˜μ€ JQuery의 μ£Όμš” λ©”μ„œλ“œλ“€ 쀑, μŠ€νƒ€μΌκ³Ό κ΄€λ ¨λœ λ©”μ„œλ“œλ₯Ό μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. 1. css() λ©”μ„œλ“œ μ‹€ν–‰ λΆ„λ₯˜ ν˜•μ‹ 취득 $("div").css("width"); 생성, λ³€κ²½ $("div").css("background-color", "red").css("padding", "10px"); $("div").css({"background-color: "red", padding: "10px"}); 콜백 ν•¨μˆ˜ $("div").attr("width", function(index, w) { // indexλŠ” 각 div μš”μ†Œμ˜ index 0, 1, 2 // wλŠ” 각 div μš”μ†Œμ˜ width κ°’ return css 속성 // 각 div μš”μ†Œμ˜ css 속성을 생성 및 λ³€κ²½ν•©λ‹ˆ.. 2022. 9. 5.
제이쿼리 : 속성 κ΄€λ ¨ λ©”μ„œλ“œ 제이쿼리 : 속성 κ΄€λ ¨ λ©”μ„œλ“œ μ˜€λŠ˜μ€ 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 속.. 2022. 9. 4.
제이쿼리 : 클래슀 κ΄€λ ¨ λ©”μ„œλ“œ 제이쿼리 : 클래슀 κ΄€λ ¨ λ©”μ„œλ“œ μ˜€λŠ˜μ€ JQuery의 μ£Όμš” λ©”μ„œλ“œλ“€ 쀑, ν΄λž˜μŠ€μ™€ κ΄€λ ¨λœ λ©”μ„œλ“œλ₯Ό μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. 1. addClass() λ©”μ„œλ“œ μš”μ†Œμ— class 속성을 μΆ”κ°€ν•©λ‹ˆλ‹€. μ‹€ν–‰ λΆ„λ₯˜ ν˜•μ‹ μΆ”κ°€ $("div").addClass("클래슀λͺ…"); 콜백 ν•¨μˆ˜ $("div").addClass(function(index, className) { // indexλŠ” 각 div μš”μ†Œμ˜ index 0,1,2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 μΆ”κ°€ν•©λ‹ˆλ‹€. }); .... λ‚΄μš©1 λ‚΄μš©2 λ‚΄μš©3 λ‹€μŒμ€ addClass() λ©”μ„œλ“œμ˜ μ‚¬μš© μ˜ˆμ œμž…λ‹ˆλ‹€. See the Pen classmethod01 by mj0614k (@mj06.. 2022. 9. 4.
제이쿼리 : 탐색 μ„ νƒμž 제이쿼리 : 탐색 μ„ νƒμž μ˜€λŠ˜μ€ JQuery의 탐색 μ„ νƒμžμ— λŒ€ν•˜μ—¬ μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. 1. κΈ°λ³Έ 탐색 μ„ νƒμž μ„ νƒμž μ’…λ₯˜ μ„€λͺ… children() $("div").children() div μš”μ†Œμ˜ μžμ‹ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. parent() $("p").parent() p μš”μ†Œμ˜ λΆ€λͺ¨ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. parents() $("p").parents("div") p μš”μ†Œμ˜ λΆ€λͺ¨κ°€ λ˜λŠ” λͺ¨λ“  div μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. closest() $("p").closest("div") p μš”μ†Œμ˜ λΆ€λͺ¨κ°€ λ˜λŠ” 첫 번째 div μš”μ†Œλ₯Ό μ°ΎμŠ΅λ‹ˆλ‹€. next() $("div.m").next() div.m μš”μ†Œμ˜ λ‹€μŒ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. nextAll() $("div.m").nextAll() div.m μš”μ†Œμ˜ λ‹€μŒ μš”μ†Œλ“€μ„ λͺ¨.. 2022. 9. 1.
제이쿼리 : ν•„ν„° μ„ νƒμž 제이쿼리 : ν•„ν„° μ„ νƒμž μ§€λ‚œ μ‹œκ°„μ— 이어 μ˜€λŠ˜μ€ ν•„ν„° μ„ νƒμžμ— λŒ€ν•˜μ—¬ μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. ν•„ν„° μ„ νƒμžλŠ” μ„ νƒμžμ— ':'이 뢙은 μ„ νƒμžλ₯Ό λ§ν•©λ‹ˆλ‹€. 1. κΈ°λ³Έ ν•„ν„° μ„ νƒμž μ„ νƒμž μ’…λ₯˜ μ„€λͺ… :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 μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. :gt() $("li:gt(0)") indexκ°€ 0보닀 큰 li μš”μ†Œλ“€μ„ μ„ νƒν•©λ‹ˆλ‹€. ... 2022. 8. 30.
제이쿼리 : 속성 μ„ νƒμž 제이쿼리 : 속성 μ„ νƒμž JQueryλŠ” html μš”μ†Œμ™€ κ΄€λ ¨λœ κΈ°λŠ₯κ΅¬ν˜„μ΄ λ§Žμ•„, 그만큼 CSS와 맀우 λ°€μ ‘ν•œ 관계가 μžˆμŠ΅λ‹ˆλ‹€. μ˜€λŠ˜μ€ JQuery의 속성 μ„ νƒμžμ— λŒ€ν•˜μ—¬ μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. 1. 속성 μ„ νƒμž μ„ νƒμž μ’…λ₯˜ μ„€λͺ… μš”μ†Œ[속성] $("span[class]") span μš”μ†Œ 쀑 class 속성을 가지고 μžˆλŠ” μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. μš”μ†Œ[속성='κ°’'] $("span[class='abc']") span μš”μ†Œ 쀑 classκ°€ 'abc'인 μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. μš”μ†Œ[속성!='κ°’'] $("span[class!='abc']") span μš”μ†Œ 쀑 classκ°€ 'abc'κ°€ μ•„λ‹Œ μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. μš”μ†Œ[속성~='κ°’'] $("span[class~='abc']") span μš”μ†Œ 쀑 classκ°€ 'abc'λ₯Ό ν¬ν•¨ν•˜λŠ” .. 2022. 8. 30.
제이쿼리 : κΈ°λ³Έ μ„ νƒμž 제이쿼리 : κΈ°λ³Έ μ„ νƒμž JQueryλŠ” html μš”μ†Œμ™€ κ΄€λ ¨λœ κΈ°λŠ₯κ΅¬ν˜„μ΄ λ§Žμ•„, 그만큼 CSS와 맀우 λ°€μ ‘ν•œ 관계가 μžˆμŠ΅λ‹ˆλ‹€. μ˜€λŠ˜μ€ JQuery의 κΈ°λ³Έ μ„ νƒμžμ— λŒ€ν•˜μ—¬ μ•Œμ•„λ³΄λ„λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€. 1. κΈ°λ³Έ μ„ νƒμž μ„ νƒμž μ’…λ₯˜ μ„€λͺ… νƒœκ·Έ μ„ νƒμž $("p") p μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. id μ„ νƒμž $("#gnb") #gnb μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. class μ„ νƒμž $(".logo") .logo인 μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. μžμ‹ μ„ νƒμž $("#gnb > ul > li") #gnb의 μžμ‹ μš”μ†Œμ˜ μžμ‹ μš”μ†Œ liλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. ν•˜μœ„ μ„ νƒμž $("#gnb ul") #gnb의 ν•˜μœ„μ— μžˆλŠ” λͺ¨λ“  ul μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€. 인접 μ„ νƒμž $("#visual + #content") #visual λ‹€μŒμ— μ˜€λŠ” #content μš”μ†Œλ₯Ό μ„ νƒν•©λ‹ˆλ‹€.. 2022. 8. 30.
제이쿼리 : μ—°κ²° 방법 제이쿼리 : μ—°κ²° 방법 JQueryλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ μ–Έμ–΄λ₯Ό κ°„νŽΈν•˜κ²Œ μ‚¬μš©ν•  수 μžˆλ„λ‘ λ‹¨μˆœν™”μ‹œν‚¨ μ˜€ν”ˆ μ†ŒμŠ€ 기반의 μžλ°”μŠ€ν¬λ¦½νŠΈ λΌμ΄λΈŒλŸ¬λ¦¬μž…λ‹ˆλ‹€. JQueryλ₯Ό μ΄μš©ν•˜λ©΄ 짧고 λ‹¨μˆœν•œ μ½”λ“œλ‘œλ„ μ›Ή νŽ˜μ΄μ§€μ— λ‹€μ–‘ν•œ νš¨κ³Όλ‚˜ μ—°μΆœμ„ μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 1. JQuery의 μž₯점 1. JQueryλŠ” μ£Όμš” μ›Ή λΈŒλΌμš°μ €μ˜ ꡬ버전을 ν¬ν•¨ν•œ λŒ€λΆ€λΆ„μ˜ λΈŒλΌμš°μ €μ—μ„œ μ§€μ›λ©λ‹ˆλ‹€. 2. HTML DOM을 μ†μ‰½κ²Œ μ‘°μž‘ν•  수 있으며, CSS μŠ€νƒ€μΌλ„ κ°„λ‹¨νžˆ μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 3. μ• λ‹ˆλ©”μ΄μ…˜ νš¨κ³Όλ‚˜ λŒ€ν™”ν˜• 처리λ₯Ό κ°„λ‹¨ν•˜κ²Œ μ μš©ν•΄ μ€λ‹ˆλ‹€. 4. 같은 λ™μž‘μ„ ν•˜λŠ” ν”„λ‘œκ·Έλž¨μ„ λ”μš± 짧은 μ½”λ“œλ‘œ κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 5. λ‹€μ–‘ν•œ ν”ŒλŸ¬κ·ΈμΈκ³Ό μ°Έκ³ ν•  수 μžˆλŠ” λ¬Έμ„œκ°€ 많이 μ‘΄μž¬ν•©λ‹ˆλ‹€. 6. μ˜€ν”ˆ λΌμ΄μ„ μŠ€λ₯Ό μ μš©ν•˜μ—¬ λˆ„κ΅¬λ‚˜ 자유둭게 μ‚¬μš©ν•  수 있.. 2022. 8. 29.
728x90
λ°˜μ‘ν˜•
κ°μ‚¬ν•©λ‹ˆλ‹€. πŸ¦™
JAVASCRIPT
HTML
CSS
κ΄‘κ³  쀀비쀑

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”