SeouliteLab

jQuery를 사용한 부모 요소가 있는 셀의 페이딩 본문

프로그래밍

jQuery를 사용한 부모 요소가 있는 셀의 페이딩

Seoulite Lab 2024. 4. 12. 10:25

아래는 jQuery를 사용하여 부모 요소가 있는 셀에 대해 페이딩 효과를 적용하는 예제입니다.

$( "td:parent" ).fadeTo(1500, 0.3);

설명:

  1. $() 함수를 사용하여 jQuery 선택자를 지정합니다.
  2. "td:parent"는 부모 요소를 가지고 있는 모든 셀(<td>)을 선택합니다.
  3. fadeTo() 함수를 사용하여 선택된 셀에 1.5초 동안 페이딩 효과를 적용합니다. 투명도를 0.3으로 설정하여 부모 요소가 있는 셀을 흐릿하게 만듭니다.

예제 2: 자식 요소가 있는 셀에 스타일 변경하기

$( "td:empty" ).css("background-color", "#ffeeaa");

설명:
이 예제는 자식 요소가 없는 모든 셀(<td>)을 선택하여 배경색을 변경합니다.

예제 3: 부모 요소가 있는 셀의 텍스트 스타일 변경하기

$( "td:parent" ).css("font-weight", "bold").css("color", "blue");

설명:
이 예제는 부모 요소를 가지고 있는 모든 셀(<td>)의 텍스트를 굵게 만들고 파란색으로 변경합니다.