[Powered by Google Translate] [Seminário: JQUERY]
[Vipul Shekhawat, Harvard University]
[Isto é CS50.] [CS50.TV]
Se você está acompanhando em casa, você pode realmente acessar meus slides on-line
por ir a este link.
É TjjRWj, em bit.ly.
Você também pode simplesmente ir até a URL diretamente,
que é cloud.cs50.net / ~ vshekhawat, que é o meu nome,
e jQuery.
Eu altamente incentivá-lo a seguir adiante, se você está assistindo em casa,
e se você está aqui, também, porque esta é uma apresentação bastante interativa.
>> Então, hoje eu vou estar falando sobre jQuery, ea primeira pergunta é:
o que é jQuery?
Este ano, eu sei que vocês não tenham coberto JavaScript
em tanto detalhe como temos nos últimos anos.
JavaScript é, em primeiro lugar, apenas um idioma do lado do cliente
que você usa para executar scripts e código na máquina de cada usuário.
Então você tem um servidor que fornece páginas da web com as pessoas,
mas você pode querer fazer coisas em sua máquina,
pedir a sua máquina para enviar solicitações para o servidor a cada 30 segundos ou algo assim.
Você pode fazer isso usando JavaScript.
JQuery apenas fornece mais funcionalidade em cima de JavaScript
que faz coisas extra para você.
Se você olhar para o conteúdo no topo,
que descreve algumas das coisas que você é capaz de fazer.
Portanto, em geral, foi criado em janeiro de 2006.
Foi primeiro concebida em agosto de 2005.
Tem sido em torno de um par de anos, e é realmente parte do novo movimento Web 2.0
que é feita a Internet tão brilhante.
É a biblioteca JavaScript mais amplamente utilizado.
Mais de 19,6 milhões sites estão usando, eo uso continua a aumentar
de acordo com builtwith.com, que, aparentemente, ao longo do último ano,
acaba de ser continuamente aumentando bastante linear.
Entre os top 10 milhões de sites, ainda há -
cerca de 40% deles estão atualmente usando.
Facebook usa-lo, os lotes de outros sites atualmente usá-lo.
Você pode olhar para as estatísticas sobre o seu próprio, se você gostaria.
E você poderia dizer que é legítimo, porque tem uma fundação e 13 membros do conselho,
juntamente com uma equipe de 20 pessoas que trabalham nela em uma base regular.
Por isso é muito utilizado, ele tem uma URL org., É fantasia,
ele tem spin-offs para outras coisas, por isso é um grande negócio.
>> Por que você deve usá-lo? JQuery é muito leve.
Isso significa que ele não é um arquivo enorme. Você pode baixar
o arquivo minified, que é, sem todo o espaço em branco e comentários, e fica a apenas 32 kB.
Por isso, é fácil simplesmente atirar na sua página web
e só para começar a usá-lo.
É também muito eficiente por escrito, por isso não ocupa muito -
não abrandar o seu site muito quando você usá-lo.
Ele permite que você implementar coisas que antes eram inviáveis.
Existem alguns aspectos da funcionalidade,
como a criação de animações, que, normalmente, seria muito, muito difícil de fazer.
Mas, em jQuery que são realmente muito simples.
E há algumas coisas que são irritantes para fazer,
possível em JavaScript, como o envio de uma solicitação POST,
mas para enviar uma solicitação para um servidor, você tem que escrever
cinco ou seis ou sete linhas de código.
Agora você pode fazê-lo apenas em uma única linha de código, em uma única chamada de função.
Isso realmente simplifica um monte de coisas que você está fazendo.
E todas as crianças legais estão usando. Por isso, quero me dizer.
No meu projeto final do ano passado, que é news.whrb.org,
que é para a estação de rádio, eu criei este blog
que abriga todos os shows que fizemos e os arquivos de MP3 para eles.
Você pode navegar através dos shows passados,
e tudo é feito usando jQuery. Você pode dizer
por causa de todas estas animações, essencialmente.
Então se você tem - se você estiver criando um novo post,
você vê esses pequenos slideDowns, tudo isso é feito usando jQuery.
E isso desaparecer - para esse tipo de coisa é feito usando jQuery,
e você não tem que recarregar constantemente a página para navegar no site.
Outra coisa legal que é feito usando jQuery é esta apresentação.
Eu estou usando essa coisa de código aberto chamado scrolldeck,
que alguém escreveu sobre jQuery.
Se você realmente olhar para a fonte, você pode ver que
eles estão usando este cifrão; cifrões
são usados ​​em jQuery para significar que uma função é uma função jQuery.
Então, eles estão definindo um invólucro no topo do jQuery
que lhe permite fazer uma apresentação como esta,
e você pode ver que aqui eles estão incluindo o arquivo jQuery original
que é o que você terá que incluir, se quiser usar jQuery
em seus próprios sites.
>> Tocar em que, como você instalá-lo?
Você pode apenas ir para jQuery.com e baixar o arquivo,
adicioná-lo em um diretório web e incluí-lo.
Então, só em cima, na tag head do seu arquivo HTML
do seu arquivo HTML principal, só tem essa linha de código
com a versão correta para qual versão do jQuery você está usando.
Você pode baixá-lo, indo para jQuery.com,
Clique em "Download jQuery", e você tem isso. É isso aí.
E, na verdade, podemos dar uma olhada em o que parece.
Se você clicar em download aqui, jQuery é isso.
É apenas um grande arquivo JavaScript que faz todas as coisas mágica para você.
Esta é a versão minified, que não pode ser lido em tudo.
Você também pode olhar para a versão de desenvolvimento, que é legível
mas ainda é muito, muito longo.
É um monte de coisas lá dentro.
Você também pode vincular a versão hospedada do Google dela.
Então, isso vai permitir que você confiar apenas no Google para fornecê-la.
Eles fornecem a cada versão, disponível em todos os momentos.
Então, provavelmente você pode confiar no Google para hospedá-lo para você.
Ou você pode ligar para o próprio última versão do jQuery.
Eles têm uma URL que está sempre atualizado para a versão mais recente.
É jQuery mais recente, e não há um problema com isso,
que é que se o jQuery actualizado e algumas das funcionalidades anteriores
eles haviam se retrogradada ou obsoleta,
não pode - ele pode começar a não ser mais suportado.
Então, se você escrever um site usando a versão 1.8.2,
pelo tempo versão 2.7 sai
algumas das funções que você escreveu, não funciona mais.
Por isso, é melhor apenas para baixar o arquivo de 32 kB,
colocá-lo na sua página web, e ele vai funcionar para sempre.
>> Eu estou indo para ir em frente e começar a falar sobre a funcionalidade real do jQuery.
A primeira coisa é seletores. Isto é o que jQuery foi inicialmente concebido para fornecer.
E você pode clicar sobre a documentação para olhar
a documentação detalhada para os seletores que eu vou fazer a cobertura.
A idéia por trás seletores é que você pode selecionar elementos HTML em uma página.
Elementos de uma página ter IDs e classes e outros aspectos que identificam a eles.
Há também - eles estão em ordens diferentes.
Algumas vezes eles são encaixados uns dentro dos outros.
JQuery permite construir consultas simples que recuperam elementos da página.
Depois, você pode manipular esses elementos usando funções jQuery,
qual é a seção de manipulação nós vamos chegar à tarde.
Você pode alterar o HTML, altere o CSS,
Você também pode animar e adicionar funções que ativam em determinados eventos.
Assim, por exemplo, se algo for clicado, você quer que algo aconteça,
Você pode fazer isso usando jQuery também.
E há um grande número de maneiras de selecionar elementos.
A maioria deles eu nunca usei, mas não são os básicos,
que são muito importantes.
O seletor de elemento, por exemplo, se você está apenas selecionar nada
que é uma div - Na verdade, tenho o código aberto para esta apresentação de slides.
Assim, por exemplo, aqui está o primeiro slide.
Aqui temos um div. Se nós realmente selecionar todas as divs na página,
ele vai apenas dar-nos um conjunto de todas as divs que existem neste arquivo.
O seletor ID permite que você selecione qualquer coisa com um determinado ID.
Então, se isso, por exemplo, essa coisa tem o ID "o quê",
e se fizéssemos isso com # que em vez de algum ID,
seria apenas retornar uma matriz que tem um único elemento e que é esse elemento da página.
Podemos também combinar seletores desta forma por ter
só selecionar as coisas com IDs que são divs.
Então, sim. Somente selecione divs que têm que ID.
Para a classe de você usar apenas um ponto, que é a mesma coisa que CSS.
Descendente também funciona, assim, se você tem alguma classe
e tem elementos aninhados dentro dele - assim, por exemplo,
existe alguma classe e tem uma marca de âncora de ligação para outra página,
você pode usar esta sintaxe para recuperar o link.
Você também pode selecionar várias coisas ao mesmo tempo, basta separá-los por vírgulas,
usar qualquer selector você gostaria, e você irá selecionar todos eles de uma só vez, em uma única matriz.
E depois há também a não selector, assim você pode selecionar todos os divs
que não tem alguma classe específica.
E isso é apenas uma maneira útil para obter uma introdução sobre como funciona essa seleção.
Vou mostrar alguns exemplos concretos de um segundo.
>> Seletores avançados são - estes são apenas alguns exemplos.
Existem dezenas destes, mas se você quiser selecionar todas as tags de imagem
dentro de algum elemento, então você acabou de fazer: imagem.
Se você quiser selecionar os elementos até, por exemplo, se existem 20 deles,
você quer selecionar 0, 2, 4, 6 e assim por diante,
você faz: mesmo, ou você também pode fazer: estranho.
Estes são selectores pseudo, o que significa que, na verdade, computar
todos os outros elementos ao invés de apenas ir e selecionar todos eles.
Você pode também - cada elemento também pode ter atributos específicos.
Assim, por exemplo, a classe = central é também um atributo.
Por esta tag âncora, href, hipertexto de referência, é um atributo também.
Assim, você pode escolher algo que os links para uma página específica ou apenas - é realmente geral.
Você pode selecionar qualquer coisa com qualquer atributo que você gostaria.
E então, também, atributo contém.
Se você, por exemplo, queria selecionar todos os elementos de entrada
que têm a palavra "pass" como o nome deles,
se uma página tem um bloco de texto de entrada
que é chamado de "senha", que seria uma maneira que você pode selecionar isso.
E há muitos mais. Você pode ir em frente e olhar para a documentação
e ver exemplos específicos de como ele funciona.
>> A próxima coisa é a manipulação DOM.
Depois de selecionar os elementos, nós queremos realmente fazer coisas com eles.
Até agora, ainda não olhou para nada disso, mas se você olhar a documentação,
não há realmente muita coisa que podemos fazer.
Neste ponto, vamos selecionar elementos sobre esta apresentação
e manipulá-los usando jQuery.
Porque este é implementado usando jQuery, temos acesso à biblioteca jQuery,
e podemos usar essas funções dentro deste código.
Uma coisa útil que você pode não saber sobre o console.
E o Google Chrome é o que eu estou usando. Você pode pressionar alt comando J
ou alt controle J para abrir o console.
No Firefox eu acho que é comando shift K ou controle de mudança K.
No Safari você tem que ir alterar algumas configurações.
Há um link, se quiser fazê-lo, mas eu recomendo ficar Chrome ou Firefox.
Então, vamos abrir o console, que é aqui em baixo.
Ele permite que você basicamente fazer o que quiser.
Assim, você pode simplesmente digitar criar uma variável chamada x,
x = 5, vamos ver o que x + 2 é.
Você mesmo pode fazer algo parecido com CS + vamos ver, x + 45, que será CS50.
Você pode apenas fazer algumas coisas JavaScript típico.
Mas você também pode fazer jQuery aqui.
>> Então, vamos olhar para este primeiro aspecto aqui.
Nós vamos criar uma variável chamada HTML, que é uma string.
Ele tem uma marca de parágrafo na mesma, que é chamado de algum texto novo.
Então, nós temos essa HTML, é um texto novo, em marcas de parágrafo.
Agora nós realmente deseja adicioná-lo à página.
Eu configurá-lo para que o HTML para este número, este título aqui, é append ID.
Se selecionar append ID e, em seguida, anexar a ele
a variável HTML que acabei de criar,
ele irá adicionar HTML que, no final, logo após esta tag parágrafo.
Então, se fizermos isso - nós selecionamos este parágrafo,
e nós chamamos a função de acréscimo com a variável HTML Acabei de adicionar,
ele irá adicionar o novo texto lá na página.
Também pode preceder, o que significa que ele irá percorrer antes, no início desse elemento.
Portanto, há um novo texto no início e depois.
Eu posso ir em frente e atualizar para se livrar dessas coisas que acabei de fazer.
Mas isso é um exemplo de como você pode usar o prepend e acrescentar métodos
para manipular o material na página, adicionar um pouco de HTML.
>> Você também pode mudar de classe.
De volta a este arquivo de estilo, eu criei este para a classe vitória
que tem o texto vermelho cor, alguma cor de fundo, e uma sombra de texto.
Parece horrível, mas eu posso realmente -
este número corresponde a classe ID.
Então, eu posso adicionar a classe para a vitória.
Eu posso executar isso no console,
e que irá adicionar essa classe, e agora parece horrível, como esperado.
O CSS é aplicado automaticamente para as classes que você -
se há CSS para uma classe, ele automaticamente é aplicado
Se você alterar a classe de um elemento.
Então, podemos apenas removê-lo usando a classe de remoção.
Então, se você tem algumas classes predefinidas, como vermelho ou destacado,
e, em seguida, você deseja aplicar para aqueles elementos,
você não tem que fazer todo o estilo CSS de cada vez.
Você pode simplesmente adicionar a classe de um elemento, e então ele se tornará automaticamente -
ele vai procurar automaticamente apropriado para essa classe.
Também pode remover as coisas, então eu vou para selecionar todos os divs
na página e removê-los.
O que é que vai olhar como?
Vai parecer que nada, então não há realmente nada de esquerda.
Minha apresentação está desaparecido.
Posso atualizar e trazê-lo de volta, felizmente,
porque é apenas correr uma vez,
mas isso é um exemplo de remoção, se você quiser destruir completamente um elemento da página.
>> Você também pode substituir, e eu estou indo para selecionar todas as marcas de parágrafo na página
e ir para dentro deles e substituir qualquer texto que eles têm em si
apenas com a palavra "teste".
Se você fizer isso, você vai substituir todos os parágrafos na página com este teste.
Yep. Estão todos substituídos por testes.
Então, isso é um exemplo de acesso ao texto e substituí-lo.
Você também pode recuperar informações, e isso é muito legal para as caixas de entrada.
Se você tem uma caixa de entrada que as pessoas estão escrevendo coisas para,
as pessoas estão digitando coisas para ele,
aqui vamos selecionar a entrada, qualquer marca de entrada com um tipo de texto.
Neste caso, há apenas uma caixa de entrada de toda a apresentação,
por isso vamos selecionar a primeira, e, em seguida, chamamos a função val nele.
Que retorna o valor, e por uma caixa de entrada,
o valor é apenas o que passa a ser dentro dela.
Então, se fizermos isso, ele só retorna o material string.
E se nós chamamos isso de novo depois de escrever mais coisas, ele se transforma em mais coisas.
Essa é uma ótima maneira de acessar os elementos de uma caixa de entrada e, em seguida, verificar,
este é um endereço de email válido, isso é uma data válida, por exemplo.
Você pode apenas recuperar coisas instantaneamente como as pessoas estão digitando-a,
e, em seguida, verificar se ela é válida, enviá-lo para um servidor, fazer o que quiser com ele.
E é assim que você acessar o que há dentro dessas caixas.
>> Você também pode modificar CSS diretamente, então ao invés de adicionar
uma classe que tem algumas propriedades pré-definidas,
você pode apenas adicionar o CSS você quer qualquer coisa.
Então vamos selecionar corpo, que é toda a apresentação,
ea cor é a propriedade que define o que as cores do texto é.
Se mudar para vermelho, todo o texto na página vai virar vermelho.
Nós podemos fazer algo parecido com fundo de cor azul,
lá vamos nós, é lindo.
Você pode fazer o que quiser com isso.
Usando a propriedade CSS, você pode realmente modificar a forma como tudo parece a qualquer momento.
O próximo passo é efeitos.
Os efeitos são basicamente a mesma coisa que modificar o CSS,
mas eles oferecem alguma animação extra para ele.
Então, ao invés de apenas mostrar ou esconder algo ou mudando a cor,
você pode realmente fazê-lo animado.
Aqui está a documentação, se você quiser dar uma olhada na documentação extensa para ele.
Mas eu estou indo cobrir os principais.
Há o show e propriedades esconder.
Mostrar / ocultar ID, na verdade, corresponde a toda esta caixa,
então se eu escondê-lo, ele simplesmente desaparecerá.
E eu posso mostrá-lo novamente se eu quero fazê-lo voltar.
E ele está de volta. Ele não chegou a desaparecer,
Eu realmente não removê-lo da página, eu só definir a propriedade CSS de visibilidade para escondido
então você não pode mais vê-lo.
Há também deslizar para cima e deslizar para baixo, que lhe permite ter esse efeito.
Ele desliza até desaparecer, e depois desaparece
você pode deslizar para baixo para fazê-lo voltar. E agora ele está de volta.
Há também esse efeito de fade, que - Fade ID corresponde a esta caixa.
Se eu desaparecer com isso, então ele vai desaparecer lentamente.
Eu também pode disfarçá-la, e ele vai voltar.
Você também pode fazer fade to, que é específico para a função de desaparecer.
Você pode tê-lo desaparecer a qualquer opacidade específico que você deseja.
Então, se você desaparecer lentamente para 0,5, ele vai se tornar metade visível.
Eu posso fazê-lo ir para 0,1, e de volta a 1 para torná-lo completamente visível novamente.
Isso é apenas outra animação que você pode fazer.
>> Também existem os efeitos de alternância.
Então, eu estou indo para selecionar o ID de alternância, o que corresponde a esta caixa,
e nessa div você pode chamar de alternância, se é visível ele se tornará invisível,
se é invisível se tornará visível novamente.
Então, eu só chamou esta função de alternância duas vezes, a primeira foi
a mesma coisa que esconder, a segunda chamada foi a mesma coisa que um show.
E você também pode fazer isso com um fade de alternância,
que faz a mesma coisa, exceto que ele realmente desaparece.
E mesmo com a lâmina alternar.
Há efeitos encadeados, bem como, o que significa
Se você selecionar um elemento e apenas chamar um monte de métodos de animação sobre ele,
se você queria a desvanecer-se para fora, em seguida, deslize para baixo,
e, em seguida, esconder e, em seguida, desaparecer dentro, ele vai fazê-las em uma fileira.
Então desapareceu, voltou - por alguma razão, a pele não aconteceu.
Vamos testá-lo. Sim, por isso desapareceu e então deslizou para longe.
E há muito mais. Você pode usar a função de animar
para criar suas próprias animações, que é bastante complexa,
mas fornece extensibilidade infinita.
Você pode fazer qualquer tipo de animação que você deseja.
Você também pode usar fila a fila várias animações ao mesmo tempo.
Então, se você quer algo para voar em toda a página,
slides a partir do canto superior direito para o canto inferior esquerdo, você pode fazer isso,
e só tem um monte de ações que vão um após o outro.
>> A próxima coisa que vamos falar é sobre os eventos.
Eventos permitem que você - até agora, apenas fui escrevendo coisas para o console
e essa é uma maneira de fazer isso acontecer,
mas em uma página real, você não vai ser capaz de
fazer as coisas de tipo de usuário no console.
Você quer que as coisas aconteçam automaticamente.
Para isso, você precisa usar os eventos que ativam em algum determinado acontecimento do evento.
Você pode verificar a documentação de todos os detalhes.
Então vamos ver. Queremos mostrar ou ocultar a caixa,
mas agora esse botão não faz nada, porque eu não implementá-lo ainda.
Eu estou indo para ir para a página HTML atual.
Aqui está o slide. Há um div para o slide.
Ele tem a classe de corrediça.
Há o texto. Agora, há essa caixa eo botão de caixa.
Como poderíamos realmente fazer isso desaparecer?
Primeiro de tudo, vamos escrever uma função que faz com que o ID caixa de desaparecer.
Esta é a sintaxe para funtion, vamos chamá-lo de hideTheBox.
Ela não tem nenhum argumento, porque não há argumentos a serem tomadas.
Podemos selecionar o ID de caixa.
Então, usando o jQuery escolha, podemos selecionar a caixa de ID,
e depois é só fazê-la desaparecer.
Vamos fazê-lo desaparecer.
Se corremos esta função no console atual,
poderíamos definir esta função, podemos chamar hideTheBox, e ele funciona.
Mas queremos que isso aconteça quando o botão for realmente pressionado.
Para isso, temos que usar um evento.
Para vincular um evento para algum botão específico ou algum acontecimento ação,
temos que selecionar o elemento que o evento irá desencadear -
ou que acionará o evento, sorry.
>> Então, primeiro de tudo, vamos selecionar o botão da caixa ID
porque esse é o botão, e agora, para esse botão,
queremos criar uma animação quando é clicado.
Portanto, não há essa função clique.
Ele permite que você ligar uma outra função a ele.
Esta função tem outra função como um argumento
podemos passar a função hideTheBox,
e sempre que este botão é clicado, essa função será executada automaticamente.
Então, isso vai funcionar se nós salvar isso, eu vou atualizar,
e - um segundo, me desculpe.
Deixe-me corrigir isso muito rapidamente.
Okay. Lá vamos nós. Então, agora a caixa está desaparecendo quando clicamos no botão.
Nós também podemos mudar isso para apenas fadeToggle,
mudá-lo apenas para ocultar ou mostrar a caixa,
e isso também vai trabalhar muito, se atualizar.
Nós podemos escondê-lo, também podemos mostrá-lo, e que vai continuar a trabalhar.
Outra coisa que podemos fazer é, nós realmente não temos que definir esta função hideTheBox
antes de chamar a função de clique.
Então, ao invés de definir a função e chamando hideTheBox,
vamos apenas chamá-lo se isso for clicado.
Assim, podemos defini-lo anonimamente aqui,
que é um recurso que tem JavaScript.
Você pode definir uma função, normalmente, diríamos função hideTheBox
com argumentos, mas em vez disso, podemos apenas dizer que funcionar sem argumentos,
iniciar a chaveta para definir a função,
fechar essa encaracolado cinta, e depois é só definir a função aqui,
dentro da primeira e da última parêntesis parêntesis
que correspondem aos argumentos da função de clique.
Então, nós estamos passando esta função, podemos copiar esta linha de código aqui,
e que vai fazer exatamente a mesma coisa.
E agora não temos essa função fadeTheBox aleatória
que está sentado, sem motivo aparente.
A função foi definida de forma anónima, ele não tem um nome.
Ele só será executada quando clicamos no botão da caixa.
Portanto, refrescante, mais uma vez, mais uma vez, e você pode ver que ele ainda funciona.
E é assim que você criar eventos.
>> Há uma série de diferentes eventos que podemos utilizar.
Vou voltar a usar o console para apenas mostrar como estas funcionam.
Os IDs de cada um destes corresponde a cada caixa.
Portanto, esta caixa é clique ID, esta é a chave de identificação, e este é um mouse ID.
Só mais uma coisa é que não há essa função ação, ao invés de digitá-lo a cada vez,
Na verdade, eu fui em frente e definir esta função ação aqui.
Ele faz a mesma coisa que a função hideTheBox.
Fica esta caixa e quer se desvanece-lo ou desvanece-lo dentro
E é por isso que somos capazes de usá-lo aqui.
Então, se clicar nesse clique ID, queremos fazer a caixa desaparecer ou reaparecer.
É a mesma coisa que o botão que tivemos no último slide.
Agora, depois chamamos a isso, podemos clicar sobre isso e caixa desaparecerá,
em seguida, clique nele novamente ea caixa vai reaparecer.
Isso é muito simples. Dê um duplo clique faz a mesma coisa,
exceto que exige um duplo clique.
Então, se você clicar sobre ele uma vez e clique sobre ele novamente nada vai acontecer,
mas se você clique duas vezes rapidamente, ele vai desaparecer.
Se você der um duplo clique novamente, ele vai voltar.
Então, isso é muito simples.
Entrada de teclado é meio estranho, eu não acho que ele realmente funciona neste exemplo
porque o baixo, Tecla para cima e pressione a tecla e outras acções-chave
ativar, não importa o elemento que você ligar para ele.
Por exemplo, mesmo que liguei tecla para baixo para o corpo ou qualquer outra coisa completamente,
em seguida, ele ainda ativar não importa - não é específico.
Eu não tenho que ser clicando neste e pressione uma tecla para fazer qualquer coisa desaparecer.
Ele seria ativado, independentemente de qual elemento Atualmente estou dentro
Então, esses realmente não trabalhar neste exemplo
porque ele não me reconhecer como entrar entrada no div entrada do teclado.
>> Mas se você olhar para as ações do mouse,
o primeiro é passar, e que ele pode fazer parte dessa usando CSS.
Se você usar o CSS, você pode criá-lo de modo que, se você passar o mouse sobre alguma coisa,
em seguida, suas mudanças de estilo.
Mas usando jQuery você pode mudar os estilos de outras coisas também.
Assim, por exemplo, nós vamos chamar a ação se passa o mouse sobre essa div.
Isso significa que se passa o mouse sobre ele, em seguida, a caixa irá desaparecer.
Se afastar-se dela, a caixa volta a aparecer.
Se chamarmos isso e passar o mouse sobre ele, a caixa não desaparecer,
e assim que se afastar, ele volta.
Se chamarmos esta função pairar sobre o ID mouse,
o que corresponde a esta caixa, em seguida, se passar o mouse sobre a caixa,
em seguida, a caixa vai realmente desaparecer - ele está sendo badalado agora, mas -
se afastar, ele vai reaparecer. Agora é para trás por algum motivo.
O mouse entrar e funções de movimento do mouse é um pouco semelhante, mas um pouco diferente.
Rato entrar só é ativado quando o mouse entra na caixa, como esperado.
Então, se você passar para ele, ele vai desaparecer.
Mas isso não vai reaparecer quando você se afastar, você vai ter que voltar para ele para que ele volte.
Há também a função de movimento do mouse, o que irá activar
sempre que o mouse é ainda presente na caixa.
Por isso, vamos continuar em frente, entrando e saindo.
E é realmente de registro - parece que é só entrando e saindo,
mas na verdade é um registro muito mais ações do que isso,
Então, quando você se afastar ele só vai continuar, porque registrado como um mil deles.
Talvez não um mil. Talvez cinco.
Ele registra mais do que isso.
A questão é que todas as ações do mouse, há um monte deles.
Você pode ler sobre os outros, mas todos eles são ligeiramente diferentes,
e você pode escolher qualquer um que você precisa
para qualquer propósito específico que você está tentando fazer.
>> A próxima coisa que eu vou falar é AJAX.
AJAX, eu sei que não cobrem JavaScript em tanta profundidade deste ano,
então eu só vou falar sobre AJAX, em geral, por um minuto.
AJAX está para Asynchronous JavaScript and XML.
É basicamente, por exemplo, quando você está no Facebook e empurra-lhe uma notificação,
isso é porque AJAX está sendo executado em seu navegador.
A cada dois segundos, o navegador é realmente
indo para servidores do Facebook, pedindo-lhes, você tem nada de novo para mim,
e, em seguida, volta para você.
Isto permite-lhe enviar solicitações para um servidor
sem realmente ter que carregar a página.
Então, normalmente, se você está apenas usando PHP e banco de dados,
você tem que atualizar a página antes que você pode obter novas informações a partir do servidor.
Mas o uso de AJAX, você pode puxar para que novas informações constantemente,
ou puxar por ela quando você clica em um botão ou qualquer coisa assim.
Então, isso nos permite enviar pedidos sem recarregar a página,
e podemos usar GET ou pedidos POST.
>> Recebo pedidos são, por exemplo, se você para Google.com
e fazer q = teste. Isso é dar-lhes um teste de consulta.
E isso é um pedido GET porque está passando os parâmetros na URL próprio.
A solicitação POST é como se você estivesse enviando via post.
É como se você colocá-lo em uma carta e enviá-lo para eles,
mas eles realmente não ver o conteúdo. Eles não são visíveis na URL.
Você não pode digitá-lo diretamente no, você tem que enviá-lo quase em segredo.
Está em um post.
Mas o uso de jQuery, você pode fazer solicitações GET e POST
muito mais facilmente do que você normalmente poderia usando apenas JavaScript simples.
Você pode consultar APIs usando requisições GET, e você também pode verificar informações de login.
Na próxima página, eu criei este, que pergunta: "O que tem para o almoço?"
usando o Harvard comida API, então vamos puxar isso.
Este é apenas um exemplo de como você pode usar jQuery para fazer uma requisição GET para uma API
e obter informações de volta a partir dele.
Então, nós queremos ver o menu para hoje,
e queremos ver o que há para o almoço.
Aqui está a URL para criar uma solicitação GET em jQuery.
você usa o $. obter função.
O primeiro argumento é o URL, por isso exatamente o que você está consultando.
Em seguida, o argumento seguinte é uma função que é executada quando o pedido GET está completa.
Então você enviar algum pedido ao servidor, esperar por ele para voltar.
Quando ele voltar, você vai tomar alguma ação com os dados que está de volta a partir do servidor.
Vamos em frente e codificar isso também.
Eu não codificar isso, quer, de propósito.
Aqui está o TODO. Primeiro de tudo, vamos usar a ligação de evento
de modo que quando este botão é pressionado, nós enviar uma solicitação GET.
E quando esse pedido GET retorna com alguns dados,
vamos escrevê-lo para essa refeição Informações ID div.
Primeiro de tudo, vamos selecionar o botão de alimentação ID.
Quando é clicado, queremos que ele faça alguma coisa.
Vamos apenas torná-lo um fuction anônimo, como antes.
Pode embrulhar as chaves,
e quando este botão é pressionado, queremos enviar uma solicitação GET
para verificar o que há para o almoço.
Para fazer isso, podemos apenas digitar $. Obter.
Esta é uma função jQuery, usando o sinal de dólar.
É preciso um par de argumentos. O primeiro deles é a URL,
a segunda é a função de retorno de chamada, a função que é chamado
quando este pedido na verdade, retorna.
Vamos apenas construir a URL primeiro.
Nós podemos fazê-lo a partir da API que David escreveu.
Indo para lá, podemos ver que é food.cs50.net/api/1.3/menus,
e depois é só passar os nomes dos parâmetros que você gostaria.
Assim, um parâmetro é o valor 1.
Parece que o padrão de data, data de início, os padrões de hoje
Se você não digitar nada, e data final também defaults
até hoje, se você não entra nada.
Isso é o que queremos. Queremos apenas obter a informação para hoje.
>> Queremos que o formato a ser em JSON.
Isso é apenas arbitrária, você pode usar qualquer forma que você quiser.
Você pode usar CSV, mas JSON é JavaScript Object Notation.
É muito fácil para JavaScript para entender o que isso significa,
e nós podemos imprimi-lo mais facilmente dessa forma.
Então, vamos solicitá-lo em JSON, e pedido o almoço vamos.
Então refeição = almoço. Basta escrever o URL, vamos voltar aqui.
Há menus. O primeiro parâmetro é output = JSON
porque é isso que nós queremos, e você separe os parâmetros com um "e".
O segundo parâmetro é - Eu não me lembro.
Refeição. E nós queremos refeição = almoço.
Você pode testar esta URL, digitando-o em seu navegador e ir para ele.
Ele vai te dar alguma saída. É apenas um monte de coisas que há para o almoço.
É neste formato feio. Queremos imprimi-lo em nossa página em um formato melhor.
Assim, o URL está correto, agora só precisamos escrever uma função
para chamar de volta quando o pedido for bem sucedida.
Esta função irá realmente ter um argumento. Será dados.
Os dados são o que vem de volta a partir da solicitação GET após a solicitação GET é feito.
Nós podemos fazer as chaves, aqui nós escrevemos a função anônima
que executa, usando esses dados quando temos as informações de volta.
Assim, os dados, quando digitado neste URL,
é isso que os dados vai parecer. Vai ser essa enorme cadeia.
Mas a coisa boa é, JavaScript pode analisá-lo usando a função JSON.parse.
Então, vamos criar uma nova variável chamada de análise de dados.
E de análise de dados é um array de objetos.
Cada objeto contém informações como - bem, vamos dar uma olhada.
Ele tem uma data, uma refeição, categoria, receita, todas essas outras coisas.
Então vamos imprimir o nome de cada um.
Vamos repetir ao longo de toda a variedade de coisas que podemos voltar a partir dele,
e apenas imprimir cada um - imprimir o nome de cada um.
Este é um loop for.
>> JavaScript tem esta sintaxe útil onde você pode criar uma variável e loop sobre uma matriz,
e i é var apenas o iterador, então ao invés de ter que fazer var i = 0,
eu era menor do que o comprimento, i + +, você pode apenas fazer var i nos dados analisados.
Neste exemplo, os dados analisados ​​(i) irá corresponder ao elemento atual
da matriz, o objeto real.
E nós queremos tirar o nome dele.
Então vamos fazer nome.
E a última coisa é que nós vamos ter alguns jQuery novamente.
Na verdade, adicioná-lo ao div, esta refeição Informações div que está atualmente vazia.
Então, vamos selecionar isso.
Vamos usar jQuery e selecione refeição Informações div ID ou info refeição ID, sorry.
Queremos acrescentar a isto.
Se fizéssemos teste, por exemplo, seria apenas substituí-lo a cada momento.
Assim, podemos apenas acrescentar este.
O elemento atual do array, vamos obter o nome de fora,
e vamos anexá-lo ao final da refeição Informações ID div.
E, em seguida, apenas para torná-la mais limpa,
nós também vamos acrescentar uma quebra de linha por isso não é tudo em uma linha.
Então, se tudo correr bem, que deve ser bom para -
em primeiro lugar, sempre que este botão é clicado,
ele irá enviar uma requisição GET para esta URL.
Quando os dados de volta a partir dele, que vai analisá-lo,
transformá-lo em JSON, varrer toda a matriz que representa esses dados,
e, em seguida, acrescente o nome e uma quebra de linha
para cada linha nesta refeição Informações ID que antes era vazio.
Então, voltando a esta página, vamos atualizar,
clique, descobrir - ele não funciona. Isso é lamentável.
E é aí que vem dentro de depuração
Index.html, linha 1.
É interessante.
Tudo bem, bem, ao invés de gastar o tempo fazendo isso, eu só vou
puxar para cima o arquivo feito que eu tenho, que é a versão completa.
Eu não tenho certeza qual é a diferença, mas podemos simplesmente abrir isso em seu lugar.
E vamos para o AJAX, e isso deve funcionar corretamente.
Isso é o que foi para o almoço de hoje,
em nenhuma ordem particular, com aspas em torno dele, por isso não é o mais bonito.
Mas, obviamente, se você estivesse fazendo isso para um projeto final,
você poderia torná-la melhor.
Mas isso é apenas um exemplo simples de como você faz a solicitação GET.
E se olharmos para o código real, eu estou supondo, eu tenho certeza
ainda é praticamente o mesmo.
Ah, eu esqueci de convertê-lo em uma string, é isso.
Não, ele ainda não está funcionando. De qualquer maneira, aqui está o código completo real
pelo que este deve ser semelhante,
e ele faz a mesma coisa que o que eu implementado.
Quando você clica no botão, ele usa GET JSON para analisar os dados automaticamente.
Leva os dados de volta com ele e percorre todo o conjunto
e imprime o - o que é para o almoço de hoje, o nome dele,
e acrescenta uma quebra de linha após cada linha.
É assim que você utilizar a função GET.
>> Você também pode usar POST, que eu não tenho tempo
escrever-se um exemplo para isso, mas podemos olhar para a documentação.
Se você olhar para jquery.post,
você pode ver que é quase a mesma coisa.
Você tem uma URL, mas em vez de passar parâmetros utilizando -
apenas colocá-los na cadeia para a URL em si,
você tem que passar nesta variável dados
que é basicamente um array, um dicionário que mapeia os parâmetros aos valores.
Você passar esse, e que envia-los na utilização de um POST.
E uma vez que você tem, então você pode ter uma função de sucesso
que é executado quando os dados de volta.
Caso contrário, é exatamente o mesmo. Então, usando POST,
você pode querer usar POST, por exemplo, se você tem um formulário de entrada
você deixar as pessoas senhas de entrada para ele, e enviar as senhas off
para o seu script de back-end, para verificar no banco de dados se o usuário é válido ou não.
Você pode fazer isso tudo usando jQuery em vez de ter que atualizar a página em tudo.
É assim que eu implementado no blog que eu mostrei anteriormente.
Se formos para o portal final e sair, sair,
Sair não funciona.
Bem, deixe-me abri-lo em uma nova janela.
Aqui há uma senha, e eu estava indo para digitar algo aleatório.
Ele não funciona, mas você pode ver que nós não
realmente tem que atualizar a página em tudo.
O código, se você quiser olhar para ele,
é todos disponíveis aqui.
Assim, o código que eu escrevi no ano passado em algum momento.
Como você pode ver aqui, estamos enviando uma solicitação POST.
Eu tenho um arquivo chamado login.php no back-end,
que verifica se a senha é válida.
Os parâmetros que passam em são senha, mapeado para
a entrada que está na caixa de entrada atualmente.
E quando os dados vem de volta, vamos verificar.
Se os dados forem falsas, então dizemos senha incorreta, deslize-o para baixo,
e apenas fazê-lo desaparecer depois disso.
Caso contrário, vamos carregar a página de administração.
E tudo isso foi feito usando JSON.
Neste muitas linhas de código, você pode simplesmente passar os dados para o back-end,
verificar se ele está correto, verifique se você está conectado corretamente,
e realmente responder a ele, redirecionando a pessoa para a página correta
ou não deixá-los entrar e dizer-lhes que eles tinham uma senha incorreta.
Então, isso é um exemplo de como você pode usar jQuery POST
enviar uma solicitação POST para o seu back-end,
verificar se alguém está conectado corretamente.
>> Tudo bem, então isso é todos os exemplos que eu tive, e todas as coisas que eu queria cobrir.
Essas são as principais coisas que jQuery permite que você faça:
selecionar elementos, modificá-los usando manipulação de DOM,
você pode adicionar efeitos, ativar as coisas em determinados eventos,
e também fazer pedidos AJAX muito transparente e fácil.
Então, obrigado por ter vindo ou assistindo,
e se você tiver alguma dúvida, é só me avisar. Sim?
[Estudante] Voltar quando você apareceu, você tinha JSON após a solicitação POST entre aspas,
e eu só estava me perguntando o que isso fez.
>> Sim, eu vejo. A questão era que, no exemplo que acabei de mostrar,
havia a palavra JSON entre aspas em torno da -
Vou retirá-lo de novo - em torno da função POST.
Eu estou apenas puxando-o para cima para mostrar.
Então aqui está esta solicitação POST, e não é isso JSON entre aspas.
Isso só define o que nós estamos esperando a saída para ser.
Então, se passar em JSON como o tipo de dados esperado,
não é uma exigência, mas se passarmos em,
em seguida, os dados serão automaticamente analisado como JSON.
Então, não temos de chamar a função de análise JSON sobre ele,
ele só vai acontecer automaticamente.
E se você der uma olhada na documentação para POST,
existe este tipo de dados variável, o tipo de dados que se espera do servidor.
O padrão é uma suposição inteligente que pode estar errado,
assim você pode deixá-lo em branco, mas é apenas o tipo de dados
na codificação que você está usando, se é JSON ou XML ou outra coisa.
>> Quaisquer outras perguntas?
Tudo bem. Se você tiver quaisquer outras perguntas, sinta-se livre para me enviar e-mail
em vshekhawat@college.harvard.edu,
e os slides e código deverá estar disponível on-line em breve.
Boa sorte com seus projetos finais, espero que você usar jQuery.
[CS50.TV]