Seleccionar por nombre en jQuery

La publicación de hoy enseñará a seleccionar elementos usando los atributos name en jQuery.

Seleccionar por nombre en jQuery

La especificación CSS permite identificar elementos en función de sus atributos. Si bien algunos navegadores antiguos no lo admiten para fines de diseño de documentos, jQuery le permite usarlo independientemente de su navegador.

Cuando utilice cualquiera de los selectores de atributos a continuación, debe tener en cuenta los atributos con valores múltiples separados por espacios porque estos selectores ven los valores de los atributos como una sola cadena.

Las siguientes son las formas de seleccionar el atributo usando la propiedad nombre.

1. Selector de prefijo de atributo [nombre|="valor"]: selecciona elementos en los que el atributo especificado es igual o comienza con una cadena especificada seguida de un guión.
2. Selector de atributos [nombre*="valor"]: selecciona elementos con el atributo especificado con un valor que contiene una subcadena especificada.
3. Selector de palabra de atributo [nombre~="valor"] - Selecciona elementos con el atributo especificado con un valor que contiene una palabra específica, separados por espacios.
4. El atributo termina con el selector [nombre$="valor"]: selecciona elementos con el atributo especificado con un valor que termina exactamente en una cadena específica. La comparación distingue entre mayúsculas y minúsculas.
5. Selector de atributo igual [nombre="valor"]: selecciona elementos con el atributo especificado con un valor exactamente igual a un valor especificado.
6. El atributo comienza con el selector [nombre^="valor"]: selecciona elementos con el atributo especificado con un valor que comienza exactamente con una cadena especificada.

Entendámoslo con el siguiente ejemplo.

<button name="btn-0" value="hello world">Hello World!</button>

console.log($('[name="btn-0"]').val());
console.log($('[name^="btn"]').val());
console.log($('[name$="-0"]').val());
console.log($('[name*="tn-0"]').val());

En el ejemplo anterior, hemos definido un botón con el nombre btn-0 y el valor hola mundo. Podemos seleccionar el botón de 4 formas.

El primero selecciona el botón usando el nombre exacto del botón. El segundo selecciona el botón cuyo nombre empieza por btn.

El tercero selecciona el botón cuyo valor termina en -0. Y el último selecciona el botón cuyo atributo de nombre contiene el tn-0.

Ejecute el fragmento de código anterior en cualquier navegador que admita jQuery; mostrará el siguiente resultado.

Producción :

"hello world"
"hello world"
"hello world"
"hello world"

Manifestación