JQuery的循环遍历【五】

最新推荐文章于 2023-03-22 08:25:42 发布

Joss_dzy

最新推荐文章于 2023-03-22 08:25:42 发布

阅读量2k

点赞数 1

分类专栏： Jquery 前端文章标签： JQuery

本文链接：https://blog.csdn.net/Joss_dzy/article/details/80564814

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Jquery

4 篇文章 0 订阅

订阅专栏

一、jQuery对象的遍历
1. 遍历的必要性：
因为jQuery对象本身就是数组
jQuery通过选择器有时可以得到多个元素，有必要对这多个元素进行遍历的操作。

2. 三种遍历jQuery的方法：
1) 使用原始的for循环实现
2) jq集合对象.each(function(index ,element));
3) 全局方法: $.each(数组或集合, function(index, element));

3. 注：遍历集合中的元素类型
无论使用上面哪种方式遍历集合，集合中的每个元素都是JS对象

二．原始方式遍历
1. 介绍：
for(var i=0; i<数组.length; i++) {
}

2. 示例：对一个select中的所有option元素进行遍历，并且输出它的HTML内容
<script type="text/javascript">
$(function() {
//所有的option，返回一个集合
var cities = $("#city option");

$("#b1").click(function(){
//方式一：原生循环方式
for (var i=0; i<cities.length; i++) {
// alert( cities[i].innerHTML);
alert( $(cities[i]).html());
}
});
});
</script>
</head>
<body>
<input type="button" id="b1" value="使用原生的for遍历" />
城市：
<select id="city">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="珠海">珠海</option>
</select>
</body>

三．jQuery对象的方法
1. 介绍：
是一个jq集合的方法

2. 语法：
jq集合.each(function(index,element));
index: 每个元素的索引，从0开始
element：当前遍历的元素本身

3. 示例：对一个select中的所有option元素进行遍历，并且输出它的HTML内容
$("#b2").click(function() {
cities.each(function(index, element){
//element是js对象
alert(index + "-->" + element.innerHTML);
});
});

四．jQuery的全局方法
1. 介绍：
全局方法，可以在JS的任何地方调用的函数。
JQ中全局函数： $.函数名

2. 语法：
$.each(数组或集合, function(index, element));

3. 示例：对一个select中的所有option元素进行遍历，并且输出它的HTML内容
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//所有的option，返回一个集合
var cities = $("#city option");

$("#b1").click(function(){
//方式一：原生循环方式
for (var i=0; i<cities.length; i++) {
// alert( cities[i].innerHTML);
alert(i + "-->" + $(cities[i]).html());
}
});

//使用jq的方法遍历
$("#b2").click(function() {
cities.each(function(index, element){
//element是js对象
alert(index + "-->" + element.innerHTML);
});
});

//使用jq的全局方法遍历
$("#b3").click(function() {
$.each(cities, function(index,element){
alert(index + "-->" + element.innerHTML);
});
});
});
</script>
</head>
<body>
<input type="button" id="b1" value="使用原生的for遍历" />
<input type="button" id="b2" value="使用jq的方法遍历" />
<input type="button" id="b3" value="使用jq的全局方法遍历" />
<hr/>
城市：
<select id="city">
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="珠海">珠海</option>
</select>
</body>
</html>

Joss_dzy

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JQuery的循环遍历【五】

一、jQuery对象的遍历 1. 遍历的必要性：因为jQuery对象本身就是数组 jQuery通过选择器有时可以得到多个元素，有必要对这多个元素进行遍历的操作。 2. 三种遍历jQuery的方法： 1) 使用原始的for循环实现 2) jq集合对象.each(function(index ,element)); 3) 全局方法: $.each(数组或集合, function(ind...
复制链接

扫一扫

专栏目录