[jquery] jQuery 입문 02 (170328)

jQuery 입문 02

• div 요소 중 특정 요소 동작시키기

- div:even 

짝수 인덱스만 선택해서 동작

- div:odd

홀수 인덱스만 선택해서 동작

- div:first

첫번째 요소 선택해 동작

- div:last

마지막 요소 선택해 동작

** 출력 결과 **

• 체인형태로 action적용하기

- 같은 동작명이지만 기능이 반대인 동작 주의하기!

** 출력 결과 **

• head에서 jquery 실행시키기

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

- window.onload=function(){    });

- document.addEventListener("DOMContentLoaded", function(){    });

** 출력 결과 **

- 이미지 로딩을 먼저 하지 않는 $(document).ready(function(){});이 먼저 실행되고 이미지 로딩을 하는 window.onload=function(){}이 나중에 실행된다.

• 액션4 : .on("이벤트명", 리스너함수)

- this의 이용 :

이벤트가 일어난 바로 그 요소를 this라고 한다.

• this의 이용

- 이벤트가 일어난 바로 그 요소를 this라고 칭한다.

- 아래 예제에서는 "mousedown", "mouseup"을 이용하였다.

** 출력 결과 **

• 동적으로 객체 만들기

• 액션 5 : $("<객체명/>")
• 액션 6 : appendTo(" ")

- 객체를 동적으로 만들고 appendTo로 투입한다.

** 출력 결과 **

• QUIZ > jquery 이용한 동적 객체 만들기

ANSWER >

1. 버튼을 클릭한다.

2. 입력한 값을 가져와 변수에 담는다.

3. li를 생성한 후 담은 값을 msgList에 출력한다.

4. input창을 비운다.

5. 입력된 값을 제거하기 위해선 li의 부모를 선택하여야 새로 추가된 li가 삭제 가능하다.

** 출력 결과 **