引用jQuery的方法

1、官网下载原代码

jQuery 官网下载
项目中创建一个js文件保存下载的原代码

配置成功验证：

2、CDN引用-引用其它网站的资源

Bootstrap 中文网
 又拍云

jQuery工厂函数$()``jQuery()的四种使用场景

$()基本语法: $(选择器).操作()

1、$(选择器): 返回 jQuery 对象，然后可以调用jQuery方法
2、$(js 对象): 将 js 对象包装成 jQuery 对象，调用jQuery方法
3、$(html 文本): 将 html 文本包装成一个 jQuery 对象并返回
4、$(callback): 当 html 文档结构加载完成后就会立即执行这个回调

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jQuery_v3.5.1.js"></script>
</head>
<body>
<div class="mot">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>
<div class="hai">
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>
</body>
<script>
    // console.log($);
    // 1、`$(选择器)`: 返回 jQuery 对象，然后可以调用jQuery方法
    $('.mot').css({
        "background-color": "yellow",
        "font-size": "2rem"
    })
    // 2、`$(js 对象)`: 将 js 对象包装成 jQuery 对象，调用jQuery方法
    var spans = document.querySelectorAll(".hai span");
    // spans===> jQuery对象
    $(spans).css("background-color", "green");
    // 3、`$(html 文本)`: 将 html 文本包装成一个 jQuery 对象并返回
    $("<h3>jQuery学习</h3>").insertBefore(".hai");
    // 4、`$(callback)`: 当 html 文档结构加载完成后就会立即执行这个回调
    $(function () {
        $(document.body).css({
            "background-color": "wheat",
            "font-size": "1.5rem",
        });
    });
</script>
</html>

效果图：

jQuery查询结果的处理方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jQuery_v3.5.1.js"></script>
</head>
<body>
<div class="mot">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>
</body>
<script>
    var spans = $("div > span");
    // 类数组
    console.log(spans);
    // 1. toArray():将查询结果转为真正的数组
    console.log(spans.toArray());
    // 2. $.each(): 遍历指定的对象和数组,回调的参数顺序与forEach不一样
    spans.each(function (index, value) {
        $(this).css("color", "red");
      });
    // 3. $.map(): 处理数组中的每个元素,并将处理结果封装为新的数组返回。
    var arr = $.map(spans, function (value, index) {
        if (index % 2) return value;
      });
    console.log(arr);
    $(arr).css("color", "blue");
    // 4. index(): 返回jQuery查询集合中的索引
    spans.click(function () {
        console.log("点击了第: ", $(this).index() + 1, " 个<li>");
    });
</script>
</html>