Websites – Content Filter Selectors – JQuery – Linux

Publicado: 25 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 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>
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