Tutorial Básico jQuery

Efeitos jQuery

Com jQuery, podemos facilmente percorrer a árvore DOM para encontrar os antepassados dos elementos.

Ancêstras são pais, avós, bisavós e assim por diante.

Neste capítulo, explicaremos como percorrer a árvore DOM.

Nós temos os seguintes métodos jQuery para percorrer a árvore DOM:

Este capítulo mostrará como usar cada método.

Método ParentUntil() do jQuery parent()O método retorna o pai direto do elemento selecionado.

Este método move apenas um nível para cima na árvore DOM.

O exemplo a seguir retorna o pai direto do elemento SPAN:

body (trisavô)

div (bisavô)

div (avô) 　　　　　　　　　p (pai direto)

Você também pode usar parâmetros opcionais para filtrar a pesquisa de itens pais.

O exemplo a seguir retorna o elemento pai direto de cada parágrafo que possui a classe "selected":

示例

Exemplo
　　$("document").ready(function() {
$("p").parent(".selected").css("background", "coral");

Método ParentUntil() do jQuery Método parents() do jQueryparents()

O método retorna todos os elementos ancestors do elemento selecionado.

Este método navega pelo elemento pai ao longo do elemento DOM dos ancestors até o elemento raiz do documento (<html>).

O exemplo a seguir retorna todos os elementos ancestrais entre o SPAN e o BODY:

body (trisavô)

div (bisavô)

div (avô) 　　　　　　　　　p (pai direto)

Método ParentUntil() do jQuery jQueryparentsUntil()

O método retorna todos os elementos ancestrais entre os dois parâmetros fornecidos.

O exemplo a seguir retorna todos os elementos ancestrais entre o SPAN e o BODY:

body (trisavô)

div (bisavô)

div (avô) 　　　　　　　　　p (pai direto)