jquery ready函数、css函数及text()使用示例

下面我来详细讲解一下jQuery的ready函数、css函数和text()方法的使用。

jQuery ready函数

$(document).ready()是jQuery的ready函数，我们可以把需要在DOM完成加载之后执行的代码放在这个函数中。它的用法如下：

$(document).ready(function() {
  // 这里写你的代码
});

等价于：

$(function() {
  // 这里写你的代码
});

两者的效果相同，建议采用缩写的形式。

下面举一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery ready函数示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      alert("DOM已加载完毕！");
    });
  </script>
</head>
<body>
  <p>这是一个示例</p>
</body>
</html>

上述代码会在DOM加载完成后，弹出一个提示框，展示“DOM已加载完毕！”的文本。

css函数

css()函数可以用来设置样式，也可以用来获取样式的值。它的基本用法如下：

// 设置单个样式属性
$(selector).css(propertyName, value);

// 同时设置多个样式属性
$(selector).css({property1: value1, property2: value2, ...});

下面给出一个示例，我们可以通过jQuery来改变元素的样式：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery css函数示例</title>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("p").css("color", "blue");
      $("p").css({
        "background-color": "yellow",
        "font-size": "20px"
      });
    });
  </script>
</head>
<body>
  <p>这是一个示例</p>
</body>
</html>

上述代码中，在DOM加载完成后，我们通过jQuery来改变<p>元素的样式，使其变为蓝色字体、黄色背景，并将字体大小设为20px。

text()方法

text()方法可以用来获取或设置文本内容。如果不传递参数，则表示获取匹配元素的文本内容，如果传递了参数，则表示设置匹配元素的文本内容。它的用法如下：

// 获取文本内容
$(selector).text();

// 设置文本内容
$(selector).text(textString);

下面举一个例子，我们可以通过jQuery来设置和获取元素的文本内容：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery text()方法示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      var text = $("p").text();
      alert(text);  // 输出：“这是一个示例”

      $("p").text("这是新的文本内容");
    });
  </script>
</head>
<body>
  <p>这是一个示例</p>
</body>
</html>

上述代码中，在DOM加载完成后，我们首先使用text()方法获取<p>元素的文本内容，并将其弹出显示。然后使用text()方法设置<p>元素的文本内容，使其变为“这是新的文本内容”。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery ready函数、css函数及text()使用示例 - Python技术站

jquery ready函数、css函数及text()使用示例

jQuery ready函数

css函数

text()方法

相关文章