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

jQuery8

[jQuery] μŠ€νƒ€μΌ κ΄€λ ¨ λ©”μ„œλ“œ μ•Œμ•„λ³΄κΈ° jQuery : μŠ€νƒ€μΌ κ΄€λ ¨ λ©”μ„œλ“œ μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” μŠ€νƒ€μΌ κ΄€λ ¨ λ©”μ„œλ“œμ— λŒ€ν•΄ μ•Œμ•„λ΄…μ‹œλ‹€. css() λ©”μ„œλ“œ μ‹€ν–‰ λΆ„λ₯˜ ν˜•μ‹ 취득 $("div").css("width"); 생성, λ³€κ²½ $("div").css("background-color", "red").css("padding", "10px"); $("div").css({background-color: "red", padding: "10px"}); 콜백 ν•¨μˆ˜ $("div").css("width", function(index, .w) { // indexλŠ” 각 div μš”μ†Œμ˜ index 0,1,2 // w은 각 div μš”μ†Œ width 속성 return css 속성 // 각 div μš”μ†Œμ˜ 속성을 변경함. }); …… λ‚΄μš© λ‚΄μš© λ‚΄μš© css() λ©”μ„œλ“œ : .. 2022. 9. 3.
[jQuery] 속성 κ΄€λ ¨ λ©”μ„œλ“œ μ•Œμ•„λ³΄κΈ° jQuery : 속성 κ΄€λ ¨ λ©”μ„œλ“œ μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” 속성 κ΄€λ ¨ λ©”μ„œλ“œμ— λŒ€ν•΄ μ•Œμ•„λ΄…μ‹œλ‹€. attr() λ©”μ„œλ“œ μ„ νƒν•œ μš”μ†Œμ˜ attribute(속성)λ₯Ό 선택, 생성, λ³€κ²½ν•  수 μžˆλ‹€. μ‹€ν–‰ λΆ„λ₯˜ ν˜•μ‹ 취득 $("a").attr("href"); 생성, λ³€κ²½ $("a").attr("href", "http://www.google.com/").attr("target", "_blank"); $("a").attr({href: "http://www.google.com/", target: "_blank"}); 콜백 ν•¨μˆ˜ $("a").attr("href", function(index, h) { // indexλŠ” 각 a μš”μ†Œμ˜ index 0,1,2 // h은 각 a μš”μ†Œ href 속성 return attribute (속.. 2022. 9. 3.
[jQuery] 클래슀 κ΄€λ ¨ λ©”μ„œλ“œ μ•Œμ•„λ³΄κΈ° jQuery : 클래슀 κ΄€λ ¨ λ©”μ„œλ“œ μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” 클래슀 κ΄€λ ¨ λ©”μ„œλ“œμ— λŒ€ν•΄ μ•Œμ•„λ΄…μ‹œλ‹€. 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() λ©”μ„œλ“œ : 예제 μ½”λ“œ jQuery html css javascript κ²°κ³Ό 보기 jQuery html css javascript μ½”λ“œνŽœ κ²°κ³Ό See t.. 2022. 9. 3.
[JavaScript] jQuery(제이쿼리) - 탐색 μ„ νƒμž jQuery 탐색 μ„ νƒμž μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” 탐색 μ„ νƒμžμ— λŒ€ν•΄ μ‚΄νŽ΄λ΄…μ‹œλ‹€. 탐색 μ„ νƒμž μ„ νƒμž μ’…λ₯˜ μ„ νƒμž μ„€λͺ… 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μš”μ†Œμ˜ λ‹€μŒ μš”μ†Œλ“€μ„ λͺ¨λ‘ 선택 nextUntil() $('div.m').ne.. 2022. 8. 30.
[JavaScript] jQuery(제이쿼리) - ν•„ν„° μ„ νƒμž jQuery ν•„ν„° μ„ νƒμž μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” ν•„ν„° μ„ νƒμžμ— λŒ€ν•΄ μ‚΄νŽ΄λ΄…μ‹œλ‹€. μ„ νƒμžμ— ' : 'κ°€ λΆ™μŠ΅λ‹ˆλ‹€. ν•„ν„° μ„ νƒμž μ„ νƒμž μ’…λ₯˜ μ„ νƒμž μ„€λͺ… :even $("tr:even") tr μš”μ†Œ 쀑 짝수 ν–‰λ§Œ 선택 :odd $("tr:odd") tr μš”μ†Œ 쀑 ν™€μˆ˜ ν–‰λ§Œ 선택 :first $("tr:first") 첫 번째 td μš”μ†Œλ₯Ό 선택 :last $(":header") ν—€λ”©(h1~h6) μš”μ†Œλ₯Ό 선택 :eq() $("li:eq(0)") indexκ°€ 0인 li μš”μ†Œλ₯Ό 선택. indexλŠ” 0번이 첫 번째 μš”μ†Œμž…λ‹ˆλ‹€. :gt() $("li:gt(0)") indexκ°€ 0보닀 큰 li μš”μ†Œλ“€μ„ 선택 :lt() $("li:lt(2)") indexκ°€ 2보닀 μž‘μ€ li μš”μ†Œλ“€μ„ 선택 :not() $("li:not(.bg.. 2022. 8. 30.
[JavaScript] jQuery(제이쿼리) - 속성 μ„ νƒμž jQuery 속성 μ„ νƒμž μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” 속성 μ„ νƒμžμ— λŒ€ν•΄ μ‚΄νŽ΄λ΄…μ‹œλ‹€. 속성 μ„ νƒμž μ„ νƒμž μ’…λ₯˜ μ„ νƒμž μ„€λͺ… μš”μ†Œ[속성] $("span[class]") span μš”μ†Œ 쀑 class 속성을 가지고 μžˆλŠ” μš”μ†Œλ₯Ό 선택 μš”μ†Œ[속성='κ°’'] $("span[class='abc']") span μš”μ†Œ 쀑 classκ°€ 'abc'인 μš”μ†Œλ₯Ό 선택 μš”μ†Œ[속성!='κ°’'] $("span[class!='abc']") span μš”μ†Œ 쀑 classκ°€ 'abc'κ°€ μ•„λ‹Œ μš”μ†Œλ₯Ό 선택 μš”μ†Œ[속성~='κ°’'] $("span[class~='abc']") span μš”μ†Œ 쀑 classκ°€ 'abc'λ₯Ό ν¬ν•¨ν•˜λŠ” μš”μ†Œλ₯Ό 선택. 'abc' μ•žμœΌλ‘œ μ—°κ²°λœ λ¬Έμžκ°€ μ—†μ–΄μ•Ό ν•˜λ©° 'bg abc'λŠ” μ„ νƒλ˜μ§€λ§Œ 'bg_abc'λŠ” μ„ νƒλ˜μ§€ μ•ŠμŒ. μš”μ†Œ[속성*=.. 2022. 8. 30.
[JavaScript] jQuery(제이쿼리) - κΈ°λ³Έ μ„ νƒμž jQuery κΈ°λ³Έ μ„ νƒμž μ œμ΄μΏΌλ¦¬μ—μ„œ μ‚¬μš©λ˜λŠ” κΈ°λ³Έ μ„ νƒμžμ— λŒ€ν•΄ μ‚΄νŽ΄λ΄…μ‹œλ‹€. κΈ°λ³Έ μ„ νƒμž $("μ„ νƒμž") $("#gnb") μ„ νƒμž μ’…λ₯˜ μ„ νƒμž μ„€λͺ… νƒœκ·Έ μ„ νƒμž $("p") p μš”μ†Œ 선택 id μ„ νƒμž $("#gnb") #gnb μš”μ†Œ 선택 class μ„ νƒμž $(".logo") .logo인 μš”μ†Œ 선택 μžμ‹ μ„ νƒμž $("#gnb > ul > li") #gnb의 μžμ‹ μš”μ†Œ(ul)의 μžμ‹ μš”μ†Œ liλ₯Ό 선택 ν•˜μœ„ μ„ νƒμž $("#gnb ul") #gnb의 ν•˜μœ„μ— μžˆλŠ” λͺ¨λ“  li μš”μ†Œλ₯Ό 선택 인접 μ„ νƒμž $("#visual + #content") #visual λ‹€μŒμ— μ˜€λŠ” #content μš”μ†Œλ₯Ό 선택 ν˜•μ œ μ„ νƒμž $("#visual ~ #footer") #visual의 ν˜•μ œ μš”μ†Œ #footerλ₯Ό 선택 쒅속 μ„ νƒμž $.. 2022. 8. 30.
[JavaScript] jQuery(제이쿼리) μ•Œμ•„λ³΄κΈ° jQueryλž€? HTML의 ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ μ‘°μž‘μ„ λ‹¨μˆœν™”ν•˜λ„λ‘ μ„€κ³„λœ 크둜슀 ν”Œλž«νΌμ˜ JavaScript 라이브러리둜, μ‘΄ λ ˆμ‹μ΄ 2006λ…„ 8μ›” 26일, λ‰΄μš• μ‹œ λ°”μΊ ν”„μ—μ„œ 졜초 κ³΅κ°œν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ—˜λ¦¬λ¨ΌνŠΈλ₯Ό μ„ νƒν•˜λŠ” κ°•λ ₯ν•œ 방법과 μ„ νƒλœ μ—˜λ¦¬λ¨ΌνŠΈλ“€μ„ 효율적으둜 μ œμ–΄ν•  수 μžˆλŠ” λ‹€μ–‘ν•œ μˆ˜λ‹¨ 등을 μ œκ³΅ν•˜μ£ . jQueryλ₯Ό μ‚¬μš©ν•˜λŠ” μ΄μœ λŠ”? 01. μ–΄λ– ν•œ λΈŒλΌμš°μ €μ—μ„œλ„ λ™μΌν•˜κ²Œ μž‘λ™ν•œλ‹€. 02. 직관적이고 νŽΈλ¦¬ν•œ APIλ₯Ό μ œκ³΅ν•œλ‹€. 03. CSS μŠ€νƒ€μΌμ˜ selectorλ₯Ό μ‚¬μš©ν•  수 μžˆμ–΄ νŽΈλ¦¬ν•˜λ‹€. 04. 이벀트 처리(ex: Ajax, Animation λ“±…) 효과λ₯Ό μ‚¬μš©ν•˜κΈ° 쉽닀. 05. λ‹€μ–‘ν•œ ν”ŒλŸ¬κ·ΈμΈμ΄ μ‘΄μž¬ν•˜λ©° 좩돌 μœ„ν—˜λ„ 적닀. jQuery 적용 방법 jQuery(μ΄ν•˜ '제이쿼리')λ₯Ό μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œ.. 2022. 8. 30.
λ°˜μ‘ν˜•

Reference Book

JavaScript

JavaScript

λ³΄λŸ¬κ°€κΈ°
HTML

HTML

λ³΄λŸ¬κ°€κΈ°
CSS

CSS

λ³΄λŸ¬κ°€κΈ°
κ΄‘κ³  μ€€λΉ„μ€‘μž…λ‹ˆλ‹€.

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