jQuery selectors ruột

Question

Trong jQuery có một vài selectors ruột như

: trước,: tiếp theo,: cuối cùng

Câu hỏi của tôi là:

1. Họ thực sự là một phần của jQuery, bởi vì chúng thực sự được sử dụng trên các phần tử DOM?
2. Dường như chúng tôi cũng có các phương thức tương đương trong jQuery prev(), next(), last(). Mục đích của việc có 2 cách khác nhau là gì?

Bất kỳ ví dụ cơ bản nào cũng thực sự tuyệt vời.

Answer 1

jQuery không có các công cụ chọn :prev hoặc :next, tôi không biết bạn đã gặp chúng ở đâu. Tuy nhiên, có một bộ chọn :last cũng như :first, được cung cấp bởi thư viện bộ chọn Sizzle, được sử dụng bởi jQuery. Nó là một bộ chọn không chuẩn, không phải là một phần của CSS, và do đó được thực hiện bằng JavaScript.

Một mục đích của :last selector so với phương pháp .last() là để bạn có thể sử dụng nó để lọc các yếu tố ở giữa một chuỗi selector, như thế này (lưu ý rằng :last và :last-child không giống nhau):

$('.a > .b:last > .c') 

Thay vì phải viết một chuỗi các phương pháp như thế này:

$('.a').children('.b').last().children('.c'); 

Bằng cách này, các "selectors ruột" bạn tham khảo được gọi là pseudo-classes (thông tục nhưng không đúng cách gọi một s "bộ chọn giả").

Answer 2

1. vâng, họ đang có trong documentation
2. đôi khi bạn có thể không phải lúc nào bao gồm tất cả mọi thứ trong bộ chọn hoặc muốn có một phân khu của bộ chọn.

ví dụ:

$(".mylist").each(function(){ 
    $(this).css("color","red"); 
    $(this).next().show(); 
}) 

Answer 3

Dấu chấm đại diện cho một bộ lọc thích để có được những lựa chọn được chọn trong một danh sách thả xuống Tôi sẽ sử dụng $("select option:selected") hoặc để có được một hộp phát thanh kiểm tra Tôi sẽ sử dụng $("input[type=radio]:checked");

Không có: trước và: bộ lọc tiếp theo, nhưng bạn có thể tìm thấy danh sách đầy đủ các bộ lọc tại đây http://api.jquery.com/category/selectors/

Answer 4

Đây là cách tôi tạo một thanh trượt với tất cả các loại bộ chọn và di chuyển ngang qua các đối tượng.

$('#next').click(function() { 
    if (!$('*').is(':animated')) { 
    if ($('div.display:visible').is(':nth-child(3)')) { 

     $('div.display:visible').fadeOut(); 
     $('div.display:first').fadeIn(function() { 
     $(this).children().fadeIn(); 
     }); 

    } else { 

     $('div.display:visible').fadeOut().next().fadeIn(function() { 
     $(this).children().fadeIn(); 
     }); 
    } 
    } 

}); 

$('#prev').click(function() { 
    if (!$('*').is(':animated')) { 
    if ($('div.display:visible').is(':nth-child(1)')) { 
     $('div.display:visible').fadeOut(); 
     $('div.display:last').fadeIn(function() { 
     $(this).children().fadeIn(); 
     }); 

    } else { 
     $('div.display:visible').fadeOut().prev().fadeIn(function() { 
     $(this).children().fadeIn(); 
     }); 
    } 
    } 

});