目录

  • 一、什么是 jQuery ？
  • 二、为什么要使用 jQuery ？
  • 三、DOM 对象
  • 四、jQuery 对象
  • 五、下载 jQuery 相关文件
  • 六、第一个jQuery程序
  • 七、DOM对象与jQuery对象之间的相互转换


一、什么是 jQuery ？

  • jQuery 是一款跨主流浏览器的JavaScript库，封装了 JavaScript 相关方法调用，简化了JavaScript 对于 HTML DOM操作。
  • 下面是官网对于jQuery的相关定义

jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。 它通过易于使用的 API 在大量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

二、为什么要使用 jQuery ？

  • jQuery 能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX异步对象。
  • 其他优点：

（1）写少代码,做多事情 write less do more
（2）免费，开源且轻量级的 js 库，容量很小
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）
（7）出错后，有一定的提示信息
（8）不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了

三、DOM 对象

  • 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。
  • 通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。
  • DOM对象也就是 js 对象
var obj = document.getElementById("txt"); // obj是dom对象，也叫做js对象
obj.value;

四、jQuery 对象

  • 用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对象的 API 。
  • 用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
  • jquery表示的对象都是数组
  • JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，我们都是将JavaScript 对象转化成 Jquery 对象
var $obj = $("#txt"); //为了区分 jQuery 对象与 dom 对象，我们在命名jQuery对象时常常以$开头

五、下载 jQuery 相关文件

  1. 搜索jQuery官网
  2. 打开之后点击 Download jQuery
  3. 点击之后出现以下界面，在压缩版和未压缩版之中选一个点开。
  4. 点开之后是一串代码，我们 ctrl + s 进行保存即可
  • 如何使用 ？

在项目下新建js目录，将我们之前下载的 jquery-3.6.0.min.js 文件复制粘贴到js目录中

在Html文件中，加入<scirpt type="text/javascript" src="js/jquery-3.6.0.min.js ">，就将jQuery库引入了

六、第一个jQuery程序

<html>
    <head>
        <meta charset="utf-8">
        <title>第一个jQuery程序</title>
        <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
        <script type="text/javascript"> 
            $(document).ready(function(){
               alert("Hello jQuery");
            })
        </script>
    </head>
    <body>
    </body>
</html>

解释：

$() 函数可以将DOM对象document转换为jQuery对象， $(document).ready()函数是当DOM对象全部加载完毕后，马上执行的函数.也就相当于window.onload();

$(document).ready() 与 $()、jQuery()、window.jQuery()是等价的
$(document).ready(function(){})  的简化形式为 $(function(){})

七、DOM对象与jQuery对象之间的相互转换

首先在界面中添加按钮

<body>
    <div>
        <input type="button" id="btn" value="button" onclick="btnClick()"> 
    <div>
</body>
  • 使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script>
    funciton btnClick() {
        var domBtn = document.getElementById("btn");
        alert(domBtn.value);
        var $btn = $(domBtn);
        alert($btn.val());
    }
</script>
  • jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0] 
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script>
    funciton btnClick() {
        //var domObj = $("#btn").get(0);
        var domObj = $("#btn")[0];
        //dom对象数组中，第0个对象为DOM对象
        alert(domObj.value);
    }
</script>