Arquivo da categoria ‘JavaScript’

O Document Object Model (DOM) ou modelo de objeto de documento é uma convenção multi-plataforma e independente de linguagem para representação e interação com objetos em documentos HTML, XHTML e XML. Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM. Os objetos na árvore DOM podem ser endereçados e manipulados pelo uso de métodos sobre os objetos. A interface pública de um DOM é especificada em sua interface de programação de aplicações (API). O JQuery possibilita através de seus métodos de manipulação a capacidade de manusear vários tipos de operações sobre os objetos DOM.

DOM: http://www.w3.org/DOM/

  • append() – Adiciona um elemento no parâmetro especificado no final do elemento.
  • remove() – Remove um elemento do DOM.

Você pode saber mais sobre manipulações DOM no seguinte link:

DOM: http://api.jquery.com/category/manipulation/

JQuery - DOM

JQuery – DOM

Exemplo:

Neste exemplo utilizamos métodos de manipulação para inserir e remover elementos  no modelo de objeto do documento .

JQuery


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>Desenvolvimento Aberto</title>
    <style type="text/css">
     .imagem {
            border-style: double;
            border-width: 10px;
            width: 500px;
            height: 200px;

        }
    </style>

    <!-- Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->   

   <script>

   // Declara eventos de clique
   $( document ).ready(function() {

       $(".imagem").append("<p>Este é um elemento adicionado na arvore DOM</p>");
       // Manipulação de atributos

       $( "#bnt01" ).click(function() {
           $("div").addClass("imagem");
           });

       $( "#bnt02" ).click(function() {
           $("div").removeClass("imagem");
           });            

       $( "#bnt03" ).click(function() {
           $(".imagem").remove();
           });
    });       

   </script>
</head>

<body>

<h1>Desenvolvimento Aberto - DOM</h1>

    <div class="imagem"
         ></div>
<p>
    Escolha uma opção:
    </p>
<button id="bnt01">Adicionar Classe CSS</button>
<button id="bnt02">Remover Classe CSS</button>
<button id="bnt03">Remover Elemento DOM</button>

</body>
</html>
Anúncios

O JQuery possui métodos para que você possa manipular elementos e seus atributos de varias maneiras diferentes, permitindo que você adicione, copie ou remova atributos dos elementos.

  • addClass() – Adiciona classes especificadas nos elementos designados.
  • removeClass() – Remove classes especificadas nos elementos designados.

Você pode saber mais sobre outros métodos de manipulação de atributos no seguinte link:

Manipulation: http://api.jquery.com/category/manipulation/

JQuery - Manipulação

JQuery – Manipulação

Exemplo:

Neste exemplo utilizamos o recurso de manipulação para inserir e remover uma classe CSS nos atributos da imagem.

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>
        <style type="text/css">
         .imagem {
                border-style: dashed;
                border-width: 10px;
            }
        </style>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>

       // Declara eventos de clique
       $( document ).ready(function() {

           // Manipulação de atributos

           $( "#bnt01" ).click(function() {
               $("img").addClass("imagem");
               });

           $( "#bnt02" ).click(function() {
               $("img").removeClass("imagem");
               });           

        });       

       </script>
    </head>

    <body>

    <h1>Desenvolvimento Aberto - Manipulação de Atributos</h1>

    <img src="Imagem/tecnologia.jpg" alt="tecnologia">
    <p>
        Escolha uma opção:
        </p>
    <button id="bnt01">Adicionar Classe CSS</button>
    <button id="bnt02">Remover Classe CSS</button>

    </body>
    </html>

O Brackets é um projeto de código aberto, inicialmente criado pela Adobe, agora mantido por uma comunidade de desenvolvedores ativa e crescente. O Brackets se encontra sob a licença MIT, e é atualmente mantido no GitHub, seu download está disponível para as plataformas para Mac, Windows e Linux.

O Brackets é um novo editor de código para HTML, CSS e JavaScript construídos com HTML, CSS e JavaScript. O Brackets possui vários recursos inovadores entre eles ​​atualizações HTML e CSS em tempo real (sem recarregar o navegador) e também possui realce de elementos selecionados em arquivos HTML e CSS que são destacados dentro do navegador, mas para estes recursos o Brackets requer trabalho em conjunto com Google Chrome. O Brackets também completa automaticamente código JQuery.

Projeto Brackets: http://brackets.io/

Outros Projetos Adobe OpenSource: http://html.adobe.com/opensource/

Instalando o Google Chrome no Ubuntu

Para instalar o Google Chrome no Ubuntu precisamos instalar alguns pacotes adicionais que podem ser encontrados no site de pacotes do Ubuntu.

