[jQuery] HTML 관련 메서드

1. jQuery - 콘텐츠 및 속성 가져오기

1) 콘텐츠 가져오기 - text(), html(), val()

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

• html() - 선택한 요소의 내용을 설정하거나 반환함 (HTML 마크업 포함)

• val() - 양식 필드의 값을 설정하거나 반환함

2) 속성 가져오기 - attr()

ex) alert($("#ws3").attr("href"));

2. jQuery - 콘텐츠 및 속성 설정

1) 콘텐츠 설정 - text(), html(), val()

ex)

$("#test1").text("Hello World!");

$("#test2").html("<b>Hello World!</b>");

$("#test3").val("Dolly Duck");

2) 속성 설정 - attr()

ex)

$("#w3s").attr("href", "https://www.~~~");

$("#w3s").attr({
	"href": "https://www.~~~",
    "title": "w3schools jQuery Tutorial"
});

3. jQuery - 요소 추가

• append() - 선택한 요소의 끝에 내용 삽입 (태그의 내부)

• prepend() - 선택한 요소의 시작 부분에 내용 삽입 (태그의 내부)

• after() - 선택한 요소 뒤에 내용 삽입 (태그의 외부)

• before() - 선택한 요소 앞에 내용 삽입 (태그의 외부)

4. jQuery - 요소 제거

• remove() - 선택한 요소(및 하위 요소)를 제거함

• empty() - 선택한 요소에서 하위 요소를 제거함

cf) remove()는 제거할 요소를 필터링할 수 있는 하나의 매개변수도 허용함

ex) $("p").remove(".test");

5. jQuery - CSS 클래스 가져오기 및 설정

• addclass() - 선택한 요소에 하나 이상의 클래스를 추가함

• removeclass() - 선택한 요소에서 하나 이상의 클래스를 제거함

• toggleclass() - 선택한 요소에서 클래스 추가/제거 간을 전환함

• css() - 스타일 속성을 설정하거나 반환함

6. jQuery - css() 메서드

• css("propertyname") - css 속성 반환

• css("propertyname", "value") - css 속성 설정

• css({"propertyname":"value", "propertyname":"value",...}) - 여러 css 속성 설정

7. jQuery - 차원

• 그림은 사이트 참고 (https://www.w3schools.com/jquery/jquery_dimensions.asp)

• width() - 요소의 너비를 설정하거나 반환 (패딩, 테두리 및 여백 제외)

• height() - 요소의 높이를 설정하거나 반환 (패딩, 테두리 및 여백 제외)

• innerWidth() - 요소의 너비 반환 (패딩 포함)

• innerHeight() - 요소의 높이 반환 (패딩 포함)

• outerWidth() - 요소의 너비 반환 (패딩 및 테두리 포함)

• outerHeight() - 요소의 높이 반환 (패딩 및 테두리 포함)

• outerWidth(true) - 요소의 너비 반환 (패딩, 테두리 및 여백 포함)

• outerHeight(true) - 요소의 높이 반환 (패딩, 테두리 및 여백 포함)