jQuery 문서 객체 선택과 탐색

10 Dec 2020 in Programming on JavaScript

filter() : 문서 객체를 필터링
end() : 객체 선택을 전으로 돌린다.
eq() : 특정 위치에 있는 문서 객체 선택
first() : 첫번째에 있는 문서 객체 선택
last() : 마지막에 있는 문서 객체 선택
add() : 문서 객체 추가로 선택
is() : 문서 객체 특징에 따라 선택
find() : 특정 태그를 선택

filter,end,add

filter

• filter는 다음과 같이 두가지 방법으로 사용된다.

  $(selector).filter(selector);
  $(selector).filter(function(){});
  

• 홀수번째 요소의 색을 빨간색으로 하기

  

  jquery

  $(function(){
      $('h2').filter(':even').css("color","red")
  })
  

• 그렇다면, filter 를 두번 씌우면 어떻게 될까?

  $(function(){
      $('h2').filter(':even').css("color","red").filter(':even').css("color","pink");
  })
  

  : 다음과 같이 filter가 된 범위에서 또 filter가 적용된다.

• 위 코드를 다른 방법으로 표현하면 다음과 같다.

  $(function(){
      $('h2').filter(function(index){
          return index%2==0;
      }).css("color","red").filter(function(index){
          return index%2==0;
      }).css("color","pink");
  })
  

end

• 문서 객체 선택을 ‘한단계’ 뒤로 돌린다.

  $(function(){    $('h2').filter(':even').css("color","red").filter(':even').css("color","pink").end().css("background","yellow");
              })
  

• item 0,1,2,3,4,5 –filter1–> item 0,2,4 선택 –filter2–> item 0,4 선택 –end사용–> item 0,2,4 선택
• end를 사용하면 filter2가 해제되어서 그 전 상태로 돌아간다!

add

• add는 현재 선택한 객체 범위를 확장시킨다.

• item 0,2,4를 선택한 후 add함수로 newItem을 추가해준다. 그리고 노란 배경

  

  $(function(){
      $('h2').filter(':even').css("color","red").add('h3').css("background","yellow");
  })
  

eq, first, last, is, find

eq

• 배열.eq(index)
• index가 음수면 뒤에서 부터 세서 반환한다.

first,last

• 첫번째 요소, 마지막 요소 반환.

is

• 문서 객체의 특징 판별
• 이벤트와 묶여서 잘 쓰인다.

find

• 특정 태그를 선택한다. xml 문서에서 데이터를 추출하는데 많이 사용.