Exibir código-fonte para JQuery

jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML.1 Ela foi lançada em janeiro de 2006 no BarCamp de Nova York por John Resig. Usada por cerca de 55% dos 10 mil sites mais visitados do mundo, jQuery é a mais popular das bibliotecas JavaScript.2 3

jQuery é uma biblioteca de código aberto e possui licença dual, fazendo uso da Licença MIT ou da GNU General Public License versão 2.4 A sintaxe do jQuery    foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX. A biblioteca também oferece a possibilidade de criação de plugins sobre ela. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstração para interações de mais baixo nível, simplificando o desenvolvimento de aplicações web dinâmicas de grande complexidade.

==Usando JQuery==

===Exemplo Basico===

<code> $(document).ready(function(){alert("Olá Mundo JQUERY!");}); </code>

{{#ev:youtube|dQVLctAytQ0}}


===Hide e Show===
Vai mostrar(show) ou esconder(hide) um elemento.

=====Exemplo:=====
<pre>
$('document').ready(function(){
	$('#clickme').bind("click", function(){
		if($("#clickme").is(":checked")){ //se o checkbox estiver marcado
			$("#super").hide(); //ele esconde o elemento com o id #super						
		}else{ //se não estiver marcado
			$("#super").show(); //ele mostra o elemento com o id #super
		}

	});
});
</pre>

===Pegando o valor de um input===
Permite que você use o valor que há em um elemento nele mesmo, ou em outras tags.

=====Exemplo:=====
<pre>
$('document').ready(function(){
	$("#largura").bind("change", function(){
	var largura = ($("#largura").val());//pega o valor do elemento que mostra as larguras que podem ser dadas à um elemento
	$("#praia").width(largura);//dá a largura escolhida ao elemento com o id #praia
	});	
});
</pre>

===Mudando atributo e a classe===
*Attr - permite a mudança de algum atributo da tag.
*toggleClass - permite a mudança do nome de uma classe, mudando assim, seus atributos.

=====Exemplo:=====
<pre>
$('document').ready(function(){
	$("#luz").bind("dblclick",function(){
		if($("#luz").attr("src")=="on.png"){
			$("#luz").attr("src","off.png"); //muda o atributo src da tag img com o id #luz
		}else{
			$("#luz").attr("src","on.png");
		}
		$("html").toggleClass("apaga"); //muda a classe para a de nome .apaga
	});
});
</pre>


===Mudando o CSS===

O objeto do JQuery usado pra isso é o .css(); e funciona da seguinte forma .css(“propriedade”, “atributo”); ex: .css(“color”, red);.
Darei um exemplo de uso:

<pre>
<ul>
<li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
</ul>
</pre>
<pre>
$("li").css("color", "red");
$("p").css("background-color","yellow");
</pre>

Mudando mais de um atributo

==Funções do JQuery==
===Append===

É uma função que cria um html para ser adicionado ao código, quantas vezes seja necessário, a partir da interação com um elemento já existente.

<pre>
$('document').ready(function(){
    $("#add").click(function(){ //ao clicar no elemento de id #add
        $("#item").append("<br>Item Compra: <input type='text'>"); //ele adiciona no elemento de id #item o html colocado entre parênteses
    });

});
</pre>

===Before===

É uma função que cria um html para ser adicionado ao código anterior ao desejado, quantas vezes seja necessário, a partir da interação com um elemento já existente.

<pre>
$('document').ready(function(){
    $("#addEndereco").click(function(){ // evento: clique no elemento de id #addEndereco
        $("#addEndereco").before("<br>Endereço: <input type='text' id='endereco'><br>"); //será adicionado antes do elemento de id #addEndereco o código apresentado entre parênteses  
    });
});
</pre>

===After===
É uma função que cria um html para ser adicionado ao código Posterior ao desejado, quantas vezes seja necessário, a partir da interação com um elemento já existente.

<pre>
$( ".container" ).after( $( "h2" ) );
</pre>

Resultado:

<pre>
<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
</div>
<h2>Funcionou!</h2>
</pre>

===Wrap===

Coloca determinado elemento em torno do elemento referenciado.

<pre>
$("button").click(function(){
  $("p").wrap("<div></div>");
});
</pre>

===Animate===
Torna um elemento animado a partir de uma interação com ele.

Exemplo:
<pre>
$('document').ready(function(){
	function aumentar(){
		$(this).animate({'font-size': "250px"}, 500); //aumenta o tamanho da fonte
	}
	function diminuir(){
		$(this).animate({'font-size': "30px"}, 500); //diminui o tamanho da fonte
	}
	$('#titulo font').bind('mouseover', aumentar); //coloca em ação a função aumentar()
	$('#titulo font').bind('mouseout', diminuir); //coloca em ação a função diminuir()	
});
</pre>

===Children===
Pega um elemento dentro de outro elemento. É como se o elemento maior (ou seja, o elemento que não está envolvido por nenhum outro) fosse o pai e os que  estão dentro dele são os filhos. Essa função pega o elemento "filho" que pertence a uma tag.

Exemplo:
<pre>
$('document').ready(function(){
   $("#pai").click(function(){ //aqui mostra tag pai
      $(this).children().css({"border":"2px solid #58ACFA","color":"#0174DF"}); //e aqui ele atribui um estilo ao filho da tag apontada quando foi aberta a função
   });
});
</pre>