jquery中each遍歷各類標籤方法

時間  2019-11-17
標籤 jquery 遍歷 各類 標籤 方法 欄目 JQuery 简体版
原文   原文鏈接

這寫天用到的遍歷jquery each方法比較頻繁 恰好有時間，就在這裏記錄一下css

jquery用的是bootstrap的線上文件 不須要導入html

<!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(){jquery

　　/*遍歷方法指定的屬性不必定多種方式的  甚至能夠本身定義標籤沒有的屬性
　　(如 給上面的input 加一個 test="first"    $("#DIV1 input[test=first]").each(function(){  })  ) 　json

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

 


 <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>ide

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


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

<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>orm


<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});}"/>全選

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程