이벤트 및 다양한 함수 정리

---

1. 이벤트 이해하기

• click : 클릭 이벤트

('input[type=button]').click(function(){
	console.log(('select').val(),$('input[type=text]').val());
});

• dblclick : 더블클릭 이벤트

('input[type=button]').dblclick(function(){ 
	console.log(('select').val(), $('input[type=text]').val());
});

• keypress : 키보드 누르면 발생하는 이벤트

('input[type=text]').keypress(function(e){	
	if(e.keyCode === 13){
    console.log(('select').val(), $('input[type=text]').val());
}
});

이벤트 사용 시 주의 사항 ✨

$('.addBtn').click(function(){
	const tag = `<input type="button" class="alertBtn" value="add">`;
    
    $('.addLayer').append(tag); });
    $('alertBtn).click(function(){
    	alert('click!'); 
    });

위와 같이 이벤트를 지정한 후, 나중에 동적으로 생성된 태그에는 이벤트가 걸리지 않는다. 이 경우, on을 사용해서 해결할 수 있다.

• on : $(document).on('event', 'selector', function(){});

$(document).on('click', '.alertBtn', function(){ alert('click!'); }

---

2. 태그를 보여주고 숨기는 함수들

• show() : 레이아웃을 보여준다.

$('div').show();

• hide() : 레이아웃을 숨긴다.

$('div').hide();

• fadeIn() : 페이드인 애니메이션 효과와 함께 레이아웃을 보여준다.

$('div').fadeIn();

• fadeOut() : 페이드아웃 애니메이션 효과와 함께 레이아웃을 숨긴다.

$('div').fadeOut();

• slideDown() : 슬라이드 애니메이션 효과와 함께 레이아웃을 보여준다.
  아래같이 시간대 등 옵션값을 key와 value로 변경 가능하다.

$('div').slideDown({
	duration : 100;
	});

• slideUp() : 슬라이드 애니메이션 효과와 함께 레이아웃을 숨긴다.

$('div').slideUp();

---

3. trim() - 문자열 공백을 사라지게 만드는 함수

trim()은 문자열의 양옆의 공백을 사라지게 만든다. (중간의 공백은 제거가 되지 않는다.)

let txt = $('input[type=text]').val();
	txt = $.trim(txt);
    $('input[type=text]').val(txt);

---

4. 태그들을 지우는 함수

• empty() : 영역 비우기, 안에 있는 모든 값들이 사라진다.

$('div').empty(); === $('div').html("");

위의 예제에서는 div태그만 남고 div태그 안에 있는 태그들만 모두 사라진다.

• remove() : 레이어 삭제 함수, 특정 영역에 있는 모든 값들이 사라진다.

$('div').remove()

위의 예제에서는 div까지 모두 사라진다.

---

5. index() - 인덱스값을 얻는 함수

.index()는 Selector에 index()를 걸고 그 매개변수로 this를 주게 될 경우, 인덱스값을 얻을 수 있다.

$('input[type=button]').click(function(){
	let idx = $('input[type=button]').index(this);
    
	$('.layer').hide();
	 $('.layer').eq(idx).show();

});

위의 코드는 각 버튼을 누르면 해당되는 index의 layer를 출력시킨다. 단, 다른 영역들은 닫히고 클릭된 영역만 보여준다.