Los métodos jQuery se utilizan para cambiar la ID del elemento que se describen a continuación:
- Método jQuery attr(): Este método establece/devuelve atributos y valores de los elementos seleccionados. Si este método se usa para devolver el valor del atributo, devuelve el valor del primer elemento seleccionado. Si este método se utiliza para establecer valores de atributo, establece uno o más pares de atributo/valor para el conjunto de elementos seleccionados.
Sintaxis:
- Devolver el valor de un atributo:
$(selector).attr(attribute)
- Establezca el atributo y el valor:
$(selector).attr(attribute, value)
- Establecer atributo y valor mediante el uso de una función:
$(selector).attr(attribute, function(index, currentvalue))
- Establezca múltiples atributos y valores:
$(selector).attr({attribute:value, attribute:value, ...})
Parámetros:
- atributo: este parámetro especifica el nombre del atributo.
- value: este parámetro especifica el valor del atributo.
- función (índice, valor actual): este parámetro especifica una función que devuelve el valor del atributo para establecer.
- índice: este parámetro recibe la posición de índice del elemento en el conjunto.
- currentValue: este parámetro recibe el valor del atributo actual de los elementos seleccionados.
- Devolver el valor de un atributo:
- Método jQuery prop(): este método establece/devuelve propiedades y valores de los elementos coincidentes. Si este método se usa para devolver el valor de la propiedad, devuelve el valor del primer elemento seleccionado. Si este método se usa para establecer valores de propiedad, establece uno o más pares de propiedad/valor para el conjunto de elementos seleccionados.
Sintaxis:
- Devolver el valor de una propiedad:
$(selector).prop(property)
- Establezca la propiedad y el valor:
$(selector).prop(property, value)
- Establecer propiedad y valor usando una función:
$(selector).prop(property, function(index, currentvalue))
- Establecer múltiples propiedades y valores:
$(selector).prop({property:value, property:value, ...})
Parámetros:
- propiedad: este parámetro especifica el nombre de la propiedad.
- value: este parámetro especifica el valor de la propiedad.
- función (índice, valor actual): este parámetro especifica una función que devuelve el valor de propiedad para establecer.
- índice: este parámetro recibe la posición de índice del elemento en el conjunto.
- currentValue: este parámetro recibe el valor de propiedad actual de los elementos seleccionados.
- Devolver el valor de una propiedad:
Ejemplo 1: este ejemplo cambia la ID del elemento y cambia el color de fondo a rojo usando el método attr() .
<!DOCTYPE HTML>
<html>
<head>
<title>
Change the element ID
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
#myCol {
background: green;
}
#newID {
background: red;
}
table {
color: white;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<table>
<colgroup>
<col id= "myCol"
span= "3">
<col style= "background-color:green">
</colgroup>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr id = "row1">
<td>G_1</td>
<td>GFG</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
</table>
<br>
<button onclick = "Geeks()">
Click here
</button>
<script>
function Geeks() {
$("col").attr('id', 'newID');
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: este ejemplo cambia la ID del elemento y cambia el color de fondo a rojo usando el método prop() .
<!DOCTYPE HTML>
<html>
<head>
<title>
Change the element ID
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<style>
#myCol {
background: green;
}
#newID {
background: red;
}
table {
color: white;
}
td {
padding: 10px;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<table>
<colgroup>
<col id= "myCol"
span= "3">
<col style= "background-color:green">
</colgroup>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr id = "row1">
<td>G_1</td>
<td>GFG</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
</table>
<br>
<button onclick = "Geeks()">
Click here
</button>
<script>
function Geeks() {
$("col").prop('id', 'newID');
}
</script>
</center>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA