💻 자주 쓰이는 여러 함수
저번 글에선 이벤트를 작성하는 방법에 대해 알아보았다. 이번에는 자주 사용되는 여러 이벤트들을 알아보려고 한다.
⭐️ 기본 이벤트
🔥 show()와 hide()
특정 엘리먼트를 보이게 하거나 숨기는 이벤트이다. 괄호 안에 밀리초나 fast, slow와 같은 예약어를 넣어주어 해당 이벤트의 속도를 조절할 수 있다.
<h1>숨기기, 보이기</h1> <p> <button id="btnhide">문장 숨기기</button> <button id="btnshow">문장 표시하기</button> </p> <div>안녕하세요, jquery 입니다.</div>
$('btnhide').on('click', function(){ $('div').hide(2000) // 2000ms의 속도로 사라지기 }); $('btnshow').on('click', function(){ $('div').show('fast'); // slow도 사용가능 });
🔥 toggle()
show와 hide를 한 가지 동작으로 제어할 수 있는 이벤트이다. 역시 괄호 안에 예약어를 넣어주어 속도를 조절할 수 있다.
<h1>toggle()</h1> <p> <button id="btnToggle">문장 토글</button> </p> <div>안녕하세요. 제이쿼리입니다.</div>
$('#btnToggle').on('click', function(){ $('div').toggle(2000); });
⭐️ 기타 애니메이션 처리
역시 괄호 안에 예약어를 넣어주어 속도를 조절할 수 있다.
🔥 fadeIn(), fadeOut(), fadeToggle()
요소가 서서히 보여지거나 서서히 사라지는 애니메이션이다.
🔥 slideUp(), slideDown(), slideToggle()
요소가 위로 쓸려 올라가거나 아래로 쓸려 내려가는 애니메이션이다.
⭐️ 마우스 이벤트
마우스를 클릭할 때 발생하는 이벤트이다. 자바스크립트를 이용하여 버튼을 클릭하면 p단 안에 글자가 출력되도록 한다.
<button id="btn">버튼</button>을 클릭 또는 더블클릭하세요 <p></p>
🔥 click
$('btn').on('click',function(){ $('p').text('클릭 되었습니다.'); });
🔥 dblclick
$('#btn').on('dblclick', function(){ $('p').text('더블클릭 되었습니다.'); });
⭐️ 키보드 이벤트
키보드 클릭할 때 발생하는 이벤트이다. 자바스크립트를 이용하여 버튼을 클릭하면 p단 안에 글자가 출력되도록 한다.
단, 첫 번째 이벤트에는 shift나 delete와 같이 특수 키를 입력했을 때는 반응이 없도록 하고, 두 번째 이벤트에는 특수키에도 반응하도록 한다.
<input type="text"/> 입력란에 키보드를 입력하세요 <h1>jQuery 키보드 이벤트 1</h1> <p id="text1"></p> <h1>jQuery 키보드 이벤트 2</h1> <p id="text2"></p>
🔥 keypress
keypress는 특수키를 눌렀을 때는 반응이 없다.
let i = 0; $('input').on('keypress', function(){ $('#text1').text((++i) + '번 키보드가 눌렸습니다.'); });
🔥 keydown
keydown은 특수키를 눌렀을 때도 반응을 한다. 특수키는 shift나 enter, tab, delete와 같은 키이다.
let j = 0; $('input').on('keydown', function(){ $('#text2).text((++j) + "번 키보드가 눌렸습니다.'); });
⭐️ CSS 속성 처리
🔥 속성값 읽어오기
.css 뒤에 해당 css의 속성이름을 적어주면, 해당 속성에 대입되어있는 값이 반환된다.
$('요소').css('속성이름'); // 값이 반환됨 $('.content').css('display'); // none
🔥 속성값 적용 / 변경
.css 뒤에 해당 css의 속성이름을 적고, 콤마 이후 해당 속성에 대입될 값을 적어주면 속성값이 적용된다. 기존 다른 값이 대입되어있었다면 새롭게 적어준 값으로 변경된다.
$('요소').css('속성이름', '값'); // 속성이름에 값을 대입 $('.content').css('display', 'none'); // style="display:none;"
🔥 css 클래스의 적용 / 제거
css 클래스의 적용여부는 hasClass로 알 수 있다. 해당 메서드는 불린으로 값을 리턴해준다.
addClass는 클래스를 적용할 때 사용하며, 두 개 이상의 클래스는 공백으로 구분시켜준다.
removeClass는 클래스를 제거해주며 역시 두 개 이상의 클래스는 공백으로 구분시켜준다.
toggleClass는 다른 toggle 기능들과 동일하게 이벤트 한 번에 클래스를 적용하고 제거할 수 있도록 해준다.
⭐️ 포커스 관련 이벤트 처리
🔥 요소에 포커스가 들어갔음을 감지하는 이벤트
focus()는 함수로서 사용할 경우 강제로 포커스를 지정하는 기능을 하지만, 이벤트로서 사용할 경우 포커스가 들어갔음을 감지하는 기능을 한다.
$('셀렉터').focus(function(){ // 포커스가 이뤄졌을 때 해당 셀렉터에 발생할 이벤트 })
🔥 요소에서 포커스가 빠져나왔음을 감지하는 이벤트
blur() 함수는 포커스와 반대로 요소에서 포커스가 빠져나왔음을 감지한다.
$('셀렉터').blur(function(){ // 포커스가 빠져나갔을 때 해당 셀렉터에 발생할 이벤트 })
⭐️ HTML 속성 관련 함수
🔥 attribute
값을 갖는 속성이다
- 설정값 조회 : attr(key)
- 값 설정 지정 : attr(key, value)
🔥 prop
값을 갖지 않는 속성이다
disabled, checked, selected와 같이 값이 존재하는 것이 아닌 있냐 없냐(boolean)와 같은 상태로만 파악할 수 있다.
- 설정값 조회 : prop(key)
- 값 설정 기능 : prop(key, boolean)
⭐️ change() 이벤트
🔥 요소의 입력, 선택 상태가 변경되었음을 감지하는 이벤트
change 이벤트를 사용하면, 해당 셀렉터의 변화가 생기는 순간 이벤트를 발생시킨다. 텍스트를 입력하는 요소일 경우 내용이 변경되고 포커스가 빠져나올 떄 이벤트를 발생시킨다. 체크박스나 라디오 버튼, 드롭다운의 경우 선택상태가 변경된 즉시 이벤트가 발생한다.
$('셀렉터').change(function(){ // 변화가 일어날 때 발생할 이벤트 })
