1、for 循环:可以用来遍历数组或类数组对象,但不能用来遍历普通对象。
<ul>
<li>John</li>
<li>Doe</li>
<li>Jane</li>
<li>Doe</li>
</ul>
<script>
var lis = $('li');
for (var i = 0; i < lis.length; i++) {
console.log(lis[i].textContent);
}
</script>
上述代码表示:通过 $ 函数选择所有 li 元素,并将它们存储在变量 lis 中。然后使用 for 循环遍历 lis 数组,打印出每个 li 元素的文本内容。
2、each() 方法:可以遍历任何类型的集合,包括普通对象、数组和类数组对象。
<ul>
<li id="1">John</li>
<li id="2">Doe</li>
<li id="3">Jane</li>
<li id="4">Doe</li>
</ul>
<script>
$('li').each(function(index, element) {
console.log(index + ':' + $(element).text());
});
</script>
上述代码表示:使用 $ 函数选择所有 li 元素,并使用 each() 方法遍历它们。each() 方法接受一个函数作为参数,在每个元素上执行该函数。这个函数包含两个参数:元素的索引和元素本身。在示例代码中,使用 console.log() 打印每个 li 元素的索引和文本内容。
3、for...of 循环是 ES6 引入的一种新的循环语法,可以用来遍历所有可迭代对象,包括数组、类数组对象和字符串等。
<div class="container">
<div>John</div>
<div>Doe</div>
<div>Jane</div>
<div>Doe</div>
</div>
<script>
var container = $('.container');
for (var element of container.children()) {
console.log($(element).text());
}
</script>
上述代码表示:通过 $ 函数选择 container 元素,并使用 children() 方法获取它的所有子元素。然后使用 for...of 循环遍历所有子元素,并打印出它们的文本内容。需要注意的是,for...of 循环中的 element 变量是 DOM 元素,需要使用 $ 函数将其转换成 jQuery 对象才能进行相关操作。
4、children() 方法返回当前元素的所有子元素,可以带一个可选的选择器参数进行筛选。
<div class="container">
<p>John</p>
<p>Doe</p>
<p>Jane</p>
<p>Doe</p>
<