1

No código abaixo me deparei com a sintaxe $(this.hash):

$('a').on('click', function(e) {
  e.preventDefault();

  $(this.hash).show();
});

Fiquei um pouco confuso achando que poderia ser algo relacionado a criptografia, mas não é.

Qual a finalidade do $(this.hash)?

0

3 Respostas 3

8

Isto não é uma sintaxe do jQuery exatamente, para entender é preciso primeiro falar do this.hash, elementos como <a> e <link> (e possivelmente alguns outros, que suportam URLs), são representados por certas interfaces em objetos no motor JavaScript de cada navegador

É claro que é possível representar elementos HTML a partir de uma string no lado do servidor com um parse de HTML, como a própria API nativa DOMParser

Pegando como exemplo <a> e <link>, são representados por:

  • HTMLAnchorElement para <a>
  • HTMLLinkElement para <link>

Então quando pega algo assim:

var foo = document.querySelector('a');

A ancora/link encontrada (se não existir retorna null), será um objeto HTMLAnchorElement

Como pode ver em https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement, ele suporta varias propriedades para ler a URL definida no elemento HTML, alguns exemplos

HTMLAnchorElement.hash
HTMLAnchorElement.host
HTMLAnchorElement.hostname
HTMLAnchorElement.password
HTMLAnchorElement.pathname
HTMLAnchorElement.port
HTMLAnchorElement.protocol

Ou seja, é tratado como objeto para poder manipular sem você ter que usar um getAttribute() e fazer um parse na mão da URL, você poderia simplesmente mudar o host de destino ou o hash de destino setando os valores, exemplo:

var meulink = document.querySelector('#meulink');

//Troca stackoverflow.com por pt.stackoverflow.com
meulink.host = 'pt.stackoverflow.com';

//Atualiza a hash com o horario atual
setInterval(function () {
    var d = new Date;
    meulink.hash = 'hora_' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
}, 1000);
<a target="_blank" id="meulink" href="https://stackoverflow.com.br/search?q=VanillaJS">Olá mundo!</a>

Agora se fosse usar setAttribute ou .href =, seria muito mais complicado, teria que fazer o parse manualmente da string retornada tentando identificar o que o host e o que é o hash e substitutos.

Entendo que a resposta parece longa até aqui, mas é porque realmente acredito ser pertinente para entender como certos elementos funcionam em objetos JavaScript, voltando ao seu código, o this sozinho retorna o elemento clicado, no caso a ancora <a> que disparar o evento:

$('a').on('click', function(e) {
  e.preventDefault();

  $(this.hash).show();
});

Então é pego o this.hash, que é como citei antes, irá retornar a HASH da URL, logo se a HASH existir terá irá lhe retornar o valor dela com o prefixo #, em seletores CSS, document.querySelector e document.querySelectorAll (e jQuery) o # também representa ID, o que é pertinente para o caso, logo seu código irá procurar o elemento com o ID especifico e irá executar a função .show() da biblioteca jQuery para forçar exibir o elemento acaso ele esteja ocultado por display:none, por exemplo, se a hash retornar algo como #foobar ele vai procurar um elemento qualquer (pode ser DIV ou não) assim:

 <div id="foobar"></div>

E se estiver oculto será forçado ser exibido.


Sobre interface de URLs

Note que cada navegador implementa a própria interface que é acessível ao JavaScript (sendo que cada navegador tem o próprio motor javascript também, além do DOM/CSS/SVG proprio), os navegadores como Chrome e Firefox implementam nas interfaces de HTMLAnchorElement e HTMLLinkElement (e outros):

Então o URL (ou HTMLHyperlinkElementUtils) seriam uma boa maneira de manipular strings que contenham uma URL, e isto poderia até gerar o valor para links, formulários que serão criados futuramente em páginas dinâmicas, o que tecnicamente um document.createElement('a') poderia fazer também (se desejar algum suporte para navegadores mais antigos), claro que neste ultimo caso talvez não tenha tudo, como por exemplo URL.searchParams, que facilita pegar valores de uma querystring (?foo=bar&baz=boo)

Sei que a resposta parece "longa", mas o intuito é explicar tecnicamente como as coisas funcionam, já que isso ai nem é uma sintaxe jQuery, como o título da pergunta afirma, e sim uma funcionalidade nativa da API de DOM e API URL do JavaScript combinado com o jQuery (que é uma lib de "terceiros" e você poderia fazer o mesmo uso de HTMLAnchorElement.hash sem jQuery)

0
2

Ele lê o atributo passado pela URL depois da "#" como referencia ao id definido.

Algo parecido com isso:

<a href="seuURL#barra">

$(this.hash) será #barra. Quando você usa $(this.hash).show(), é equivalente a fazer $("#barra").show(), então mostrará o elemento com id = "barra".

2
  • 1
    Você só resumiu a outra resposta mas no fim não explicou o porquê
    – Sorack
    Commented 11/06/2019 às 16:12
  • Qual seria o porque de pegar uma referencia em uma url? defini resumidamente por motivos de so por testar esse comando ele ja funciona, vendo assim de modo pratico em tempo real! Commented 11/06/2019 às 19:22
-1

Seja por exemplo o código HTML abaixo:

<a href="//exemplo.com#teste">

O $(this.hash) irá ler a propriedade href do elemento <a>, retornando o # juntamente com texto que o segue, resultando em #teste.

Em outras palavras, executar:

$(this.hash).show();

É o mesmo que fazer:

$('#teste').show();
1
  • 2
    Você só resumiu a outra resposta mas no fim não explicou o porquê
    – Sorack
    Commented 11/06/2019 às 14:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .