jQuery 제어

attr & prop

• attr ( = attribute )
  • attr(‘name’) => Element.getAttribute
  • attr(‘name’, ‘value’) => Element.setAttribute
  • removeAttr(‘name’) => Element.removeAttribute
• prop ( = property )
  • prop(‘name’) => Element.getAttribute
  • prop(‘name’, ‘value’) => Element.setAttribute
  • removeProp(‘name’) => Element.removeAttribute
• attr과 prop의 차이
  • attr
    • 해당 엘리멘트에서 특정 속성에 대해서 명시되어있는 값을 조회한다.
    • 찾으려는 속성이 태그에 명시되어있지 않으면 undefined가 뜬다.
    • style이나 src같은 설정 값에 대해 작업할 때 사용하는 것이 좋다.
  • prop
    • 해당 엘리멘트에서 특정 속성에 대해서 실제로 사용되는 값을 조회한다.
    • checked나 selected같은 변화하는 값에 대해 작업할 때 사용하는 것이 좋다.

조회 범위 제한

• 기존 JavaScript 방식

var test = document.getElementById('#test');
var innerTest = test.querySelectorAll('.innerTest');

• jQuery 방식

    //1. $() 함수 방식 : 엘리멘트를 한 번에 가져올 때 사용
    $('.innerTest', '#test').css("background-color", "red");
    $("li", "ul>li>ul").css( "background-color", "red");

    //2. find() 함수 방식 : 체인을 끊지 않고 작업의 대상을 변경하고 싶을 때 사용
    $("ul>li#findPoint")
    .css( "background-color", "blue")
    .find("ul>li")
    .css( "background-color", "red");

jQuery의 노드 제어 API

• 조건 1 : (1)<div id=”target”>(2)content<(3)/div>(4)
• 조건 2 : <div id=”clone”>clone test</div>

• 조건 3 : <div id=”append”>append test</div>

• 추가
  • $(‘#target’).before(‘내용’) : (1)의 위치에 추가
  • $(‘#target’).prepend(‘내용’) : (2)의 위치에 추가
  • $(‘#target’).append(‘내용’) : (3)의 위치에 추가
  • $(‘#target’).after(‘내용’) : (4)의 위치에 추가
• 삭제
  • $(‘#target’).remove() : 선택된 엘리먼트 제거
  • $(‘#target’).empty() : 선택된 엘리먼트의 텍스트 노드 제거
• 교체
  • $(‘<div>replace</div>’).replaceAll(‘#target’) : 선택된 엘리먼트를 교체, 교체할 내용을 먼저 작성
  • $(‘#target’).replaceWith(‘<div>replace</div>’) : 선택된 엘리먼트를 교체, 교체될 엘리먼트를 먼저 작성
• 복제
  • $(‘#target’).clone() : 선택된 엘리먼트를 복사
    • 예시) $(‘#clone’).clone().replaceAll(‘#target’);을 하게 되면 #target의 내용을 #clone을 복제한 엘리멘트로 교체한다.
• 이동
  • $(‘#target’).append(‘이동시킬 엘리멘트’) : 먼저 지정한 엘리먼트의 하위 노드로 나중에 지정한 엘리먼트를 이동시킨다.
    • 예시) $(‘#target’).append($(‘#append’));
• 참고 : https://api.jquery.com/category/manipulation/