$('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!');
}
이외에도 다양한 데이터 타입을 받을 수 있다.
$.ajax({
url : '/list_ajax.jsp',
type : 'GET',
dataType : 'html',.
success : function(data){
$('table').html(data);
}
});
ajaxTest.html
<tr>
<td width="30%">1</td>
<td>데이터</td>
</tr>
<tr>
<td width="30%">1</td>
<td>데이터</td>
</tr>
<tr>
<td width="30%">1</td>
<td>데이터</td>
</tr>
index.html 코드 일부분이다.
$.ajax({
url : './ajaxTest.html',
type : 'GET',
dataType : 'html',
success : function(data){
$('table').html(data);
}
});
위의 코드는 ajax가 로드됨과 동시에 ajaxTest파일 안에 있던 소스 코드들이 table안에 삽입된다.
dummy.json
{
"title" : "안녕하세요",
"subject" : "반갑습니다.",
"list" : [
{
"subject" : "제목1",
"content" : "내용1"
},
{
"subject" : "제목2",
"content" : "내용2"
},
{
"subject" : "제목3",
"content" : "내용3"
}
]
}
index.html 코드 일부분이다.
$('input[type=button]').click(function(){
$.ajax({
url : './dummy.json',
type : 'GET',
dataType : 'json',
success : function(data){
const list = data.list;
let txt;
$.each(list, function(index, data){
//data === list[i]
txt += `<tr>
<td>${data.subject}</td>
<td>${data.content}</td>
</tr>`;
}
$('table').html(txt);
}
});
});
위의 코드는 버튼을 클릭하면 반복문을 돌며 table안에 기존에 만들어둔 json 내용이 차례대로 들어가게 된다.
for(let i = 0; i < list.length; i++){
txt += `<tr>
<td>${list[i].subject}</td>
<td>${list[i].content}</td>
</tr>`;
}
$('table').html(txt);
위의 내용은 JavaScript의 for문과 jQuery를 사용한 코드이다. 결과는 each()를 쓴 위와 같다.
Ajax는 같은 도메인 안에서만 Ajax콜이 가능하다.
위와같이 api와 사이트의 도메인 영역이 다른 경우, 크로스 브라우징 규약에 위배되어 지원을 하지 않는다.
다른 도메인에서 어떠한 데이터를 조회하고자 할 때 사용한다. 단, 다른 도메인쪽에서 jsonp 통신 방식에 맞춰서 json 데이터를 내려줄 때만 가능하다.
서버에서 설정을 해주어야만 접근이 가능하다. rest관련 get, post, put 등으로 값들을 전달 가능하다.
$('div').show();
$('div').hide();
$('div').fadeIn();
$('div').fadeOut();
$('div').slideDown({
duration : 100;
});
위와 같이 시간대 등 옵션값을 key와 value로 변경 가능하다.
$('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를 출력시킨다. 단, 다른 영역들은 닫히고 클릭된 영역만 보여준다.
해당 포스팅은 인프런 - 퍼블리셔, 신입 프론트 개발자를 위한 실무에서 써먹는 실전 jQuery 설명서의 내용을 보며 공부한 것을 정리한 내용입니다.