<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>GSaraiva&#039;s Projects &#187; HTML</title>
	<atom:link href="http://projects.pro.br/gsaraiva/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://projects.pro.br/gsaraiva</link>
	<description>Step by step</description>
	<lastBuildDate>Tue, 01 Sep 2009 13:14:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>jQuery: Os Seletores (Selectors)</title>
		<link>http://projects.pro.br/gsaraiva/2008/05/jquery-os-seletores-selectors/</link>
		<comments>http://projects.pro.br/gsaraiva/2008/05/jquery-os-seletores-selectors/#comments</comments>
		<pubDate>Mon, 19 May 2008 16:50:06 +0000</pubDate>
		<dc:creator>Gilberto Saraiva</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[ Pai]]></category>
		<category><![CDATA[Filhos]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Selectores]]></category>
		<category><![CDATA[Seletores]]></category>
		<category><![CDATA[Tag]]></category>
		<category><![CDATA[TagName]]></category>

		<guid isPermaLink="false">http://gsaraiva.projects.pro.br/?p=19</guid>
		<description><![CDATA[Camaradas,
Seguindo uma ordem mais amigável sobre o assunto, neste artigo vou falar sobre o seletores(Selectors) do jQuery, o responsável pelo funcionamento das requisições. Como disse no artigo passado fazer uma requisição objetiva resultará em um melhor resultado, pra cada caso você poderá escrever diversos algoritmos para obter o mesmo resultado.
Antes de começarmos, complementando as informações [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Camaradas,</strong></p>
<p>Seguindo uma ordem mais amigável sobre o assunto, neste artigo vou falar sobre o seletores(Selectors) do jQuery, o responsável pelo funcionamento das requisições. Como disse no <a href="http://gsaraiva.projects.pro.br/?p=11">artigo passado</a> fazer uma requisição objetiva resultará em um melhor resultado, pra cada caso você poderá escrever diversos algoritmos para obter o mesmo resultado.</p>
<p>Antes de começarmos, complementando as informações do artigo anterior, preciso lembrar-lhes que HTML é escrito com uma hierarquia, ou seja, os objetos podem ter Pai e podem ter Filhos. Basicamente a única TAG que não tem Pai é a < HTML >, pois ela inicia o documento HTML. Mas então, seguindo esse raciocínio podemos entender que as possibilidades de requisições objetivas são grandes, não dependendo apenas das propriedades que a TAG possuí.</p>
<p>Um exemplo comum, os valiosos formulários:<br />
<!--DEVFMTCODE--><pre class="devcodeblock" title="HTML"><div class="devcodeoverflow"><ol><li></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">action</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> <span style="color: #000066;">method</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;POST&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;CadNews&quot;</span> <span style="color: #000066;">onSubmit</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;return CheckForm()&quot;</span>&gt;</span></li><li> <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;UserName&quot;</span>&gt;</span>Seu nome<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;UserName&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span></li><li> <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;UserEmail&quot;</span>&gt;</span>Seu e-mail<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;UserEmail&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span></li><li> <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Cadastrar&quot;</span>&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">form</span>&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span>&gt;</span></li><li><span style="color: #339933;">&lt;!--</span></li><li>&nbsp;&nbsp;CheckForm <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;UserName <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;form#CadNews input#UserName&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;UserEmail <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;form#CadNews input#UserEmail&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>UserName <span style="color: #339933;">!=</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span>UserEmail <span style="color: #339933;">!=</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">&#123;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Dados incompletos&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span></li><li>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li>&nbsp;&nbsp;<span style="color: #009900;">&#125;</span></li><li><span style="color: #006600; font-style: italic;">//--&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li></ol></div></pre><!--END_DEVFMTCODE--><br />
Aqui fazemos a checagem dos campos &#8220;Seu nome&#8221; e &#8220;Seu -email&#8221; para que se eles contiverem um valor diferente de vazio o form poderá ser submetido, caso contrário o form não efetuará processo algum além do usuário visualizar a mensagem: &#8220;Dados incompletos&#8221;.</p>
<p>Veja que utilizamos alem do ID da Tag, fazemos uso também da estrutura, ou seja, além de procurarmos pelo ID, indicado pelo #, fazemos uso também da idenficação sequêncial, primeiro achamos o Form com o ID = CadNews e depois procuramos Input ID = UserName.</p>
<p>Agora entendendo um pouco sobre os 3 Seletores (Selectors):</p>
<h5>Seletor de TagName [Ex: jQuery("DIV")]</h5>
<dl>
O Seletor de TagName consiste em definir o tipo de requisição como busca por Elementos que são da Tag especificada. Exemplo:<br />
<!--DEVFMTCODE--><pre class="devcodeblock" title="HTML"><div class="devcodeoverflow"><ol><li></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span>&gt;</span>Texto<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span>&gt;</span></li><li><span style="color: #339933;">&lt;!--</span></li><li>&nbsp;&nbsp;jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;div&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Texto alterado.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li><span style="color: #006600; font-style: italic;">//--&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li></ol></div></pre><!--END_DEVFMTCODE--><br />
Então basicamente ele atua no TagName do elemento HTML.
</dl>
<h5>Seletor de ID [Ex: jQuery("#Status")]</h5>
<dl>
O Seletor de ID consiste em definir o tipo de requisição como busca por Elementos que contenham o ID igual ao especificado. Exemplo:<br />
<!--DEVFMTCODE--><pre class="devcodeblock" title="HTML"><div class="devcodeoverflow"><ol><li></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Status&quot;</span>&gt;</span>Não modificado.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span>&gt;</span></li><li><span style="color: #339933;">&lt;!--</span></li><li>&nbsp;&nbsp;jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#Status&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Modificado.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li><span style="color: #006600; font-style: italic;">//--&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li></ol></div></pre><!--END_DEVFMTCODE--><br />
Então basicamente ele atua nos Elementos que informam o ID, os que não informam não têm possibilidade de entrar no resultado da requisição por esse Seletor.
</dl>
<h5>Seletor de Classe [Ex: jQuery(".InputText")]</h5>
<dl>
O Seletor de Classe consiste em definir o tipo de requisição como busca por Elementos que são da classe informada. Exemplo:<br />
<!--DEVFMTCODE--><pre class="devcodeblock" title="HTML"><div class="devcodeoverflow"><ol><li></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;InputText&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Date&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Sem valor definido&quot;</span>&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span>&gt;</span></li><li><span style="color: #339933;">&lt;!--</span></li><li>&nbsp;&nbsp;jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.InputText&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;18-05-2008&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li><span style="color: #006600; font-style: italic;">//--&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li></ol></div></pre><!--END_DEVFMTCODE--><br />
Basicamente ele atua nos Elementos que pertencem a classe da requisição. Lembrando que um Elemento pode pertencer a várias classes.
</dl>
<p>Agora uma pequena notação:</p>
<p>Não é de hoje que, pra quem já desenvolve soluções para internet sabem, em CSS podemos selecionar todos os elementos atravez do * (asterisco), pois bem, no jQuery não é diferente. Como você devem ter notado ele atua atravez de requisições que por sua vez usa os seletores para os filtros, e que esse 3 seletores são identicos aos utilizados no CSS. O * (asterisco) não foge a regra do CSS, o uso é idéntico. Exemplo:</p>
<p><!--DEVFMTCODE--><pre class="devcodeblock" title="HTML"><div class="devcodeoverflow"><ol><li></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">language</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;JavaScript&quot;</span>&gt;</span></li><li><span style="color: #339933;">&lt;!--</span></li><li>&nbsp;&nbsp;jQuery<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;div *&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">html</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Filho&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></li><li><span style="color: #006600; font-style: italic;">//--&gt;</span></li><li><span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></li></ol></div></pre><!--END_DEVFMTCODE--><br />
O resultado será o preenchimento com a palavra &#8220;Filho&#8221; de todos os elementos pertencentes ao DIV.</p>
<p>Espero que tenham entendido essa parte, pois ela é de suma importância no bom entendimento e utilização do jQuery.</p>
<blockquote><p>
Próximo artigo:</p>
<li>Criando códigos facilitadores</li>
</blockquote>
<blockquote><p>
Artigos jQuery relacionados:</p>
<li><a href="http://gsaraiva.projects.pro.br/?p=11">Como iniciar a utilização do jQuery</a></li>
<li><a href="http://gsaraiva.projects.pro.br/?p=21">Tudo que você precisa é o link</a></li>
<li><a href="http://gsaraiva.projects.pro.br/?p=19">Os Seletores (Selectors)</a></li>
<li><a href="http://gsaraiva.projects.pro.br/?p=97">Criando códigos facilitadores</a></li>
</blockquote>
<p>Abraços a todos.</p>
]]></content:encoded>
			<wfw:commentRss>http://projects.pro.br/gsaraiva/2008/05/jquery-os-seletores-selectors/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
