zoukankan      html  css  js  c++  java
  • Jquery中each的三种遍历方法

    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>

    ---------------------
    作者:honey_tao
    来源:CSDN
    原文:https://blog.csdn.net/honey_th/article/details/7404273
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    HTML技巧篇:如何让单行文本以及多行文本溢出时显示省略号(…)
    SpringMVC中响应json数据(异步传送)
    如何用Spring框架的<form:form>标签实现REST风格的增删改查操作
    如何使用REST请求风格
    Spring插件的安装与卸载---笔记
    元素 "context:component-scan" 的前缀 "context" 未绑定的解决方案
    简单的文件上传的下载(动态web项目)
    用简单的反射优化代码(动态web项目)
    json数据与Gson工具类的使用
    JSON简介
  • 原文地址:https://www.cnblogs.com/Jeely/p/11056807.html
Copyright © 2011-2022 走看看