这写天用到的遍历jquery each方法比较频繁 刚好有时间，就在这里记录一下

jquery用的是bootstrap的线上文件 不需要导入

<!DOCTYPE html>
<html lang="zh-cn">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body >
 
 <div id="DIV1">
 <input type="text" value="aaaa" name="input" class="class1" id="id1"/>
 <input type="text" value="bbbb" name="input" class="class1" id="id1"/>
 <input type="text" value="cccc" name="input" class="class1" id="id1"/>
 <input type="text" value="dddd" name="input" class="class1" id="id1"/>
 <input type="text" value="eeee" name="input" class="class1" id="id1"/><br/>
 <input type="button" value="遍历input值" onclick="eachInput();"/>
 </div>
<script>
function eachInput(){

　　/*遍历方法指定的属性不一定多种方式的  甚至可以自己定义标签没有的属性
　　(如 给上面的input 加一个 test="first"    $("#DIV1 input[test=first]").each(function(){  })  ) 　

　也是可以遍历的只要一直就可以 */
    // $("#DIV1 input[class=class1]").each(function(){
    //$("#DIV1 input[id=id1]").each(function(){
    $("#DIV1 input[name=input]").each(function(){
        alert($(this).val());
    });
}
</script>

<div id="DIV2">
 <select name="selectname" id="selectid" class="form-control">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
 </select>
 <br/>
 <input type="button" value="遍历select值" onclick="eachSelect();"/>
 </div>
<script>    
function eachSelect(){
    //遍历指定选中的select
    $("#DIV2 select[class=form-control]").each(function(){
        alert($(this).val());
    });
    //遍历指定选中的select的所有option值
    $("#DIV2 select[name=selectname] option").each(function(){
        alert($(this).val());
    });
    
}
</script>

<div id="DIV3">
            <ul>
                <li>选项一</li>
                <li>选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
  <input type="button" value="遍历li值" onclick="eachLi();"/>
</div>

<script>
function eachLi(){
    //$(this).removeClass("selected");
    $("#DIV3 li").each(function(){
        alert($(this).html());
    });
}
</script>

<div id="DIV4">
 <table id="tb" width="200" border="1">
   <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
   </tr>
   <tr>
     <td>yi</td>
     <td>er</td>
     <td>san</td>
   </tr>
   <tr>
     <td>一</td>
     <td>二</td>
     <td>三</td>
   </tr>
 </table>
  <input type="button" value="遍历Tr值" onclick="eachTr();"/>
 </div>
 <br/>

<script>
function eachTr(){
    //$(this).removeClass("selected");
    //index 表示遍历的下标      tr遍历对象的别名
    $("#DIV4 tr").each(function(index,tr){
        alert($(tr).html()+"\n index="+index);
    });
    //这样取出地表格第三行的第一列 or 第二列的文本值
    alert($("#DIV4 table tr:eq(2)").find("td:eq(0)").text());
    alert($("#DIV4 table tr:eq(2)").find("td:eq(1)").text());
}
</script>

<div id="DIV5">
  爱好：
     <input type="checkbox" value="看电视"  name="hobby" /> 看电视
     <input type="checkbox" value="游泳"   name="hobby" /> 游泳
     <input type="checkbox" value="游戏"   name="hobby" /> 游戏
     <input type="checkbox" value="把妹"   name="hobby" /> 把妹
  <input type="button" value="遍历checkbox值" onclick="eachCheckbox();"/>
 </div>

<script>
//遍历的另外一种方式
function eachCheckbox(){
    $.each($('input:checkbox'),function(i,val){
          alert(val.value+"===所有的==="+val.name);
    });
    //遍历选中的复选框
    $("#DIV5 input[name=hobby]:checked").each(function(){
        alert("选中的==="+$(this).val());    
    });
}
</script>

<br/>
 <div>
 <p> var arr= [ "aaa", "bbb", "ccc" ];      </p>
 <input type="button" value="遍历Arr值" onclick="eachArr()"/>
 </div>
 <script>
//遍历数组
function eachArr(){
     var arr= [ "aaa", "bbb", "ccc" ];      
    $.each(arr,function(i,val){
        alert(i+"::"+val);
    });
}
</script>

<div>
 <p>var obj = { one:1, two:2, three:3};     </p>
 <input type="button" value="遍历JSON值" onclick="eachJson()"/>
 </div>
 <script>
//遍历json格式（常用于回调解析json格式数据）
function eachJson(){
    var obj = { one:1, two:2, three:3};      
    $.each(obj,function(key,val){
        alert(key+":::"+val);   
    });
}
</script>
 <br/>

<div id="DIV6">
     <form action="">
         <input type="text" value="表单一"/>
         <input type="button" value="表单一" onclick="eachForm(0)"/>
     </form>
     <br/>
     <form action="">
         <input type="text" value="表单二"/>
         <input type="button" value="表单二" onclick="eachForm(1)"/>
     </form>
     <br/>
     <form action="">
         <input type="text" value="表单三"/>
         <input type="button" value="表单三" onclick="eachForm(2)" />
     </form>
     <br/>
 </div>
 
