[jQuery] 예제와 함께하는 제이쿼리 강의 (jQuery - show() and hide())

jQuery - hide() and show()

제이쿼리에는 hide() 와 show() 메소드를 통해 HTML 요소를 숨기고, 보이게 해줄 수 있는 기능을 가지고 있습니다.

예시

결과값을 보면, 박스가 사라지고 나타나는 것을 볼 수 있습니다.

문법

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

각 메소드에 속도를 제어할 수 있게 도와주는 인자값을 넣을 수 있는데요. 값은 milliseconds 단위로 입력하면 됩니다.

콜백함수를 인자 값으로 넣을 수도 있는데요 이 함수를 통해서 hide() 나 show() 메소드가 완료된 다음에 어떠한 처리를 가능하게 해줍니다.

쉽게 말해서, hide()와 show() 메소드는 동작속도와 동작 후에 사용자 지정에 따라서 추가적인 event를 생성할 수 있습니다.

예시

예시에서 결과를 확인하면 박스가 사라지고, 다시 나타날 때 effect가 생겨났음을 알 수 있습니다.

자바스크립트에서 이러한 기능을 구현할 때, 꽤나 번거롭고 힘든 작업이 될 수 있는 부분을 jquery는 조금 극단적으로 말해서 단 4줄정도로 깔끔하게 처리할 수 있습니다.

이러한 장점때문에 개발자들이 jQuery를 많이 사용하는 것이죠.

jQuery toggle()

jquery에서는 여기에 그치지않고 이 기능을 정말 쉽게 구현할 수 있게 toggle() 메소드를 제공해줍니다. 

정말 기분좋은 코딩을 하게 도와주는 자바스크립트 라이브러리입니다.

문법

$(selector).toggle(speed,callback);

toggle() 메소드 또한 같은 인자값(parameter)를 가지고 있습니다.

예시

위 예시를 보면 정말 이 기능을 구현한 코드는 단 1줄로 완성됐음을 알 수 있습니다.

자바스크립트에서는 정말 상상도 할 수 없는 라인 수입니다.

마지막으로 앞에서 설명드렸을 때 인자값으로 콜백함수를 넘긴다는 말씀을 드렸는데요.

콜백함수의 정의는 제 블로그에 자세히 정리되어있습니다.

http://webruden.tistory.com/67

콜백함수 예시

간단한 예시를 준비했습니다. toggle 메소드의 동작이 끝날 때 hi라는 알림창이 출력될 것입니다.

"제이쿼리야! toggle 메소드가 끝날 때 내가 콜백함수(너 끝나면 이 동작해 !)로 지정해 놓은 내용을 동작시켜줘!"

이렇게 이해하시면 이해하기 좀 쉽나요?

jQuery는 정말 무궁무진한 기능을 가지고 있습니다. 오늘을 시작으로 jQuery에 대한 내용을 예시를 통해서 앞으로 정복해 보도록 합시다. 이 강의를 꾸준히 따라오시면, 웹사이트를 제작할 때 인터렉티브한 웹사이트를 쉽게 제작할 수 있는 역량을 가질 수 있을겁니다.