Curso de jQuery – Parte 01 – Conhecendo o jQuery

19 fevereiro, 2009 (18:31) | Sem categoria | Por: admin

Abaixo, os exemplos mostrados na primeira aula sobre jQuery.

Exemplo de JavaScript intrusivo:


<a onclick="executeAlgumaCoisa()" href="#">Clique aqui</a>

Exemplo de JavaScript não-intrusivo:


<a href="pagina.html" id="meuLink">Clique Aqui</a>


...
// Associe o clique no link com id 'meuLink' à execução da função executeAlgumaCoisa
document.getElementsById("meuLink").onclick = executeAlgumaCoisa;
...
function executeAlgumaCoisa()
{
...
}

Exemplo básico em jQuery:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Exemplo basico jQuery</title>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
         alert("Olá, jQuery!");
    });
    </script>

</head>
<body>

</body>
</html>

Alterando o clique de todos os links:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Exemplo basico jQuery</title>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
	    $("a").click(function() {
		    alert("Olá mundo!");
	    });
    });
    </script>

</head>
<body>
<p>
    <a href="#">Clique aqui</a>
    <a href="#">Aqui também</a>
    <a href="#">E mais aqui!</a>
</p>
</body>
</html>

Após o carregamento do documento, alterar a classe do parágrafo.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Exemplo basico jQuery</title>
    <style type="text/css">
        .destaque { color: Red; }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
	    $("#paragrafo1").addClass("destaque");
    });
    </script>

</head>
<body>
<p id="paragrafo1">Este é o primeiro parágrafo</p>
<p id="paragrafo2">Este é o segundo parágrafo</p>
<p id="paragrafo3">Este é o terceiro parágrafo</p>
</body>
</html>

Selecionando apenas os itens de lista que fazem parte do menu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Exemplo basico jQuery</title>
    <style type="text/css">
        .destaque { color: Red; }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#menu li").click(function() {
            alert("Sou um item de menu");
        });
    });
    </script>

</head>
<body>
<ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<ul>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
</body>
</html>

Adicionar e remover uma classe quando o usuário passa com o mouse sobre o último elemento de uma lista


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Exemplo basico jQuery</title>
    <style type="text/css">
        .destaque1 { color: Red; }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
	    $("#menu li:last").hover(function() {
		    $(this).addClass("destaque1");
	    }, function() {
		    $(this).removeClass("destaque1");
	    });
    });
    </script>

</head>
<body>
<ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<ul>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
</body>
</html>

Alterar o código HTML apenas dos itens ímpares:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Exemplo basico jQuery</title>
    <style type="text/css">
        .destaque1 { color: Red; }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
	    $("#menu li:odd").each( function(i) {
	        $(this).html("*" + $(this).html());
	        $(this).addClass("destaque1");
	    });
    });
    </script>

</head>
<body>
<ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
</body>
</html>

Tags: , ,

Escreva um comentário