jQuery对象的length属性用法实例

当我们使用jQuery库中的选择器方法，如$("selector")或者$(DOMElement)，它会返回一个jQuery对象，这个对象可以理解为一个包含了DOM元素的数组，jQuery对象包含了一系列方法，比如.html(), .attr(), .css()等来操作这些DOM元素，而length属性既是一个实例属性也是一个公共属性，它可以用来获取包含在jQuery对象中的元素数量。

普通的length属性用法

let $paragraphs = $("p");

console.log($paragraphs); // jQuery对象，包含了所有p标签元素

console.log($paragraphs.length); // 输出p标签元素的数量

在这段代码中，我们使用了选择器方法$("p")获取了所有p标签元素，然后将它们存储到一个变量$paragraphs中，$paragraphs是一个jQuery对象。我们可以通过调用$paragraphs.length属性，来获取$paragraphs对象包含的DOM元素的个数。

length属性用法进阶

let $listItems = $("li");

$listItems.each(function() {
  console.log($(this).text());
});

console.log($listItems.length);

在这个例子中，我们同样使用了选择器方法$("li")获取了所有li元素。接着，我们调用了$().each()方法来迭代这个jQuery对象中的每个元素。而在each()方法的回调函数中，this关键字引用的就是当前的DOM元素。最后，我们输出$listItems中DOM元素的个数（即li标签的个数）。这里值得注意的是，当我们在回调函数中使用$(this)时，它指的是DOM元素的jQuery封装，而不是DOM元素本身。因此，在使用.attr()、.html()、.css()等jQuery操作元素的方法时，需要用$(this)来替代DOM元素。