Tutoriais • jQuery
jQuery - A estrutura de JavaScript com muitas vantagens - Parte 1: O "nível de entrada" - um primeiro exemplo pequeno
1996 ("Idade da Pedra web"), eu comecei a criar os primeiros sites da internet - uma época em que eu sonhei de oportunidades hoje nem sequer tem '.
Quase 15 anos depois (ok eu ne '"web avó" am :-)) tem o WWWelt mudou muito. A combinação de (X) HTML, CSS (3) e JavaScript e suporte ao navegador correspondente oferecer possibilidades quase ilimitadas na aparência e funcionalidade.
Um grande alívio e assistência estão também vários frameworks JavaScript.
Provocou uma série de artigos sobre o jQuery javascript quadro
As seções deste post:
<Exemplo> <HTML Code> <CSS Code> <jQuery Code> <Download> <outros Beispiele>
O que é um framework JavaScript e que as vantagens do uso?
Frameworks (estrutura de quadro, altura, estrutura básica ...) em termos de programação ou scripting línguas, bibliotecas, as tarefas básicas und-/oder recorrentes resumida em funções.
Facilita o uso de um quadro e acelera o desenvolvimento de seus próprios scripts e funções, porque você pode desenhar em suas pré-testadas funções sem "reinventar a roda" para ter.
Frameworks JavaScript que normalmente têm uma implementação única função para diferentes navegadores.
Isto fornece aos desenvolvedores e web designers um grande alívio e economia de tempo para testar sites em diferentes navegadores.
Por que é jQuery?
Nesta série de artigos que tenho para o framework JavaScript jQuery escolhido porque tem ao lado de seu desempenho também tem uma prevalência muito alta, isso implica as seguintes vantagens.:
- Há uma variedade de produtos acabados, utilizáveis encaixes livres (por exemplo, deslizante imagem forma-tester, separadores de mesa, etc), que pode ser utilizado directamente
- As altas taxas também fornece um constante aperfeiçoamento, (relatório de bug)
- Há uma grande quantidade de informações e tutoriais sobre jQuery
- jQuery é também para pessoas sem habilidades de programação para aprender rapidamente e facilmente
Para começar, estes são em meus olhos (juntamente com a velocidade e funcionalidade), os três aspectos mais importantes. Além disso, todos os quadros javascript trabalhar em um princípio semelhante. Então, quem está lidando com jQuery e vai aprender mais tarde em um quadro diferente umsteigt estar em casa.
Pessoalmente, eu trabalho de acordo com o projeto e tarefa com diferentes estruturas (por exemplo, extjs para desenvolvimento de aplicações e soluções de intranet), mas na criação de sites de clientes mais frequentemente associados com jQuery muito alto por causa da propagação.
Para começar, primeiro exemplo pequeno de jQuery
<clique HTML Code> <clique CSS Code> <clique jQuery Code> <clique download>
Para dar uma idéia do que oportunidades que ela pode fazer jQuery fornece um primeiro exemplo simples abaixo.
O código jQuery:
$ (Document). Ready (function () { $ ('# Demo_button1'). Click (function () { $ ('Div.demo_absatz1') addClass ('marrom') show ("lento") ..; }); });
DEMO - executar código DEMO redefinição
Olá, eu sou um DIV HTML com a classe "demo_absatz1" após o clique no botão DEMO é visível.
Se você clicar no botão Demo, eu recebo uma nova classe CSS você primeiro (marrom) e, finalmente, aparecer em uma animação lenta.
Não viu? Simplesmente "redefinir DEMO" botão e tente novamente!
O código em detalhe
Este exemplo é composto de 3 partes:
- O código em HTML (por exemplo, no demo1.html arquivo)
- O código CSS para o design (no demos.css arquivo)
- O código jQuery (em arquivo de demos.js)
Nota:
Você vai encontrar os exemplos em cada um o código completo para que você possa entender tudo coeso.
Eu não sou um defensor para que escrever código CSS e Javascript no documento. Terceirizar seus projetos de web no código em arquivos separados.
O código HTML
<clique Beispiel> <clique CSS Code> <clique jQuery Code> <clique download>
<DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir=ltr lang="de-DE"> <head> A jQueryBeispiel <title> primeira </ title> <link rel='stylesheet' media='all' type='text/css' href='/demos.css' /> </ HEAD> <body> <a id="demo_button1" class="demo_button" DEMO href="#"> - executar código </ a> <div class="demo_absatz1"> <strong> Olá, eu sou um DIV HTML com o id "demo_absatz1" após o clique no botão DEMO é visível. </ strong> </ p> <p> Se você clicar no botão Demo, eu recebo uma nova classe CSS você primeiro (marrom) e, finalmente, aparecer em uma animação lenta. </ p> <p> não viu? Simplesmente "redefinir DEMO" botão e tente novamente! </ P> </ Div> Clique Aqui src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script> <script type='text/javascript' src='/demos.js'> </ script> </ BODY> </ Html>
Considere o código HTML um pouco mais de perto:
Linha 5: Esta linha de código CSS terceirizada dos demos.css arquivo carregado. Dependendo de onde os arquivos estão armazenados, você deve definir o "src" da URL pode mudar ainda.
Dentro das tags body (linhas 8-14), ver as tags de HTML para o exemplo abaixo.
Linha 8: Começa com um "<a>" dia (um link) que foi atribuído id "demo_button1". Este deve ser um identificador único ID no seu documento HTML. Esta identificação é mais tarde no código jQuery para encontrar claramente relevante para o link.
O link também tem sido atribuído a uma classe CSS (classe). "Demo_button" neste caso. Esta classe será no código CSS utilizado para criar o elemento.
10/Zeile linha 14: Aqui você vai encontrar um dia "<div>" (uma caixa) da classe CSS "demo_absatz1" foi atribuído. Esta classe é utilizada no código CSS para a concepção do elemento e do código jQuery para identificação.
Linhas 11-13: Aqui está o texto que posteriormente é mostrado na caixa. É formatado em 3 parágrafos <p>). Este é o conteúdo puro que não é para o CSS e código jQuery de significado.
Linha 16: Aqui é muito importante, porque uma vez ativado, o framework jQuery. Neste exemplo, eu estou fora do quadro via Libs Google decidiu integrar. Você pode, é claro, a versão atual do jQuery em seu web cópia, mas deve ser o "src" URL em conformidade.
Linha 17: Aqui está o arquivo javascript "demos.js" em que o código jQuery é carregado do meu servidor web. Dependendo de onde os dados estão armazenados, você deve ajustar o "src" URL, se necessário.
Os arquivos são carregados somente no final, porque as ações são executadas jQuery depois de carregar o código HTML e CSS. Carregando os arquivos javascript acabar economizando tempo de carregamento antes da construção do documento HTML.
O código CSS:
<clique Beispiel> <clique HTML Code> <clique jQuery Code> <clique download>
. Demo_absatz1 { display: none; padding: 10px 20px; border: 1px solid # ccc; color: # 000; -Moz-border-radius: 15px; -Webkit-border-radius: 15px; border-radius: 15px; } . Brown { color: # fff; background-color: # 847d6b; border-top: 15px solid # 212 421; } {A.demo_button padding: 4px 4px 8px 10px; background-color: # c6c700; color: # fff; font-weight: bold; border: 1px solid # ccc; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; border-radius: 5px; text-decoration: none; }
O código de CSS sob o microscópio:
Linha 1-10: Aqui é a classe "demo_absatz1" definido. Além do projeto atribui-lo a encontrar uma entrada relevante na linha 2: "display: none". Isto significa que todos os elementos de que esta classe foi atribuído na tela não são visíveis (no código HTML já).
Nosso caixa é também carregar documentos HTML invisível.
Linha 11-15: A classe "marrom" apareceu anteriormente no documento HTML não faz. Mais tarde é usada para colocar a caixa na Mostrar mais distinta.
Linha 16-28: Aqui você vai encontrar os atributos de design do link "DEMO - executar código", que era a classe "demo botão" atribuído.
Os atributos individuais de design que eu gostaria em primeiro lugar não ir mais longe. Iniciantes CSS pode procurar os atributos por exemplo, na www.css4you.de.
Como um lembrete, mais uma vez do código jQuery
<clique Beispiel> <clique HTML Code> <clique CSS Code> <clique download>
$ (Document). Ready (function () { $ ('# Demo_button1'). Click (function () { $ ('Div.demo_absatz1') addClass ('marrom') show ("lento") ..; }); });
Agora fica interessante: O código jQuery com mais precisão considerados:
O que cada um é provável observar imediatamente que o código é relativamente curto - o slogan jquery equivalente "Escreva menos, faça mais".
jQuery é Javascript. Todas as características do quadro são chamados começando com "jQuery" ou a sigla "$".
Linha 1 e 5: ". $ (Document) prontos" significa "Se o documento é carregado (todos os elementos HTML) executar a seguinte função ..."
Nesta função deve ser incluído de qualquer código jQuery definido em elementos no documento HTML se refere.
Linha 2 e 4: "Se o elemento HTML com o id" demo_button1 "é clicado, execute a seguinte função ..."
"# Demo_button1" é um seletor - de que há um monte de jQuery, que eu vou descer em outras partes desta série de artigos em mais detalhe.
# É a identificação de um ID
Com este seletor você pode identificar claramente um elemento do seu código HTML.
Linha 3: "... Todas as caixas de div com a classe" demo_absatz1 "obter uma nova classe CSS chamada" marrom "e vai aparecer lentamente."
Nesta linha, um seletor mais é usado "div.demo_absatz1". Em contraste com o anterior, este não é único, não poderia ser atribuído em nosso documento HTML também várias caixas Div classe "demo_absatz1" (isto não é assim, mas poderia ser :-)).
Neste caso, a acção é aplicável a todos estes elementos.
"AddClass" encontrou os elementos de uma outra classe chamada "marrom" para (Veja CSS linha de código 11-15) e altera a cor da caixa.
É isso aí ...
Algumas modificações menor ...
Efeito ... e outra!
Em vez de "show" usamos "SLIDEIN"
$ (Document). Ready (function () { $ ('# Demo_button2'). Click (function () { $ ('Div.demo_absatz2') addClass ('marrom') deslizante para baixo ('slow') ..; }); });
DEMO - executar código DEMO redefinição
Olá, eu sou um DIV HTML com a classe "demo_absatz2" após o clique no botão DEMO é visível.
Se você clicar no botão Demo, eu recebo uma nova classe CSS você primeiro (marrom) e, finalmente, aparecer em uma animação lenta.
Não viu? Simplesmente "redefinir DEMO" botão e tente novamente!
Em vez de "show" estamos esvaziamento "fadeIn"
$ (Document). Ready (function () { $ ('# Demo_button3'). Click (function () { FadeIn $ ('Div.demo_absatz3') addClass ('marrom') ('slow') ..; }); });
DEMO - executar código DEMO redefinição
Olá, eu sou um DIV HTML com a classe "demo_absatz3" após o clique no botão DEMO é visível.
Se você clicar no botão Demo, eu recebo uma nova classe CSS você primeiro (marrom) e, finalmente, aparecer em uma animação lenta.
Não viu? Simplesmente "redefinir DEMO" botão e tente novamente!
"Três de cada vez"
Neste exemplo, existem 3 seções ocultas são todos a mesma classe "demo_absatz4" têm.
Com um clique em "código de demonstração Run" por esta razão todos os três Abra lá no seletor olha para a classe.
$ (Document). Ready (function () { $ ('# Demo_button4'). Click (function () { FadeIn $ ('Div.demo_absatz4') addClass ('marrom') ('slow') ..; }); });
DEMO - executar código DEMO redefinição
Olá, eu sou o primeiro DIV HTML com a classe "demo_absatz4" após o clique no botão DEMO é visível.
Se você clicar no botão Demo, eu recebo uma nova classe CSS você primeiro (marrom) e, finalmente, aparecer em uma animação lenta.
Não viu? Simplesmente "redefinir DEMO" botão e tente novamente!
Sim, onde é o segundo vendas ocultos?
Olá, eu sou o segundo DIV HTML com a classe "demo_absatz4" após o clique no botão DEMO é visível.
Sim, onde é o terceiro vendas ocultos?
Olá, eu sou o terceiro DIV HTML com a classe "demo_absatz4" após o clique no botão DEMO é visível.
Não viu? Simplesmente "redefinir DEMO" botão e tente novamente!
Conclusão:
<clique Beispiel> <clique HTML Code> <clique CSS Code> <clique jQuery Code> <clique download>
jQuery, CSS e HTML estão estreitamente ligadas e ...
.... isso não é tudo tão difícil 
Eu posso encontrar algumas boas idéias que você tem com este exemplo simples jQuery, o início e alguns são vantagens reais para o WWWelt mudança.
Download:
Você pode usar o código das seções de código acima ou diretamente copiar um arquivo zip com todos os 3 arquivos (. Html. Css e. Js) aqui.
hpv24_jquery_beispiel1 (219)
Dê-lhe uma tentativa!
1 voto / s de classificação, média: 6.00 estrelas do max. 6 estrelas possíveis
Loading ... 
