Em Jquery, \u00e9 muito mais f\u00e1cil buscar um elemento dentro de sua p\u00e1gina web do que utilizando puro javascript. Confira abaixo alguns exemplos de como fazer a sele\u00e7\u00e3o de um elemento.<\/p>\n
<\/p>\n
$(\u2018p\u2019)<\/p>\n
Seleciona todos os elementos de tag p na p\u00e1gina.<\/p>\n
$(\u2018#texto\u2019)
\nSeleciona todos os elementos dentro de tags com id=\u2019texto\u2019 dentro de sua p\u00e1gina.<\/p>\n
$(\u2018.texto\u2019)
\nSeleciona todos os elementos dentro de tags com class=\u2019texto\u2019 dentro de sua p\u00e1gina.<\/p>\n
$(\u2018p, div\u2019)<\/p>\n
Seleciona, ao mesmo tempo, os elementos dentro de tags p e div em sua p\u00e1gina.<\/p>\n
$(\u2018p\u2019, $( \u2018#texto\u2019))
\nSeleciona todos os elementos dentro da tag p, de sua p\u00e1gina, que por sua vez, est\u00e3o dentro de tags com \u2018id=texto\u2019. Ou seja, caso voc\u00ea tenha tags p dentro de uma div com id diferente de id=texto, por exemplo, estas tags n\u00e3o ser\u00e3o consideradas. O que acontece aqui \u00e9 que estamos selecionando um elemento (p) dentro de um contexto ($(\u2018#texto\u2019)).<\/p>\n
$(\u2018p\u2019, $( \u2018.texto\u2019))
\nSeleciona todos os elementos dentro da tag p, de sua p\u00e1gina, que por sua vez, est\u00e3o dentro de tags com \u2018class =texto\u2019. Ou seja, caso voc\u00ea tenha tags p dentro de uma div com class diferente de class =texto, por exemplo, estas tags n\u00e3o ser\u00e3o consideradas.<\/p>\n
$(\u2018div p\u2019)
\nSeleciona todos os elementos dentro da tag p, de sua p\u00e1gina, que por sua vez, est\u00e3o dentro de tags divs. Ou seja, seleciona todos os p que s\u00e3o descendentes de div.<\/p>\n
$(\u2018div > span\u2019)
\nSeleciona todos os spans que s\u00e3o filhos de div. Lembre-se que um elemento \u00e9 filho de outro se, e somente se, ele \u00e9 o pr\u00f3ximo na cadeia de n\u00edveis. Se um elemento x est\u00e1 a dois n\u00edveis abaixo de y, y n\u00e3o \u00e9 seu filho, e sim seu descendente. Um filho \u00e9 um descendente, mas um descendente n\u00e3o \u00e9, necessariamente, um filho.<\/p>\n
$(\u2018div + p\u2019)
\nSeleciona o primeiro elemento, no caso a div e o elemento imediatamente posterior, no caso o p. Ou seja, nesse caso ter\u00edamos selecionado todos os elementos dentro da div e o p que estiver logo ap\u00f3s a div.<\/p>\n
$(\u2018div ~ p\u2019)
\nSeleciona o primeiro elemento, no caso a div e todos os seus irm\u00e3os que s\u00e3o tags p. Ou seja, a div, tendo um elemento pai x qualquer, teria sido selecionada e todos os filhos de x, que s\u00e3o tags p , seriam selecionados tamb\u00e9m. Contudo, as tags p selecionadas, devem vir AP\u00d3S a tag div. Todos os \u201cfilhos mais novos\u201d do pai x n\u00e3o ser\u00e3o considerados.<\/p>\n
$(\u2018li:first\u2019)
\nSeleciona o primeiro elemento li .<\/p>\n
$(\u2018li:last\u2019)
\nSeleciona o \u00faltimo elemento li .<\/p>\n
$(\u2018li:not(li:last)\u2019)
\nSeleciona todos os elementos li, exceto o \u00faltimo.<\/p>\n
$(\u2018p:even\u2019)
\nSeleciona as ocorr\u00eancias pares do elemento p. N\u00e3o se esque\u00e7a que a primeira ocorr\u00eancia \u00e9 considerada a ocorr\u00eancia zero, ou seja, par.<\/p>\n
$(\u2018p:odd\u2019)
\nSeleciona as ocorr\u00eancias \u00edmpares do elemento p.<\/p>\n
$(\u2018p:eq(3)\u2019)
\nSeleciona a terceira ocorr\u00eancia do elemento p.<\/p>\n
$(\u2018p:gt(3)\u2019)
\nSeleciona as ocorr\u00eancias, ap\u00f3s a terceira, do elemento p.<\/p>\n
$(\u2018p:lt(3)\u2019)
\nSeleciona as ocorr\u00eancias, anteriores a terceira, do elemento p.<\/p>\n
$(\u2018:header\u2019)
\nSeleciona todos os headers, independente do n\u00edvel.<\/p>\n
$(\u2018p:contains(\u2018programas\u2019)\u2019)
\nSeleciona as ocorr\u00eancias do elemento p que contenham o termo \u2018programas\u2019.<\/p>\n","protected":false},"excerpt":{"rendered":"
Em Jquery, \u00e9 muito mais f\u00e1cil buscar um elemento dentro de sua p\u00e1gina web do que utilizando puro javascript. Confira abaixo alguns exemplos de como fazer a sele\u00e7\u00e3o de um elemento.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[44,20],"tags":[],"class_list":["post-166","post","type-post","status-publish","format-standard","hentry","category-jquery","category-programacao"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/posts\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=166"}],"version-history":[{"count":0,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=\/wp\/v2\/posts\/166\/revisions"}],"wp:attachment":[{"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leonardocotta.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}