这写天用到的遍历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 />
 </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 ).each(function(){
        alert($(this).val());
    });
    
}
</script> 

 


<div />
</div>

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


<div />
 </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 />
 </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 />
     </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>

 

jquery中each遍历各种标签方法

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

 

相关文章: