Jquery中each的三种遍历方法

$.post("urladdr",
{
"data" : "data"
},
function(data) {

$.each(data, function(n,value) {

});
});

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>

 
顶
0
踩

Jquery中each的三种遍历方法的更多相关文章

  1. Java中Map的三种遍历方法

    Map的三种遍历方法: 1. 使用keySet遍历,while循环: 2. 使用entrySet遍历,while循环: 3. 使用for循环遍历.   告诉您们一个小秘密: (下↓面是测试代码,最爱看 ...

  2. jquery中each()的三种遍历用法

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

  3. jquery中each的3种遍历方法

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

  4. Jquery中each的3种遍历方式

    学习目标: 参考博文: https://blog.csdn.net/honey_th/article/details/7404273 一.Jquery中each的几种遍历方法 1. 选择器+遍历 &l ...

  5. 2017.10.25 Java List /ArrayList 三种遍历方法

    java list三种遍历方法性能比较 学习java语言list遍历的三种方法,顺便测试各种遍历方法的性能,测试方法为在ArrayList中插入记录,然后遍历ArrayList,测试代码如下: pac ...

  6. 谈谈vector容器的三种遍历方法

    说明:本文仅供学习交流.转载请标明出处.欢迎转载!          vector容器是最简单的顺序容器,其用法相似于数组.实际上vector的底层实现就是採用动态数组.在编敲代码的过程中.经常会变量 ...

  7. map的三种遍历方法！

    map的三种遍历方法!   集合的一个很重要的操作---遍历,学习了三种遍历方法,三种方法各有优缺点~~ /* * To change this template, choose Tools | Te ...

  8. javase-常用三种遍历方法

    javase-常用三种遍历方法 import java.util.ArrayList; import java.util.Iterator; import java.util.List; public ...

  9. Java List /ArrayList 三种遍历方法

    java list三种遍历方法性能比较http://www.cnblogs.com/riskyer/p/3320357.html JAVA LIST 遍历http://blog.csdn.net/lo ...

随机推荐

  1. 延时调用的php代码

    比如我们想做一个类似于康盛uchome的定时触发任务,任务靠用户访问触发的,但是你触发任务是不能影响用户本身对页面的访问速度(也就是说不能任务执行十秒钟你就让用户等待十秒钟)刚好昨天把这个弄完了.拿出 ...

  2. Win10 锁屏图片 路径

    Win10锁屏图片非常漂亮,下面是获得这些图片的方法: 一. 找到这个路径 C:\Users\UserName\AppData\Local\Packages\Microsoft.Windows.Con ...

  3. 【leedcode】 Median of Two Sorted Arrays

    https://leetcode.com/problems/median-of-two-sorted-arrays/ There are two sorted arrays nums1 and num ...

  4. CentOS6.6安装virtualbox4.1.44

    本人用的是centos6.6,安装了virtualbox 4.1.44,启动后一直如上图报错,哪位前辈如果解决过这样的问题,麻烦指点指点,小弟在此先谢过了.

  5. js时间格式化

    const formatDate = timestamp => { const date = new Date(timestamp); const m = date.getMonth() + 1 ...

  6. cocos2dx 入门

    1.设置环境变量 JAVA_HOME=C:\Program Files\Java\jdk1.7.0_17CLASSPATH=.;%JAVA_HOME%\lib;Path增加%JAVA_HOME%\bi ...

  7. Quartus II USB-Blaster驱动解决

    Quartus II USB-Blaster驱动解决 之前安装Quartus II 13.0,但FPGA开发板链接的USB-Blaster链接无法被Quartus识别,改装Quartus II 11. ...

  8. Android 自定义view （一）——attr 理解

    前言: 自定义view是android自定义控件的核心之一,那么在学习自定义view之前,我们先来了解下自定义view的自定义属性的attr的用法吧 Android attr 是什么 (1)attr ...

  9. font-family styles

    以下是几种常用字体的字形样式预览: 步骤阅读

  10. web网站的url设计

    通常再web网站设计url时是按功能模块设计url,然后再control层一个功能模块对应一个control层类,每个control类中的方法映射相应的url请求. 如果遇见另一个功能模块需要实现同样 ...