JavaScript 8. jQuery HTML/CSS

zhyun·2020년 10월 8일
0

html

목록 보기
16/21

참고

jQueryHTML 20.10.06

val()

get/set 메소드

  • 컨텐츠 확인 및 변경 메소드
    • text() : 선택한 요소의 텍스트 내용을 반환 (html 코드 제외)
    • text(str) : 선택한 요소의 텍스트 내용을 str로 설정
    • html() : 선택한 요소의 내용을 반환(html코드 포함)
    • html(str) : 선택한 요소의 내용을 str로 설정(html코드 포함)
    • val() : 양식 필드 (form fields)의 값을 반환 (value 속성의 값)
    • val(str) : 양식 필드(form fields)의 값을 str로 설정
    • val() 예제: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_val_get

attr() : 속성 확인 및 변경 메소드

prop() : 속성 확인 및 변경 메소드

attr() & prop() 비교

  • 공통점
    • 선택한 요소의 속성 및 값을 설정 or 반환
    • get 수행 시, 선택된 요소가 여러 개라면 첫번째 요소만.
    • set 수행 시, 선택된 요소가 여러 개라면 모든 요소에.
  • 차이점
    • attr : 요소의 속성이나 정보(id, class, src, style, width등)
    • prop : 요소가 가지는 실제적인 상태(checked, selected, disabled, readonly, multipel..), true/false로 반환하고 설정함.
  • 예시 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_prop_attr

요소 추가 메소드1

요소 추가 메소드2

  • $(selector).after(content)
  • $(content).insertAfter(selector)

요소 삭제 및 복사 메소드3

  • empty()
  • remove()
  • clone()
  • clone(true/false)

스타일시트(css)관련 메소드1

스타일시트(css)관련 메소드2

https://www.w3schools.com/jquery/jquery_css_classes.asp

  • addClass(class) : 선택된 요소에 클래스 이름(class)을 추가
  • hasClass(class) : 선택된 요소에 지정된 클래스(class)가 있는지 확인.있으면 true 반환
  • removeClass(class) : 선택한 요소에서 지정된 클래스 이름(class)을 삭제
  • toggleClass(class) : 선택한 요소에 클래스 이름(class)을 추가 하거나 삭제함.
    : 클래스 이름(class)이 추가되어 있으면 삭제하고, 없으면 추가함.

치수 관련 메소드

https://www.w3schools.com/jquery/jquery_ref_html.asp

  • $(selector).width() : 선택된 요소의 너비를 설정/반환
profile
HI :)

0개의 댓글