DOM 다루기

DOM 다루기

.append() 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.

.prepend() 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.

.appendTo() 선택된 요소를 해당 요소의 마지막에 추가한다.

.prependTo() 선택된 요소를 해당 요소의 첫번째에 추가한다.

 

jQuary를 사용하겠다!!

$(document). ready(function() {
});

 

.append() 메소드

$(target).append(source)

 

클릭이벤트 처리해보기

$(this)

 : 클래스명이나 id를 각각 설정해서 호출해야줘야하는데

자기 자신을 가리키는 변수 $this를 사용한다면 중복 소스를 줄여줄 수 있다.

> 현재 이벤트가 발생한 애

 

data()

[데이터 저장]

- 문법 : $(selector).data(key, value)

 : 해당 엘리먼트에 javascript Type의 value를 <key,Value>로 저장할 수 있다.

값으로 저장되어 있는 데이터를 읽는다.

 

[데이터 읽기]

- 문법 : $(selector).data(key)

: 앞서 저장한 데이터를 호출한다.

var amount = $(this).closest('.vacation').data('price');

 

[HTML5에서 사용하기]

data-key = 'value'

: HTML class에 데이터 값을 넣어 줄 수 있다. 여러개 사용 가능하다.

**data-price = '399.99'

<li class = "vacation onsale" data-price = "399.99'>
	<h3> Hawwiian Vacation </h3>
    <button> Get Price</button>
    
    <ul calss = 'comments'>
    	<li>Amazing deal!</li>
        <li>Want to go!</li>
    </ul>
 </li>


$(document).ready(function() {
	$('button').on('click',function (){
    	var vacation = $(this).closest('.vacation).data('price');
        var price = $(''<p>From $'+amount+'</p>');
      	$(this).closet('.vacation').append(price);
        $(this).remove();
   });
});

마우스 이벤트 만들어보기

• click : 마우스 클릭했을 때
• dbclick : 마우스 더블클릭 했을때
• mousedown : 마우스 버튼을 누를 때
• mouseup : 마우스 버튼을 뗄 때
• mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때
• mouseleave : 마우스가 요소의 경게 내부에서 외부로 이동할 때
• mousemove : 마우스가 요소를 벗어 날때 발생
• mouseover : 마우스를 요소 안에 들어올 때 발생

$(document).ready(function(){
  $('.confirmation').on('mouseover', 'h3', function() {
      // 실행내용
   });
});

키보드 이벤트 만들어보기

• keydown : 키를 누를때 발생
• keypress : 글자를 입력할 때 발생
• keyup : 키로부터 손가락을 뗄 때