Post

JQuery 정리

Posted Updated
Preview Image
By Namyoonseo 10 min read

jQuery 선택자 요약

jQuery는 HTML 문서를 다루고 상호 작용하는 데 사용되는 JavaScript 라이브러리입니다. 간결하고 효율적인 방식으로 HTML 요소를 선택하고 조작하며, 브라우저 간 호환성 문제를 해결하는 데 도움을 줍니다.

주요 특징

  • 간결한 문법
  • DOM 조작
  • 이벤트 처리
  • AJAX 요청
  • 플러그인
  • 선택자 종류 및 의미

기본 선택자

  • 태그 선택자: <p> 요소를 선택합니다.
  • ID 선택자: #gnb 요소를 선택합니다.
  • 클래스 선택자: .logo 클래스를 가진 요소를 선택합니다.
  • 자식 선택자: #gnb > ul > li 요소를 선택합니다.
  • 하위 선택자: #gnb ul 요소를 선택합니다.
  • 인접 선택자: #visual + #content 요소를 선택합니다.
  • 형제 선택자: #visual ~ #footer 요소를 선택합니다.
  • 종속 선택자: div.util 요소를 선택합니다.
  • 그룹 선택자: .left, .right, #banner 요소를 선택합니다.
  • 전체 선택자: * 모든 요소를 선택합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 태그 선택자
$("p").css("color", "red"); // 모든 p 요소의 텍스트 색상을 빨간색으로 변경

// ID 선택자
$("#gnb").hide(); // #gnb 요소를 숨김

// 클래스 선택자
$(".logo").addClass("active"); // .logo 클래스를 가진 모든 요소에 "active" 클래스 추가

// 자식 선택자
$("#gnb > ul > li").click(function() {
  alert($(this).text()); // 클릭한 li 요소의 텍스트를 알림으로 출력
});

// 하위 선택자
$("#gnb ul").find("li").css("font-weight", "bold"); // #gnb 하위의 모든 li 요소의 글꼴 두께를 굵게 설정

// 인접 선택자
$("#visual + #content").fadeIn(500); // #visual 다음 요소인 #content를 500ms 동안 서서히 표시

// 형제 선택자
$("#visual ~ #footer").css("border", "1px solid #ccc"); // #visual의 형제 요소인 #footer에 테두리 설정

// 종속 선택자
$("div.util").hover(function() {
  $(this).css("background-color", "#eee");
}, function() {
  $(this).css("background-color", "#fff");
}); // div.util 요소에 마우스 오버/아웃 이벤트 처리

// 그룹 선택자
$(".left, .right, #banner").animate({
  opacity: 0.5
}, 1000); // .left, .right, #banner 요소의 투명도를 1초 동안 0.5로 변경

// 전체 선택자
$("*").css("font-family", "Arial, sans-serif"); // 모든 요소의 글꼴 패밀리를 Arial, sans-serif로 설정

속성 선택자

  • 요소[속성]: 속성을 가진 요소를 선택합니다.
  • 요소[속성=값]: 속성 값이 값인 요소를 선택합니다.
  • 요소[속성!=값]: 속성 값이 값이 아닌 요소를 선택합니다.
  • 요소[속성~=값]: 속성 값이 값를 포함하는 요소를 선택합니다.
  • 요소[속성*=값]: 속성 값이 값로 시작하는 요소를 선택합니다.
  • 요소[속성^=’값’]: 속성 값이 값로 시작하는 요소를 선택합니다.
  • 요소[속성$=’값’]: 속성 값이 값로 끝나는 요소를 선택합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// 속성을 가진 요소 선택
$("a[href]").attr("target", "_blank"); // 모든 a 요소에 target="_blank" 속성 추가

// 속성 값이 특정 값인 요소 선택
$("img[alt='logo']").css("display", "block"); // alt 속성 값이 "logo"인 img 요소를 블록으로 표시

// 속성 값이 특정 값이 아닌 요소 선택
$("input[type!='checkbox']").prop("checked", false); // type 속성 값이 "checkbox"가 아닌 모든 input 요소의 체크 상태 해제

// 속성 값이 특정 문자열을 포함하는 요소 선택
$("p:contains('jQuery')").addClass("highlight"); // 'jQuery' 문자열을 포함하는 p 요소에 "highlight" 클래스 추가

