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)