SeouliteLab

jQuery의 siblings() 메서드는 선택한 요소의 모든 형제 요소를 선택하는 데 사용됩니다. 이를 통해 동일한 부모 요소를 가진 다른 형제 요소를 쉽게 조작할 수 있습니다. 아래는 siblings() 메서드를 활용한 다양한 예제를 살펴보겠습니다. 예제 1: 기본적인 사용법 $( ".hilite" ).siblings().css( "background-color", "yellow" ); 이 예제는 클래스가 "hilite"인 요소의 모든 형제 요소에 대해 배경색을 노란색으로 설정합니다. siblings() 메서드를 사용하면 선택한 요소의 모든 형제 요소를 선택할 수 있습니다. 예제 2: 특정 선택자를 이용한 선택 $( ".selected" ).siblings( "input[type='text&#..

jQuery의 prevUntil() 메서드는 선택한 요소의 이전 형제 요소를 선택하는 데 사용됩니다. 하지만 특정 선택자를 만날 때까지의 이전 형제 요소만 선택합니다. 이를 통해 특정 조건까지의 이전 형제 요소를 쉽게 조작할 수 있습니다. 아래는 prevUntil() 메서드를 활용한 다양한 예제를 살펴보겠습니다. 예제 1: 기본적인 사용법 $( "#term-3" ).prevUntil().css( "color", "blue" ); 이 예제는 id가 "term-3"인 요소의 이전 형제 요소를 모두 선택하고, 이전 형제 요소에 대해 글자색을 파란색으로 설정합니다. prevUntil() 메서드를 사용하면 선택한 요소의 이전 형제 요소 중에서 특정 조건을 만날 때까지의 요소를 선택할 수 있습니다. 예제 2: 특정..

jQuery의 prevAll() 메서드는 선택한 요소의 모든 이전 형제 요소를 선택하는 데 사용됩니다. 이를 통해 DOM 구조에서 여러 개의 이전 형제 요소를 쉽게 조작할 수 있습니다. 아래는 prevAll() 메서드를 활용한 다양한 예제를 살펴보겠습니다. 예제 1: 기본적인 사용법 $( "li.third-item" ).prevAll().css( "font-weight", "bold" ); 이 예제는 클래스가 "third-item"인 요소의 모든 이전 형제 요소에 대해 글자의 굵기를 설정합니다. 따라서 "third-item" 클래스를 가진 요소의 이전에 있는 모든 형제 요소에 대해 조작을 수행합니다. 예제 2: 특정 선택자를 이용한 선택 $( "div.content" ).prevAll( "h2" ).ad..

jQuery의 prev() 메서드는 선택한 요소의 바로 이전 형제 요소를 선택하는 데 사용됩니다. 이를 통해 DOM 구조에서 이전 형제 요소를 쉽게 조작할 수 있습니다. 아래는 prev() 메서드를 활용한 다양한 예제를 살펴보겠습니다. 예제 1: 기본적인 사용법 $( "li.third-item" ).prev().css( "color", "red" ); 이 예제는 클래스가 "third-item"인 요소의 바로 이전 형제 요소에 대해 글자색을 빨간색으로 설정합니다. 따라서 "third-item" 클래스를 가진 요소의 바로 앞에 있는 형제 요소에 대한 조작을 수행합니다. 예제 2: 특정 선택자를 이용한 선택 $( "h2" ).prev( "p" ).addClass( "highlight" ); 이 예제는 요소의 ..

jQuery의 parentsUntil() 메서드는 선택한 요소의 부모 요소를 선택하는 데 사용됩니다. 하지만 parentsUntil()은 특정 선택자를 만날 때까지 부모 요소를 선택합니다. 이를 통해 특정 조건까지의 부모 요소를 쉽게 탐색할 수 있습니다. 아래는 parentsUntil() 메서드를 활용한 다양한 예제를 살펴보겠습니다. 예제 1: 기본적인 사용법 $( "li.item-a" ).parentsUntil( ".level-1" ).css( "background-color", "yellow" ); 이 예제는 클래스가 "item-a"인 요소의 부모 요소 중에서 클래스가 "level-1"인 요소를 만날 때까지의 모든 부모 요소에 대해 배경색을 노란색으로 설정합니다. 따라서 "level-1" 클래스를 가..

jQuery의 parents() 메서드는 선택한 요소의 모든 부모 요소를 선택하는 데 사용됩니다. 이를 통해 DOM 구조를 따라 부모 요소를 탐색할 수 있습니다. 아래는 parents() 메서드를 활용한 다양한 예제를 살펴보겠습니다. 예제 1: 기본적인 사용법 $( "li.item-a" ).parents().css( "background-color", "yellow" ); 이 예제는 클래스가 "item-a"인 요소의 모든 부모 요소에 대해 배경색을 노란색으로 설정합니다. 여기서 parents() 메서드는 선택한 요소의 모든 부모 요소를 반환하며, 그에 따라 배경색이 변경됩니다. 예제 2: 특정 부모 요소 지정 $( "li.item-b" ).parents( "ul" ).css( "border", "2px ..

jQuery의 parent() 메서드는 선택한 요소의 부모 요소를 반환합니다. 이를 통해 요소의 부모 요소를 선택하고 조작할 수 있습니다. 이번 글에서는 parent() 메서드의 사용법과 활용 예제를 살펴보겠습니다. 예제 1: parent() 메서드의 기본 사용 $("li.item-a").parent().css("border", "2px solid red"); 이 예제는 클래스가 "item-a"인 리스트 아이템의 부모 요소를 선택하고, 해당 요소의 테두리를 빨간색 실선으로 변경합니다. 예제 2: 부모 요소에 클래스 추가하기 $("li.item-a").parent().addClass("highlight"); 이 예제는 클래스가 "item-a"인 리스트 아이템의 부모 요소를 선택하고, 해당 요소에 "high..

jQuery의 offsetParent() 메서드는 선택한 요소의 offset 부모 요소를 반환합니다. offset 부모 요소는 해당 요소의 위치를 결정하는 데 중요한 역할을 합니다. 이 메서드를 사용하여 요소의 위치를 조정하거나 위치를 계산하는 데 유용하게 활용할 수 있습니다. 예제 1: offsetParent() 메서드의 기본 사용 $("li.item-a").offsetParent().css("background-color", "lightblue"); 이 예제는 item-a 클래스를 가진 리스트 아이템의 offset 부모 요소를 선택하고, 해당 요소의 배경색을 연한 파란색으로 변경합니다. 예제 2: offsetParent()를 활용한 위치 조정 var offsetParent = $("li.item-a"..

jQuery의 odd() 메서드는 선택한 요소 집합에서 홀수 번째 요소들을 선택하는 데 사용됩니다. 이를 활용하여 리스트의 홀수 번째 아이템을 선택하고 조작할 수 있습니다. 예제 1: 홀수 번째 리스트 아이템 선택하기 $("ul li").odd().css("font-weight", "bold"); 이 예제는 페이지의 모든 리스트 아이템 중에서 홀수 번째 아이템을 선택하고, 해당 아이템의 글꼴을 굵게 변경합니다. 예제 2: 홀수 번째 리스트 아이템에 클래스 추가하기 $("ul li").odd().addClass("highlight"); 이 예제는 페이지의 모든 리스트 아이템 중에서 홀수 번째 아이템을 선택하고, 해당 아이템에 highlight 클래스를 추가합니다. 예제 3: 홀수 번째 리스트 아이템 숨기기..

jQuery의 not() 메서드를 사용하면 선택한 요소 집합에서 지정된 필터를 제외할 수 있습니다. 이를 활용하여 짝수 번째 리스트 아이템을 제외하고 홀수 번째 리스트 아이템만 선택할 수 있습니다. 예제 1: 짝수 번째 리스트 아이템 제외하기 $("li").not(":nth-child(2n)").css("color", "red"); 이 예제는 페이지의 모든 리스트 아이템 중에서 짝수 번째 아이템을 제외하고, 홀수 번째 아이템의 텍스트 색상을 빨간색으로 변경합니다. 예제 2: 짝수 번째 리스트 아이템 제외하고 클래스 추가하기 $("li").not(":nth-child(2n)").addClass("highlight"); 이 예제는 페이지의 모든 리스트 아이템 중에서 짝수 번째 아이템을 제외하고, 홀수 번째 ..