JQuery Selector에서 DOM 요소를 얻는 방법

jquery 선택기에서 실제 DOMElement를 가져 오는 것을 찾는 데 상당히 어려움이 있습니다. 샘플 코드 :

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

그리고 다른 코드 조각에서 확인란의 선택된 값을 결정하려고합니다.

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

그리고 제발, 나는하고 싶지 않습니다 :

  if ( checkbox.eq(0).is(":checked"))
    //do something

그것은 확인란 주위에 있지만 다른 경우에는 실제 DOMElement가 필요했습니다.

다음을 사용하여 원시 DOM 요소에 액세스 할 수 있습니다.

$("table").get(0);

또는 더 간단하게 :

$("table")[0];

그러나 실제로는 (내 경험상) 필요한 것이 많지 않습니다. 확인란 예를 보자.

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

더 "jquery'ish"이고 (imho) 더 간결합니다. 번호를 매기려면 어떻게해야합니까?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

이러한 기능 중 일부는 브라우저의 차이점도 숨길 수 있습니다. 일부 특성은 다를 수 있습니다. 전형적인 예는 AJAX 호출입니다. 원시 Javascript 에서이 작업을 올바르게 수행하려면 약 7 가지 대체 사례가 XmlHttpRequest있습니다.

편집 : 요소를 얻을 수 없다고 가정하는 것이 잘못 된 것 같습니다. 다른 사람들이 여기에 게시 한 것처럼 다음을 얻을 수 있습니다.

$('#element').get(0);

실제로 일치하는 DOM 요소를 반환하는지 확인했습니다.

요소를 문자열로 가져와야했습니다.

jQuery("#bob").get(0).outerHTML;

어느 것이 당신에게 뭔가를 줄 것입니다 :

<input type="text" id="bob" value="hello world" />

... DOM 요소가 아닌 문자열로.

DOM 요소와 직접 상호 작용 해야하는 document.getElementById경우 특정 요소와 상호 작용하려는 경우 클래스 이름이 하나의 요소에만 있거나 다른 옵션이 있다고 가정하면 ID를 알고있을 것입니다. 위험하다.

그러나 나는 다른 사람들과 동의하는 경향이 있습니다. 대부분의 경우 jQuery가 제공하는 것을 매우 유연하게 사용하여 필요한 것을 수행하는 법을 배워야합니다.

업데이트 : 의견을 기반으로 : 다음은 좋은 설명이있는 게시물입니다 : http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

체크되어 있으면 값을 반환하고 그렇지 않으면 0을 반환합니다.

$(this).val() 그냥 dom에 도달하고 검사 여부에 관계없이 요소의 "value"속성을 가져옵니다.