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. jQuery로 Ajax 이해하기
Ajax로 받을 수 있는 데이터 타입
- XML
- HTML
- JavaScript
- JSON
이외에도 다양한 데이터 타입을 받을 수 있다.
Ajax 사용 방법
$.ajax({
url : '/list_ajax.jsp',
type : 'GET',
dataType : 'html',.
success : function(data){
$('table').html(data);
}
});- url : form action과 같은 역할
- type : form method와 같은 역할
- dataType : 데이터를 무슨 데이터 타입으로 받을건지 지정한다. form은 알아서 input tag들을 전송하지만 Ajax는 data 속성을 따로 전송해주어야 한다.
- success : 화면에서는 보이지 않지만 Ajax를 통해 이미 호출이 되고 로직을 실행하며 결과값을 가져오는데 success에서 data라는 매개변수가 데이터를 가져오게 된다.
HTML로 Ajax 사용하기
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안에 삽입된다.
JSON으로 Ajax 사용하기
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()를 쓴 위와 같다.
HTML 방식과 JSON방식의 쓰임
- HTML 방식 : 웹만 기준으로 할 경우에 사용된다.
- JSON 방식 : 웹과 앱, 모바일 등을 고려하는 경우에 자주 사용되며 동일한 데이터를 웹에서만 쓸게 아니라 앱이나 기타 모바일 등 api형식으로 지원하기 위해 규격을 만들어 사용할때 사용하는 방식이다.
Ajax 이용 시 주의사항
Ajax는 같은 도메인 안에서만 Ajax콜이 가능하다.
- api : http://www.naver.com
- html : http://www.daum.net
위와같이 api와 사이트의 도메인 영역이 다른 경우, 크로스 브라우징 규약에 위배되어 지원을 하지 않는다.
해결 방법
1. jsonp 방식
다른 도메인에서 어떠한 데이터를 조회하고자 할 때 사용한다. 단, 다른 도메인쪽에서 jsonp 통신 방식에 맞춰서 json 데이터를 내려줄 때만 가능하다.
2. cors 방식
서버에서 설정을 해주어야만 접근이 가능하다. rest관련 get, post, put 등으로 값들을 전달 가능하다.
3. 태그를 보여주고 숨기는 함수들
- .show() : 레이아웃을 보여준다.
$('div').show();- .hide() : 레이아웃을 숨긴다.
$('div').hide();- .fadeIn() : 페이드인 애니메이션 효과와 함께 레이아웃을 보여준다.
$('div').fadeIn();- .fadeOut() : 페이드아웃 애니메이션 효과와 함께 레이아웃을 숨긴다.
$('div').fadeOut();- .slideDown() : 슬라이드 애니메이션 효과와 함께 레이아웃을 보여준다.
$('div').slideDown({
duration : 100;
});위와 같이 시간대 등 옵션값을 key와 value로 변경 가능하다.
- .slideUp() : 슬라이드 애니메이션 효과와 함께 레이아웃을 숨긴다.
$('div').slideUp();4. trim() - 문자열 공백을 사라지게 만드는 함수
.trim()은 문자열의 양옆의 공백을 사라지게 만든다. (중간의 공백은 제거가 되지 않는다.)
let txt = $('input[type=text]').val();
txt = $.trim(txt);
$('input[type=text]').val(txt);5. 태그들을 지우는 함수
- empty() : 영역 비우기, 안에 있는 모든 값들이 사라진다.
$('div').empty(); === $('div').html("");위의 예제에서는 div태그만 남고 div태그 안에 있는 태그들만 모두 사라진다.
- remove() : 레이어 삭제 함수, 특정 영역에 있는 모든 값들이 사라진다.
$('div').remove()위의 예제에서는 div까지 모두 사라진다.
6. 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를 출력시킨다. 단, 다른 영역들은 닫히고 클릭된 영역만 보여준다.
해당 포스팅은 인프런 - 퍼블리셔, 신입 프론트 개발자를 위한 실무에서 써먹는 실전 jQuery 설명서의 내용을 보며 공부한 것을 정리한 내용입니다.
참고사이트
