45일차 - [JQ] HTML(get, set)

안녕하세요. pitang입니다.

45일차 저번 게시글에 이어! jQuery HTML 중 get, set에 대해 알아보겠습니다.

 

jQuery-HTML(get)

get은 쉽게 내용을 가져오는 것이다.

 

html() - 선택한 요소의 내용을 설정하거나 반환한다.

text() - 선택한 요소의 텍스트 내용을 설정하거나 반환한다.

val() - 폼 필드 값을 설정하거나 반환한다.

 

ex1) html()

34html-get-html.html

console

 

ex2) text()

35html-get-text.html

console

ex3) val()

36html-get-val.html

console

---

jQuery 라이브러리를 사용해서 문서 객체 속성을 조작할 때는 attr() 메서드를 사용한다.

attr() - 매개변수를 넣는 방법에 따라 속성을 지정하거나 추출할 수 있다. 문서 객체의 속성을 조작한다.

 

attr() 매서드에 매개변수를 하나 입력하면 해당 속성을 추출한다.

ex1)

41html-get-attr.html

console

-> attr() 메서드로 id값 link1, link2, link3의 값 순으로 가져와진다는 것을 console창을 통해 확인할 수 있다.

 

jQuery-HTML(set)

set은 get과 반대로 내용을 설정한다고 생각하면 쉽다.

 

html() - 선택한 요소의 내용을 설정하거나 반환한다.

text() - 선택한 요소의 텍스트 내용을 설정하거나 반환한다.

val() - 폼 필드 값을 설정하거나 반환한다.

 

콜백 함수와 함께 제공된다.

콜백 함수에는 선택한 요소 리스트에서 현재 요소의 인덱스와 원래 값의 두 가지 매개변수가 있다.

 

ex1)

37html-set-html.html

console

 

ex2)

38html-set-text.html

console

 

ex3)

39html-set-val.htlm

console

---

attr() - 특성 값을 설정/변경하는 데 사용된다. 문서 객체의 속성을 조작한다.

 

ex1)

42html-set-attr.html

console

-> link1, link2, link3 순서로 다음, 네이버, 구글 사이트 주소를 attr() 메서드로 넣어주었다.

 

ex2)

43html-set-attr.html

console

-> input요소에 사이트 주소를 넣으면 그 값이 바로 a 요소에 들어가 연결이 되는 것을 알 수 있다.

 

---

get-set 응용 예시

ex1)

40html-get-set.html

console

-> textarea 안에 적힌 글들을 val()로 얻어 str을 저장하고,

     저장한 str을 div요소에 html로 다시 설정해줬다. 쉽게 쓰였다고 하면 더 쉽게 이해가 갈 것이다.

 

ex2)

44html-sample.html

console

-> attr()를 이용해 속성과 값을 넣어줄 수 있다. 

-> 이미지에 마우스가 올라가면 .big이 그 이미지로 바뀌는 것을 볼 수 있다.

 

 

 

감사합니다.

 

*m1 맥북을 사용 중입니다.*