在 jQuery 中可以使用一些内置方法来更改元素 id, 下面本篇文章就来给大家介绍一下使用 jQuery 更改元素 id 的方法, 希望对大家有所帮助.
方法 1:jQuery attr() 方法
attr() 方法设置 / 返回选定元素的属性和值. 如果此方法用于返回属性值, 则返回第一个选定元素的值. 如果此方法用于设置属性值, 则为所选元素集设置一个或多个属性 / 值对.
示例: 使用 attr() 方法更改元素的 ID
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- #myCol { background: green; } #newID { background: palevioletred; } table
- { color: white; } td { padding: 10px; }
- </style>
- </head>
- <body>
- <center>
- <table>
- <colgroup>
- <col id="myCol" span="3">
- <col style="background-color:green">
- </colgroup>
- <tr>
- <th>
- S.No
- </th>
- <th>
- Title
- </th>
- <th>
- id
- </th>
- </tr>
- <tr id="row1">
- <td>
- No.1
- </td>
- <td>
- Hello
- </td>
- <th>
- id_1
- </th>
- </tr>
- <tr>
- <td>
- No.2
- </td>
- <td>
- Hi
- </td>
- <th>
- id_2
- </th>
- </tr>
- </table>
- <br>
- <button onclick="Geeks()">
- 单击
- </button>
- </center>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- function Geeks() {
- $("col").attr('id', 'newID');
- }
- </script>
- </body>
- </HTML>
效果图:
方法 2:jQuery prop() 方法
prop() 方法设置 / 返回匹配元素的属性和值. 如果此方法用于返回属性值, 则返回第一个选定元素的值. 如果此方法用于设置属性值, 则它为所选元素集设置一个或多个属性 / 值对.
示例: 使用 prop() 方法更改元素的 ID
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- #myCol { background: lightcoral; } #newID { background: palevioletred;
- } table { color: white; } td { padding: 10px; }
- </style>
- </head>
- <body>
- <center>
- <table>
- <colgroup>
- <col id="myCol" span="3">
- <col style="background-color:lightcoral">
- </colgroup>
- <tr>
- <th>
- S.No
- </th>
- <th>
- Title
- </th>
- <th>
- id
- </th>
- </tr>
- <tr id="row1">
- <td>
- No.1
- </td>
- <td>
- Hello
- </td>
- <th>
- id_1
- </th>
- </tr>
- <tr>
- <td>
- No.2
- </td>
- <td>
- Hi
- </td>
- <th>
- id_2
- </th>
- </tr>
- </table>
- <br>
- <button onclick="Geeks()">
- 单击
- </button>
- </center>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- function Geeks() {
- $("col").prop('id', 'newID');
- }
- </script>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/jquery/10417.html