• 技术文章 >web前端 >js教程

    Jquery中each的三种遍历方法

    韦小宝韦小宝2017-11-27 10:05:21原创1191
    Jquery中each的三种遍历方法,带你看看jquery好用的each方法,对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 >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>属性选择器学习</title>
    <script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script language="javascript" type="text/javascript">
    //使用jquery加载事件
    $(document).ready(function (){
    $("#btn0").click(function (){
    //当点击按钮后,设置id=two的div的背景颜色是绿色
    $("input[type=text]:enabled").each(function(index,domEle){
    //domEle.value="xxxxx";
    $(domEle).val("xxxxxxxx");
    });
    });
    
    $("#btn1").click(function (){
    //当点击按钮后,设置id=two的div的背景颜色是绿色
    $("input[type=text]:disabled").each(function(index,domEle){
    //domEle.value="xxxxx";
    $(domEle).val("xxxxxxxx");
    });
    });
    
    $("#btn2").click(function (){
    //当点击按钮后,设置id=two的div的背景颜色是绿色
    alert($("input[type=checkbox]:checked").length);
    });
    
    $("#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>

    以上就是Jquery中each的三种遍历方法的简述和代码演示了。

    相关推荐:

    JQuery 模拟点击事件,自动触发事件

    如何高效使用jquery

    jquery模拟title提示效果

    以上就是Jquery中each的三种遍历方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Jquery each 方法
    上一篇:jQuery的attr()与prop()的区别 下一篇: js基础数组的概述 数组的长度 数组的遍历
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• JavaScript常见的Number对象汇总• 什么是闭包?聊聊javascript中闭包,看看闭包有哪些作用?• JavaScript原型与原型链知识点详解• angular如何进行性能优化?变更检测方式浅析• 总结分享了解nodejs的几个关键节点
    1/1

    PHP中文网