[SIST] Web_jquery_days09/days10

1. contents(내용) 가져올 때 사용하는 method

1) text() : 문자열로 가져오는 메서드

2) html() : html 요소로 가져오는 메서드

3) val() : value를 가져오는 메서드

---

2. attribute(속성) 가져오거나 설정할 때 사용하는 method

1) attr()

- 속성 값 가져올 때 예시: $("a").attr("href"); 

- 속성 값 설정할 때 예시 : $("a").attr("href", "http://www.naver.com");

---

3. element(요소) 추가할 때 사용하는 method

1) append() : 마지막 자식으로 추가

부모요소.append(자식요소)

 

2) appendTo() : 마지막 자식으로 추가

자식요소.appendTo(부모요소)

 

3) prepend() : 첫 번째 자식으로 추가

부모요소.prepend(자식요소)

 

4) prependTo() : 첫 번째 자식으로 추가

자식요소.prependTo(부모요소)

 

> 원하는 위치에 삽입하고 싶을 때는 아래와 같이 하면 된다.

---

4. 태그 제거하기

1) .html(""); - 요소 안의 자식 태그들을 삭제

2) .empty(); - 요소 안의 자식 태그들을 삭제

3) .remove(); - 해당 요소 자체를 삭제

 

* 제거할 요소를 필터링 가능

요소.remove(요소) : 해당 요소 안에 있는 것들 중 제거할 요소만을 제거

---

5. jquery에서 css 조작하는 방법

1) css() 메서드 - css 스타일로 설정
2) addClass() 메서드 - 클래스를 만들어두고 추가
3) removeClass() - 클래스를 제거

4) toggleClass() - 있으면 클래스 속성 제거, 없으면 클래스 속성 추가

---

6. jquery 요소 너비와 높이 관련된 method

1. width() - 요소 너비
2. innerWidth() - 요소 너비 + 패딩
3. outerWidth() - 요소 너비 + 패딩 + 보더 (border)
4. outerWidth(true) - 요소 너비 + 패딩 + 보더 (border) + 마진(margin)

1. height() - 요소 높이
2. innerHeight() - 요소 높이 + 패딩
3. outerHeight() - 요소 높이 + 패딩 + 보더(border)
4. outerHeight(true) - 요소 높이 + 패딩 + 보더(border) + 마진(margin)

 

---

7. 기본 기능을 막는법 - event.preventDefault()

---

8. jquery Traversing (횡단)

- 부모, 조부모, 증조부모 레벨의 요소를 찾음
- 자손, 중손자 레벨의 요소를 찾음
- 형제 레벨의 요소를 찾음

 

- 자기 자신을 함수로 등록하는 것을 arguments.callee

 

See the Pen Untitled by 야리니 (@yelin-park) on CodePen.

---

[부모를 찾는 메서드]

parent() - 직계 부모를 나타냄
parents() - 모든 조상 부모를 나타냄
parentsUntill() - 모든 조상 부모 중 해당하는 요소

 

---

 

$("span").parent()

 

$("span").parents()

$("span").parents("ul")

$("span").parentsUntil("div")

---

[후손(자손)을 찾는 메서드]

children() - 선택한 요소의 모든 직계 자식을 반환한다.
find() - 선택한 요소의 모든 하위 자식을 검색하여 반환한다.

---

[형제를 찾는 메서드]

1) siblings() - 선택한 요소의 모든 형제 요소를 반환

2) next() - 선택한 요소의 다음 형제 요소를 반환

3) prev() - 선택한 요소의 이전 형제 요소를 반환

4) nextAll() - 선택한 요소의 다음 모든 형제 요소를 반환

5) prevAll() - 선택한 요소의 이전 모든 형제 요소를 반환

6) nextUntil() - 선택한 요소의 다음 모든 형제 중 선택자 앞까지만 반환

7) prevUntil() - 선택한 요소의 이전 모든 형제 중 선택자 앞까지만 반환