Websites – Basic Selectors – JQuery – Linux

Publicado: 24 de outubro de 2014 em JavaScript, JQuery

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>
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s