Jquery中each的三种遍历方法

最新推荐文章于 2023-12-24 11:06:14 发布
最新推荐文章于 2023-12-24 11:06:14 发布
阅读量1.4w 收藏 15
点赞数 2
分类专栏： jquery 

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="../include/jQuery.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
//<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值  $('input[type=text]:enabled')" />
$("#btn0").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" />
$("#btn1").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />
$("#btn2").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
alert($("input[type=checkbox]:checked").length);
/*
$("input[type=checkbox]:checked").each(function(index,domEle){
//alert(domEle.value);
//alert(this.value);
//alert($(this).val());
});
*/
});
//<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" />
$("#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>

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="../include/jQuery.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
//<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值  $('input[type=text]:enabled')" />
$("#btn0").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" />
$("#btn1").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />
$("#btn2").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
alert($("input[type=checkbox]:checked").length);
/*
$("input[type=checkbox]:checked").each(function(index,domEle){
//alert(domEle.value);
//alert(this.value);
//alert($(this).val());
});
*/
});
//<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" />
$("#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>



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="../include/jQuery.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
//<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值  $('input[type=text]:enabled')" />
$("#btn0").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" />
$("#btn1").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />
$("#btn2").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
alert($("input[type=checkbox]:checked").length);
/*
$("input[type=checkbox]:checked").each(function(index,domEle){
//alert(domEle.value);
//alert(this.value);
//alert($(this).val());
});
*/
});
//<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" />
$("#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>
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="../include/jQuery.js"></script>
<script language="javascript" type="text/javascript">
//使用jquery加载事件
$(document).ready(function (){
//<input id="btn0" type="button" value="利用jquery对象实现 修改表单中可见的文本域的值  $('input[type=text]:enabled')" />
$("#btn0").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:enabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn1" type="button" value="利用jquery对象实现 修改表单中不可修改的文本域的值  $('input[type=text]:disabled')" />
$("#btn1").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
$("input[type=text]:disabled").each(function(index,domEle){
//domEle.value="xxxxx";
$(domEle).val("xxxxxxxx");
});
});
//<input id="btn2" type="button" value="利用jquery对象实现 获取选中的复选框的个数 $('input[type=checkbox]:checked')" />
$("#btn2").click(function (){
//当点击按钮后，设置id=two的div的背景颜色是绿色
alert($("input[type=checkbox]:checked").length);
/*
$("input[type=checkbox]:checked").each(function(index,domEle){
//alert(domEle.value);
//alert(this.value);
//alert($(this).val());
});
*/
});
//<input id="btn3" type="button" value="利用jquery对象实现 获取选中的下拉菜单的内容  $('select option:selected')" />
$("#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>


xlj3
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盘点用jQuery框架实现“for循环”的四种方式！，爆推
2401_84093019的博客
04-06 1377
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难。
jQuery中each遍历的三种方法实例分析
10-18
主要介绍了jQuery中each遍历的三种方法,结合实例形式分析了jQuery使用each遍历DOM元素的相关操作技巧,并附带了一个综合实例给予总结说明,需要的朋友可以参考下
JavaScript jQuery遍历对象each()方法
m0_55201788的博客
02-12 6100
1遍历元素 jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。 语法1 : $ ("div") . each (function (index, domEle) { XXX; } ) 1. each()方法遍历匹配的每一个元素。主要用DOM处理。each 每一个 2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle是每个DOM元素对象,不是jquery对象 语法2 : $.each (object , function (index,
jQuery遍历对象each方法
m0_53438035的博客
08-29 2961
each()方法常常和数组一起使用。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
jQuery之遍历元素each
最新发布
m0_74577714的博客
12-24 434
让我为大家介绍一下jQuery中each方法吧！jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。语法：$(“div”).each(function (index，domEle) { xxx;})</</</</</"div"eachfunctionindexdomEle//回调函数第一个参数一定是索引号可以自己指定索引号号名称log;// 0 1 2// 回调函数第二个参数一定是 dom元素对象 也是自己命名log;</
Jquery使用each函数实现遍历及数组处理
10-15
总结来说，jQuery的`each()`函数是处理数组和对象遍历的强大工具，它使得JavaScript中的迭代操作变得简单且易于理解。无论是在处理数组、JSON对象还是DOM元素，`each()`都能够提供高效、灵活的解决方案，极大地提高...
jQuery使用each遍历循环的方法
12-10
3、更适用的遍历方法 1）先获取某个集合对象 2）遍历集合对象的每一个元素 var d=$("div"); $.each(d,function (index,domEle){ d是要遍历的集合 index就是索引值 domEle 表示获取遍历每一个dom对
jquery使用each方法遍历json格式数据实例
10-24
主要介绍了jquery使用each方法遍历json格式数据,实例分析了jQuery中each方法的使用技巧,需要的朋友可以参考下
JQuery中使用.each()遍历元素学习笔记
10-25
主要介绍了jquery中使用.each()遍历元素学习笔记,本文从实际项目经验总结而来,需要的朋友可以参考下
jQuery的$.each()遍历数组或对象的用法
12-05
$.each()遍历数组或对象的具体用法
jquery的each方法遍历对象
yin_991的博客
07-14 4367
//遍历对象 var d=$('div').each(function(index,domelement){ if(this.id === 'box2') { // return false;//fasle相当于for循环中的break,只有1有title return true//true 相当于for循环的continute，1、3都有title } th...
JQuery的map和each遍历方法
朝闻道_的博客
03-12 6461
总结:1.遍历数组        1.1    原生js有两种方法都可以使用[for(var i;i&lt;arr.length;i++){},for(var i in arr){}]         1.2    jquery有两个函数共计四种方法都可以使用[$.each(arr,function(i,item){}),$(arr).each(function(i,item){}), $.map...
jquery使用each方法遍历元素
每天进步一点点
09-11 2980
使用each()方法遍历元素 .red { background-color: Red; } 使用each()方法遍历元素 香蕉 桃子 葡萄 荔枝 var ar = []; $("span").each(function (index) { ar.push($(this)
JavaScript 学习-41.jQuery 中 each 遍历
qq_27371025的博客
06-04 576
jQuery.each() 函数用于遍历指定的对象和数组，通过 each 方法可以对 jQuery 内部的子元素进行逐个调用
JQuery中的 each函数 遍历出数组对象中值
qq_40673345的博客
07-30 5953
each函数根据参数的类型实现的效果不完全一致： 1、遍历对象(有附加参数) 1 2 3 4 $.each(Object, function(p1, p2) { this; //这里的this指向每次遍历中Object的当前属性值 p1; p2; //访问附加参数 }, ['参数1', '参数2']); ...
jq-each遍历到页面展示
你当像鸟飞往你的山~~
01-14 3555
  作者：LoveEmperor-王子様 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt...
Jquery中each的三种遍历方法 转载
sonlife的博客
05-13 519
1、选择器+遍历 $('div').each(function (i){    i就是索引值    this 表示获取遍历每一个dom对象 }); 2、选择器+遍历 $('div').each(function (index,domEle){    index就是索引值   domEle 表示获取遍历每一个dom对象 }); 3、更适用的遍历方法 1）先获取某个集
jquery中ajax遍历的方法例子
03-27
以下是一个使用jQuery中的ajax方法遍历数据的例子： ... ... <!-- 列表将动态生成 --> ``` ...JavaScript代码： ...当请求成功后，我们使用jQuery的each方法遍历数据，并将每个用户的名称添加到一个动态生成的列表中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值