jQuery初识-Day1

最新推荐文章于 2024-10-16 16:26:58 发布

对面_阿紫

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量92

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_49707537/article/details/120538099

版权

1.前言：jQuery简单介绍（优点）

跟原生JS相比, jQuery节省了很多代码，并且写起来比较简洁。比如说：dom操作更方便，特有的链式写法，强大的ajax以及插件多多的好处。当然，前提是要会正确使用哦~

2.jQuery的入口函数 $(function(){}) 常用函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入口函数</title>
    <script src="../jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <script>
      $(function () {
        alert("你好~");
      });
    </script>
  </body>
</html>

示例图如下：

3.jQuery转换成JS对象

3.1 第一种方法 $("p").get(index)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JQ转换成JS对象</title>
    <script src="../jquery-3.6.0.js"></script>
  </head>
  <body>
    <button>按钮1</button>
    <button>按钮2</button>
    <p id="ni">你好</p>
    <p>轻微的</p>
    <script>
      $(function () {
        // $("p").get(index)
        $("p").get(0).innerHTML = "今天天气晴朗！";
      });
    </script>
  </body>
</html>

演示图如下：

3.2 第二种方法 $("p")[下标]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JQ转换成JS对象</title>
    <script src="../jquery-3.6.0.js"></script>
  </head>
  <body>
    <button>按钮1</button>
    <button>按钮2</button>
    <p id="ni">你好</p>
    <p>轻微的</p>
    <script>
      $(function () {
        // $("p")[下标]
        $("p")[1].innerHTML = "快到碗里来";
      });
    </script>
  </body>
</html>

事例图如下：

4.JS转换成jQuery对象

方法： $(js对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS转换为JQ对象</title>
    <script src="../jquery-3.6.0.js"></script>
  </head>
  <body>
    <button>点击</button>
    <p id="ni">你好</p>
    <script>
      //  $(js对象)
      $(function () {
        $("button").click(function () {
          $("#ni").text('强国有我');
        });
      });
    </script>
  </body>
</html>

演示图：

点击前：