22.07.05 - [jQuery] [요소 탐색(순회) 메소드] , [함수 content 영역], [함수 요소 생성 및 제거]

 

-- Index --

 

1. 요소탐색(순회) 메소드	2. 함수 content 영역	3. 함수 요소 생성 및 제거
조상 메소드 (상위요소선택) parent(), parents() 등	속성 접근 attr(), prop()	요소 삽입 메소드 ( append, prepend, after, before)
자손 메소드(하위요소선택) childredn(), find() 등	텍스트 접근 html(), text()	요소 복제 메소드 ($(선택자).clone(true|false))
동위 메소드 (동위요소선택) siblings(). next() 등		요소 제거 및 잘라내기 메소드 (empty(), remove(), detach())

 

 

 

---

 

 

 

 

1. 요소 탐색(순회) 메서드

 

 

1-1. 조상 메소드 : 상위 요소 선택

 

 

>>기본 세팅

 

 

---

 

>> 실습 테스트 : 요소 가져오기 ( 상위 )

 

 

 

 

 

1. 바로 위 부모만

2. 모든 상위 요소

3. 조상 중에서도 div만

4. 범위 지정해서 ( target < x < parameter )

• span태그도 안 나오고 div도 안 나오고
• div태그 전까지

 

---

 

>> 출력 확인

 

 

---

 

 

 

1-2. 자손 메소드 : 하위 요소 선택

 

 

 

>> 기본 세팅

 

 

---

 

>> 실습 테스트 : 요소 가져오기 ( 하위 )

 

 

 

1. 자식 모두

2. 자식 중에서도 첫 번째 자식과 두 번째 자식

3. 자식이었던 3개의 자식들 중에 자식 가진 애들 출력

• a, b, c, 중에 자식 잇는 a, c 것만 출력 ( b는 자식 없어서 출력 안됨)

4. 자식의 자식 중에서도ul 태그

5.자식 중에서 li태그 찾아보기

 

 

---

 

>> 출력 확인

 

 

 

 

---

 

 

1-3. 동위 메소드 : 동위 요소 선택

 

 

>> 기본 세팅

 

 

---

 

>> 실습 테스트 : 요소 가져오기 ( 동위 )

 

 

 

1. 형제 모두 선택

2. 형제 중 p 태그인애들만 가져오기

3. 다음 요소 하나 가져오기.. h3가져온다.

4. 다음 요소 전부 가져오기

5. 형제 태그 중p 태그까지~ 초과 < x < 미만

 

 

---

 

 

>> 출력 확인

 

 

 

---

 

 

 

2. 함수_content영역

 

 

 

2-1. 속성 접근

• attr() ---  html로 접근 
• prop() ---  jQuery로 접근 

 

2-2. 텍스트 접근

• html() --  태그까지 모두 출력됨
• text() --  텍스트만 출력됨

 

 

 

 

---

 

2-3 콜백 함수

• //html(콜백함수)
• //콜백함수의 파라미터로 인덱스와 기존의 콘텐츠 내용을 받을 수 있다.
• //JS에서 반복문 사용해도 되지만 
• //쉽게 사용하라고  jQuery에서 만든. 함수 - 이런 거 자주 사용하진 않는다.
• 콜백 함수에서 파라미터 2개 a, b, 넣어주면
• a는 인덱스 /
• b는 기존의 content 내용 들어온다.

 

 

 

 

 

---

 

 

 

 

3. 함수 요소 생성 및 제거

 

• JS에서는 document.createElement() 했던 거
• jQuery에서 사용해보기
• jQuery로 만든 요소를 담는 변수는 $ 붙여주는 것이 일반적.

 

 

 3.1 요소 삽입 관련 메소드

 

• 8가지 체크

---

 

 

결과 똑같이 나와야 한다!

• A와 B의 순서 달라지는 것 체크
• 해봐서 안되면 검색해서 사용할 수 있을 정도로만 알아 놓기
• ## tip 자손 / 형제
• 자손으로 추가되면 같은 라인에 추가된다.
• 형제로 추가되면 다른 라인에 추가된다.

 

---

 

3.2 요소 객체 복제 메소드

 

 

 

 

실습 : 이벤트 걸려있는 div 요소를 복제해보기 

• CSS에 클래스 스타일 적용 미리 만들어놓고 
• 요소에 클래스를 추가해주고 삭제해주는 방식으로 이벤트 추가
• hover()는 실제 2가지의 이벤트가 발생하는 것이다.

 

 

## hover

CSS – xxx:hover 로 해서 사용 – 2가지 이벤트에대해 하나 효과 적용

jQuery – 마우스 올라갈 때 / 내려갈 때 2가지 이벤트에대해 효과 적용

 

 

 

##이벤트 걸기 : hover( f01,f02)

• f01는 마우스 올라갔을 때 동작
• f02는 마우스 내려갔을 때 동작

 

 

---

 

## 복제하기 :  clone(true || false );

 

## 파라미터 true 지정해준 애는 이벤트까지 다 같이 복제됨.

 

 

 

---

 

 

3.3 요소 객체 제거 및 잘라내기 함수

 

 

 

---

 

 

실습 : 이벤트 걸려있는 div 요소를 제거하고 다시 붙어 넣어서 테스트해보기

• 제거하고 다시 이어주기 하는 과정에서 메소드마다 차이점 체크

 

 

 

 

1. empty() - 해당 요소의 하위 자식만 삭제된다. ( 안녕이라는 글씨가 삭제된다 )

 

2. remove() - 해당 요소가 사라진다 - 대신에 사라질 때 리턴해준다.

>> 리턴 값 다시 붙여주기 -- 이벤트 적용 안된다.

 

3. detach() - 해당 요소가 사라진다 - 대신에 사라질 때 리턴해준다.

>> 리턴 값 다시 붙여주기 -- 이벤트 적용된다.

 

 

 

 

 

---