jQuery |切换()方法(1)

📌 相关文章

📜 jQuery |切换()方法(1)

📅 最后修改于: 2023-12-03 15:02:14.165000 🧑 作者: Mango

切换()方法

jQuery 的 切换() 方法提供了一种简化 show() 和 hide() 方法的方式。它可以在元素的显示状态之间切换。

语法

$(selector).toggle(speed, easing, callback)

speed：可选参数，规定动画的速度。可以设置为 slow, fast, 或毫秒数值。
easing：可选参数，规定动画的缓动效果。默认是 "swing"。
callback：可选参数，是 toggle() 方法执行完毕后要执行的函数名称。

示例

基本示例

以下代码演示了如何使用 切换() 方法在元素的显示状态之间切换：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    div {
      background-color: coral;
      color: white;
      font-size: 30px;
      text-align: center;
      padding: 50px;
    }
  </style>
</head>
<body>

<button id="btn">切换</button>
<br><br>
<div id="box">Hello World!</div>

<script>
  $(document).ready(function(){
    $("#btn").click(function(){
      $("#box").toggle();
    });
  });
</script>

</body>
</html>

代码解释：

点击按钮可以在文本与文本框之间进行切换。
$("#box").toggle(); 意味着将元素的显示状态之间切换。

高级示例

以下代码演示了如何使用 切换() 方法来处理前端验证：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    input[type=text], select {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    input[type=submit] {
      width: 100%;
      background-color: coral;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    input[type=submit]:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>

<h2>登录表单</h2>

<form id="loginForm" action="/submitform">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username" required>

  <label for="password">密码</label>
  <input type="text" id="password" name="password" required>

  <input type="submit" value="登录">
</form>

<script>
  $(document).ready(function(){
    $("#loginForm input[type=submit]").click(function(e){
      e.preventDefault();
      if ($("#username").val() == "" || $("#password").val() == "") {
        $("#loginFail").toggle();
      } else {
        $("#loginForm").submit();
      }
    });
  });
</script>

<div id="loginFail" style="display:none;">
  用户名和密码不能为空！
</div>

</body>
</html>

代码解释：

点击登录按钮时，会验证用户名和密码输入是否为空，并相应地显示或隐藏错误消息。
if ($("#username").val() == "" || $("#password").val() == "") 根据用户名和密码输入是否为空来判断是否显示错误消息。
$("#loginFail").toggle(); 意味着将错误消息的显示状态之间切换。