En este artículo, aprenderemos a obtener el elemento seleccionado por su nombre en jQuery. Un elemento puede ser seleccionado por el atributo de nombre usando 2 métodos:
- Usando el método de selección de nombres
- Al usar JavaScript para obtener el elemento por nombre y pasarlo a jQuery
Entenderemos ambos métodos con la ayuda de ejemplos.
Método 1: usar el método de selección de nombres
El selector de atributo de nombre se puede utilizar para seleccionar un elemento por su nombre. Este selector selecciona elementos que tienen el valor exactamente igual al valor especificado.
Sintaxis:
[name="nameOfElement"]
Ejemplo: Este ejemplo ilustra el uso del método selector de nombres para seleccionar el elemento específico.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to select an element by name with jQuery?
</title>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to select an element by name with jQuery?</b>
<p>
The textbox below has the <b>name attribute 'address'.</b>
<form>
<textarea rows="4" cols="40" name="address"></textarea>
</form>
</p>
<p>
The textbox below has the
<b>name attribute 'area'.</b>
<form>
<input type="text" name="area">
</form>
</p>
<p>Click on the button to hide the input with
the name 'area'</p>
<button onclick="selectByName()">
Click to hide the area input
</button>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
function selectByName() {
element = $('[name="area"]');
//hide the element
element.hide();
}
</script>
</center>
</body>
</html>
Producción:
método selector de nombre
Método 2: usar JavaScript para obtener el elemento por nombre y pasarlo a jQuery
El método getElementsByName() de JavaScript se puede usar para seleccionar el elemento requerido y esto se puede pasar a una función jQuery para usarlo más como un objeto jQuery.
Sintaxis:
selector = document.getElementsByName('nameOfElement');
element = $(selector);
Ejemplo: Este ejemplo ilustra el uso del método getElementsByName() para obtener la colección de todos los elementos de un documento en particular por nombre
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to select an element by name with jQuery?
</title>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to select an element by name with jQuery?</b>
<p>
The textbox below has the
<b>name attribute 'address'.</b>
<form>
<textarea rows="4" cols="40" name="address"></textarea>
</form>
</p>
<p>
The textbox below has the
<b>name attribute 'area'.</b>
<form>
<input type="text" name="area">
</form>
</p>
<p>
Click on the button to hide the
input with the name 'address'
</p>
<button onclick="selectByName()">
Click to hide the address input
</button>
<script src=
"https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
function selectByName() {
selector = document.getElementsByName('address');
element = $(selector);
// hide the element
element.hide();
}
</script>
</center>
</body>
</html>
Producción:
Obtener el elemento por su nombre
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» . Consulte el artículo Tutorial de jQuery y Ejemplos de jQuery para obtener más detalles.
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA