JS Jquery 기본 지식 정리.4

김종민·2023년 7월 25일
0

js

목록 보기
6/25
post-thumbnail

이벤트 및 다양한 함수 정리


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를 출력시킨다. 단, 다른 영역들은 닫히고 클릭된 영역만 보여준다.

profile
웹 퍼블리셔의 코딩 일기

0개의 댓글

관련 채용 정보