一、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>
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>