Register
> 博客>

jquery 代码

新星源码网 3月 10日 2 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Example</title>
  <!-- 引入 jQuery 库 -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<!-- 一个简单的按钮和一个段落 -->
<button id="myButton">点击我</button>
<p id="myParagraph">这是一个段落。</p>

<script>
// 使用 jQuery 选择元素并添加事件处理程序
$(document).ready(function(){
  // 通过 ID 选择器选择按钮元素
  var myButton = $("#myButton");

  // 添加点击事件处理程序
  myButton.click(function(){
    // 通过 ID 选择器选择段落元素
    var myParagraph = $("#myParagraph");

    // 修改段落文本内容
    myParagraph.text("按钮被点击了！");
  });
});
</script>

</body>
</html>

这是一个简单的HTML页面，包含一个按钮和一个段落。在页面底部的<script>标签中，我们使用jQuery选择按钮和段落元素，并在按钮点击时修改段落的文本内容。请确保在页面中包含了jQuery库，以便代码能够正常运行。您可以通过将src属性替换为最新版本的链接来更新jQuery库。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced jQuery Example</title>
  <!-- 引入 jQuery 库 -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<!-- 一个输入框、按钮和一个空的列表 -->
<input type="text" id="textInput" placeholder="输入一些文本">
<button id="addToList">添加到列表</button>
<ul id="myList"></ul>

<script>
$(document).ready(function(){
  // 添加到列表按钮的点击事件处理程序
  $("#addToList").click(function(){
    // 通过 ID 选择器获取输入框的值
    var inputValue = $("#textInput").val();

    // 检查输入是否为空
    if (inputValue !== "") {
      // 使用 append() 将新的列表项添加到列表中
      $("#myList").append("<li>" + inputValue + "</li>");

      // 清空输入框
      $("#textInput").val("");
    }
  });

  // 示例：使用 AJAX 请求获取数据
  $("#myList").on("click", "li", function(){
    var listItem = $(this);

    // 使用 jQuery 的 AJAX 方法发送GET请求
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/posts/1",
      method: "GET",
      success: function(data){
        // 在列表项下方显示获取到的数据
        listItem.append("<p>Title: " + data.title + "</p>");
      },
      error: function(){
        console.log("AJAX请求失败");
      }
    });
  });
});
</script>

</body>
</html>

在这个例子中，我们添加了一个输入框、一个按钮和一个空的列表。当用户在输入框中输入文本并点击"添加到列表"按钮时，将创建一个新的列表项。同时，通过点击列表项，会触发一个AJAX请求，从一个示例API获取数据，并在列表项下方显示数据的标题。这个例子展示了jQuery如何简化DOM操作和处理异步请求。

Related

热门文章

微海报