3.8 Funções de busca

</script>

</head>

<body>

<button id="start">Começar!</button><br> <img id="foto" src="../imagens/carro.png"/>

</body>

</html>

 

3.8 Funções de busca

 

Função each()

A função each permite navegar através de cada um dos elementos do DOM, verificando ou alterando suas propriedades de modo individual se assim necessário. Considere o código a seguir, que permite ao usuário digitar um nome, e à medida que as teclas são digitadas, a função each é chamada para percorrer todas as <li>s verificando se o conteúdo da <li> possui o texto informado pelo usuário:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Função Each</title>

<style>

.off{background-color:#CCC;}

.on{background-color:red;}

li{

border-radius:4px; padding: 8px;

background-color:navy;

color:white;display:inline;

}

ul{list-style: none;}

input.busca{

margin-left: 40px;width: 350px;

height: 25px;font-size: 16px;

padding: 4px;

}

</style>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#filtro").keyup(function(){

var termo = $('#filtro').val().toLowerCase();

$('ul.nomes li').each(function(index){

$(this).addClass('off');

$(this).removeClass('on');

var li_texto = $(this).text().toLowerCase(); if(li_texto.search(termo) != -1

&& termo.length>1){

$(this).removeClass('off');

$(this).addClass('on');

}

});

});

});

</script>

</head>

<body>

<input type="text" id="filtro" class="busca"/> <ul class="nomes">

<li>Adriana</li>

<li>Alice</li>

<li>Fabiana</li>

<li>Fabiano</li>

<li>Fernando</li>

<li>Fabrício</li>

<li>Marcos</li>

<li>Maria</li>

<li>Marta</li>

</ul>

</body>

</html>

 

O seletor :contains()

Este seletor permite selecionar elementos que contenham uma determinada palavra ou texto. No exemplo a seguir, o seletor procura por todos os parágrafos que contenham a string "library" e logo em seguida aplica no texto a cor vermelha. Neste caso, apenas o primeiro parágrafo será selecionado.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("p:contains('library')").css("color","red");

});

</script>

</head>

<body>

<p>

One important thing to know is that jQuery is just a JavaScript

library. All the power of jQuery is accessed via JavaScript, so having

a strong grasp of

JavaScript is essential for understanding, structuring, and

debugging your code. 

</p>

<p>

While working with jQuery regularly can, over time, improve your

proficiency with JavaScript, it can be hard to get started writing

jQuery without a working knowledge of JavaScript's built-in

constructs and syntax.

</p>

</body>

</html>

 

Encadeamento de funções

O jQuery permite que sejam chamadas funções de objetos de modo encadeado, isto é, cada chamada de função opera sobre o resultado retornado pela função anterior. Para exemplificar essa característica, vejamos o código a seguir:

$(document).ready(function(){

var nav = $("nav.main");

var lista = nav.children("ul");

lista.css("color","red")

lista.children(":first").css("background-color","yellow");

});

O código acima obtém a referência a uma lista contida dentro do elemento nav e modifica seu CSS para deixar o texto na cor vermelha. Logo em seguida, obtém o primeiro elemento filho e aplica a cor amarelo como cor de fundo. Este mesmo código poderia ser reescrito numa única declaração usando chamada encadeada de funções:

$("nav.main").children("ul").css("color","red").children(":first").css("background-

color","yellow");

 

Função data

Com o uso dos atributos data-* do HTML5 podemos adicionar dados e informações aos elementos. Para acessar estes dados, o jQuery oferece a função data() . Considere o exemplo a seguir:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Função Data</title>

<script src="jquery.js"></script>