SeouliteLab

아래는 jQuery를 사용하여 div 요소 아래에 유일한 자식으로 있는 버튼에 스타일을 적용하는 예제입니다. $( "div button:only-child" ).text( "Alone" ).css( "border", "2px blue solid" ); 설명: $() 함수를 사용하여 jQuery 선택자를 지정합니다. "div button:only-child"는 div 요소 아래에 있는 유일한 자식으로 있는 버튼을 선택합니다. text() 함수를 사용하여 선택된 버튼의 텍스트를 "Alone"으로 변경합니다. css() 함수를 사용하여 선택된 버튼에 파란색 실선 테두리를 적용합니다. 예제 2: 유일한 자식인 이미지에 스타일 적용하기 $( "div img:only-child" ).css( "width", "10..

아래는 jQuery를 사용하여 테이블의 홀수 행에 배경색을 변경하는 예제입니다. $( "tr:odd" ).css( "background-color", "#bbbbff" ); 설명: $() 함수를 사용하여 jQuery 선택자를 지정합니다. "tr:odd"는 테이블의 홀수 번째 행을 선택합니다. css() 함수를 사용하여 선택된 행의 배경색을 #bbbbff로 변경합니다. 예제 2: 짝수 행에 스타일 변경하기 $( "tr:even" ).css( "background-color", "#ffbbbb" ); 설명: 이 예제는 테이블의 짝수 번째 행에 대해 배경색을 변경합니다. 예제 3: 특정 클래스를 가진 행에 스타일 변경하기 $( "tr.special" ).css( "font-weight", "bold" ); 설..

아래는 jQuery를 사용하여 두 번째 형제 요소()를 선택하고, 해당 요소 뒤에 새로운 내용을 추가하고 클래스를 추가하는 예제입니다. $( "span:nth-of-type(2)" ) .append( " is 2nd sibling span" ) .addClass( "nth" ); 설명: $() 함수를 사용하여 jQuery 선택자를 지정합니다. "span:nth-of-type(2)"는 문서 내의 두 번째 요소를 선택합니다. append() 함수를 사용하여 선택된 두 번째 요소의 뒤에 새로운 내용인 is 2nd sibling span을 추가합니다. addClass() 함수를 사용하여 선택된 두 번째 요소에 "nth" 클래스를 추가합니다. 예제 2: 다양한 형제 요소에 스타일 변경과 클래스 추가 $( "h2:..

아래는 jQuery를 사용하여 목록()의 뒤에서 두 번째 유형 요소()에 새로운 내용( - 뒤에서 두 번째!)을 추가하는 예제입니다. $( "ul li:nth-last-of-type(2)" ).append( " - 뒤에서 두 번째!" ); 설명: $() 함수를 사용하여 jQuery 선택자를 지정합니다. "ul li:nth-last-of-type(2)"는 ul 요소 아래의 뒤에서 두 번째 유형의 li 요소를 선택합니다. append() 함수를 사용하여 선택된 li 요소에 새로운 내용인 - 뒤에서 두 번째!을 추가합니다. 예제 2: 목록의 뒤에서 두 번째 유형 요소에 아이콘 추가하기 $( "ul li:nth-last-of-type(2)" ).append( "" ); 설명: 이 예제는 ul 요소 아래의 뒤에서..

아래는 jQuery를 사용하여 목록()의 뒤에서 두 번째 자식 요소()에 새로운 내용( - 뒤에서 두 번째!)을 추가하는 예제입니다. $( "ul li:nth-last-child(2)" ).append( " - 뒤에서 두 번째!" ); 설명: $() 함수를 사용하여 jQuery 선택자를 지정합니다. "ul li:nth-last-child(2)"는 ul 요소 아래의 뒤에서 두 번째 자식 li 요소를 선택합니다. append() 함수를 사용하여 선택된 li 요소에 새로운 내용인 - 뒤에서 두 번째!을 추가합니다. 예제 2: 목록의 뒤에서 두 번째 자식 요소에 아이콘 추가하기 $( "ul li:nth-last-child(2)" ).append( "" ); 설명: 이 예제는 ul 요소 아래의 뒤에서 두 번째 자..

아래는 jQuery를 사용하여 목록()의 두 번째 자식 요소()에 새로운 내용( - 2nd!)을 추가하는 예제입니다. $( "ul li:nth-child(2)" ).append( " - 2nd!" ); 설명: $() 함수를 사용하여 jQuery 선택자를 지정합니다. "ul li:nth-child(2)"는 ul 요소 아래의 두 번째 자식 li 요소를 선택합니다. append() 함수를 사용하여 선택된 li 요소에 새로운 내용인 - 2nd!을 추가합니다. 예제 2: 목록의 각 두 번째 자식 요소에 아이콘 추가하기 $( "ul li:nth-child(2n)" ).append( "" ); 설명: 이 예제는 ul 요소 아래의 각 두 번째 자식 li 요소에 별 모양의 아이콘을 추가합니다. 예제 3: 첫 번째 ul ..

아래는 jQuery를 사용하여 선택된 입력 요소 중에서 체크되지 않은(input:not(:checked)) 요소 뒤에 나타나는 span 요소의 배경색을 노란색으로 변경하는 예제입니다. $( "input:not(:checked) + span" ).css( "background-color", "yellow" ); 설명: $() 함수는 jQuery 선택자를 사용하여 HTML 요소를 선택합니다. input:not(:checked)는 체크되지 않은(input:not(:checked)) 모든 입력 요소를 선택합니다. + 연산자를 사용하여 선택된 입력 요소 바로 뒤에 나타나는(span) 요소를 선택합니다. css() 함수를 사용하여 선택된 span 요소의 배경색을 노란색으로 변경합니다. 예제 2: 체크된 입력 요소 ..

jQuery의 다음 형제 선택자인 (“prev ~ siblings”)는 특정 요소 다음에 오는 모든 형제 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하면 웹 페이지에서 특정 요소와 그 다음에 오는 모든 형제 요소를 선택하여 동적으로 조작할 수 있습니다. 예제 1: 버튼 클릭 시 다음 형제 요소에 스타일 적용하기 스타일 변경 첫 번째 문단 두 번째 문단 세 번째 문단 설명: 위 예제는 버튼을 클릭하면 해당 버튼 다음에 오는 모든 형제 요소의 글꼴을 굵게 만듭니다. 예제 2: 특정 클래스를 가진 다음 형제 요소에 스타일 적용하기 선택된 요소 첫 번째 문단입니다. 두 번째 문단입니다. 설명: 이 예제는 .selected 클래스를 가진 요소 다음에 오는 모든 p 요소의 글꼴 색상을 파란색으로 변경합니다. ..

jQuery의 인접 형제 선택자인 (“prev + next”)는 특정 요소의 바로 다음에 오는 형제 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하면 웹 페이지에서 특정 요소와 그 다음에 오는 요소를 선택하여 스타일을 변경하거나 동적으로 조작할 수 있습니다. 예제 1: 버튼 클릭 시 다음 요소 보이기 내용 토글 이 내용은 토글됩니다. 다음 요소는 이 문단입니다. 설명: 위 예제는 버튼을 클릭하면 해당 버튼 다음에 오는 요소인 .content를 토글하여 보이거나 숨깁니다. 예제 2: 특정 클래스를 가진 요소 스타일 변경하기 선택된 요소 이전 요소에 스타일이 적용됩니다. 다음 요소에는 적용되지 않습니다. 설명: 이 예제는 .selected 클래스를 가진 요소 바로 다음에 오는 p 요소에 글꼴을 굵게 만듭..

jQuery의 다중 선택자인 (“selector1, selector2, selectorN”)는 여러 개의 선택자를 한 번에 선택하여 조작할 수 있는 기능을 제공합니다. 이를 활용하면 동시에 여러 요소를 선택하여 스타일을 변경하거나 이벤트를 추가할 수 있습니다. 예제 1: 여러 클래스를 가진 요소 선택하기 이 요소는 class1을 가집니다. 이 요소는 class2를 가집니다. 이 요소는 class3을 가집니다. 설명: 위 예제는 class1 또는 class2를 가진 요소의 글꼴 색상을 빨간색으로 변경합니다. 예제 2: 여러 태그를 한 번에 선택하기 제목 1 제목 2 제목 3 이 요소는 p 태그입니다. 설명: 이 예제는 h1, h2, h3 태그를 모두 선택하여 글꼴을 기울임체로 만듭니다. 예제 3: ID와 ..