반응형
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가 삭제 가능하다.
** 출력 결과 **
|
반응형
'WEB기초 > JQuery' 카테고리의 다른 글
[jquery] jQuery 입문 06 (170330) (0) | 2017.03.30 |
---|---|
[jquery] jQuery 입문 05 (170330) (0) | 2017.03.30 |
[jquery] jQuery 입문 04 (170329) (0) | 2017.03.29 |
[jquery] jQuery 입문 03 (170329) (0) | 2017.03.29 |
[jquery] jQuery 입문 01 (170328) (0) | 2017.03.28 |
댓글