event 객체
모든 이벤트 처리 함수는 event 객체를 전달받는다.
이 객체는 발생한 이벤트와 관련된 메서드와 속성을 가지고 있다.
예)
$(‘li’).on(‘click’,function(e){
eventType = e.type;
});
1.event 객체에 매개변수 이름을 지정한다.
2.함수 내에서 event 객체를 참조하기 위해 이 이름을 사용한다.
3. 익숙한 마침표 표기법을 이용하여 객체의 속성과 메서드를 사용한다.
속성 | 설명 |
type | 이벤트의 종류 |
which | 불려진 버튼이나 키 |
data | 이벤트가 발생했을 때 함수에 전달된 추가 정보들을 가지고 있는 객체표현식 |
target | 이벤트가 발생한 dom요소 |
pageX | 뷰포트의 왼쪽 모서리로부터 마우스까지의 위치 |
pageY | 뷰포트의 상단으로부터 마우스까지의 위치 |
timeStamp |
|
메소드 | 설 명 |
.preventDefault() | 기본 동작을 취소한다(품 데이터 전송) |
.stopPropagation() | 상위 객체로 이벤트가 버블링되는 것을 중단한다. |
.html
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
.js
$(function() {
$('li').on('click', function(e) {
$('li span').remove();
var date = new Date();
date.setTime(e.timeStamp);
var clicked = date.toDateString();
$(this).append('<span class="date">' + clicked + ' ' + e.type + '</span>');
});
});
1.<li>요소에 이미 존재하는 <span>요소들을 모두 제거한다.
2. 새로운 Date 객체를 생성하고 요소가 클릭되어 이벤트가 발생한 시간을 지정한다.
3. 이벤트가 클릭된 시간은 실제로 읽을 수 있는 문자열로 변환한다.
4. 목록 아이템이 클릭된 시간을 목록 아이템에 추가한다.(이벤트의 종류도 함께 출력한다.)
이벤트 핸들러의 추가 매개변수
.on() 메서드는 두 개의 선택적인 매개변수를 제공한다.
첫 번째 매개변수는 jQuery 객체집합에서 이벤트에 대응할 요소들을 필터링하기 위한 것이며
두 번째 매개변수는 객체 표현식을 이용하여 이벤트 핸들러에 전달할 추가 정보들을 위한 것이다.
.on(events[, select] [,data], function(e));
대응할 이벤트를 나열한다.(이벤트 이름을 공백으로 구분한다.)
일부요소만 이벤트를 대응하게 하려면 두 번째 셀렉터를 이용해서 자손 요소를 필터링 할 수 있다.
이벤트가 발생했을 때 호출될 함수에 추가 정보를 전달할 수 있다. 이 정보들은 이벤트 객체 e 와 함께 전달 된다.
특정이벤트가 발생했을 때 객체집합 내의 요소들을 대상으로 실행될 함수를 지정한다.
예)
$(function() {
var listItem, itemStatus, eventType;
$('ul').on(
'click mouseover',
':not(#four)',
{status: 'important'},
function(e) {
listItem = 'Item: ' + e.target.textContent + '<br />';
itemStatus = 'Status: ' + e.data.status + '<br />';
eventType = 'Event: ' + e.type;
$('#notes').html(listItem + itemStatus + eventType);
}
);
});
1.click 이나 mouseover 이벤트가 발생하면 실행된다.
2. selector 매개변수는 id 특성 값이 four인 요소를 필터링 한다.
3. 객체표현식을 통해 추가 정보가 이벤트 핸들러에 전달된다.
4. 이벤트 핸들러는 event 객체를 이용하여 사용자가 선택한 요소의 콘텐츠와 함수에 전달된 데이터, 이벤트 종류등을 아래의 흰색 상자에 출력한다.
메서드 | 설명 |
.show() | 선택된 아이템을 보이게 한다. |
.hide() | 선택된 아이템을 숨긴다. |
.toggle() | 선택된 아이템을 보이거나 숨기는 효과를 번갈아 적용한다. |
효과
페이드 효과
메서드 | 설명 |
.fadeIn() | 선택된 요소를 불투명하게 만들어 페이드인 효과 적용 |
.fadeOut() | 선택된 요소를 투명하게 만들어 페이드아웃 효과 적용 |
.fadeTo() | 선택된 요소의 불투명도 조절 |
.fadeToggle() | 선택된 요소의 불투명도를 조정하여 현재 상태의 반대로 전환 |
슬라이딩 효과
메서드 | 설명 |
.slideUp() | 선택된 아이템에 슬라이드 되어 사라지는 효과 |
.slideDown() | 선택된 아이템에 슬라이드되어 나타나는 효과 |
.slideToggle() | 선택된 요소에 현재 상태의 반대 상태로 전환 |
임의효과
메서드 | 설명 |
.delay() | 큐 내의 다음 아이템의 실행을 잠시 지연시킨다. |
.stop() | 현재 실행 중인 애니메이션을 중단한다. |
.animate() | 새로운 임의의 애니메이션을 생성한다. |
예)
.html
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
.js
$(function() {
$('h2').hide().slideDown();
var $li = $('li');
$li.hide().each(function(index) {
$(this).delay(700 * index).fadeIn(700);
});
$li.on('click', function() {
$(this).fadeOut(700);
});
});
1.<h2> 요소를 선택한 후 나중에 애니메이션과 함께 나타날 수 있또록 우선 숨긴다. 제목을 보이게 하기 위해 선택한 효과는 .slideDown()메서드다.
2.아이템들이 페이드인 되기전 반드시 숨겨져야 한다. 이후 . each() 메서드를 이용해서 각 li 아이템에 대해 루프를 실행한다.
3. 익명함수 내에서는 index 속성이 마치 카운터 변수처럼 현재 동작 중인 li 요소를 가리키고 있다.
4. delay() 메서드는 목록 아이템이 나타나기 전에 약간의 지연을 만들어 낸다. 이때 지연될 시간은 인덱스 번호에 700밀리초를 곱하여 계산한다. 그렇지 않으면 아이템들이 모두 같은 시간에 나타난다.
css 속성에 애니메이션 적용하기
숫자로 표현될 수 있는 속성이라면 어떠한 속성이라도 애니메이션을 사용할 수 있다.
예)
.animate({
// 변경할 스타일들을 나열한다.
}[,speed][,easing][, complete]);
1.speed 매개변수는 애니메잉션이 진행될 시간의 길이를 밀리초 단위로 지정하기 위한 것이다.
예)
.html
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
.js
$(function() {
$('li').on('click', function() {
$(this).animate({
opacity: 0.0,
paddingLeft: '+=80'
}, 500, function() {
$(this).remove();
});
});
});
DOM 탐색하기
jQuery 객체 집합을 생성하고 나면 이 페이지에서 소개하는 메서드들을 이용하여 기본 객체집합의 요소들과 관련된 다른 요소들에 접근할 수 있다.
셀렉터가 필요한 메서드들
메서드 | 설명 |
.find() | 현재 객체집합에서 셀렉터와 일치하는 요소들을 리턴한다. |
.closest() | 셀렉터와 일치하는 가장 근접한 상위 요소(직계 부모무터 최상위 요소까지 모두 탐색한다.) |
셀렉터가 선택적인 메서드들
메서드 | 설명 |
.parent() | 현재 객체집합의 직계 부모 요소를 리턴한다. |
.parents() | 현재 객체집합의 모든 부모 요소를 리턴한다. |
.children() | 현재 객체집합의 모든 자식 요소를 리턴한다. |
.siblings() | 현재 객체집합의 모든 이웃 요소를 리턴한다. |
.next() | 현재 요소의 다음 이웃 요소를 리턴한다. |
.nextAll() | 현재 요소의 다음 이옷 요소들을 모두 리턴한다. |
.prev() | 현재 요소의 이전 이웃 요소를 리턴한다. |
.prevAll() | 현재 요소의 이전 이웃 요소들을 모두 리턴한다. |
예)
.html
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
.js
$(function() {
var $h2 = $('h2');
$('ul').hide();
$h2.append('<a class="show">show</a>');
$h2.on('click', function() {
$h2.next('ul')
.fadeIn(500)
.children('.hot')
.addClass('complete');
$h2.find('a').fadeOut();
});
});
1.<h2>요소의 아무 곳이나 클릭하면 click 이벤트가 발생하여 익명 함수가 실행된다.
2. .next() 메서드를 이용하여 <h2> 요소의 바로 다음 이웃 요소인 <ul> 요소를 가져온다.
3. <ul> 요소에 페이드인 효과를 적용한다.
4. .children() 메서드를 이용하여 <ul> 요소의 모든 자식 요소들을 가져 온다. 이때 셀렉터를 이용하여 class 특성 값이 hot 인 자식 요소들만 가져오도록 한다.
5. addClass() 메서드를 이용하여 <li> 요소에 complete 라는 클래스 이름을 추가한다. 또한 이 코드는 메서드를 연결하여 호출함으로ㅆ 한 노드에서 다른 노드로 옮겨갈 수도 있다.
6. 마지막 단계에서는 .find() 메서드를 이용하여 <h2> 요소의 자식 요소인 <a> 요소를 찾는다. 이제 페이지에는 목록이 보이기 때문에 해당 요소가 계속해서 보일 필요가 없으므로 이 요소에 페이드아웃 효과를 적용하여 페이지에서 사라지도록 한다.
객체집합에 요소를 추가하거나 필터링하기
일단 jQuery 객체집합을 만들었다면 여기에 요소를 더 추가하거나 객체집합 내의 요소 중 일부만을 다루기 위해 필터를 적용할 수 있다.
객체집합에 요소 추가하기
메서드 | 설명 |
.add() | 매개변수로 지정된 셀렉터에 의해 선택된 요소들을 기존 객체집합에 추가한다. |
두 번째 셀렉터를 이용하여 필터링하기
메서드/셀렉터 | 설명 |
.filter() | 두 번째 셀렉터와 일치하는 요소들을 찾아 리턴 |
.find() | 셀렉터와 일치하는 하위 요소들을 찾아 리턴 |
.not() / :not() | 셀렉터와 일치하지 않는 요소들을 리턴 |
.has() / :has() | 셀렉터와 일치하는 하위 요소들을 가지고 있는 요소들을 리턴 |
:contains() | 지정한 텍스트를 가진 모든 요소를 리턴 |
콘텐츠 테스트 하기
메서드 | 설명 |
.is() | 현재 객체집합이 지정된 조건에 일치하는지를 검사한다.(불리언을 리턴) |
.html
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
</div>
<script src="js/jquery-1.11.0.js"></script>
<script src="js/filters.js"></script>
</body>
.js
$(function() {
var $listItems = $('li');
$listItems.filter('.hot:last').removeClass('hot');
$('li:not(.hot)').addClass('cool');
$listItems.has('em').addClass('complete');
$listItems.each(function() {
var $this = $(this);
if ($this.is('.hot')) {
$this.prepend('Priority item: ');
}
});
$('li:contains("honey")').append(' (local)');
});
.filter() 메서드를 이용하여 class 특성 값이 hot인 목록 아이템을 찾아낸다. 이후 그 값을 classs 특성에서 제거한다.
:not() 셀렉터를 이용하여 li 요소들 중 calss 특성값이 hot이 아닌 아이템들을 찾아낸 후 이 아이템들의 class 특성에 cool 이라는 값을 추가한다.
.has() 메서드를 이용하여 em 요소를 가진 li 요소를 찾아낸 후 그 요소의 class 특성에 complete라는 값을 추가한다.
.each() 메서드를 이용하여 목록 아이템에 대해 루프를 실행한다. 코드가 현재 참조하는 요소를 jQuery 객체에 캐시한 후 , .is() 메서드를 이용하여 li 요소의 class 특성 값이 hot 인지 여부를 확인 한다. 만일 그렇다면 우선 아이템: 이라는 문자열을 아이템의 앞 부분에 추가한다.
:contains 셀렉터를 이용하여 li 요소들 중 꿀이라는 텍스트를 가진 요소를 선택한후 국내산 이라는 문자열을 해당 아이템의 뒤에 덧붙인다.
아이템 순서대로 찾기
jQuery 셀렉터에 의해 리턴되는 각각의 아이템에는 인덱스 번호가 할당되며, 이 번호는 객체집합을 필터링할 때 사용할 수 있다.
인덱스 번호를 이용하여 요소 찾기
메서드/셀렉터 | 설명 |
.eq() | 인덱스 번호에 해당하는 요소를 리턴한다. |
:lt() | 지정된 숫자보다 인덱스 번호가 작은 요소들을 리턴한다. |
:gt() | 지정된 숫자보다 인덱스 번호가 큰 요소들을 리턴한다. |
예)
$(function() {
$('li:lt(2)').removeClass('hot');
$('li').eq(0).addClass('complete');
$('li:gt(2)').addClass('cool');
});
셀렉터 내에서 :lt() 셀렉터를 이용하여 인덱스 번호가 2보다 작은 목록 아이템들을 찾는다. 그런 후 이 아이템들의 class 속성에서 hot 이라는 값을 제거한다.
.eq() 메서드를 이용하여 첫 번째 아이템을 선택 했다. 그런 후 class 특성에 complete 라는 값을 추가한다.
:gt() 셀렉터를 추가하여 인덱스 번호가 2 보다 큰 아이템들을 찾는다. 그리고 그 아이템들의 class 특성에 cool 이라는 값을 추가한다.
'매일코딩 > 자바스크립트 개념' 카테고리의 다른 글
| [생활코딩 함수] 유효범위 1 (0) | 2017.05.30 |
|---|---|
| [자바스크립트 기초]제이쿼리 4 (2) | 2017.03.05 |
| [자바스크립트 기초]제이쿼리 2 (2) | 2017.03.03 |
| [자바스크립트 기초]제이쿼리 1 (4) | 2017.03.02 |
| [자바스크립트 기초 ]이벤트의 종류와 개념 2 (2) | 2017.03.01 |
댓글