博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery中each的三种遍历方法
阅读量:5304 次
发布时间:2019-06-14

本文共 3183 字,大约阅读时间需要 10 分钟。

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>

转载于:https://www.cnblogs.com/otsf/p/8622460.html

你可能感兴趣的文章
机器学习/深度学习/其他开发环境搭建记录
查看>>
xml.exist() 实例演示
查看>>
判断是否为空然后赋值
查看>>
zabbix监控日志文件
查看>>
正则表达式
查看>>
pip install torch on windows, and the 'from torch._C import * ImportError: DLL load failed:' s...
查看>>
环套树
查看>>
java基础(一):我对java的三个环境变量的简单理解和配置
查看>>
arcgis api 4.x for js 结合 Echarts4 实现散点图效果(附源码下载)
查看>>
YTU 2625: B 构造函数和析构函数
查看>>
apache自带压力测试工具ab的使用及解析
查看>>
C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
查看>>
jenkins搭建
查看>>
C#中使用Split分隔字符串的技巧
查看>>
eclipse的调试方法的简单介绍
查看>>
加固linux
查看>>
IPSP问题
查看>>
(转)Java中的String为什么是不可变的? -- String源码分析
查看>>
HNU 10362 A+B for Input-Output Practice (II)
查看>>
十. 图形界面(GUI)设计9.列表和组合框
查看>>