Please log in to continue
WalkMe stores your data in the region chosen during account setup.
We have data centers in the US and EU that follow local privacy and compliance laws. If you're not sure which region to select, check with your admin.
O jQuery é um método que você pode usar para selecionar elementos na tela quando não for possível fazê-lo facilmente com a ferramenta WalkMe padrão.
Quando você carrega uma página da Web, tudo o que você vê é escrito em HTML, a linguagem de marcação do site. Um seletor jQuery segmentará um elemento específico nesse código HTML. A maioria desses seletores terá como alvo o atributo de classe (identificador geral) ou o atributo de ID (identificador específico) do elemento.
Os seletores jQuery informam ao WalkMe em que ponto da página ele precisa se concentrar, seja para localização de conteúdo, gatilhos ou segmentação. Simplificando, se o WalkMe tiver problemas para encontrar o elemento que você está procurando de forma rápida e consistente, use o jQuery.
Há algumas maneiras de saber quando haverá um problema com um elemento. Se você estiver selecionando um elemento para uma nova etapa, clicar nele e nada acontecer, isso significa que o WalkMe está tendo problemas para ler o elemento. Se você executar a etapa e ela apontar para o elemento errado, talvez seja necessário usar o jQuery (mas verifique a guia Precisão primeiro!) Se o Iniciador ou a Dica Inteligente não aparecer depois de selecionar o elemento, talvez seja necessário usar o jQuery. Se o seu Iniciador, SmartTip ou passo for executado apenas às vezes, mas não sempre que deveria, talvez seja necessário o jQuery.
Embora o conhecimento de HTML possa tornar o aprendizado de como criar seletores jQuery no WalkMe mais rápido e fácil, você não precisa de um conhecimento detalhado de HTML para fazer isso. É muito raro que você precise escrever algo original ou criar Seletores longos e complicados. Quase sempre é possível encontrar exatamente o que você está procurando no HTML e, em seguida, basta copiar e colar no formato correto. A maioria do jQuery gira em torno de saber o que extrair do código do site, e é isso que estamos aqui para ensinar a você!
Antes de começarmos, veja uma lista de alguns termos-chave para ajudar você a se orientar:
Há quatro etapas para criar um seletor jQuery:
Para começar, abra uma nova guia no navegador e acesse www.support.walkme.com. Vamos encontrar um seletor jQuery para o texto "Bem-vindo ao suporte da WalkMe" no meio da página.
Clique com o botão direito do mouse em "Bem-vindo ao suporte do WalkMe", conforme mostrado na imagem 1 e inspecione o elemento clicando em Inspecionar se estiver no Chrome ou Safari ou Inspecionar elemento se estiver usando o Firefox ou o Internet Explorer.
Sua página deve ter esta aparência:
A janela exibida na tela é chamada de Console do Desenvolvedor. Com o Console do Desenvolvedor aberto, você pode ver a estrutura HTML da página junto com a própria página. Outra maneira de localizar o elemento desejado no HTML é abrir o console (clique com o botão direito do mouse em qualquer lugar da página e clique em "Inspecionar elemento") e clique no ícone do cursor no canto esquerdo do cabeçalho do console.
Depois de clicar neste ícone do cursor, passe o mouse sobre qualquer elemento na página da Web. Isso irá rolar você até o ponto exato no HTML do console onde o elemento está localizado e realçar esse elemento em azul claro. Se você clicar em um elemento na página da Web, o console destacará sua linha HTML azul escuro e ancorará nesse ponto. Essa é a maneira mais fácil de localizar elementos no HTML. No Console do Desenvolvedor, você pode ver que a linha começa com "
Elementos são as partes do site que você usa jQuery para selecionar. Alguns deles incluem botão, div, h2, input e iframe. Esses elementos compõem toda a página e são o núcleo de um site.
Aqui estão alguns tipos comuns de elementos:
É importante saber que nem sempre é necessário incluir o elemento que você está selecionando no Seletor jQuery, eles são úteis apenas para orientar você no HTML. Neste exemplo, vamos
concentre-se no título da página que encontramos com o inspetor: <h2 class='site-header__title'>.
Como podemos ver nessa sequência de HTML, o elemento que estamos descrevendo é um h2. Essa é a abreviação de "header 2". O 2 indica o tamanho da fonte do cabeçalho. Um elemento h4 terá uma fonte pequena, enquanto um h1 será grande. Como você pode ver, h2 é um elemento de cabeçalho bastante grande.
As classes são os descritores mais comuns de elementos. Podem descrever diferentes tipos de elementos que têm a mesma finalidade ou estão localizados na mesma parte da página. Elas são escritas no HTML como [class= xxx=""] ou <element class='XXX'>. Isso os torna fáceis de encontrar e uma das razões pelas quais eles são descritores tão populares. As classes também tendem a deixar claro o que um elemento faz.
Vamos considerar a nossa string <h2 class='site-header__title'>. O tipo de elemento que estamos procurando é um h2. Sua classe é 'site-header__title'. Basta olhar para essa string, podemos dizer que o elemento h2 que estamos procurando é o cabeçalho ou título de um site. Mesmo sem olhar para o site, podemos supor que o elemento é bastante grande e está localizado no centro.
Lembra como não precisamos incluir o tipo de elemento no jQuery? Vamos continuar com isso e usar o .site-header__title como nosso seletor jQuery para esta seção. Agora que você decidiu por um seletor, você pode usá-lo para identificar um elemento para um Passo, Iniciador ou Dica Inteligente ou qualquer outro conteúdo do WalkMe.
Esta etapa agora apontará para o logotipo do WalkMe Support usando um seletor jQuery:
Se existir um ID, convém usá-lo em vez da classe. Isso ocorre porque os IDs são mais específicos. O processo de localização do ID de um elemento é semelhante ao de localização da sua classe. Em uma nova guia, abra www.support.walkme.com, clique com o botão direito do mouse na Barra de Pesquisa e clique em Inspecionar.
Você deve ver isso no seu Console do desenvolvedor:
Vemos na linha HTML selecionada <input id="hkb-search" class="..."...>que o id é hkb-search.
Agora que encontramos o atributo ID do elemento, é hora de transformá-lo em um seletor jQuery. Sabemos que "." é o atalho para segmentar classes; os identificadores têm um atalho semelhante. Em vez de usar um ".", segmentaremos o ID com um "#". Nosso seletor jQuery final para segmentar a caixa de pesquisa é: #hkb-search.
Esta etapa agora apontará para a barra de pesquisa usando um seletor jQuery:
Localizar um elemento dentro de um iFrame segue um processo semelhante. O modelo de seletor jQuery abaixo permite que o WalkMe segmente um elemento em um iFrame. Atualize os itens em negrito, conforme visto no exemplo, com os respectivos seletores:
{"element": "#yourElement" ,"context": "iframe#iframeselector"} |
Exemplo: {"element": "h2.mainTitle" ,"context": "iframe#Main"}
Para avaliar o seletor no Console das Ferramentas de desenvolvimento, você precisará usar o modelo wmjQuery abaixo:
wmjQuery("#yourElement",wmjQuery("iframe#iframeselector").contents()) |
Agora que você sabe como criar um seletor básico do jQuery, vamos testar os seletores para garantir que eles estejam funcionando conforme o esperado.
Primeiro, expanda os resultados clicando na seta ao lado de init. O comprimento retornado é o número de elementos encontrados que correspondem ao nosso Seletor.
Outra maneira de testar o Seletor jQuery é passar o mouse sobre o resultado ou clicar no console para verificar se ele está capturando o elemento correto na página.
Aqui, estamos posicionando o cursor sobre 0: h2:site-header__title. Podemos ver que o texto Bem-vindo ao suporte do WalkMe está destacado. Isso mostra que o nosso jQuery está apontando corretamente para o elemento que estamos tentando identificar.
Dica do jQuery Pro: ao usar os seletores jQuery no Mecanismo de regras (por exemplo, regras ShoutOut e Auto Play), você poderá ver se o seletor jQuery foi encontrado na página atual. Isso será mostrado com uma marca de seleção verde [vista na imagem 12], enquanto que se não for encontrado, haverá um ponto de exclamação vermelho. A marca de seleção é atualizada em tempo real, conforme você faz atualizações no Seletor.
Isso é ótimo para solucionar problemas de Seletores defeituosos.
Se você tiver um Seletor longo, como div.ht-container form.hkb-site-search (incorreto), que retorna como falso (!) no Mecanismo de Regras, você pode analisá-lo para ver qual parte está causando o problema.
Você começaria digitando div no campo de texto jQuery do Mecanismo de Regras. Se ele retornar com uma marca de verificação, você sabe que não há nada errado. Em seguida, você adicionaria .ht-container, para obter um resultado de div.ht-container. Este elemento HTML existe e está escrito corretamente. Em seguida, você adicionaria o formulário, resultando no Seletor div.ht-container de formulário. O formulário é um filho*** de div.ht-container, portanto, esse é um seletor válido. A marca de verificação ainda está lá!
Agora vamos adicionar a última parte do nosso Seletor: .hkb-site-serch. Se você der uma olhada na linha destacada, poderá ver que .hkb-site-serch é uma classe que está escrita incorretamente. Quando o adicionamos ao
No final do formulário div.ht-container escrito corretamente, a marca de seleção verde se transformaria em um ponto de exclamação vermelho. Portanto, sabemos que o .hkb-site-serch é a parte do jQuery que arruína nosso sistema.
Selector. Após uma inspeção mais detalhada, podemos encontrar o erro de digitação (serch) e corrigi-lo para search. Depois de corrigirmos o erro de digitação de um novo Seletor de div.ht-container form.hkb-site-search, o ponto de exclamação se transformará em uma marca de seleção. Solucionamos e corrigimos com sucesso o nosso Seletor!
Agora que testamos o Seletor, podemos adicioná-lo ao Editor WalkMe seguindo as etapas abaixo:
Se você estiver usando o jQuery para um Iniciador ou SmartTip em vez de uma etapa do Smart WalkThru, basta abrir esse Iniciador ou SmartTip e pule para o número 3.
Como alternativa, o Seletor jQuery pode ser adicionado a qualquer conjunto de regras que tenha a opção Seletor jQuery.
Por exemplo, se quiséssemos fazer uma reprodução automática do ShoutOut quando o texto "Bem-vindo ao suporte do WalkMe" estiver visível, ele ficaria assim:
A segmentação dos atributos de classe ou ID de um elemento cobrirá a maioria dos casos de uso nos quais você precisa aplicar os seletores jQuery. No entanto, pode haver alguns cenários nos quais você precisa segmentar algo além do atributo Classe ou ID.
No primeiro artigo, aprendemos a criar seletores básicos do jQuery segmentando o atributo de classe ou ID de um elemento. No entanto, um elemento nem sempre terá uma classe ou um atributo ID. Neste artigo, aprenderemos como segmentar os outros atributos do elemento, sem usar um . ou #.
Se o elemento que você está tentando selecionar não tiver uma classe ou ID que você possa usar, não se preocupe! Podemos usar a maioria das partes do HTML como parte do nosso Seletor jQuery.
Caso não seja possível usar uma classe ou ID para selecionar um elemento, você poderá usar qualquer um dos outros atributos do elemento. Os atributos fornecem informações adicionais sobre o elemento. O
O seletor jQuery estará no formato de [Attribute= value=""].
Primeiro, vamos identificar os atributos de um elemento.
Aqui, onde identificamos o elemento do logotipo WalkMe, vemos que o elemento não tem uma classe ou um ID para usar. No entanto, vemos que o elemento tem um atributo chamado href que tem o valor de https://support.walkme.com. Podemos usar esse atributo para segmentar o elemento do logotipo WalkMe. Um seletor jQuery válido seria: [href= https:="" .walkme.com"].
O elemento logotipo também tem outro atributo chamado data-ht-sitetitle com um valor de WalkMe Support. Como alternativa, podemos segmentar esse atributo em vez do atributo href usando o
Seletor jQuery: [data-ht-sitetitle= walkme="" Support"].
Há uma coisa a lembrar sobre atributos que não são ID ou Classe. Você deve sempre incluir o tipo de elemento antes do atributo. Isso ajuda o WalkMe a segmentar qual tipo de elemento para
procurar. Os atributos podem ser aplicados a qualquer tipo de elemento, portanto, é melhor restringir um pouco os resultados para acelerar a pesquisa do WalkMe. Portanto, se tentarmos selecionar o logotipo do WalkMe no site de suporte, usaremos um seletor de a[href= https:="" .walkme.com"].
Lembre-se de que um a é código HTML para um link. Um href é um URL. Isso significa que o logotipo é um link para a página de suporte do WalkMe!
A etapa mostrada abaixo agora apontará para o logotipo do WalkMe Support usando um seletor de atributo href:
Você pode notar que IDs e classes têm o mesmo formato que atributos. Isso ocorre porque IDs e Classes também são atributos! Usando [class="CLASS NAME"] e [id="ID NAME"]
permitem segmentar esses elementos, no entanto, esse formato é mais tedioso. Recomendamos que você use os atalhos discutidos anteriormente para economizar tempo.
Digamos que desejemos usar o seletor sem o tipo de elemento. Em https://support.walkme.com, abra o Console do Desenvolvedor e digite o seguinte:
wmjQuery('[href= .walkme.com" https:=""]')
Revise os resultados e observe o comprimento retornado. Neste exemplo, você deve ter um comprimento retornado de 2:
Tente passar o mouse sobre os resultados para ver quais elementos o Seletor está encontrando. Você verá que esse seletor jQuery tem como alvo tanto o logotipo do WalkMe quanto o texto "Home". Se quiséssemos segmentar o texto "Início", esse seletor não funcionaria, pois localizaria o logotipo do WalkMe primeiro.
Como podemos torná-lo mais específico? Poderíamos adicionar o tipo de elemento do texto Home, a. No entanto, isso não funcionaria bem, porque o logotipo também é um a. Adicionar a antes do href ainda retornaria um comprimento de 2 porque há 2 elementos que se encaixam no Seletor jQuery.
Vamos tentar algo novo. Em HTML, há uma maneira útil de codificação chamada Elemento Pai-Filho. Você deve ter notado que, no HTML, há linhas HTML que podem ser expandidas para mostrar mais código HTML abaixo. Quando você expande um elemento, o elemento expandido é o pai, e o código exibido abaixo contém seus filhos.
Aqui, você pode ver que o div com a classe ht-sitecontainer é o elemento pai de todos os elementos abaixo dele, como o div com a classe site-header. Se olharmos mais abaixo na árvore HTML, podemos ver que o div com a classe ht-container é o pai do div com a classe site-logo, mas o div com a classe ht-container seria o filho do elemento de cabeçalho acima dele.
Agora que sabemos sobre os Elementos Pais e Filhos, vamos falar sobre como aplicar isso aos nossos Seletores jQuery e por que isso é útil em nosso cenário atual. Quando temos elementos que têm uma classe ou atributo semelhante, também podemos dar uma olhada nos elementos pais para ver se eles são diferentes e fazer referência ao elemento pai em nosso jQuery para tornar nosso seletor mais específico.
Se examinarmos o HTML do Logo do WalkMe e do texto Home abaixo, podemos ver que o elemento Logo do WalkMe é um elemento filho de um div com uma classe de site-logo:
Se analisarmos o texto Home, podemos ver que ele é um elemento filho de um elemento li com alguns atributos. Como os pais são diferentes, podemos usar isso em nosso Seletor.
Elementos pai-filho são especificados colocando um espaço entre os dois elementos. O elemento pai li vem antes do espaço e do elemento filho [href=”https://support .walkme.com”] vem depois do espaço.
Se juntarmos isso, nosso jQuery mais específico focado no texto Home terá esta aparência: li [href='https://support .walkme.com']. Se inserirmos isso no comando wmjQuery e analisarmos os resultados abaixo, veremos que, desta vez, retornaremos apenas um resultado para o texto Home.
Digamos que desejemos restringir o seletor de logotipos usando seu relacionamento pai-filho. Sabemos que o Seletor do logotipo é um[href='https://support .walkme.com"]. Como vimos acima, seu elemento pai é div.site-logo. Portanto, podemos escrever nosso Seletor de logotipo como div.site-logo a[href= https:="" .walkme.com"].
Os modificadores são usados para restringir os resultados retornados pelo Seletor. Basta adicioná-los ao final do seu Seletor. Embora seja possível usar vários modificadores ao mesmo tempo, tente não usar mais de dois. Alguns modificadores comumente usados são: :contains(), :visible, :has() e :eq().
Há uma armadilha que você precisará observar ao escrever Seletores jQuery: IDs dinâmicas. Eles geralmente consistem em longas sequências de números seguidas ou precedidas por uma palavra ou duas. Tente evitar usá-los para identificar o elemento, pois a sequência de números mudará na atualização. Isso significa que, assim que a página for atualizada, o ID mudará e o Seletor jQuery não funcionará mais. Para garantir que isso não aconteça, você deve encontrar um Seletor diferente para elementos com IDs dinâmicas. Por exemplo, se você estiver tentando selecionar o td com o ID dinâmico abaixo, você pode usar .dataCol.inlineEditWrite ou .labelCol:contains(Complexity Factors) + td. No entanto, você não deve usar td#00N0000067211_ilecell. Esse é um ID dinâmico e mudará:
Se você precisar absolutamente usar um ID dinâmico para identificar um elemento, use apenas parte dele, a parte que não muda. Isso exigirá algumas suposições, mas normalmente você deve tentar encontrar uma palavra ou uma sequência de texto que se pareça com o inglês. Neste caso, usar "ilecell" provavelmente seria uma aposta segura. Para transformar essa parte de um ID dinâmico em um Seletor, use o formato parcial discutido acima, na seção de atributo parcial. Se o ID completo estiver escrito como [id=], um seletor parcial terá esta aparência: [id*= ilecell=""]. Aqui, estamos escrevendo o ID no mesmo formato que usamos para outros atributos (lembre-se de que os IDs são apenas atributos comumente usados). Ao adicionar o * após o id, dizemos ao WalkMe que procure um ID que contenha "ilecell".
Agora escrevemos um atributo parcial para esse ID dinâmico. É uma alternativa mais segura e robusta ao uso do ID dinâmico completo. No entanto, enquanto [id*= ilecell=""] provavelmente selecionará o elemento que queremos de forma consistente, mas pode pegar outros que não queremos. Ao remover a parte dinâmica do ID, reduzimos o seletor a um atributo bastante geral que provavelmente descreve outros campos
neste site. Portanto, você deve conectar esse atributo parcial a um Seletor jQuery maior. Vamos usar um deles acima. Se quisermos adicionar nosso atributo parcial a .dataCol.inlineEditWrite, podemos trocá-lo por uma das duas classes, criando [id*= ilecell=""].inlineEditWrite. Também podemos simplesmente adicioná-lo até o final: .dataCol.inlineEditWrite[id*= ilecell=""].