jq的初体验

最新推荐文章于 2024-07-24 21:16:36 发布

我的纸飞机啊飞啊飞啊

最新推荐文章于 2024-07-24 21:16:36 发布

阅读量102

点赞数

分类专栏： jq教学文章标签： jq教学

本文链接：https://blog.youkuaiyun.com/qq_33530408/article/details/81162848

版权

jq教学专栏收录该内容

12 篇文章

订阅专栏

本文通过一个简单的示例介绍了如何利用jQuery库实现DOM元素的操作，包括显示隐藏元素及修改元素内容。示例中展示了如何引入jQuery库，并使用点击事件触发元素的显示与内容更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      height: 200px;
      margin-bottom: 10px;
      background-color: #a43035;
      display: none;
    }
  </style>
  
  <!--1. 需要引入jQuery文件-->
  <script src="jquery-1.12.4.js"></script>
  <script>
    
    //2. 入口函数的标准
    $(document).ready(function(){
      //注册事件，把on去掉，是一个方法
      $("#btn1").click(function () {
        //隐式迭代：偷偷的遍历，jQuery会自动的遍历，不需要我们遍历。
        $("div").show(1000);
      });
      
      $("#btn2").click(function () {
        $("div").text("我是内容");
      });
    });
  </script>
  
</head>
<body>


<input type="button" value="btn1" id="btn1">
<input type="button" value="设置内容" id="btn2">

<div></div>
<div></div>
<div></div>


</body>
</html>

需要自己下载jquery-1.12.4.js文件