《날카로운 jQuery》 요점 귀납 (二)jQuery의DOM 조작 (하)

《날카로운 jQuery》 요점 귀납 (二)jQuery의DOM 조작 (하)
 
12 HTML, 텍스트 및 값 설정 및 가져오기
$("selector").html()에서 html 코드를 얻습니다$("selector").html(html) 설정 html 코드(태그 내용 교체), html() 방법은 XML 문서에 사용할 수 없습니다
$("selector").text () 순수한 텍스트 내용 가져오기 $("selector").text(text)는 텍스트 내용(태그의 내용 대체)을 설정하고, text () 방법은 XML 문서에 사용할 수 있습니다.
$("selector").val () 은 요소의 값을 가져옵니다. $("selector")val(value)은 요소의 값을 설정합니다. (외:defaultValue 속성은 html 기본 속성을 얻을 수 있습니다. P80 예:if(txt value==this.defaultValue) {...})$("select").val ("option") 은 select 컨트롤의 선택 상태를 설정합니다. $(": 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 내용을 순환하여 얻는 방법:

  
    

   
     
   
     <
   
     script
   
     >
   
     

   
     var
   
      $ul 
   
     =
   
      $(
   
     "
   
     ul
   
     "
   
     ).children();

   
     for
   
      (
   
     var
   
      i
   
     =
   
     0
   
      len
   
     =
   
     $ul.length; i
   
     <
   
     len; i
   
     ++
   
     ){
alert($ul[i].innerHTML);
}

   
     </
   
     script
   
     >
  
    

$("selector").next () 일치하는 원소 뒤에 있는 동년배 원소를 가져와 그룹으로 되돌려줍니다
 
$("selector").prev () 일치하는 원소 앞에 있는 동년배 원소를 가져와 그룹으로 되돌려줍니다
$("selector").siblings () 는 일치하는 원소의 앞뒤 동년배 원소를 가져와 P88이 사용한 예를 되돌려줍니다.

  
    

   
     
   
     <
   
     script
   
     >
   
     
$(
   
     "
   
     .has_children
   
     "
   
     ).click(
   
     function
   
     (){
$(
   
     this
   
     ).addClass(
   
     "
   
     highlight
   
     "
   
     )
.children(
   
     "
   
     a
   
     "
   
     ).show().end()
.siblings().removeClass(
   
     "
   
     highlight
   
     "
   
     )
.children(
   
     "
   
     a
   
     "
   
     ).hide();
})

   
     </
   
     script
   
     >
  
    

$("selector").closest () 는 가장 가까운 일치하는 요소를 가져옵니다. 우선 현재 요소가 일치하는지 확인하십시오. 일치하면 요소 자체를 되돌려줍니다. 그렇지 않으면 부모 요소가 일치하는 것을 알 때까지 단계별로 찾습니다. 찾지 못하면 빈 jQuery 대상 P89례를 되돌려줍니다.

  
    

   
     
   
     <
   
     script
   
     >
   
     
$(document).bind(
   
     "
   
     click
   
     "
   
     ,
   
     function
   
     (e){
$(e.target).closest(
   
     "
   
     li
   
     "
   
     ).css(
   
     "
   
     color
   
     "
   
     ,
   
     "
   
     red
   
     "
   
     );
})

   
     </
   
     script
   
     >
  
    

 
기타 노드를 옮겨다니는 방법 (find (), Filter (),nextall (),prevAll (),parent (),parents () 등) 이 책은 생략합니다
 
14 CSS-DOM 작업
$("selector").css ("property") 는 요소 스타일의property 속성의 값을 가져옵니다. $("selector")css ("property","value") 는 요소 스타일의property 속성의 값을 설정합니다. $("selector")css({"property1":"value1", "property2":"value2"}) 요소의 여러 스타일 속성의 값을 동시에 설정합니다.주: 예: "font-size"= fontSize(인용부호가 없는 낙타봉 쓰기)
$("selector").css("opacity", "value") 투명도 설정(모든 브라우저 지원),value 값(0~1)
$("selector").css ("Height") 는 원소의 높이에 대한 Height 값을 가져옵니다. ("selector")하이라이트 () 는 원소가 현재 계산한 실제 고도 값을 얻습니다. auto와 같은 것은 되돌려주지 않을 것입니다. window와document의 높이 $("selector") 를 가져올 수도 있습니다.Height(100) 높이를 설정합니다. 기본 단위 px입니다. 다른 단위를 사용하려면 문자열을 전달해야 합니다. 예를 들어.height(10em)
$("selector").width () 는 원소가 현재 계산한 실제 너비 값을 가져옵니다
$(selector).offset () 는 현재 창에서 원소의 상대적인 편이를 가져옵니다. 되돌아오는 대상은 두 가지 속성을 포함하고 top와left입니다. 이 방법은 보이는 원소에만 유효합니다.P91에서

요소의 편이도를 얻는 예

  
    

   
     
   
     <
   
     script
   
     >
   
     

   
     var
   
      offset 
   
     =
   
      $(
   
     "
   
     p
   
     "
   
     ).offset();

   
     var
   
      left 
   
     =
   
      offset.left();

   
     var
   
      top 
   
     =
   
      offset.top();

   
     </
   
     script
   
     >
  
    

$("selector").position () 은 원소가 최근의position 스타일 속성에 비해relative나 absolute의 할아버지 노드의 상대적인 편이를 가져옵니다. 되돌아오는 대상은 두 가지 속성을 포함합니다. top와left입니다.예:

  
    

   
     
   
     <
   
     script
   
     >
   
     

   
     var
   
      position 
   
     =
   
      $(
   
     "
   
     p
   
     "
   
     ).position();

   
     var
   
      left 
   
     =
   
      position.left;

   
     var
   
      top 
   
     =
   
      position.top;

   
     </
   
     script
   
     >
  
    

$("selector").scrollTop () 은 원소의 스크롤 바 사이의 맨 끝 거리를 가져옵니다. 예를 들어 var scrollTop = $("selector").scrollTop();$("selector").scrollLeft () 는 원소의 스크롤 바 거리 왼쪽의 거리를 가져옵니다. 예를 들어 var scrollLeft = $("selector").scrollLeft();
 
원소 스크롤 바가 굴러가는 위치를 제어하고 상기 두 가지 방법에서 파라미터를 전달할 수 있습니다. 예를 들어 $("textarea").scrollTop(300);$("textarea").scrollLeft(300);