[jQuery] jQuery Object 식별 방법

Published: by Creative Commons Licence

참고 문서

selector가 문자열인지 객체인지 판단

jQuery.type( obj )
var selector1 = 'body';
var selector2 = document.querySelector('body');
var selector3 = $('body');

$.type(selector1); // 'string'
$.type(selector2); // 'object'
$.type(selector3); // 'object'

typeof와 차이점은 여기서.

jQuery 객체인지 판단

var selector1 = document.querySelector('body');
var selector2 = $('body');

selector1 instanceof $; // false
selector2 instanceof $; // true
selector2 instanceof jQuery; // true

$() 혹은 jQuery()는 셀렉터이면서 jQuery 객체의 생성자이기 때문에 가능한 방법.

동등 비교

<!DOCTYPE html>
<html>
<body>
<div id="target">안녕!</div>
</body>
</html>

페이지가 위와 같을때 자바스크립트에선:

document.getElementById('target') == document.getElementById('target');  // true
document.getElementById('target') === document.getElementById('target');  // true

이처럼 DOM selector를 이용해 선택한 요소를 동등비교에 사용할 수 있으나 jQuery에선:

$('#target') == $('#target');  // false
$('#target') === $('#target');  // false

위처럼은 불가능하다. 이는 jQuery 선택자가 반환하는 객체가 기본적으로 배열의 형태를 띄기 때문이다. 따라서 jQuery로 선택한 요소를 비교하려면 자바스크립트 객체로 변환하거나 배열에서 꺼내야 한다:

// return javascript DOM element
var a = $('#target')[0];
var b = $('#target').get(0);
var c = $('#target').get()[0];
a === b // true;
b === c // true;
c === a // true;

자신이 아닌것 찾기

  • 1
  • 2
  • 3
  • 4

위와 같을 때 target2가 아닌 <li>를 선택하는 방법이다.

$('li:not(#target2)').length  // 3
$('li').not('#target2').length  // 3

이렇게 .not()1 혹은 :not()으로 특정 요소를 제거하거나,

$('#target2 ~ li').length  // 2
$('#target2').siblings().length  // 3
$('#target2').siblings('li').length  // 3

혹은 .siblings()2처럼 자신을 제외한 요소를 선택하는 셀렉터를 사용하는 방법이 있다.

위 예시 중 Next Siblings Selector~는 마지막으로 선택한 요소 이후부터 탐색한다.

이벤트 발생 시 특정 요소가 맞는지 확인하기

.is( selector )

is()는 지정된 요소와 jQuery 객체가 동등한지 비교하는 필터링 메서드다. selector에는 CSS selector expression, 혹은 jQuery 객체나 배열이 올 수 있는데 선택한 요소가 selector와 일치하거나 그 일부일 경우 true를 반환한다.

<script>
  $(document).ready(function () {
    $('body').click(function (event) {
      var flag = $(event.target).is('#yooo');
      $('#result1').val(flag);
    });

    $('body').click(function (event) {
      var flag = $(event.target).is($('body *').not('#yooo'));
      $('#result2').val(flag);
    });
  });
</script>

<body>
    <ul>
        <li>나말고</li>
        <li id="yooo">클릭</li>
        <li>나말고</li>
        <li>나말고</li>
    </ul>
    is #yooo: <input type="text" id="result1"/><br/>
    is not #yooo: <input type="text" id="result2"/>
</body>
  1. 객체 배열에서 지정된 요소를 삭제한다. 

  2. 자신을 제외한 같은 부모를 갖는 모든 형제요소를 반환한다.