JQuery快速入门

1.1、JQuery介绍

  • jQuery 是一个 JavaScript 库。
  • 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
  • jQuery 官网：https://www.jquery.com

JQuery介绍.png

1.2、JQuery快速入门

  • 开发思路
  1. 编写 HTML 文档。
  2. 引入 jQuery 文件。
  3. 使用 jQuery 获取元素。
  4. 使用浏览器测试。
  • 代码实现
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>快速入门</title>
  7. </head>
  8. <body>
  9.     <div id="div">我是div</div>
  10. </body>
  11. <!--引入 jQuery 文件-->
  12. <script src="js/jquery-3.3.1.min.js"></script>
  13. <script>
  14.     // JS方式，通过id属性值来获取div元素
  15.     let jsDiv = document.getElementById("div");
  16.     //alert(jsDiv);
  17.     //alert(jsDiv.innerHTML);
  19.     // jQuery方式，通过id属性值来获取div元素
  20.     let jqDiv = $("#div");
  21.     alert(jqDiv);
  22.     alert(jqDiv.html());
  23. </script>
  24. </html>

1.3、小结

  • jQuery 是一个 JavaScript 库。
  • 说白了就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。
  • jQuery 官网：https://www.jquery.com。
  • 要想使用，必须要引入该文件。
  • jQuery 的核心语法 $();