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://www.cnblogs.com/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);

【jQuery】jQuery对象与prevObject相关推荐

50 jQuery拷贝对象与多库共存
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery拷贝对象如果想要把某个对象拷贝(合并)给另外一个对象使用,此时使用$.e ...
jquery jQuery的入口函数 $函数 dom对象和jquery对象
文章目录 jquery jQuery的入口函数 $函数 dom对象和jquery对象 jQuery的入口函数视频代码 $函数视频代码 dom对象和jquery对象视频代码 jquery j ...
jquery 事件对象属性小结
jquery 事件对象属性小结使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑 ...
[jQuery] jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this
[jQuery] jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this init()方法中返回的this指向init的实例对象,而init.prototype等于jQue ...
jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
JQuery修改对象的属性值
JQuery修改对象的属性值用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名"):修改属性值的结构为:$(obj).attr(& ...
jQuery遍历对象/数组/集合
jQuery遍历对象/数组/集合转载自: 网络1.jquery 遍历对象<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitiona ...
JS/jQuery 遍历对象属性
Javascript For/In 循环: 循环遍历对象的属性 var person={fname:"John",lname:"Doe",age:25};for ...
jquery 遍历java对象,js/jquery遍历对象和数组的方法分析【forEach，map与each方法】...
本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ ...
jQuery遍历对象、数组、集合
1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTM ...

【jQuery】jQuery对象与prevObject

jQuery对象细节

1. jQuery核心函数

2. 深入jQuery对象

【jQuery】jQuery对象与prevObject相关推荐

最新文章

热门文章