JQuery 无废话系列教程(二) jquery实战篇上

《JQuery 无废话系列教程(二) jquery实战篇上》主要介绍了如何通过JQuery实现一些常见的网页交互效果。以下是完整攻略：

一、动态改变HTML内容

1.1 text() 方法

• 作用：设置或返回所选元素的文本内容。
• 示例：

<button id="btn">点击我</button>

<script>
  $("#btn").click(function() {
    $(this).text("被点击了");
  });
</script>

点击按钮后，按钮的文本内容会变成 “被点击了”。

1.2 html() 方法

• 作用：设置或返回所选元素的HTML内容。
• 示例：

<div id="content">
  <p>这是第一段内容</p>
</div>

<script>
  $("#content").click(function() {
    $(this).html("<p>这是第二段内容</p>");
  });
</script>

点击 #content 元素后，元素内原有的 <p> 标签会被替换为新的 <p> 标签，同样只有一段文本。

二、事件处理

JQuery提供了一系列处理事件的函数，可以方便地为元素添加事件处理程序。

2.1 click() 方法

• 作用：为元素添加click事件处理程序。
• 示例：

<button id="btn">点击我</button>

<script>
  $("#btn").click(function() {
    alert("按钮被点击了");
  });
</script>

点击按钮后会弹出一个提示框：“按钮被点击了”。

2.2 hover() 方法

• 作用：为元素添加鼠标移入移出事件处理程序。
• 示例：

<div id="box">鼠标移入后会变红，移出后会变蓝</div>

<script>
  $("#box").hover(
    function() {
      $(this).css("background-color", "red");
    },
    function() {
      $(this).css("background-color", "blue");
    }
  );
</script>

当鼠标移入 #box 元素时，会将它的背景改为红色；移出时则将背景改为蓝色。

以上就是关于本篇教程的完整攻略。