1 – Primeiro baixe o Google Chrome: http://www.google.com.br/chrome/browser/

Google Chrome Downloads

Google Chrome Downloads

2 – Escolha a versão adequada a seu computador e aceite a licença:

Licença

Licença

3 – Baixe o pacote LibIndicator7: http://packages.ubunu.com/trusty/libs/libindicator7

libindicator7

libindicator7

4 – Baixe o pacote Libappindicator1: http://packages.ubuntu.com/trusty/libappindicator1

Libindicatator1

Libindicatator1

5 – Instale os três pacotes com a extensão Debian e instale o Brackets utilizando um PPA para o Ubuntu:

sudo dpkg -i libindicator7_12.10.2+14.04.20140402-0ubuntu1_amd64.deb
sudo dpkg -i libappindicator1_12.10.1+13.10.20130920-0ubuntu2_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

sudo add-apt-repository ppa:webupd8team/brackets
sudo apt-get update
sudo apt-get install brackets
Terminal

Terminal

6 – Você pode abrir o Google Chrome caso deseje testar a instalação:

Google Chrome

Google Chrome

7 – Abra o Brackets e utilize o código abaixo:

Brackets Editor

Brackets Editor

8 – Clique no ícone do raio localizado no canto superior direito do editor, chamado Live Preview para verificar o resultado do código:

Live Preview

Live Preview

Exemplo:

Verifique que o Brackets possui um ótimo editor cheio de recursos para desenvolvimento web, note que entre os recursos o Brackets auto completa seu código JQuery. Para saber como utilizar o Brackets clique no link a seguir:

Usando o Brackets: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>
       $( document ).ready(function() {

        // Seletores - seleciona todos os elementos
        // $(*).css("color", "blue");  

       // Seleciona por elemento
           $("body").css("background-color", "#FFFFFF");

        // Seleciona por ID
           $("#header").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("padding", "5px")
                       .css("text-align","center");                  

           $("#section").css("width", "740px")
                        .css("float","left")
                        .css("padding","15px");

           $("#footer").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("clear", "both")
                       .css("text-align", "center")
                       .css("padding","5px");

           // Seleciona por Classe
           $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                      .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                      .css("box-shadow", "5px 5px 5px 5px #777777")
                      .css("padding", "20px");

           $(".imagem").css("padding", "5px")
                       .css("border", "10px");

           $("a").css("color", "#000000");

           $("p").slideUp(100).slideDown(3000);      

        $( "a" ).click(function( event ) {
            alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
        });
        });       

       </script>
    </head>

    <body>
    <div id="header">
    <h1>Desenvolvimento Aberto</h1>
    </div>

    <div id="section">

      <p class="caixa">

        <img src="Imagem/imagem01.jpg" width="350" height="300" alt="minha imagem" align="left" class="imagem"/>

        Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
        desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
        com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />  <br />
        Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
        pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
        sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
        e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
        requisitadas pelas empresas no mercado atual.       

        </p>
        <a href="#">Clique aqui!!!</a>
            </div>

    <div id="footer">
    Desenvolvimento Aberto © desevolvimento.aberto@live.com
    </div>

    </body>
    </html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mais sobre os seletores de formulários no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/form-selectors/

Seletores de Formulários

Seletores de Formulários

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "350px")
                    .css("float","left")
                    .css("padding","15px");

       $("#legenda").css("width", "500px")
                    .css("float","right")
                    .css("padding","5px");       

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear","both")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "10px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")

   	 $("a").css("color", "#000000");

       // ******************************
       // ** Seletores de Formulários **
       // ******************************	 

       $(":text").css("background-color","yellow");
       $(":password").css("background-color","limegreen");
       $(":radio").parent().css("background-color","aqua");
       $(":submit").css("background-color","fuchsia");

	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <fieldset class="caixa">
        <legend>Desenvolvimento Aberto - JQuery</legend>
        <p>
          Nome: <br>
          <input type="text" name="nome">
        </p>
        <p>
          E-mail: <br>
          <input type="text" name="email" size="35">
        </p>

        <p>
          senha: <br>
          <input type="password" name="pwd">
        </p>
        <p>
          <input type="radio" name="usuario" value="registrado">Registrado <br>
          <input type="radio" name="usuario" value="naoregistrado">Não Registrado
        </p>
        <p>
          <hr>
          <input type="submit" name="enviar" size="35">
        </p>
    </fieldset>

	</div>

	<div id="legenda">
   <p>
        <span style="background-color:yellow;font-weight:bold">Formulário</span> seleciona elemento de texto.
   </p>
   <p>
        <span style="background-color:limegreen;font-weight:bold">Formulário</span> seleciona elemento de senha.
   </p>
   <p>
        <span style="background-color:aqua;font-weight:bold">Formulário</span> seleciona elemento de radio.
   </p>
   <p>
        <span style="background-color:fuchsia;font-weight:bold">Formulário</span> seleciona elemento de botão.
   </p>
   </div>

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mais sobre os seletores de atributos no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/attribute-selectors/

