Front/jQuery

03. jQuery HTML

oodada 2020. 8. 20. 13:08

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
02. jQuery Selectors  (0) 2020.08.20
01. Hello jQyery  (0) 2020.08.20
티스토리 친구하기