jquery选择器$("...")返回的是数组,为啥还能继续练式操作$("...").方法 ？

Posted 2023-03-19

1、jquery选择器$('selector')返回的不是数组，而是封装好的jquery对象。但这个对象有一个特别的地方，就是查询到的节点被以下标为属性，添加到了jquery对象上，所以它看起来像数组，因为它存在一些属性是数字；

2、jquery对象有哪些属性和方法？

我们可以理解，$('selector')返回了一个对象obj，obj[0]....obj[i]总是返回查询到的第i个节点。除此之外，jquery对象还被通过prototype添加了一些方法，即：

jQuery.prototype.each = function()
jQuery.prototype.hasClass = function()
jQuery.prototype.hide = function()
jQuery.prototype.css = function()
jQuery.prototype.attr = function()

等等。这样的话，$('selector')返回的对象就可以调用这些方法，比如obj.attr('name')、obj.css('color', 'red')。

3、jquery方法如何处理多个节点？

实际上，以上诸如hide、css、attr等方法，在jquery内部都是通过循环来处理各个节点的。但是，如果是要获取节点属性，比如obj.attr('name')，显然这个只能返回一个字符串，所以类似的方法都是获取节点集合中的第一个节点的属性。也就是说，虽然返回的节点很多，但只有第一个会被处理。

4、为什么jquery可以链式调用？

在jquery中，很多同名的方法通过参数个数的不同实现不同的功能，比如css方法，如果传一个参数则表示获取css属性；如果传两个参数，则表示给节点添加某个属性，并赋值为第二个参数。attr、width等也是这样的处理。对于方法的返回值，除了获取属性值、获取css值等需要返回实际值的方法外，当css方法、attr方法表示为为节点添加属性、css样式时，是不需要返回值的，但jquery让这些方法返回了this，也就是返回了调用者自身，所以可以链式调用。

参考技术A jQuery中$("...")返回的不是数组是对象哦。 参考技术B 返回的是jquery对象，jquery对象支持链式操作追问

那我console.log出$("...")出来的怎么是选取得元素对象数组？

追答

你可以用instanceof Array 方法看看是不是数组，
是封装好的jquery对象，很多方法在模仿数组，外表很像而已

function xx(who)
this[0] = who;

var fy = new xx('john');
fy[0] === 'john'
fy是一个对象，0是它的属性名而已。因为this.0 = who 会语法报错，所以就用了一个小技巧。
不是看起来像数组就是数组

追问

我知道$("...")返回的不是数组，$("...")输出的是一个含有选择的元素jqurry包装对象，我疑问的是怎么还能够调用jquery 的方法呢？

我知道$("...")返回的不是数组，$("...")输出的是一个含有选择的元素jqurry包装对象，我疑问的是怎么还能够调用jquery 的方法呢？

我知道$("...")返回的不是数组，$("...")输出的是一个含有选择的元素jqurry包装对象，我疑问的是怎么还能够调用jquery 的方法呢？

Jquery--1--选择器分类

基本选择器

$("#id") ???????????//ID选择器

$("div") ???????????//标签选择器

$(".classname") ????//类选择器

$(".classname,.classname1,#id1") ????//组合选择器

层次选择器

$("#id > .classname ") ???//子元素选择器

$("#id .classname ") ???//后代元素选择器

$("#id + .classname ") ???//紧邻下一个元素选择器

$("#id ~ .classname ") ???//兄弟元素选择器

过滤选择器--位置过滤

$("li:first") ???//第一个li

$("li:last") ????//最后一个li

$("li:even") ????//挑选下标为偶数的li

$("li:odd") ?????//挑选下标为奇数的li

$("li:eq(4)") ???//下标等于4的li

$("li:gt(2)") ???//下标大于2的li

$("li:lt(2)") ???//下标小于2的li

$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

过滤选择器--内容过滤

$("div:contains('Runob')") ???// 包含 Runob文本的元素

$("td:empty") ????????????????//不包含子元素或者文本的空元素

$("div:has(selector)") ???????//含有选择器所匹配的元素

$("td:parent") ???????????????//含有子元素或者文本的元素

过滤选择器--可见性过滤

$("li:hidden") ??????//匹配所有不可见元素，或type为hidden的元素

$("li:visible") ?????//匹配所有可见元素

过滤选择器--属性过滤

$("div[id]") ???????//所有含有 id 属性的 div 元素

$("div[id='123']") ???????// id属性值为123的div 元素

$("div[id!='123']") ???????// id属性值不等于123的div 元素

$("div[id^='qq']") ???????// id属性值以qq开头的div 元素

$("div[id$='zz']") ???????// id属性值以zz结尾的div 元素

$("div[id*='bb']") ???????// id属性值包含bb的div 元素

$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

过滤选择器--状态过滤

$("input:enabled") ???// 匹配可用的 input

$("input:disabled") ??// 匹配不可用的 input

$("input:checked") ???// 匹配选中的 input

$("option:selected") ?// 匹配选中的 option

表单选择器

$(":input") ?????//匹配所有 input, textarea, select 和 button 元素

$(":text") ??????//所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同

$(":password") ??//所有密码框

$(":radio") ?????//所有单选按钮

$(":checkbox") ??//所有复选框

$(":submit") ????//所有提交按钮

$(":reset") ?????//所有重置按钮

$(":button") ????//所有button按钮

$(":file") ??????//所有文件域