Manual jQuery-Selectores de atributos
lunes, 13 de diciembre de 2010
, Posted by edukt at 15:21
Los selectores de atributos, son un subgrupo particularmente útil de los selectores CSS. Ellos nos permiten especificar un elemento de las propiedades HTML, como atributos de título de un vínculo o un atributo alt de una imagen. Por ejemplo, para seleccionar todas las imágenes que tienen un atributo "alt", escribimos lo siguiente:
$('img[alt]')
Los selectores de atributos aceptar una sintaxis de comodín inspirada en las expresiones regulares para identificar el valor al principio (^) o final ($) de una cadena.
Ellos también pueden tener un asterisco (*) para indicar el valor en una posición arbitraria dentro de una cadena o un signo de exclamación para indicar un valor negado.
Volviendo al ejemplo anterior queremos tener diferentes estilos para cada enlace pare ello cambiamos un poco el body:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenido a esta Web</title>
<!--Hoja de estilo-->
<link href="estilo.css" rel="stylesheet" type="text/css" />
<!--Referencia a libreria jQuery-->
<script language="javascript" src="jquery.js" type="text/javascript"></script>
<script language="javascript" src="ejemplo.js" type="text/javascript"></script>
</head>
<body>
<ul id="item-seleccionado">
<li>Manuales
<ul>
<li><a href="manual.pdf">Introducción a jQuery</a></li>
<li><a href="manual2.pdf">Efectos en jQuery</a></li>
</ul>
</li>
<li>Sitios
<ul>
<li><a href="http//jquery.com">Sitio Oficial jQuery</a></li>
<li><a href="mailto:edukt2011@gmail.com">Blog sobre jQuery</a></li>
</ul>
</li>
</ul>
</body>
</html>
Lo primero es definir los estilos en la hoja de estilo. Creamos un estilo para los enlaces y uno para los que tengan pdf,link y mailto.
@charset "utf-8";
/* CSS Document */
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
.sub-nivel {
background-color:#CCCCCC;
}
a {
color: #00c;
}
a.mailto {
background: url(images/mail.png) no-repeat right top;
padding-right: 18px;
}
a.pdflink {
background: url(images/pdf.png) no-repeat right top;
padding-right: 18px;
}
a.bloglink {
background-color: #fff;
padding: 2px;
border: 1px solid #000;
}
Luego escribimos el código jQuery que permitirá buscar explesiones en una cadena.Para agregar una clase para todos los enlaces de correo electrónico, se construye un selector que busca todos los elementos de anclaje (a) con un atributo href ([title) que comienza con mailto: (^ = mailto:]), de la siguiente manera:
$(document).ready(function() {
$('a[href^=mailto:]').addClass('mailto');
});
Para agregar una clase para todos los enlaces a los archivos PDF, se utiliza el signo de dólar en lugar del símbolo de intercalación. Esto se debe a que estamos seleccionando los enlaces con un atributo href que termina con pdf.:
$(document).ready(function() {
$('a[href$=.pdf]').addClass('pdflink');
});
Los selectores de atributos se pueden combinar también. Podemos, por ejemplo, añadir unbloglink clase para todos los enlaces con un valor de href que tanto empieza por httpy contiene blog en cualquier lugar:
$(document).ready(function() {
$('a[href^=http][href*=blog]').addClass('bloglink');
});
El archivo ejemplo.js queda de la siguiente manera:
$(document).ready(function() {
$('#item-seleccionado > li').addClass('horizontal');
$('#item-seleccionado li:not(.horizontal)').addClass('sub-nivel');
});
$(document).ready(function() {
$('a[href^=mailto:]').addClass('mailto');
$('a[href$=.pdf]').addClass('pdflink');
$('a[href^=http][href*=blog]').addClass('bloglink');
});
Currently have 0 comentarios: