attr能改onclick
时间: 2024-05-04 19:20:55 浏览: 8
是的,可以使用JavaScript来更改onclick属性。您可以选择使用原生JavaScript或者jQuery库来更改onclick属性。以下是一个使用原生JavaScript更改onclick属性的示例:
```html
<button id="myButton" onclick="alert('Hello world!')">Click me</button>
<script>
document.getElementById("myButton").onclick = function() {
alert("Button clicked!");
};
</script>
```
在这个例子中,我们使用`document.getElementById()`方法获取了id为“myButton”的按钮元素,并将其onclick属性更改为一个新的函数。当用户单击按钮时,将弹出一个警报框,显示“Button clicked!”。
相关问题
javaweb增删改查
JavaWeb 中的增删改查通常是指对数据库中的数据进行操作。下面是一个简单的示例:
1. 增加数据
```java
public class AddDataServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取表单数据
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
String gender = request.getParameter("gender");
// 将数据插入数据库
Connection conn = null;
PreparedStatement pstmt = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password");
String sql = "insert into student(name, age, gender) values(?, ?, ?)";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, name);
pstmt.setInt(2, age);
pstmt.setString(3, gender);
pstmt.executeUpdate();
// 返回成功信息
response.getWriter().write("添加成功!");
} catch (Exception e) {
e.printStackTrace();
response.getWriter().write("添加失败!");
} finally {
try {
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
```
2. 查询数据
```java
public class QueryDataServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 查询数据库中的数据
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password");
String sql = "select * from student";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
// 将查询结果转换成 JSON 格式并返回
JSONArray jsonArray = new JSONArray();
while (rs.next()) {
JSONObject obj = new JSONObject();
obj.put("id", rs.getInt("id"));
obj.put("name", rs.getString("name"));
obj.put("age", rs.getInt("age"));
obj.put("gender", rs.getString("gender"));
jsonArray.add(obj);
}
response.getWriter().write(jsonArray.toJSONString());
} catch (Exception e) {
e.printStackTrace();
response.getWriter().write("查询失败!");
} finally {
try {
if (rs != null) rs.close();
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
```
3. 修改数据
```java
public class UpdateDataServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取表单数据
int id = Integer.parseInt(request.getParameter("id"));
String name = request.getParameter("name");
int age = Integer.parseInt(request.getParameter("age"));
String gender = request.getParameter("gender");
// 更新数据库中的数据
Connection conn = null;
PreparedStatement pstmt = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password");
String sql = "update student set name=?, age=?, gender=? where id=?";
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, name);
pstmt.setInt(2, age);
pstmt.setString(3, gender);
pstmt.setInt(4, id);
pstmt.executeUpdate();
// 返回成功信息
response.getWriter().write("更新成功!");
} catch (Exception e) {
e.printStackTrace();
response.getWriter().write("更新失败!");
} finally {
try {
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
```
4. 删除数据
```java
public class DeleteDataServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 获取表单数据
int id = Integer.parseInt(request.getParameter("id"));
// 删除数据库中的数据
Connection conn = null;
PreparedStatement pstmt = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "password");
String sql = "delete from student where id=?";
pstmt = conn.prepareStatement(sql);
pstmt.setInt(1, id);
pstmt.executeUpdate();
// 返回成功信息
response.getWriter().write("删除成功!");
} catch (Exception e) {
e.printStackTrace();
response.getWriter().write("删除失败!");
} finally {
try {
if (pstmt != null) pstmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
```
这些 Servlet 可以通过前端页面的表单进行操作,例如:
```html
<form action="AddDataServlet" method="post">
<input type="text" name="name" placeholder="姓名">
<input type="number" name="age" placeholder="年龄">
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<input type="submit" value="添加">
</form>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody id="data">
</tbody>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// 查询数据
$.get("QueryDataServlet", function(data) {
var jsonArray = JSON.parse(data);
for (var i = 0; i < jsonArray.length; i++) {
var obj = jsonArray[i];
$("#data").append("<tr><td>" + obj.id + "</td><td>" + obj.name + "</td><td>" + obj.age + "</td><td>" + obj.gender + "</td><td><button onclick='updateData(" + obj.id + ")'>修改</button><button onclick='deleteData(" + obj.id + ")'>删除</button></td></tr>");
}
});
// 添加数据
$("form").submit(function(event) {
event.preventDefault();
var form = $(this);
$.post(form.attr("action"), form.serialize(), function(response) {
alert(response);
location.reload();
});
});
});
// 修改数据
function updateData(id) {
var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var gender = prompt("请输入性别(男/女):");
$.post("UpdateDataServlet", {id: id, name: name, age: age, gender: gender}, function(response) {
alert(response);
location.reload();
});
}
// 删除数据
function deleteData(id) {
if (confirm("确定要删除吗?")) {
$.post("DeleteDataServlet", {id: id}, function(response) {
alert(response);
location.reload();
});
}
}
</script>
```
写一段代码 实现点击按钮将原来黑边框黒文字的按钮改为粉色边框和粉色文字要使用到attr()方法
使用`attr()`方法无法直接更改按钮的边框颜色和文字颜色。`attr()`方法主要用于获取或设置HTML元素的属性值,而不是用于修改CSS样式。
要通过`attr()`方法实现您的需求,您可以借助CSS类来实现。以下是一个示例代码:
HTML:
```html
<button id="myButton" onclick="changeButtonStyle()">点击我</button>
```
CSS:
```css
.pink-button {
border: 2px solid pink;
color: pink;
}
```
JavaScript:
```javascript
function changeButtonStyle() {
var button = $("#myButton");
button.addClass("pink-button");
}
```
在这个示例中,当点击按钮时,`changeButtonStyle()`函数会被调用。函数使用`addClass()`方法为按钮添加名为`"pink-button"`的CSS类。CSS类`.pink-button`定义了粉色边框和文字样式。
请确保在HTML文件中引入jQuery库,以便使用`$()`来选择元素。您可以将以上代码复制到您的HTML文件中,并在点击按钮时触发`changeButtonStyle()`函数,以实现将按钮样式修改为粉色边框和文字的效果。