<script>
//指定表单提交
function eachForm(i){
    $('form').eq(i).attr('action','/form?num='+i);
    $('form').eq(i).submit();
}
</script>
 <br/>

<input type="button"  value="隐藏" onclick="setProperty()"/>
 <input type="button"  value="显示" onclick="showDiv()"/>
</body>
<script>
//最经常用到的jquery设置 标签的属性值 常用到的方法
function setProperty(){
    $('#DIV3').attr("readonly",true);//将input元素设置为readonly
   　　    $('#DIV2').attr("disabled","disabled");//将input元素设置为disabled
      $("#DIV1").css("display","none");//设置标签隐藏
    $("#DIV1 input").addClass("form-control");//设置标签的样式
    $(".form-control").removeClass("form-control").addClass("input");//移除替换样式
    $('#DIV2').removeAttr("disabled");//去除input元素的disabled属性
    $('#DIV3').removeAttr("readonly");//去除input元素的readonly属性
}
function showDiv(){
    $("#DIV1").hide();//隐藏
      $("#DIV1").show();//显示
}
</script>
</html>

<input type="checkbox" onclick="if(this.checked){$('input[name=checkbox]').each(function(){this.checked=true});}else{$('input[name=checkbox]').each(function(){this.checked=false});}"/>全选

jquery中each遍历各种标签方法的更多相关文章

  1. JQuery中两个ul标签的li互相移动实现方法

    这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下 本文实例讲述了JQuery ...

  2. 浅析jQuery中常用的元素查找方法总结

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下   $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...

  3. jquery-7 jquery中的文档处理方法有哪些（方法的参数表示功能增强）

    jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...

  4. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  5. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  6. jquery中prop()方法和attr()方法

    接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...

  7. js进阶 12-13 jquery中one方法和trigger方法如何使用

    js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...

  8. js进阶 10-3 jquery中为什么用document.ready方法

    js进阶 10-3  jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...

  9. jQuery中bind方法和live方法区别解析

    Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...

随机推荐

  1. url地址中 "&" "/"等符号的转义处理（转）

    URL出现了有+,空格,/,?,%,#,&,=等特殊符号的时候,可能在服务器端无法获得正确的参数值,如何是好? 解决办法:将这些字符转化成服务器可以识别的字符,对应关系如下: URL中的特殊字 ...

  2. NuGet学习笔记(2) 使用图形化界面打包自己的类库

    上文NuGet学习笔记(1) 初识NuGet及快速安装使用说到NuGet相对于我们最重要的功能是能够搭建自己的NuGet服务器,实现公司内部类库的轻松共享更新.在安装好NuGet扩展后,我们已经能够通 ...

  3. VIM学习笔记

    参考: http://linux.chinaunix.net/techdoc/beginner/2009/12/20/1150108.shtml VIM命令大全 光标控制命令 命令           ...

  4. 【spring】 <tx:annotation-driven /> 的理解 【转载的】

    在使用SpringMvc的时候,配置文件中我们经常看到 annotation-driven 这样的注解,其含义就是支持注解,一般根据前缀 tx.mvc 等也能很直白的理解出来分别的作用.<tx: ...

  5. [导入]Eclipse 导入/编译 Hadoop 源码

    http://www.cnblogs.com/errorx/p/3779578.html 1.准备工作 jdk: eclipse: Maven: libprotoc :https://develope ...

  6. 03 Javascript初识

    Javascript语言(★★★★★)      Javascript是基于对象和事件驱动的脚本语言,作用在客户端.              特点: * 交互性 * 安全性(不能访问本地的硬盘)   ...

  7. 现代JavaScript

    1.async(异步)属性以及defer(延迟)属性 2.load事件是在所有资源被完全加载后才触发 3.domready,在DOM加载之后以及资源加载之前被触发,以DOMContentLoaded的 ...

  8. 关于最近Google无法正常访问的变通之法(已经被墙)

    对于习惯使用谷歌搜素的骚年最近可能比较蛋疼,没这方面需求的就另当别论.可能是政府限制加强的原因,有时访问谷歌在香港服务器也不大好使,不过最近发现,不通过谷歌域名而直接使用谷歌的ip来访问谷歌响应速度可 ...

  9. Codeforces 607B Zuma（区间DP）

    题目大概说,有n个颜色的宝石,可以消除是回文串的连续颜色序列,问最少要几下才能全部消除. 自然想到dp[i][j]表示序列i...j全部消除的最少操作数 有几种消除的方式都能通过枚举k(i<=k ...

  10. sqlmap使用手册

    转自:http://hi.baidu.com/xkill001/item/e6c8cd2f6e5b0a91b7326386 SQLMAP 注射工具用法 1 . 介绍1.1 要求 1.2 网应用情节 1 ...