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

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

Hide e Show

Vai mostrar(show) ou esconder(hide) um elemento.

Exemplo:

$('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
		}

	});
});

Pegando o valor de um input

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

Exemplo:

$('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
	});	
});

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:

$('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
	});
});

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:

<ul>
<li>Item 1<li>
<li>Item 2<li>
<li>Item 3<li>
</ul>

$("li").css("color", "red");
$("p").css("background-color","yellow");

Mudando mais de um atributo