•  
     

Seleções Flexíveis - jQuery

Qualquer coisa que você pode selecionar com CSS, você pode modificar com jQuery. Por exemplo, podemos aplicar uma ação fadeTo() para um seletor p desta forma:

Código: Selecionar todos

$('p').fadeTo('slow', 0);

Podemos aplicar uma ação fadeTo() para um seletor li desta forma:

Código: Selecionar todos

$('li').fadeTo('slow', 0);

Podemos aplicar uma ação fadeTo() tanto para seletores p quanto para seletores li desta forma:

Código: Selecionar todos

$('p, li').fadeTo('slow', 0);

Isso é chamado de seletor composto.

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class='red'></div>
<div></div>
<div class='pink'></div>
<div></div> 
</body>
</html>


CSS

Código: Selecionar todos

div {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    background-color: #FF9C5B;
    display: inline-block;
}

.red {
    background-color: #E84A5F;
}

.pink {
    background-color: #FF847C;
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$(".pink,.red").fadeTo('slow',0);   
});



Demo: http://jsfiddle.net/j7y50f4n/8/