JQuery - Seletores de Atributos

JQuery – Seletores de Atributos

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "400px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear","both")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // ***********************************
       // ** Seletores de Filtro Atributos **
       // ***********************************	 

       // Atributo nome
       $("td[colspan]").css("background-color", "yellow");

       // Atributo valor
       $("td[colspan=3]").css("background-color", "limegreen");

       // Atributo por partes do conteudo
       $("td[title*=Achar]").css("background-color", "aqua");

       // Atributo por partes finais do conteudo
       $("td[title$=final]").css("background-color", "fuchsia");
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td title="Achar um valor no conteudo do atributo">C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td title="Procure minha palavra final">JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>

   <p>
     <span style="background-color:yellow;font-weight:bold">Atributo</span> busca um atributo da tag.
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Atributo</span> busca um atributo da tag por valor.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Atributo</span> busca um atributo da tag por partes do valor.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Atributo</span> busca um atributo da tag pelo valor final.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores de filtro de conteúdo são divididos em quatro tipos, eles são:

  • $(elemento:contains) – Seleciona todos os elementos que contem um texto especifico.
  • $(elemento:empty) – Seleciona todos os elementos vazios.
  • $(elemento:has()) – Seleciona todos elementos que coincidem com os elementos especificados.
  • $(elemento:parent) – Seleciona todos os elementos que possuem pelo menos um parente.
JQuery - Filtro de Conteúdo

JQuery – Filtro de Conteúdo

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Preste atenção ao código HTML que contem tags que são os elementos especificados para se utilizar a seleção por filtro de conteúdo.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>
	
	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->
	     
   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>
           
   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     
           
   <script>    
   $( document ).ready(function() {
                                  
    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 
   	 
       $("#section").css("width", "900px")
                    .css("float","left")
                    .css("padding","15px");
       
       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("text-align", "center")
   	             .css("padding","5px");
   	             
       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");
       
       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                
         	 
   	 $("a").css("color", "#000000");
   	 
   	 // *********************************
       // ** Seletores de Filtro Conteúdo **
       // *********************************	 
       
       // Filtro contem
       $("td:contains(Abap)").css("background-color", "yellow");
       
       // Filtro vazio
       $("td:empty").css("background-color", "limegreen");
       
        // Filtro contem um elemento
       $("td:has(span)").css("background-color", "aqua");
       
       // Filtro elemento parente
       $( "th:parent" ).css("background-color", "fuchsia")
                       .fadeTo( 2500, 0.3 );
       
	});       

   </script>
</head>
 
<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>
 
<div id="section">
    
    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td></td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td></td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>
		  
   <p>
     <span style="background-color:yellow;font-weight:bold">Filtro</span> busca um conteúdo. 
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Filtro</span> conteúdos vazios. 
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> contem a tag (span). 
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> contem pelo menos um parente.
   </p>	
   
<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body> 
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mias sobre os seletores de filtros básicos no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/basic-filter-selectors/ 

JQuery - Filtros Básicos

JQuery – Filtros Básicos

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "900px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // *********************************
       // ** Seletores de Filtro Básicos **
       // *********************************	 

       // Filtro: primeiro e ultimo
       $("table span:first").css("background-color","yellow");
       $("table span:last").css("background-color","yellow");

       // Filtro: valores impares= odd / pares= even
       $("table td:odd").css("background-color","limegreen");

       // Filtro valores exato
       $("table td:eq(6)").css("background-color","aqua");

       // Filtro comparação
       $("table td:gt(9)").css("background-color","fuchsia");
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>

   <p>
     <span style="background-color:yellow;font-weight:bold">Filtro</span> primeiro e ultimo (tag: span).
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Filtro</span> valores impares.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> valores exatos.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> valores maior que.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores hierárquicos são divididos em quatro tipos, eles são:

  • $(parente>filho) – Seleciona todos os filhos do parente especificado.
  • $(antecessor descendente) – Seleciona todos os antecessores de um determinado descendente.
  • $(prévio + próximo) – Seleciona todos os próximos elementos adjacentes.
  • $(prévio ~ irmãos) – Seleciona todos os elementos irmãos do elemento prévio.
