.get(n)

Định nghĩa và sử dụng

  • .get(n): Lấy các thành phần DOM phù hợp của các đối tượng jQuery.
  • .get(): nếu không có giá trị n, thì .get() sẽ lấy tất cả các thành phần.
  • .get(n) lấy thành phần tương ứng với giá trị n.
  • Dữ liệu lấy được sẽ có dạng "mãng": [object01 object02]

VD:

<ul> <li class="first">Thành phần li thứ 1</li> <li class="second">Thành phần li thứ 2</li> </ul> 
$('li').get();

Dữ liệu lấy được: [<li class="first">, <li class="second">]

$('li').get(0);

Dữ liệu lấy được: [<li class="first">]

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.get()

Lấy tất cả các đối tượng.

$('li').get();

.get(n)

Lấy đối tượng dựa theo chỉ số n

$('li').get(0);

.get(n)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    function testFn(list) {
        var a = [];
        for (var i = 0; i < list.length; i++) {
            a.push(list[i].innerHTML);
        }
        $('span').text(a.join(" "));
    }
    testFn($('li').get());
});
</script>
</head>

<body>
<ul>
<li>Thành phần li thứ 1</li>
<li>Thành phần li thứ 2</li>
</ul>
<span></span>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng như trên ta đã lấy từng giá trị html của các đối tượng li trong list.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<ul>
<li>Thành phần li thứ 1</li>
<li>Thành phần li thứ 2</li>
</ul>
<span></span>

<ul>
<li>Thành phần li thứ 1</li>
<li>Thành phần li thứ 2</li>
</ul>
<span>Thành phần li thứ 1 Thành phần li thứ 2</span>

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p { background-color: blue;}
div { background-color: yellow;}
</style>
<script>
$(function(){
    $('*', document.body).click(function(e){
        e.stopPropagation();
        var domEl = $(this).get(0);
        $('span:first').text('Bạn đang click - ' + domEl.tagName);
    });
});
</script>
</head>

<body>
<span>Bạn đang click - </span>
<div>
<p>Thành phần p <span>Thành phần span</span><strong>Thành phần strong</strong></p>
<input type="text" value="input" /> Thành phần div.
</div>
</body>
</html>

Hiển thị trình duyệt:

Click vào từng thành phần để thấy được kết quả.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<span>Bạn đang click - </span>
<div>
<p>Thành phần p <span>Thành phần span</span><strong>Thành phần strong</strong></p>
<input type="text" value="input" /> Thành phần div.
</div>

<span>Bạn đang click - SPAN</span>
<div>
<p>Thành phần p <span>Thành phần span</span><strong>Thành phần strong</strong></p>
<input type="text" value="input" /> Thành phần div.
</div>

.focusout()

.has()