jQuery UI Slider value() 方法(1)

📌 相关文章

📜 jQuery UI Slider value() 方法(1)

📅 最后修改于: 2023-12-03 14:43:12.258000 🧑 作者: Mango

jQuery UI Slider value() 方法

jQuery UI Slider 是一个基于 jQuery UI 的控件，可以将一个普通的文本输入框转换成一个滑动条来选择一个数值范围。value() 方法是 jQuery UI Slider 中的一个方法，用于获取或设置滑动条的当前值。

语法

获取当前值：$(selector).slider("value")

设置当前值：$(selector).slider("value", value)

参数

selector：必需，用于指定要操作的 jQuery UI Slider 元素的选择器。
value：可选，要设置的新值，必须是整数或浮点数。

返回值

如果没有指定 value 参数，则 $(selector).slider("value") 返回当前滑动条的值（整数或浮点数）。

如果指定了 value 参数，则 $(selector).slider("value", value) 返回 jQuery 对象，以支持链式调用。

示例

以下示例演示了如何使用 value() 方法获取和设置 jQuery UI Slider 的值：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider value() 方法示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      // 初始化滑动条
      $("#slider").slider({
        min: 0,
        max: 100,
        value: 50,
        // 滑动时更新文本框的值
        slide: function(event, ui) {
          $("#amount").val(ui.value);
        }
      });

      // 获取当前值
      var currentValue = $("#slider").slider("value");
      console.log(currentValue); // 输出：50

      // 设置新值
      $("#slider").slider("value", 75);

      // 再次获取当前值
      var newValue = $("#slider").slider("value");
      console.log(newValue); // 输出：75
    });
  </script>
</head>
<body>
  <p>
    <label for="amount">当前值:</label>
    <input type="text" id="amount">
  </p>
  <div id="slider"></div>
</body>
</html>

在这里，我们创建了一个具有默认值50的滑动条。滑动时，我们更新文本框的值。我们使用 $(selector).slider("value") 获取当前值，使用 $(selector).slider("value", value) 设置新值。

在控制台中，我们可以看到 currentValue 的当前值为50，newValue 的新值为75。

结论

value() 方法是 jQuery UI Slider 中用于获取和设置滑动条值的方法。使用该方法来获取滑动条的当前值，或者设置一个新值。