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

    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
  • 相关阅读:
    Android——继续深造——从安装Android Studio 2.0开始(详)
    PHP——安装wampserver丢失MSVCR110.dll
    Marza Gift for GDC 2016
    Retrieve OpenGL Context from Qt 5.5 on OSX
    Space Time Varying Color Palette
    Screen Space Depth Varying Glow based on Heat Diffusion
    Visualization of Detail Point Set by Local Algebraic Sphere Fitting
    Glass Dragon
    Jump Flood Algorithms for Centroidal Voronoi Tessellation
    京都之行
  • 原文地址:https://www.cnblogs.com/handsome1013/p/6227374.html
Copyright © 2011-2022 走看看