<?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>Saga do programador &#187; manipular elementos</title>
	<atom:link href="http://www.sagadoprogramador.com.br/tag/manipular-elementos/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.sagadoprogramador.com.br</link>
	<description></description>
	<lastBuildDate>Thu, 22 Sep 2011 04:20:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>5 bons motivos para usar jQuery</title>
		<link>http://www.sagadoprogramador.com.br/2009/07/5-bons-motivos-para-usar-jquery/</link>
		<comments>http://www.sagadoprogramador.com.br/2009/07/5-bons-motivos-para-usar-jquery/#comments</comments>
		<pubDate>Fri, 17 Jul 2009 19:28:27 +0000</pubDate>
		<dc:creator>Iuri Menescal</dc:creator>
				<category><![CDATA[Jquery]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[alterar css]]></category>
		<category><![CDATA[framework]]></category>
		<category><![CDATA[javascrit]]></category>
		<category><![CDATA[JSon]]></category>
		<category><![CDATA[manipular elementos]]></category>
		<category><![CDATA[por que usar jquery]]></category>

		<guid isPermaLink="false">http://www.sagadoprogramador.com.br/?p=139</guid>
		<description><![CDATA[1) jQuery é um FrameWork JavaScript, que utiliza uma DSL simples e objetiva, que ajuda o desenvolvedor a abstrair uma grande quantidade de código que não fazem parte da lógica no seu negocio, como problemas de compatibilidade de navegadores por exemplo. 2) Alem disso tem uma grande capacidade de manipular elementos de uma página com [...]]]></description>
			<content:encoded><![CDATA[<p><strong>1)</strong> jQuery é um FrameWork JavaScript, que utiliza uma <a href="http://www.sagadoprogramador.com.br/?p=169">DSL </a>simples e objetiva, que ajuda o desenvolvedor a abstrair uma grande quantidade de código que não fazem parte da lógica no seu negocio, como problemas de compatibilidade de navegadores por exemplo.</p>
<p><strong>2)</strong> Alem disso tem uma grande capacidade de manipular elementos de uma página com pouco código.<br />
Exemplos:<br />
Deixar um elemento invisível:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#id_do_meu_elemento&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Manipular o css de um elemento:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#id_do_meu_elemento&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;background-color&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;Blue&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Manipular o conteúdo de um elemento:</p>
<pre class="javascript">  $(p).append("inserindo esse conteúdo em todos os parágrafos");</pre>
<p><em>A lista e exemplos que poderia exibir aqui é enorme, mas esse não é o foco no momento <img src='http://www.sagadoprogramador.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </em></p>
<p><em><span id="more-139"></span></em></p>
<p><strong>3)</strong> Possibilita uma grande reutilização de código através de plugins.<br />
Exemplo: podemos criar um código para validar campos numéricos, uma função chamada <em>&#8220;validaNumeros()&#8221;</em>.<br />
Agora vamos supor que você possua um formulário com 8 campos do tipo numérico, ao invés de você replicar esse código no evento <em>&#8220;onkeypress&#8221;</em> de cada input do seu formulário, você pode transformar esse função em um plugin e no carregar da página, você simplesmente escreve o seguinte código:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.campo_numerico&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">validaNumeros</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #006600; font-style: italic;">//.campo_numerico seria a classe css atribuída aos inputs.</span></pre></div></div>

<p><strong>4)</strong>Atualmente existem uma quantidade enorme de plugins, disponíveis na internet que nos facilita em N tipos de tarefas e que economizam nosso tempo de escrever linhas e linhas de código javascript, muita das vezes para simplesmente fazer uma validação de formulário <img src='http://www.sagadoprogramador.com.br/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<p><strong>5)</strong> jQuery tem um ótimo suporte a Ajax.<br />
Exemplos:<br />
Carregar o conteudo de uma url em um determinado div.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#id_do_meu_div&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;pagina_que_eu_quero_carregar.html&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Pegar um determinando valor via ajax e atribuir esse valor para um campo:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  $.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;retornavalor.php&quot;</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>valor<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#id_do_meu_imput&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>valor<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><strong><em>Também temos suporte a JSON</em></strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">  $.<span style="color: #660066;">getJSON</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;retornavalor.php&quot;</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>objeto<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;#id_do_meu_imput&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span>objeto.<span style="color: #660066;">valor</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Nesse post, eu listei cinco motivos, mas tenho certeza que quando você começar a utilizar <a href="http://jquery.com/">jQuery</a>, nos seus projetos, você vai encontrar muito mais!</p>
<p>Pretendo escrever mais artigos, detalhando determinadas funcionalidades do <a href="http://jquery.com/">jQuery </a>, mas atualmente já existe bastante conteúdo disponivel sobre o assunto, no próprio site oficial temos uma documentação bem legal com bastante exemplos: <a href="http://docs.jquery.com">http://docs.jquery.com</a>.</p>
<p>Até a próxima!</p>
<p>Iuri Menescal</p>
]]></content:encoded>
			<wfw:commentRss>http://www.sagadoprogramador.com.br/2009/07/5-bons-motivos-para-usar-jquery/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

