jQuery pode selecionar qualquer coisa que o CSS3 possa selecionar. Mas não para por aí! Há uma série de seletores adicionais que o jQuery oferece (por meio do motor do seletor Sizzle) que são bastante úteis às vezes. Por exemplo, o CSS tem seletores de atributo que permitem selecionar um elemento com base em qualquer atributo arbitrário que o elemento possa ter. Por exemplo:
Há um seletor CSS que podemos usar no jQuery para selecionar:
$("(data-whatever='elephant-eyeballs')");Existem variações no seletor de atributos, como em vez de =você pode fazer ^=para indicar “começa com este valor”. Mas por algum motivo, o CSS não tem! = Ou “não é igual a este valor”. jQuery faz! Este é um exemplo de extensão do seletor jQuery.
Existem muitas dessas extensões de seletor. Alguns dos quais falamos especificamente neste screencast:
- : eq () - uma versão com índice 0 de: n-ésimo filho ()
- : par - atalho para: n-ésimo filho (par)
- : gt (n) - seleciona elementos com um índice maior que n. Também é um atalho para um fórum mais complexo: nth-child () forumla.
Possivelmente a extensão do seletor mais útil de todas é: has () - que limita a seleção aos elementos que contêm o que você passa neste pseudo seletor (ou é um pseudo pseudo seletor :) É provável que algum dia no futuro CSS tenha algo como isso para nós (acho que vai ser assim pre ! code), mas ainda está muito longe. Infelizmente, não tenho um argumento muito convincente para isso neste screencast, mas você saberá quando precisar! Por exemplo, “Selecionar todos os .module's que contêm uma h3.sports-bar” - esse tipo de coisa.
Você também pode fazer suas próprias extensões de seleção, se desejar. Aqui está um artigo sobre isso. O exemplo é fazer com :inviewque selecione um elemento apenas se ele estiver visível na página na posição de rolagem atual. Seria assim:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));