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() : 속성 확인 및 변경 메소드
- return을 true/false
$(selector).prop(property)$("#chk1).prop("checked"); $("#chk1").prop("checked",true);
$(selector).prop();- 예제 : https://www.w3schools.com/jquery/html_prop.asp
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
- 예제 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append
$(selector).append(content)- 선택한 요소(selector)내부의 마지막 위치에 content를 추가
$(content).appendTo(selector)$(selector).prepend(content)$(content).prependTo(selector)
요소 추가 메소드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)을 추가
- 추가예제 : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_addclass
- 중복된 소스 줄일 수 있음
- hasClass(class) : 선택된 요소에 지정된 클래스(class)가 있는지 확인.있으면 true 반환
- removeClass(class) : 선택한 요소에서 지정된 클래스 이름(class)을 삭제
- toggleClass(class) : 선택한 요소에 클래스 이름(class)을 추가 하거나 삭제함.
: 클래스 이름(class)이 추가되어 있으면 삭제하고, 없으면 추가함.
치수 관련 메소드
https://www.w3schools.com/jquery/jquery_ref_html.asp
- $(selector).width() : 선택된 요소의 너비를 설정/반환
HI :)