Using attributes

En el capítulo anterior vimos cómo podríamos encontrar elementos en una página mediante su clase o ID. Estas 2 propiedades están relacionadas por el hecho que puedes usarlos para dar estilos a los elementos con CSS, pero con jQuery, puedes encontrar elementos basados en cualquier tipo de atributos. Esto viene con un montón de tipos de selector de atributos y en este artículo veremos algunos de ellos.

Find elements with a specific attribute

La tarea más básica cuando seleccionamos elementos basados en atributos es encontrar los elementos los cuales tienen un atributo específico. Observa que el siguiente ejemplo no requiere que el atributo tenga un valor específico, de hecho, este ni siquiera requiere tener un valor. La sintaxis para este selector es un set de corchetes con el nombre del atributo deseado dentro de estos, por ejemplo [nombre] o [href]. Aquí hay un ejemplo:

<span title="Title 1">Test 1</span><br />
<span>Test 2</span><br />
<span title="Title 3">Test 3</span><br />

<script type="text/javascript">
$(function()
{
	$("[title]").css("text-decoration", "underline");
});
</script>

We use the attribute selector to find all elements on the page which has a title attribute and then underline it. As mentioned, this will match elements with a title element no matter what their value is, but sometimes you will want to find elements with a specific attribute which has a specific value.

Find elements with a specific value for a specific attribute

Aquí hay un ejemplo donde encontraremos elementos con un valor específico:

<a href="http://www.google.com" target="_blank">Link 1</a><br />
<a href="http://www.google.com" target="_self">Link 2</a><br />
<a href="http://www.google.com" target="_blank">Link 3</a><br />

<script type="text/javascript">
$(function()
{
	$("a[target='_blank']").append(" [new window]");
});
</script>

The selector simply tells jQuery to find all links (the a elements) which has a target attribute that equals the string value "_blank" and then append the text "[new window]" to them. But what if you're looking for all elements which don't have the value? Inverting the selector is very easy:

$("a[target!='_blank']").append(" [same window]");

The difference is the != instead of =, a common way of negating an operator within many programming languages.

And there's even more possibilities:

Find elements with a value which starts with a specific string using the ^= operator:

$("input[name^='txt']").css("color", "blue");

Find elements with a value which ends with a specific string using the $= operator:

$("input[name$='letter']").css("color", "red");

Find elements with a value which contains a specific word:

$("input[name*='txt']").css("color", "blue");