jQuery对象细节

1. jQuery核心函数

核心函数的七种写法:

jQuery(selector,context) : 给定一个css选择器和选择上下文，选中对应对象封装成为jQuery对象
jQuery(html,ownerDocument) 、jQuery(html,props) : 用所提供代码生成HTML元素
jQuery(element or elementsArray) : 传入元素，则封装，若传入元素数组则将元素数组内所有元素封装到同一个jQuery对象中
jQuery(Object) : 如果传入的是一个object对象，则把该对象封装到jQuery对象中并返回。
jQuery(callback) : 当传进去的参数是函数的时候，则在document对象上绑定一个ready事件监听函数，当DOM结构加载完成的时候执行
jQuery(jQuery object) : 当传进去的参数是一个jQuery对象的时候，则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用8完全相同的元素
jQuery() : 如果不传入任何的参数，则返回一个空的jQuery对象，属性length为0
不管核心函数有多少种写法都可以看到几乎都提到了一个字眼就是jQuery对象，那么我们就应该深入了解jQuery对象以及他与Dom对象的区别

2. 深入jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="Ronin">
    <meta name="time" content="2020/6/16">
    <meta charset="UTF-8">
    <title>jQuery对象</title>
    <script src = "../Day01/JS/jquery.js"></script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<script>
    //入口函数
    $(function(){
        //选中所有div
        $div = $('div');

       

        console.log($div);
</script>
</body>
</html>

现在我给jQuery传入了，css选择器.box，并且没有传递选择上下文所以默认从document上寻找所有的class为box的元素封装成jQuery对象，最后我打印了一下看效果

可以看到jQuery的对象中有0~4的索引，有length属性，那么我们就可以称其为伪数组，那么这时候我有疑问了，既然它封装了4个Dom元素，那我们知道jQuery对象也有一套操作Dom的方法，我就去找一下改变样式的方式测试一下。

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="Ronin">
    <meta name="time" content="2020/6/16">
    <meta charset="UTF-8">
    <title>jQuery对象</title>
    <script src = "../Day01/JS/jquery.js"></script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<script>
    //入口函数
    $(function(){
        //选中所有div
        $div = $('div');

        $div.css('height','200px');
        $div.css('width','200px');
        $div.css('float','left');
        $div.css('backgroundColor','lightyellow');
        $div.css('marginLeft','20px');

        console.log($div);
</script>
</body>
</html>

看效果图：

在上面我比较蛋疼的用jQuery写了几段CSS的代码，但是我们看到了效果，也从中得到了一些信息，jQuery对象是一个伪数组，伪数组中的Dom元素全部都用jQuery的方式改变了，那我如果想要只改变其中的第一个或者第二个呢？

$($div[0]).css('backgroundColor','black');

这里把jQuery对象的0号索引的Dom选中，在经过jQuery函数封装之后进行操作，当然直接用Dom方式改变样式也没有问题
接下来在jQuery对象中还剩下一个prevObejct这个属性，这个属性的字面意思是前一个对象，而我确有些费解了，他指的是那方面的前一个呢，可以看到源码中的

正在我百思不得其解之时我从大神博客中找到了这样的一片描述

jQuery内部维护着一个jQuery对象栈。每个遍历方法都会找到一组新元素（一个jQuery对象），然后jQuery会把这组元素推入到栈中。

而每个jQuery对象都有三个属性：context、selector和prevObject，其中的prevObject属性就指向这个对象栈中的前一个对象，而通过这个属性可以回溯到最初的DOM元素集。

原文链接 : https://wwwblogs/aaronjs/p/3387278.html

我也就暂时理解为每一次jQuery选中对象之后都会push进栈，然后每一个对象都有一个属性指向上一个被选中的jQuery对象吧
其实这里我看大神门都是利用溯源操作来进行展示，这里我这个菜鸟就利用属性调用改变下样式吧

$div.css('height','200px');
        $div.css('width','200px');
        $div.css('float','left');
        $div.css('backgroundColor','lightyellow');
        $div.css('marginLeft','20px');


        let $first_div = $("#box","div");
        // $first_div的prevObejct属性  = $div
        $first_div.prevObject.css('background','black');
        console.log($div);
        console.log($first_div);