Jquery中each的三种遍历方法

最新推荐文章于 2023-11-16 22:16:57 发布

「已注销」

最新推荐文章于 2023-11-16 22:16:57 发布

阅读量231

点赞数

分类专栏：前端文章标签： jquery

原文链接：https://www.mk2048.com/blog/blog.php?id=hbbhbahkjkjb&title=Jquery%E4%B8%ADeach%E7%9A%84%E4%B8%89%E7%A7%8D%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95

版权

前端专栏收录该内容

182 篇文章 0 订阅

订阅专栏

1、选择器遍历

$('div').each(function (i){

i就是索引值

this 表示获取遍历每一个dom对象

});

2、选择器遍历

$('div').each(function (index,domEle){

index就是索引值

domEle 表示获取遍历每一个dom对象

});

3、更适用的遍历方法

1）先获取某个集合对象

2）遍历集合对象的每一个元素

var d=$("div");

$.each(d,function (index,domEle){

d是要遍历的集合

index就是索引值

domEle 表示获取遍历每一个dom对

});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>属性选择器学习</title>  
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>  
<script language="javascript" type="text/javascript">  
//使用jquery加载事件  
$(document).ready(function (){  
    $("#btn0").click(function (){  
    //当点击按钮后，设置id=two的div的背景颜色是绿色  
        $("input[type=text]:enabled").each(function(index,domEle){  
        //domEle.value="xxxxx";  
        $(domEle).val("xxxxxxxx");  
        });  
    });  
 
    $("#btn1").click(function (){  
        //当点击按钮后，设置id=two的div的背景颜色是绿色  
        $("input[type=text]:disabled").each(function(index,domEle){  
        //domEle.value="xxxxx";  
        $(domEle).val("xxxxxxxx");  
        });  
    });  

    $("#btn2").click(function (){  
        //当点击按钮后，设置id=two的div的背景颜色是绿色  
        alert($("input[type=checkbox]:checked").length);    
    });  

    $("#btn3").click(function (){  
        //当点击按钮后，设置id=two的div的背景颜色是绿色  
        $("select option:selected").each(function(index,domEle){  
        //domEle.value="xxxxx";  
        alert($(domEle).text());  
        });  
    });  
});  
</script>  
</head>  
<body>  
<form method="post" action="">  
<input type="text" value="可见元素1"  />  
<input type="text" value="不可见元素1" disabled="disabled"  />  
<input type="text" value="可见元素2"  />  
<input type="text" value="不可见元素2"  disabled="disabled" /><br>  
<input type="checkbox" value="美女" />美女  
<input type="checkbox" value="美男" />美男  
<input type="checkbox" value="大爷" />大爷  
<input type="checkbox" value="大妈" />大妈  
<br>  
<input type="radio" value="男" />男  
<input type="radio" value="女" />女  
<br>  
<select id="zhiwei" size="5" multiple="multiple">  
   <option>PHP开发工程师</option>  
   <option>数据库管理员</option>  
   <option>系统分析师</option>  
   <option>保安</option>  
</select>  
<select id="xueli">  
   <option>大专</option>  
   <option>中专</option>  
   <option>小学</option>  
</select>  
</form>  
<div style="clear:both;">  
<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可修改的文本域的值  $('input[type=text]:enabled')" /><br>  
<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" /><br>  
<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" /><br>  
<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" /><br>  
</div>  
</body>  
</html>

更多专业前端知识，请上【猿2048】www.mk2048.com

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery中each的三种遍历方法

1、选择器+遍历 $('div').each(function(i){ i就是索引值 this表示获取遍历每一个dom对象 }); 2、选择器+遍历 $('div').each(fun...
复制链接

扫一扫