前端基础 -JQuery之遍历

简介: 前端基础 -JQuery之遍历

JQuery遍历

两种遍历方式:

jquery对象.each(function(index,ele){
    //this    遍历后的结果   js对象
    //ele     遍历后的结果   js对象
    //index   索引
})

$.each(jquery对象,function(index,ele){
        //this    遍历后的结果   js对象
        //ele     遍历后的结果   js对象
        //index   索引
  })

案例:遍历隐藏域的值

直接上代码:

<!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>05-可见性过滤选择器.html</title>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $("#b1").click(function() {
          /*
           * 方式一:
           * 
           * $("[type=hidden]").each(function() {
            alert(this.value);
          });
          * 
          * */
          //方式二:
          $("[type=hidden]").each(function(index, val) {
            alert(index + " : " + val.value);
          });
        })
        $("#b2").click(function() {
          $.each($("[type=hidden]"), function(index, val) {
            alert(index + " : " + val.value);
          });
        })
      });
    </script>
  </head>
  <body>
    <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b1" />
    <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b2" />
    <br /><br />
    <!--文本隐藏域-->
    <input type="hidden" value="hidden_1">
    <input type="hidden" value="hidden_2">
    <input type="hidden" value="hidden_3">
    <input type="hidden" value="hidden_4">
  </body>
</html>
目录
打赏
0
0
0
0
237
分享
相关文章
|
5月前
|
jQuery 遍历
jQuery 遍历
42 2
jQuery 遍历
|
5月前
|
jQuery 遍历 方法
jQuery 遍历 方法
44 5
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
55 3
|
5月前
|
jQuery 遍历
jQuery 遍历
46 1
jQuery 遍历
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
49 1
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
42 2
|
5月前
|
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
38 6
|
5月前
|
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
47 5
|
5月前
|
jQuery 遍历- 过滤
jQuery 遍历- 过滤
35 2
|
5月前
|
jQuery 遍历 方法
jQuery 遍历 方法
34 3

热门文章

最新文章

  • 1
    jquery实现文字点选验证码
    3
  • 2
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
    72
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    2
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    42
  • 6
    详解智能编码在前端研发的创新应用
    13
  • 7
    巧用通义灵码,提升前端研发效率
    23
  • 8
    智能编码在前端研发的创新应用
    37
  • 9
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
    23
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    7
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    26
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    47
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    86
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    93
  • 7
    智能编码在前端研发的创新应用
    80
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    117
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    74
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等