JQuery - Seletor de Hierárquia

JQuery – Seletor de Hierárquia

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Preste atenção ao código HTML que contem elementos com identificadores que são os elementos prévios para se utilizar a seleção por hierarquia.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "850px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // ****************************
       // ** Seletores hierarquicos **
       // ****************************	 

       // Seleciona por elemento descendente
       $("table span").css("background-color","yellow");

       // Seleciona filhos
       $("tr > th").css("background-color","limegreen");

       // Seleciona irmãos (siblings)
       $("#irmao ~ td").css("background-color","aqua");

       // Seleciona adjacente
       $("#adjacente + td").css("background-color","fuchsia");

	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th><span> 19:00</span></th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2" id="irmao">Java</td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" id="adjacente">Abap</td>
				<td>NetWeaver</td>
			</tr>
		</table>
               </div>
   <p>
     <span style="background-color:yellow;font-weight:bold">Seletor</span> de descendente.
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Seletor</span> de filhos.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> de irmãos.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> de adjacente.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores básicos são divididos em quatro tipos, eles são:

  • $(*) – Seleciona todos os elementos.
  • $(.class) – Seleciona uma classe.
  • $(elemento) – Seleciona o elemento especificado.
  • $(#Id) – Seleciona o elemento pelo seu ID.
JQuery - Selectors

JQuery – Selectors

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Para testar o exemplo utilize uma imagem qualquer com o tamanho de 350×300.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seletores - seleciona todos os elementos
    // $(*).css("color", "blue");  

   // Seleciona por elemento
       $("body").css("background-color", "#FFFFFF");

    // Seleciona por ID
       $("#header").css("background-color", "#000000")
                   .css("color", "white")
                   .css("padding", "5px")
                   .css("text-align","center");               	 

       $("#section").css("width", "850px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear", "both")
                   .css("text-align", "center")
                   .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       $("a").css("color", "#000000");

       $("p").slideUp(100).slideDown(3000);   	 

    $( "a" ).click(function( event ) {
        alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
    });
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

  <p class="caixa">

    <img src="Imagem/imagen01.jpg" width="350" height="300" alt="minha imagem" align="left" />

   	Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
	   desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
	   com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />	<br />
		Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
		pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
		sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
		e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
		 requisitadas pelas empresas no mercado atual.		 

	</p>
	<a href="#">Clique aqui!!!</a>
		</div>

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

Websites – Chaining – JQuery – Linux

Publicado: 23 de outubro de 2014 em JavaScript, JQuery

Chaining é um conceito do JQuery que significa encadeamento e nos permite executar vários métodos jQuery continuadamente. Se você chamar um método em uma seleção e o método retornar um objeto jQuery, você pode continuar a chamar métodos jQuery no objeto sem parar até que você finalize o método o encerrando com um caractere ponto e vírgula.

Ao contrario do exemplo anterior que utilizamos o mesmo método e o chamamos varias vezes utilizando inúmeras linhas de instruções JQuery para o mesmo elemento, agora chamamos o objeto uma única vez e o repetimos até que nossa condição seja satisfeita utilizamos uma única linha para cada elemento.

JQuery - Chaning - Animado

JQuery – Chaning – Animado

Exemplo:

Neste exemplo utilizamos o conceito de encadeamento para repetir instruções JQuery para criar o CSS e uma animação para a pagina do website.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     o para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

       $("body").css("background-color", "#FFFFFF");

       $("#header").css("background-color", "#000000").css("color", "white")
   	          .css("padding", "5px").css("text-align","center");

       $("#nav").css("background-color", "#9C9C9C").css("color", "#696969").css("height", "370px")
   	       .css("width", "100px").css("float","left").css("padding","5px");   	             

       $("#section").css("width", "550px").css("float","left").css("padding","15px");

       $("#footer").css("background-color", "#000000").css("color", "white").css("clear", "both")
   	          .css("text-align", "center").css("padding","5px");

       $("a").css("color", "#6C7B8B");

       $("p").slideUp(100).slideDown(3000);   	 

    $( "a" ).click(function( event ) {
        alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
    });
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="nav">
HTML<br>
CSS<br>
Javascript<br>
JQuery<br>

</div>

<div id="section">
	<p>Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
	   desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
	   com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />	<br />
		Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
		pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
		sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
		e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
		 requisitadas pelas empresas no mercado atual.
	</p>
	<a href="#">Clique aqui!!!</a> 

	</div>

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>