날카로운 jQuery 요점 정리 (2) jQuery의 DOM 작업 (2 부)_jquery

12 HTML, 텍스트 및 값 설정 및 가져오기

$("selector").html()
html 코드 가져오기
$("selector").html(html)
html 설정 코드(태그의 콘텐츠 대체), html() 메서드는 XML 문서에 사용할 수 없습니다.
$("selector").text()
일반 텍스트 콘텐츠 가져오기
$("selector").text (text )
텍스트 내용 설정(태그의 내용 대체), XML 문서에서 text() 메소드를 사용할 수 있습니다.
$("selector").val()
값 가져오기
$("selector ").val(value)
요소의 값을 설정합니다. (외부: defaultValue 속성은 html 기본 속성, P80을 얻을 수 있습니다. 예: if (txt_value==this.defaultValue) ){...})
$(" select").val("option")
다음과 유사하게 선택 컨트롤의 선택된 상태를 설정합니다: $(":checkbox").val("check1 ","check2"); $(":radio").val("radio1");
(외부: attr() 메서드를 사용하여 다음과 같은 동일한 기능을 얻을 수 있습니다. $("select option :eq(1)").attr("selected",true); $(" [value=radio2]:radio").attr("checked",true);)

13 트래버스 노드

$("selector").children()
매칭하기 요소의 하위 요소 집합, 배열로 반환됨(하위 요소만 고려되고 하위 요소 아래의 하위 요소는 고려되지 않음) )
확장: 각 하위 요소의 html 콘텐츠를 반복하는 방법:


$( "selector").next()
일치하는 요소 바로 뒤에 있는 형제 요소를 가져옵니다. , 배열로 반환
$("selector").prev()
일치하는 요소 바로 앞의 형제 요소를 가져오고 배열로 반환 Return
$("selector").siblings()
일치하는 요소 전후의 형제 요소를 모두 가져와서 배열로 반환
P88 이 방법 사용 예:


$( "selector").closest()
가장 가까운 일치 요소를 가져옵니다. 먼저 현재 요소가 일치하는지 확인하고, 일치하면 요소 자체를 반환하고, 일치할 때까지 상위 요소를 검색합니다.
P89 예시



노드 순회를 위한 다른 메소드(find(), filter(), nextAll(), prevAll(), parent(), parent() 등) 이 책은 생략됨

14 CSS-DOM 작업

$("selector").css("property")
요소 스타일의 속성 속성 값 가져오기
$( "selector").css("property","value")
요소 스타일의 속성 속성 값 설정
$("selector").css({"property1":"value1", "property2" :"value2"})
요소의 여러 스타일 속성 값을 동시에 설정합니다. 참고: 예: "font-size" =fontSize(따옴표 없는 CamelCase)
$("selector").css("opacity","value")
투명도 설정(모든 브라우저 지원), 값 값( 0 ~ 1)
$("selector").css("height")
요소 높이의 높이 값을 가져옵니다
$("selector").height()
요소 가져오기 현재 계산된 실제 높이 값은 자동 등을 반환하지 않습니다. 또한 창과 문서의 높이를 얻는 데 사용할 수도 있습니다.
$("selector").height(100)
높이를 설정하고, 기본 단위는 px입니다. 다른 단위를 사용하려면 .height(10em)
$("selector").width()
현재 계산된 실제 너비 값을 가져옵니다.

$(selector).offset()
현재 창에 있는 요소의 상대 오프셋을 가져옵니다. 반환된 객체에는 top과 left라는 두 가지 속성이 포함되어 있습니다.
P91
요소의 오프셋을 가져오는 예


$("selector").position()
style 속성이 다음으로 설정된 요소의 가장 가까운 위치를 가져옵니다. 상대 또는 절대의 상위 노드의 상대 오프셋입니다. 반환된 객체에는 top과 left라는 두 가지 속성이 포함되어 있습니다. 예:

$("selector").scrollTop()
다음과 같이 요소의 스크롤 막대와 상단 사이의 거리를 가져옵니다. var scrollTop = $("selector").scrollTop( ); <script>var $ul = $("ul").children();for (var i=0 len=$ul.length; i<len; i++){alert($ul[i].innerHTML);}</script> $("selector").scrollLeft() <script>$(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();})</script>다음과 같이 요소 스크롤 막대의 왼쪽으로부터의 거리를 가져옵니다. var scrollLeft = $("selector").scrollLeft() <script>$(document).bind("click",function(e){$(e.target).closest("li").css("color","red");})</script>요소의 스크롤 막대를 제어하여 위치로 스크롤합니다. 매개변수는 다음과 같은 두 가지 메서드로 전달될 수 있습니다. <script>var offset = $("p").offset();var left = offset.left();var top = offset.top();</script>$("textarea").scrollTop(300); <script>var position = $("p").position();var left = position.left;var top = position.top;</script>$("textarea").scrollLeft (300);