FlowerBombs
요소의 탐색 본문
요소의 탐색
메서드 체인
- 하나의 jQuery요소에 대하여 메서드를 연속적으로 호출하는 기법.
- 특별한 경우가 아닌 이상 jQuery()의 함수들은 객체 사진을 리턴한다.
1 2 3 4 | $("#foo").attr(key, value) .css(key, value) .addClass(cls) .click(function() {}); | cs |
주변 요소 탐색하기
함수 |
설명 |
prev() |
이전 요소를 리턴한다 |
next() |
다음 요소를 리턴한다. |
parent() |
상위 요소를 리턴한다. |
children() |
하위 요소(들)을 리턴한다. |
eq(n) |
n번째 요소를 리턴한다. |
부모 요소 얻기
주어진 셀렉터를 갖는 가장 인접한 부모 요소를 리턴한다.
1 | $("#foo").parents("셀렉터"); | cs |
자식 요소 얻기
주어진 셀렉터를 갖는 가장 인접한 자식 요소를 리턴한다.
1 | $("#foo").find("셀렉터"); | cs |
요소의 동적 생성
<body> 태그 안에 명시된 태그 요소를 객체화 하는 경우
태그 이름을 $() 함수에 전달한다
1 | var obj = $("div"); | cs |
<body> 태그 안에 명시되지 않은 태그 요소를 객체화 하는 경우
태그 이름을 <>로 감싸서 $()함수에 전달한다.
1 | var obj = $("<div>"); | cs |
이렇게 생성된 요소들은 jQuery의 기능들을 적용할 수 있다.
1 2 | var obj = $("div"); obj.attr('id', 'hello').css(...).addClass('item'); | cs |
기존에 존재하는 요소를 복사하는 경우
1 2 | var obj = $("#foo").clone(); obj.attr('id', 'helloworld'); | cs |
복사된 요소는 id값도 동일하므로 id값은 변경이 필요함.
모든 속성을 동일하게 복사하므로 id속성값 같은 경우(중복되어서는 안되므로)는 다른 값으로 변경해 주어야 한다.
동적으로 생성된 요소를 HTML 문서에 삽입하기
함수 |
설명 |
A.html(B) |
A의 시작태그와 끝태그 사이의 내용을 B로 대체한다. |
A.append(B) |
A에 B를 추가한다. 기존의 내용을 유지하면서 맨 뒤에 추가한다. |
B.appendTo(A) |
B에 A를 추가한다. 기존의 내용을 유지하면서 맨 뒤에 추가한다. |
A.Prepend(B) |
A에 B를 추가한다. 기존의 내용을 유지하면서 맨 앞에 추가한다. |
B.prepend(A) |
B에 A를 추가한다. 기존의 내용을 유지하면서 맨 앞에 추가한다. |
A.insertBefore(B) |
A를 B의 직전에 삽입한다. |
A.insertAfter(B) |
A를 B의 직후에 삽입한다. |
A.empty() |
A의 모든 내용을 비운다. |
요소의 숨김, 표시 처리
함수 |
설명 |
show([time, [function]]) |
요소를 표시한다. |
hide([time, [function]]) |
요소를 숨긴다. |
toggle([time, [function]]) |
요소의 숨김과 표시를 자동 반복한다. |
fadeIn([time, [function]]) |
페이드 효과를 적용하여 요소를 표시한다. |
fadeOut([time, [function]]) |
페이드 효과를 적용하여 요소를 숨긴다. |
fadeToggle([time, [function]]) |
페이드 효과를 적용하여 요소의 숨김과 표시를 자동 반복한다. |
slideDown([time, [function]]) |
요소를 아래로 펼쳐서 표시한다. |
slideUp([time, [function]]) |
요소를 위로 접어서 요소를 숨긴다. |
slideToggle([time, [function]]) |
요소를 위,아래로 접고 펼치는 효과를 사용하여 숨김과 표시를 자동 반복한다. |
- 시간값은 1/1000초 단위로 지정한다.
- 두 번째 파라미터인 콜백함수는 처리가 완료된 후 호출된다.
동적으로 생성된 요소에 대한 이벤트 적용
기존의 이벤트 처리는 생성한 객체에 적용한다는 개념이지만,
동적 요소에 대한 이벤트 처리는 앞으로 생성될 객체에 적용할 이벤트를 미리 준비해 둔다는 개념이다
1 2 3 4 | $(document).on('click', '#hello', function(e) { e.preventDefault(); ... }); | cs |
※ 주의 : 동적 생성 요소가 <form>인 경우에는 e객체를 사용해서는 안된다.
HTML요소의 위치 변경
append(), prepend(). insertBefore(), insertAfter() 함수등을 동적 요소가 아닌 기존에 존재하는 HTML요소끼리 사용하면 서로 위치를 바꿀 수 있다.
1 2 3 4 5 6 7 | <div id="foo"></div> <div id="bar"></div> <script> // #foo의 위치가 #bar 다음으로 이동하게 된다. $("#foo").insertAfter("#bar"); </script> | cs |
'Javascript & JQuery&Ajax' 카테고리의 다른 글
| 정규표현식 (0) | 2019.02.13 |
|---|---|
| 입력 요소 값 가져오기 (0) | 2019.02.13 |
| HTML 요소의 CSS속성과 CSS클래스 제어 (0) | 2019.02.11 |
| 요소의 판별 (0) | 2019.02.08 |
| JQuery 이벤트 (0) | 2019.02.08 |