03. jQuery HTML

jQuery DOM 조작

jQuery의 매우 중요한 부분 중 하나는 DOM을 조작 할 수 있다는 것입니다.

DOM = 문서 개체 모델

DOM은 HTML 및 XML 문서에 액세스하기위한 표준을 정의합니다.

"W3C DOM (문서 개체 모델)은 프로그램과 스크립트가 콘텐츠, 구조 및 콘텐츠에 동적으로 액세스하고 업데이트 할 수 있도록하는 플랫폼 및 언어 중립적 인터페이스입니다. 문서 스타일. "

 

콘텐츠 가져오기

요소의 콘텐츠를 가져오거나 설정할 수 있습니다.

text()	선택한 요소의 텍스트 내용을 설정하거나 반환합니다.
html()	선택한 요소 (HTML 마크 업 포함)의 내용을 설정하거나 반환합니다.
val()	양식 필드의 값을 설정하거나 반환합니다.

 

text(), html()

See the Pen MWyjzax by miae (@flato) on CodePen.

 

속성 가져오기 

메서드의 속성 값을 가져오거나 설정할 수 있습니다.

attr()

선택한 요소의 속성 값을 설정하거나 반환합니다.

attr()

See the Pen val(), att() / jQuery by miae (@flato) on CodePen.

---

 

ADD Elements (요소 추가)

새로운 요소 및 콘텐츠를 쉽게 추가 할 수 있습니다.

append()	선택한 요소의 끝에 콘텐츠 삽입
prepend()	선택한 요소의 시작 부분에 콘텐츠 삽입
after()	선택한 요소 뒤에 콘텐츠 삽입
before()	선택한 요소 앞에 콘텐츠 삽입

 

See the Pen vYGmGoM by miae (@flato) on CodePen.

---

 

Remove Elements (요소 삭제하기)

remove()	선택한 요소 (및 하위 요소)를 제거합니다.
empty()	선택한 요소에서 하위 요소를 제거합니다.

 

See the Pen gOrWMKM by miae (@flato) on CodePen.

 

Get and Set CSS Classes (css 클래스 추가, 삭제하기)

addClass()	선택한 요소에 하나 이상의 클래스를 추가합니다.
removeClass()	선택한 요소에서 하나 이상의 클래스를 제거합니다.
toggleClass()	선택한 요소에서 클래스 추가 / 제거 간을 전환합니다.
css()	스타일 속성을 설정하거나 반환합니다.

 

See the Pen JjXNOda by miae (@flato) on CodePen.

 

See the Pen ZEWKamj by miae (@flato) on CodePen.

 

See the Pen NWNjXdM by miae (@flato) on CodePen.

---

 

jQuery 콜백 함수

JavaScript 문은 한 줄씩 실행됩니다. 그러나 효과를 사용하면 효과가 완료되지 않은 경우에도 다음 코드 줄을 실행할 수 있습니다. 이로 인해 오류가 발생할 수 있습니다.

이를 방지하기 위해 콜백 함수를 생성 할 수 있습니다.

현재 효과가 완료된 후 콜백 함수가 실행됩니다.

일반적인 구문 :
$ ( selector ) .hide ( speed, callback );

See the Pen jQuery 콜백함수 by miae (@flato) on CodePen.