우리는 간단한 UI 를 만들때에
1. 적용하고자 하는 UI의 HTML 과 CSS 를 미리 만들어 두고,
2. css의 display를 none 으로 숨겨둔 후에,
3. 필요할때만 어떤 이벤트가 실행되면 의도한 UI의 display 를 block으로 바꾸어 주는 과정을 거쳣다.
그런데 우리는 이제 jQuery 를 이용해서 보다 더 간편하고 쉽게 사용해 보자.
이전에는
document.getElementById('list' ).addEventListener('click', function( ) {
document.getElementsByClassName('list-group')[0].style.display = 'none';
};
이렇게 길게 썻다면 이제는
$('.list').on('click', function( ){
$('.list-group').style.display = 'none';
}
이렇게 간략하게 쓸 수 있다.
그런데 display = 'none'; 와 유사한 기능을 가진 애가 있는데 바로 .hide( )
$('.list-group').hide()
그 외에도 다양한 간단 UI 용 애니메이션이 가능하다.
$('.hello').slideToggle()
$('.hello').fadeToggle()
@@그렇지만 간단한 UI용 애니메이션은 css로 해결하는게 성능적으로 더 좋다.
JS로 해결하려고 하면 간단하게 되긴 하지만, 너무 많은일을 JS가 해결하고 있음으로 성능이 저하될수 있다.
'JS (Java Script)' 카테고리의 다른 글
함수 이름 작명에 관하여 (0) | 2023.06.26 |
---|---|
e.preventDefault() (0) | 2023.06.26 |
콜백 함수. / addEventListener( ) (0) | 2023.06.26 |
페이지의 이동 : form 태그 / 비밀번호 글자수 제한 (0) | 2023.06.26 |
.addEventListener / .on / jQuery 이용시 알면 좋은것들 / click / dblclick / input / change (0) | 2023.06.26 |