jQuery
: 오픈 소스 기반의 자바스크립트 라이브러리
- 웹 사이트에 자바스크립트를 더욱 손쉽게 활용할 수 있게 해줌
- 짧고 단순한 코드로도 웹 페이지에 다양한 효과나 연출을 적용 가능
jQuery 객체
jQuery함수를 이용해서 선택한 요소들에 대해 처리할 작업을 프로퍼티로 가지고 있는 객체
- $ 함수 사용
- $ 함수의 매개 변수에 문서 객체, CSS 형식, HTML 형식의 문자열 삽입
// 일반 문서 객체로 생성
$(document)
// CSS 선택자로 생성
$('h1')
// HTML 문자열로 생성
$('<h1></h1>')
문서 객체
- $(document).ready(): 문서 객체의 생성 완료 시점을 잡는 이벤트 연결
CSS 선택자
📍 메소드
- parent(): 부모 태그 선택
$('h1').parent()
- find(): 후손 태그 찾음
$('h1').find('i')
문서 객체 조작
문서 객체 반복
$(document).ready(function() {
// h1 태그 모두 추출
const $headers = $('h1');
for(let i = 0; i < $headers.length; i++){
if(i % 2 == 1){
// i번째 요소 추출
const domElement = $headers.get(i);
// 배경 색상 적용
$(domElement).css('backgroundColor', 'red');
}
}
})
- each(): 선택한 문서 객체에 반복 적용
$(document).ready(function() {
// h1 태그 모두 추출 후 반복
$('h1').each(function(index, element){
if(index % 2 == 1){
$(this).css('backgroundColor', 'red');
}
}
})
글자 조작
- text(): html 태그 내부 문자를 조작
- html(): html 태그 내부의 문자를 조작(HTML 태그 인식)
- get 방식
- text(): 모든 문서 객체 내부의 문자 출력
- html(): 첫번째 문서 객체 내부의 문자 출력
- set 방식
- 두 메소드 모두 선택한 모든 문서 객체에 적용
- get 방식
속성 조작
- attr()
$(document).ready(function() {
// h1 태그 모두 추출 후 반복
$('img').each(function(index, element){
if(index % 2 == 1){
$(this).attr('src', 'htt[s://via.placeholder.com/' + (index + 1) * 100 + 'x100');
}
}
})
문서 객체 생성
- $() 함수의 매개 변수에 HTML 형식의 문자열 입력
$(document).ready(function() {
// h1 태그 모두 추출 후 반복
$('<h1></h1>')
.text('안녕하세요)
.appendTo('body'); // body 태그 안쪽 뒤에 추가
})
이벤트 연결
- on(): 이벤트 연결
- off(): 이벤트 제거
- one(): 이벤트 한번만 연결
직접 연결
이벤트 직접 연결은 새로 생성한 태그에 이벤트 연결 X
$(document).ready(function() {
// h1 태그 모두 추출 후 반복
$('h1').on('click', function(event){
const text = $(this).text();
alert(text);
});
});
간접 연결
부모에게 이벤트를 위임해서 부모가 이벤트를 처리하게 하는 것
$(document).ready(function() {
// h1 태그 모두 추출 후 반복
$('body').on('click', 'h1', function(event){
$('<h1></h1>').text($(this).text()).appendTo('body');
});
});
728x90
반응형