이벤트 및 다양한 함수 정리
('input[type=button]').click(function(){
console.log(('select').val(),$('input[type=text]').val());
});
('input[type=button]').dblclick(function(){
console.log(('select').val(), $('input[type=text]').val());
});
('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을 사용해서 해결할 수 있다.
$(document).on('click', '.alertBtn', function(){ alert('click!'); }
$('div').show();
$('div').hide();
$('div').fadeIn();
$('div').fadeOut();
$('div').slideDown({
duration : 100;
});
$('div').slideUp();
trim()
은 문자열의 양옆의 공백을 사라지게 만든다. (중간의 공백은 제거가 되지 않는다.)
let txt = $('input[type=text]').val();
txt = $.trim(txt);
$('input[type=text]').val(txt);
$('div').empty(); === $('div').html("");
위의 예제에서는 div태그만 남고 div태그 안에 있는 태그들만 모두 사라진다.
$('div').remove()
위의 예제에서는 div까지 모두 사라진다.
.index()는 Selector에 index()를 걸고 그 매개변수로 this를 주게 될 경우, 인덱스값을 얻을 수 있다.
$('input[type=button]').click(function(){
let idx = $('input[type=button]').index(this);
$('.layer').hide();
$('.layer').eq(idx).show();
});
위의 코드는 각 버튼을 누르면 해당되는 index의 layer를 출력시킨다. 단, 다른 영역들은 닫히고 클릭된 영역만 보여준다.