// 속성 값이 특정 문자열로 시작하는 요소 선택
$("li[id^='item']").css("list-style-type", "none"); // id 속성 값이 "item"으로 시작하는 li 요소의 목록 스타일 설정

// 속성 값이 특정 문자열로 끝나는 요소 선택
$("a[href$='.html']").attr("title", "HTML 페이지"); // href 속성 값이 ".html"로 끝나는 a 요소에 title 속성 추가

필터 선택자

  • even: 짝수 행 요소를 선택합니다.
  • odd: 홀수 행 요소를 선택합니다.
  • first: 첫 번째 요소를 선택합니다.
  • last: 마지막 요소를 선택합니다.
  • header: 헤딩 요소를 선택합니다.
  • eq(n): n번째 요소를 선택합니다.
  • gt(n): n보다 큰 인덱스를 가진 요소를 선택합니다.
  • lt(n): n보다 작은 인덱스를 가진 요소를 선택합니다.
  • not(.bg): .bg 클래스를 가지지 않은 요소를 선택합니다.
  • :root: HTML 요소를 선택합니다.
  • :animated: 움직이는 요소를 선택합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 짝수 행 요소 선택
$("tr:even").css("background-color", "#f0f0f0"); // 짝수 행 요소의 배경색을 #f0f0f0로 설정

// 홀수 행 요소 선택
$("tr:odd").find("td:last-child").css("text-align", "right"); // 홀수 행 요소의 마지막 td 요소의 텍스트 정렬을 오른쪽으로 설정

// 첫 번째 요소 선택
$("li:first").prepend("** "); // 첫 번째 li 요소 앞에 "** " 문자열 추가

// 마지막 요소 선택
$("td:last").append(" (마지막)"); // 마지막 td 요소 뒤에 " (마지막)" 문자열 추가

// 헤딩 요소 선택
$("header h1, header h2, header h3").css("font-size", "1.5em"); // header 내의 모든 h1, h2, h3 요소의 글꼴 크기를 1.5em으로 설정

// 특정 인덱스를 가진 요소 선택

자식 필터 선택자

  • first-child: 첫 번째 자식 요소를 선택합니다.
  • last-child: 마지막 자식 요소를 선택합니다.
  • first-of-type: 해당 유형의 첫 번째 요소를 선택합니다.
  • last-of-type: 해당 유형의 마지막 요소를 선택합니다.
  • nth-child(n): n번째 자식 요소를 선택합니다.
  • nth-last-child(n): 마지막에서 n번째 자식 요소를 선택합니다.
  • only-child: 하나뿐인 자식 요소를 선택합니다.
  • only-of-type: 해당 유형의 하나뿐인 요소를 선택합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// 태그 선택자
$("p").css("color", "red"); // 모든 p 요소의 텍스트 색상을 빨간색으로 변경

// ID 선택자
$("#gnb").hide(); // #gnb 요소를 숨김

// 클래스 선택자
$(".logo").addClass("active"); // .logo 클래스를 가진 모든 요소에 "active" 클래스 추가

// 자식 선택자
$("#gnb > ul > li").click(function() {
  alert($(this).text()); // 클릭한 li 요소의 텍스트를 알림으로 출력
});

// 하위 선택자
$("#gnb ul").find("li").css("font-weight", "bold"); // #gnb 하위의 모든 li 요소의 글꼴 두께를 굵게 설정

// 인접 선택자
$("#visual + #content").fadeIn(500); // #visual 다음 요소인 #content를 500ms 동안 서서히 표시

// 형제 선택자
$("#visual ~ #footer").css("border", "1px solid #ccc"); // #visual의 형제 요소인 #footer에 테두리 설정

// 종속 선택자
$("div.util").hover(function() {
  $(this).css("background-color", "#eee");
}, function() {
  $(this).css("background-color", "#fff");
}); // div.util 요소에 마우스 오버/아웃 이벤트 처리

// 그룹 선택자
$(".left, .right, #banner").animate({
  opacity: 0.5
}, 1000); // .left, .right, #banner 요소의 투명도를 1초 동안 0.5로 변경

// 전체 선택자
$("*").css("font-family", "Arial, sans-serif"); // 모든 요소의 글꼴 패밀리를 Arial, sans-serif로 설정
javascript
Jquery
This post is licensed under CC BY 4.0 by the author.