제이쿼리로 엘리먼트 보이기, 감추기, 활성화, 비활성화 하기

제이쿼리로 엘리먼트(들)을 보이게, 또는 보이지 않게 하는 방법은 5가지가 있습니다.

가장 추천하는 방법은 제이쿼리 내장 메써드인 .show()/.hide() 입니다.

제이쿼리 기본 메써드 사용

- 파라메터로 밀리세컨드 단위인 양수값을 받아 페이드 인/아웃 애니메이션 효과 적용 가능.

- 기본적으로는 CSS "display" 속성을 변경하는 것과 동일하지만, 제이쿼리 내부에 변수값으로 감춤 전의 "display" 속성값을 저장해두기 때문에 .show() 메써드로 보이게 했을 때 감추기 전의 "display" 속성값으로 복구되는 특징이 있습니다.

$.("element selector").show();$.("element selector").hide();

CSS "display" 속성 사용( display )

- 화면에 보이지 않고 자리도 차지하지 않음.

- 보이기 "block" 속성 대신 감추기전 엘리먼트 속성인 "inline", "inline-block" 으로 사용해도 보이기가 됩니다.

$.("element selector").css("display", "none" );$.("element selector").css("display", "block" );제이쿼리 토글 메써드 사용- 파라메터 없이 사용해서 엘리먼트를 보이게, 또는 보이지 않게 생태를 전환.- CSS "display" 속성을 변경하는 것과 동일하며, 따라서 감춤 상태가 되면 자리를 차지하지 않습니다.$.("element selector").toggle();

CSS "opacity" 속성 사용

- 투명도로 보이게./감추기 효과 적용. 자리를 차지함.

$.("element selector").css("opacity", 0 );$.("element selector").css("opacity", 1 );

CSS "visibility" 속성 사용

- 화면에 보이지 않지만 자리를 차지함.

$.("element selector").css("visibility", "hidden" );$.("element selector").css("visibility", "visible" );* CSS 속성 파라메터 적용 방법$.("element selector").css("opacity", 1 );이런 방식으로 사용 가능하며, 아래처럼 여러개의 값을 지정하는 JSON 스타일로도 단일 속성을 부여할 수 있습니다.

$.("element selector").css( {"opacity": 1} );

엘리먼트 활성화/비활성화는 

자바스크립트 프로퍼티 속성 사용

$("element selector").prop("disabled", true );$("element selector").prop("disabled", false );