Cách nhận Phần tử DOM từ Bộ chọn JQuery

Tôi đang có một thời gian khó khăn vô cùng để tìm ra để có được DOMEuity thực sự từ một bộ chọn jquery. Mã mẫu:

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

và trong một đoạn mã khác tôi đang cố xác định giá trị đã chọn của hộp kiểm.

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

Và làm ơn, tôi không muốn làm:

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

Điều đó đưa tôi đến với hộp kiểm, nhưng những lần khác tôi cần DOMEuity thực sự.

Bạn có thể truy cập phần tử DOM thô với:

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

hoặc đơn giản hơn:

$("table")[0];

Tuy nhiên, thực sự không có nhiều thứ bạn cần điều này (theo kinh nghiệm của tôi). Lấy ví dụ về hộp kiểm của bạn:

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

là "jquery'ish" và (imho) ngắn gọn hơn. Nếu bạn muốn đánh số chúng thì sao?

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

Một số tính năng này cũng giúp che giấu sự khác biệt trong trình duyệt. Một số thuộc tính có thể khác nhau. Ví dụ kinh điển là các cuộc gọi AJAX. Để làm điều này đúng trong Javascript thô có khoảng 7 trường hợp dự phòng cho XmlHttpRequest.

Chỉnh sửa: có vẻ như tôi đã sai khi cho rằng bạn không thể có được yếu tố này. Như những người khác đã đăng ở đây, bạn có thể lấy nó với:

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

Tôi đã xác minh điều này thực sự trả về phần tử DOM đã khớp.

Tôi cần phải lấy phần tử dưới dạng một chuỗi.

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

Điều này sẽ cung cấp cho bạn một cái gì đó như:

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

... dưới dạng một chuỗi chứ không phải là một phần tử DOM.

Nếu bạn cần tương tác trực tiếp với phần tử DOM, tại sao không sử dụng document.getElementById từ đó, nếu bạn đang cố gắng tương tác với một phần tử cụ thể, bạn có thể sẽ biết id, vì giả sử rằng tên lớp chỉ nằm trên một phần tử hoặc một số tùy chọn khác có xu hướng gặp rủi ro.

Nhưng, tôi có xu hướng đồng ý với những người khác, rằng trong hầu hết các trường hợp, bạn nên học cách làm những gì bạn cần bằng cách sử dụng những gì jQuery mang lại cho bạn, vì nó rất linh hoạt.

CẬP NHẬT: Dựa trên một nhận xét: Đây là một bài viết với lời giải thích hay: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

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

Điều này sẽ trả về giá trị nếu nó được chọn hoặc 0 nếu không.

$(this).val() chỉ cần tiếp cận với dom và nhận được "giá trị" thuộc tính của phần tử, cho dù nó có được kiểm tra hay không.