SeouliteLab

:first-of-type 선택자는 해당 요소의 형제 중에서 첫 번째로 등장하는 동일한 유형의 요소를 선택하는 데 사용됩니다. 예를 들어, div 요소 중에서 첫 번째로 등장하는 div 요소를 선택할 수 있습니다. 이 선택자를 사용하면 특정 유형의 요소 중에서 첫 번째로 등장하는 요소를 쉽게 선택하여 조작할 수 있습니다. 여러 예제를 통해 이 선택자의 활용법을 알아보겠습니다. 예제 1: div 요소 중에서 첫 번째로 등장하는 요소 스타일링하기 첫 번째로 등장하는 div 요소 두 번째로 등장하는 div 요소 다른 유형의 요소 세 번째로 등장하는 div 요소 $("div:first-of-type").addClass("first-div"); 이 예제는 div 요소 중에서 첫 번째로 등장하는 요소를 선택하여 "..

:first-child 선택자는 해당 요소의 첫 번째 자식 요소를 선택하는데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 첫 번째 자식 요소를 쉽게 선택하여 조작할 수 있습니다. 여러 예제를 통해 이 선택자의 활용법을 알아보겠습니다. 예제 1: 리스트에서 첫 번째 항목 스타일링하기 첫 번째 항목 두 번째 항목 세 번째 항목 $("li:first-child").addClass("first-item"); 이 예제는 리스트에서 첫 번째 항목을 선택하여 "first-item" 클래스를 추가합니다. 예제 2: 테이블에서 첫 번째 행 스타일링하기 데이터 1 데이터 2 데이터 3 $("tr:first-child").addClass("first-row"); 이 예제는 테이블에서 첫 번째 행을 선택하여 "first-..

jQuery의 :file 선택자는 파일 업로드(input type="file") 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 파일 업로드를 담당하는 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 파일 업로드 요소 스타일링하기 $(":file").css("border", "2px solid red"); 이 예제는 모든 파일 업로드 요소에 빨간 테두리를 추가하여 스타일링합니다. 예제 2: 파일 업로드 요소에 이벤트 추가하기 $(":file").change(function() { var fileName = $(this).val().split("\\").pop(); $("#fileInfo").text("선택된 파일: " + ..

jQuery의 :even 선택자는 짝수 번째 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 짝수 인덱스에 위치한 요소를 쉽게 선택하여 조작할 수 있습니다. 여러 가지 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 리스트에서 짝수 번째 항목 선택하기 항목 1 항목 2 항목 3 항목 4 항목 5 $("li:even").addClass("even-item"); 이 예제는 리스트에서 짝수 번째 항목을 선택하여 "even-item" 클래스를 추가합니다. 예제 2: 테이블에서 짝수 번째 행 선택하기 데이터 1 데이터 2 데이터 3 데이터 4 $("tr:even").addClass("even-row"); 이 예제는 테이블에서 짝수 번째 행을 선택하여 "even-row" 클래스를 추가합니다. 예제..

jQuery의 :eq() 선택자는 일치하는 요소 중에서 지정된 인덱스에 해당하는 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 특정한 위치에 있는 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 리스트에서 특정한 항목 선택하기 항목 1 항목 2 항목 3 $("li:eq(1)").addClass("selected-item"); 이 예제는 리스트에서 인덱스가 1인 항목을 선택하여 "selected-item" 클래스를 추가합니다. 예제 2: 테이블에서 특정한 행 선택하기 데이터 1 데이터 2 데이터 3 $("tr:eq(2)").addClass("selected-row"); 이 예제는 테이블에서 인덱스가 2인 행을 선택하여 "selected-..

jQuery의 :enabled 선택자는 활성화된(enabled) 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 활성화된 입력 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 활성화된 입력 요소에 스타일 적용하기 $(":enabled").addClass("enabled-input"); 이 예제는 활성화된 입력 요소를 선택하여 "enabled-input" 클래스를 추가하여 스타일을 적용합니다. 예제 2: 활성화된 버튼 요소 선택하기 확인 취소 제출 $("button:enabled").addClass("enabled-button"); 이 예제는 활성화된 버튼 요소를 선택하여 "enabled-button" 클래스를 추가합니다. ..

jQuery의 :empty 선택자는 내용이 비어 있는 요소를 선택하는 데 사용됩니다. 즉, 해당 요소가 자식 요소나 텍스트를 포함하지 않고 비어 있는 경우에 선택됩니다. 이 선택자를 사용하면 웹 페이지에서 내용이 없는 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 내용이 비어 있는 요소 선택하기 내용이 있는 요소 $("div:empty").addClass("empty-element"); 이 예제는 내용이 비어 있는 요소를 선택하여 "empty-element" 클래스를 추가합니다. 예제 2: 내용이 비어 있는 요소 선택하기 내용이 있는 요소 $("span:empty").text("내용 없음"); 이 예제는 내용이 비어 있는 요소를 선택하여 "..

jQuery의 요소 선택자는 HTML 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 특정한 HTML 요소를 쉽게 선택하여 조작할 수 있습니다. 여러 가지 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 모든 요소 선택하기 첫 번째 단락 두 번째 단락 세 번째 단락 $("p").addClass("highlight"); 이 예제는 모든 요소를 선택하여 "highlight" 클래스를 추가합니다. 예제 2: 모든 요소 선택하기 링크 1 링크 2 링크 3 $("a").addClass("link"); 이 예제는 모든 요소를 선택하여 "link" 클래스를 추가합니다. 예제 3: 모든 요소 선택하기 $("input").addClass("input-field"); 이 예제는 모든 요소를 선택하여 "i..

jQuery의 :disabled 선택자는 비활성화된(disabled) 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 비활성화된 입력 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 비활성화된 입력 요소에 스타일 적용하기 $(":disabled").addClass("disabled-input"); 이 예제는 비활성화된 입력 요소를 선택하여 "disabled-input" 클래스를 추가하여 스타일을 적용합니다. 예제 2: 비활성화된 버튼 요소 선택하기 확인 취소 제출 $("button:disabled").addClass("disabled-button"); 이 예제는 비활성화된 버튼 요소를 선택하여 "disabled-button..

jQuery의 후손 선택자인 (“상위요소 하위요소”)는 상위 요소의 하위에 있는 모든 하위 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 HTML 구조에서 특정한 상위 요소 아래에 있는 하위 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다. 예제 1: 상위 요소의 모든 하위 요소 선택하기 자식 요소 1 자식 요소 2 자식 요소 3 $(".parent .child").addClass("highlight"); 이 예제는 클래스가 "parent"인 상위 요소 아래에 있는 모든 클래스가 "child"인 하위 요소를 선택하여 "highlight" 클래스를 추가합니다. 예제 2: 특정 폼 안에 있는 모든 입력 요소 선택하기 $("#myForm input")...