12.2.1 jQuery介绍与使用

jQuery是一个极简版本的JavaScript库，它的设计宗旨就是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它将常用的JavaScript功能代码封装起来，提供了一种简便的JavaScript设计模式，优化了HTML文档遍历操作、事件处理、动画和Ajax。

jQuery只是封装了JavaScript的DOM操作和Ajax，具有独特的链式语法和短小清晰的多功能接口，可以便捷的操作CSS选择器，所以jQuery是包含于JavaScript的，它的出现让操作DOM更加容易。

jQuery安装

访问jQuery官网，选择下载：
在这里插入图片描述
如果是在Windows下安装，可以直接拷贝其源码保存到本地：

在这里插入图片描述
jQuery有两种版本，一种是未压缩的开发版本，另一种是压缩的上线版本，点击之后就可以看到jQuery的源码，可将其拷贝后保存到本地。

开发版本的jQuery有充分的注释，源码易读：

在这里插入图片描述
上线版本的jQuery既是对开发版本的压缩，将变量名简化，代码浓缩为一行：

jQuery的简单使用

使用jQuery制作一个简单的盒子显示操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12.2.1_1.jQuery_Demo</title>
    <style type="text/css">
        div {
            height: 250px;
            display: none;
            background-color: rgba(180, 220, 200, 0.7);
        }
    </style>
</head>
<body>
    <button>skin</button>
    <div></div>

<!--引入jQuery-->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    // 使用$函数获取DOM元素，绑定点击事件
    $('button').click(function () {
        // 0.5秒显示盒子
        $('div').show(500);
    })
</script>
</body>
</html>

效果为：
在这里插入图片描述

jQuery与JavaScript对比

入口函数

JavaScript的入口函数为：

window.onload = function() {};

即等待页面所有内容（文本、图片等）全部加载完毕之后才执行函数。

但是入口函数存在覆盖现象，如果定义了多个入口，最后只能执行一个。

JavaScript入口函数的弊端在于要耗费太多的时间在图片、外部CSS文件和外部JavaScript文件的加载上，实际上在HTML文档的DOM结构加载完之后就可以执行脚本了，不用等待所有的外部资源链接完成，jQuery针对此问题提供了两种入口函数：

// 入口函数一：文档加载完毕，图片未加载时，执行函数
$(document).ready(function () {
    alert(1);
})

// 入口函数一（简化版）：文档加载完毕，图片未加载时，执行函数
$(function () {
    alert(1);
});

// 入口函数二：文档加载完毕，图片加载完毕，执行函数
$(window).ready(function () {
    alert(1);
})

JavaScript的DOM对象和jQuery对象

JavaScript和jQuery都可以获取DOM对象，但两者之间确有一些区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript的DOM对象和jQuery对象</title>
</head>
<body>
    <p>JavaScript的DOM对象和jQuery对象</p>
    <div id="id_box" style="width: 50px; height: 50px; background-color: black"></div>
    <div class="class_box" style="width: 50px; height: 50px; background-color: red"></div>
    <div class="class_box" style="width: 50px; height: 50px; background-color: green"></div>
    <div class="class_box" style="width: 50px; height: 50px; background-color: blue"></div>

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
    console.log("通过JavaScript获取元素节点");
    console.log(document.getElementsByTagName('p'));
    console.log(document.getElementById('id_box'));
    console.log(document.getElementsByClassName('class_box'));
    console.log("通过jQuery获取元素节点");
    console.log($('p'));
    console.log($('id_box'));
    console.log($('class_box'));
</script>
</body>
</html>