Query는 자바스크립트를 기반으로 한 라이브러리로서, HTML 문서의 구조를 다루고 상호작용을 단순화하는 목적으로 개발되었습니다. 주로 다음과 같은 기능을 제공하며, 웹 개발에서 매우 널리 사용됩니다:
주요 기능
- DOM 조작: jQuery는 간편한 DOM(Document Object Model) 조작을 제공합니다. CSS 선택자를 사용하여 요소를 선택하고, 요소의 속성을 변경하거나 새로운 요소를 생성할 수 있습니다.
// 예시: id가 "myDiv"인 요소의 텍스트 변경 $("#myDiv").text("Hello, jQuery!"); - 이벤트 처리: 이벤트 핸들링을 단순화하여 클릭, 입력, 마우스 이동 등 다양한 이벤트를 처리할 수 있습니다.
// 예시: 버튼 클릭 이벤트 처리 $("#myButton").click(function() { alert("버튼이 클릭되었습니다!"); });
- 애니메이션: 요소의 숨기기/보이기, 슬라이드, 페이드 등의 애니메이션 효과를 제공하여 웹 페이지의 시각적 효과를 개선할 수 있습니다.
// 예시: 요소 숨기기 애니메이션 $("#myElement").hide(1000); // 1초 동안 숨기기
- AJAX 요청: 비동기적으로 서버와 데이터를 주고받을 수 있는 AJAX 요청을 쉽게 처리할 수 있습니다.
// 예시: AJAX GET 요청 $.get("https://api.example.com/data", function(data) { console.log("데이터:", data); });
- 유틸리티 메서드: 유틸리티 함수를 제공하여 데이터 타입 체크, 배열/객체 조작 등의 일반적인 작업을 간편하게 처리할 수 있습니다.
// 예시: 배열 요소 반복 처리 $.each(myArray, function(index, value) { console.log(index + ": " + value); });
jQuery의 장점
- 크로스 브라우징: 다양한 브라우저에서 일관된 동작을 보장합니다.
- 단순성과 편의성: DOM 조작과 이벤트 처리를 단순화하여 개발 시간을 단축시킵니다.
- 풍부한 플러그인: 다양한 플러그인을 제공하여 다양한 기능을 추가할 수 있습니다.
- API 문서의 풍부함: 사용법을 쉽게 익힐 수 있는 잘 정리된 API 문서가 제공됩니다.
jQuery의 사용 사례
- 웹 페이지 개발: HTML 요소의 동적 변경, 이벤트 처리 등을 간편하게 구현할 수 있습니다.
- 웹 애플리케이션 개발: AJAX를 이용한 데이터 통신, UI 요소의 동적 제어 등을 통해 사용자 경험을 향상시킬 수 있습니다.
- 모바일 애플리케이션 개발: jQuery Mobile을 활용하여 모바일 플랫폼에 최적화된 UI를 구축할 수 있습니다.
JQuery 사용하기
- 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.
- <head> 와 </head> 사이에 아래를 넣으면 끝!
function checkResult() {
let a = '사과'
$('#q1').text(a)
}
- $(’#아이디값’) 으로 어떤 html 태그를 바꿀 것인지 지정해준다.
- 지정했다면, 바꿔줄 명령어를 적어줍니다 text(a)를 넣어 글자 값으로 a를 넣는다.
리스트 자료형
let a = ['사과', '배', '감', '귤']
리스트의 형태의 코드를 적고 변수에 저장한다.
a의 내용을 문자열에서 리스트로 바꾼다.
let a = ['사과', '배', '감', '귤']
문자열에서 리스트의 두 번째 값으로 바꿔서 넣어본다.
자바스크립트 딕셔너리 자료형
딕셔너리 형태의 코드를 적고 변수에 저장한다.
let b = {'name' : '영수','age' : 30}
딕셔너리의 키 값을 불러내서 q2라는 아이디 값이 있는 곳에 넣어본다.
$('#q2').text(b['name'])
리스트-딕셔너리 자료형
리스트-딕셔너리 형태의 코드를 적고 변수에 저장해본다.
let c = [
{'name':'영수', 'age':30},
{'name':'철수', 'age':35}
]
리스트에서 원하는 딕셔너리를 부르고, 딕셔너리에서 키 값을 불러내서 q3에 넣어봅시다!
$('#q3').text(c[1]['age'])
EX)
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
$('#q2').empty() //이름과 나이로 나눠서 변수 지정
people.forEach((a)=>{
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살</p>`
$('#q2').append(temp_html)
})
'웹개발 기초정리(프엔)' 카테고리의 다른 글
| Fetch 정리. 1 (1) | 2024.07.05 |
|---|---|
| JQuery 기초정리. 2 (1) | 2024.07.05 |
| Javascript 정리. 1 (1) | 2024.07.02 |
| 웹 개발 기초정리. 2 (1) | 2024.07.02 |
| 웹개발 기초정리 .1 (1) | 2024.07.01 |