본문 바로가기
Front/jQuery

03. jQuery HTML

by 오다다 코드 odada 2020. 8. 20.

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.

 

'Front > jQuery' 카테고리의 다른 글

06. jQuery Effects  (0) 2020.08.28
05. jQuery Event Methods  (0) 2020.08.28
04. jQuery HTML Dimensions  (0) 2020.08.28
03. jQuery HTML  (0) 2020.08.20
02. jQuery Selectors  (0) 2020.08.20
01. Hello jQyery  (0) 2020.08.20

댓글0