ag旗舰厅官网_ag旗舰厅下载客户端

热门关键词: ag旗舰厅官网,ag旗舰厅下载客户端

计算机网络

当前位置:ag旗舰厅官网 > 计算机网络 > jQuery中常用的遍历函数用法实例总结,each遍历数

jQuery中常用的遍历函数用法实例总结,each遍历数

来源:http://www.pedaLyourcycLe.com 作者:ag旗舰厅官网 时间:2019-11-18 17:16

jQuery$.each循环遍历详明,各个取值比较,$.each遍历数组、对象、Dom元素、二维数组、双层循坏、类json数据等等,jqueryjson

jQuery 遍历函数富含了用于筛选、查找和串联元素的艺术。

函数 描述
.add() 将元素添加到匹配元素的集合中。
.andSelf() 把堆栈中之前的元素集添加到当前集合中。
.children() 获得匹配元素集合中每个元素的所有子元素。
.closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq() 将匹配元素集合缩减为位于指定索引的新元素。
.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first() 将匹配元素集合缩减为集合中的第一个元素。
.has() 将匹配元素集合缩减为包含特定元素的后代的集合。
.is() 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last() 将匹配元素集合缩减为集合中的最后一个元素。
.map() 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not() 从匹配元素集合中删除元素。
.offsetParent() 获得用于定位的第一个父元素。
.parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
.parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice() 将匹配元素集合缩减为指定范围的子集。
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 $(function(){

    //设置默认选中项
    $("select:eq(0)").val(2);

    //如果多选,将返回一个数组,其包含所选的值。
    $.each($("select:eq(0)").val(),function(i,v){
      //$("select:eq(0)").val()应返回一个数组
      //遍历数组有5种方式
      console.log(v);
      console.log(数组名[i])
      //能用$(this)或者this的function()函数里就不用传值了
      alert($(this)[0]);//不理解但能取出值
      //=========this取值================
      //$(this)[0] == this = v
      alert(this);
      alert(this[0]);//不理解但能取出值
    });
    //获取Select选中匹配元素的当前值,即[即使多选也只]取得第一个匹配元素的val内容,是字符串所以要split()转成数组
    $.each($("select:eq(0) :selected").val().split(),function(i,v){
      //同样5种方式
      console.log(v);
    });

    //例遍dom元素比如selcted选项
    $.each($("select:eq(0) :selected"),function(i,v){//遍历选中的
    //$.each($("select:eq(0) option"),function(i,v){//遍历全部元素
        console.log(v);//遍历出<option value="2">香蕉</option>类似这种html元素
        //注意取值
        console.log(v.name);
        console.log(v.value);
        console.log(v.text);
        //=========this取值=================
        console.log(this)// 和上面取法类似,this相当于v
        console.log(this.name);
        console.log(this.value);
        console.log(this.text);
        //=======$(this)取值============
        //$(this)[0] == this = v
        alert($(this).val());
        alert($(this).text())======alert($(this).html());
    });

    //====================JQuery中使用each,如果需要退出 each 循环可使回调函数返回 return false;===========================
    //第一个为对象的成员名称或数组的索引,第二个为对应变量值或内容
   //例遍数组,同时使用元素索引和内容。(i是索引,n是内容)
   $.each([0,1,2], function(i, n){
        //遍历数组有5种方式
        alert( "Item #" + i + ": " + n );//取值有两种方式1、数组名[i]  2、n
        alert(数组名[i]);
        //=========$(this)取值================
        alert($(this)[0]);//不理解但能取出值
        //=========this取值================
        alert(this);
        alert(this[0]);//不理解但能取出值
      });

   //例遍对象,同时使用成员名称和变量内容。(i是成员名称,n是变量内容)
     $.each( { name: "John", lang: "JS" }, function(i, n){
          alert( "Name: " + i + ", Value: " + n );
        }); 

   //例遍dom元素,此处以一个input表单元素作为例子
   /*如果你dom中有一段这样的代码
    <input name="aaa" type="hidden" value="111" />
    <input name="bbb" type="hidden" value="222" />
    <input name="ccc" type="hidden" value="333" />
    <input name="ddd" type="hidden" value="444"/> */
    $.each($("input:hidden"), function(i,val){
      alert(val); //输出[object HTMLInputElement],因为它是一个表单元素。
      alert(i); //输出索引为0,1,2,3
      //注意底下取值
      alert(val.name); //输出name的值
      alert(val.value); //输出value的值
      //=========this取值=================
      console.log(this)// 和上面取法类似,this相当于val
      console.log(this.name);
      console.log(this.value);
      console.log(this.text);
      //=========$(this)取值============
       //$(this)[0] == this = v
      alert($(this).val());
      alert($(this).text())======alert($(this).html());
   });



    //==================================================================
  //事实证明双层循坏this,$(this)不管用,只能用function()里的函数value
  //循坏二维数组
   $.each([[1, 4, 3], [4, 6, 6], [7, 20, 9]]  , function(i, item){  
      $.each(item,function(k,v){//item相当于取每一个一维数组, 
          console.log(v);    
           });   
      }); 
   //循坏多个对象【常用在json串中】
   $.each( [{ name: "a", lang: "b" },{ name: "John", lang: "JS" }], function(i, n){
          $.each(n,function(k,v){
              alert( "Name: " + k + ", Value: " + v );
          });
        }); 
   each和map的比较

/*下面的例子是获取每一个多框的ID值;
       each方法:
         定义一个空数组,通过each方法,往数组添加ID值;最后将数组转换成字符串后,alert这个值;
          $(function(){
              var arr = [];
              $(":checkbox").each(function(index){
                  arr.push(this.id);
              });
              var str = arr.join(",");
              alert(str);
          })   

          map方法:

          将每个:checkbox执行return this.id;并将这些返回值,自动的保存为jQuery对象,然后用get方法将其转换成原生Javascript数组,再使用join方法转换成字符串,最后alert这个值;

          $(function(){
              var str = $(":checkbox").map(function() {
                  return this.id;
              }).get().join();    
              alert(str);
          })

当有需一个数组的值的时候,用map方法,很方便。*/

  });
 </script>
</head>
<table>
    <tr>
          <td>
              <!--multiple设定下拉框可以多选,size设定下拉框不呈现下拉方式,-->
              <select size="12" id="One" multiple="multiple">
                    <option value='1'>苹果</option>
                    <option value="2">香蕉</option>
                    <option value="3">草莓</option>
                    <option value="4">橘子</option>
              </select>
          </td>
          <td>
                  <input type="button" value=">>>"><br>
                  <input type="button" value="&nbsp;>&nbsp;"><br>
                  <input type="button" value="&nbsp;<&nbsp;"><br>
                  <input type="button" value="<<<"><br>

          </td>
          <td>
                 <select size="12" id="two" multiple="multiple">
                      <option value="5">葡萄</option>
                 </select>

          </td>

          <td>
                  <input type="button" value="&nbsp;up&nbsp;"><br><br>
                  <input type="button" value="down"><br>
          </td>
    </tr>
</table>

 

jQuery 遍历函数满含...

本文实例计算了jQuery中常用的遍历函数用法。分享给我们供大家参谋。具体如下:

1. children()函数

children()函数用于选择种种匹配成分的子成分,并以jQuery对象的款型重返。
您还足以行使选取器进一步收缩筛选范围,筛选出相符内定接收器的因素。

用法示举个例子下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
// 匹配id为n1的元素
var $n1 = $("#n1");
// 匹配n1的所有子元素
var $menu_li = $n1.children();
document.writeln( getTagsInfo( $menu_li ) ); // LI#n2,LI#n7,LI#n13
// 匹配n1所有含有类名active的子元素
var $active_menu_li = $n1.children(".active");
document.writeln( getTagsInfo( $active_menu_li ) ); // LI#n2
// 匹配$menu_li每个元素的所有span子元素
var $span = $menu_li.children("span");
document.writeln( getTagsInfo( $span ) ); // SPAN#n3,SPAN#n8,SPAN#n14

2. filter()函数

filter()函数用于筛选出符合钦定表明式的成分,并以jQuery对象的样式重临。
此地的表明式满含:选用器(字符串)、DOM成分(Element)、jQuery对象、函数。

用法示比方下:

/* $("li") 匹配n4、n5、n6这3个元素 */
//筛选出所有索引为偶数(序号为奇数)的元素,即n4、n6
document.writeln( $("li").filter( ":even" ).length ); // 2
//筛选出包含类名foo的元素,即n5
document.writeln( $("li").filter( $(".foo") ).length ); // 1
//筛选出所有带有class属性的元素,即n5、n6
document.writeln( $("li").filter( "[class]" ).length ); // 2
/* $("input") 匹配n8、n9这两个元素 */
//筛选出选中的元素,即n9
document.writeln( $("input").filter( ":checked" ).length ); // 1
var input = document.getElementsByName("codeplayer");
//筛选出所有的input元素,即n8、n9
document.writeln( $("input").filter( input ).length ); // 2
//$("div") 匹配n1、n2、n7这3个元素
//筛选出id和class属性相等的元素,即n2、n7
var $result = $("div").filter( function(index, element){
  // 函数内的this === element
  return this.id == this.className; 
} );
document.writeln( $result.length ); // 2

3. not()函数

not()函数用于从相配成分中删去切合钦赐表明式的要素,并以jQuery对象的样式重临保留的要素。
此间的表明式包括:选用器(字符串)、DOM元素(Element)、jQuery对象、函数。
与该函数绝没有错是add()函数,用于向当前相配成分中增进切合钦点表明式的要素。

用法示比方下:

/* $("li") 匹配n4、n5、n6这3个元素 */
//排除掉n6,剩下2个元素n4、n5
document.writeln( $("li").not( "#n6" ).length ); // 2
//排除掉带类名foo的元素,剩下n4、n6
document.writeln( $("li").not( $(".foo") ).length ); // 2
//排除掉所有带有class属性的元素,剩下n4
document.writeln( $("li").not( "[class]" ).length ); // 1
/* $("input") 匹配n8、n9这两个元素 */
//排除掉被选中的元素,剩下n8
document.writeln( $("input").not( ":checked" ).length ); // 1
var input = document.getElementsByTagName("input");
//排除掉所有input元素,返回空的jQuery对象
document.writeln( $("input").not( input ).length ); // 0
/* $("div") 匹配n1、n2、n7这3个元素 */
//排除掉id和class属性相等的元素,剩下n1
var $result = $("div").not( function(index, element){
  // 函数内的this === element
  return this.id == this.className; 
} );
document.writeln( $result.length ); // 1

4. add()函数

add()函数用于向当前匹配成分中加上符合钦赐表明式的要素,并以jQuery对象的情势重回。
此处的表明式包涵:选用器(字符串)、HTML内容(字符串)、DOM成分(Element)、jQuery对象。
与该函数绝对的是not()函数,用于从日前相配成分中移除相符钦点表达式的成分。

用法示举个例子下:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
//匹配所有的p元素,再加上所有的label元素
var $elements1 = $("p").add("label");
document.writeln( getTagsInfo( $elements1 ) ); // #n1,#n4,#n9,#n11
var $matches = $("span.active").add( document.getElementsByTagName("label") );
document.writeln( getTagsInfo( $matches ) ); // #n4,#n8,#n11,#n12
var $elements2 = $("label").add( $("strong") );
document.writeln( getTagsInfo( $elements2 ) ); // #n4,#n7,#n11
var $elements3 = $("span.active").add( "label", $("#n9") );
document.writeln( getTagsInfo( $elements3 ) ); // #n8,#n11,#n12
var $elements4 = $("p").add(".active").add("span:only-child");
document.writeln( getTagsInfo( $elements4 ) ); // #n1,#n3,#n6,#n7,#n8,#n9,#n12

5. slice()函数

slice()函数用于采取相配成分中生龙活虎段连接的元素,并以jQuery对象的形式再次来到。
该函数归于jQuery对象(实例)。

用法示举例下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
/* $("li") 匹配n4、n5、n6、n7、n8这5个元素 */
var $li = $("li");
// 选取第2个元素
var $sub1 = $("li").slice( 1, 2);
document.writeln( getTagsInfo( $sub1 ) ); // LI#n5
// 选取第4、5个元素
var $sub2 = $("li").slice( 3 );
document.writeln( getTagsInfo( $sub2 ) ); // LI#n7,LI#n8
// 选取第1~4个元素
// startIndex = length + (-5) = 0,endIndex = length + (-1) = 4
var $sub3 = $("li").slice( -5, -1);
document.writeln( getTagsInfo( $sub3 ) ); // LI#n4,LI#n5,LI#n6,LI#n7

6. parent()函数

parent()函数用于选用各类相称成分的父成分,并以jQuery对象的款型重临。
您还足以应用选择器来更是降低选择范围,筛选出相符钦点选取器的因素。
该函数归属jQuery对象(实例)。

用法示举例下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
var $n2 = $("#n2");
// 获取n2的父元素
var $parents1 = $n2.parent();
document.writeln( getTagsInfo( $parents1 ) ); // DIV#n1
var $p = $("p");
// 获取所有p元素的父元素
var $parents2 = $p.parent();
document.writeln( getTagsInfo( $parents2 ) ); // DIV#n1,DIV#n5
// 获取所有p元素的包含类名"bar"的父元素
var $parents3 = $p.parent(".bar");
document.writeln( getTagsInfo( $parents3 ) ); // DIV#n5
var $foo = $(".foo");
//获取所有包含类名"foo"的元素的父元素
var $parents4 = $foo.parent();
document.writeln( getTagsInfo( $parents4 ) ); // P#n3,DIV#n5

7. parents()函数

parents()函数用于选拔各种相配成分的上代成分,并以jQuery对象的花样重回。
你仍然是能够接纳选用器来特别压缩选择范围,只选取个中切合内定选取器的要素。
该函数归于jQuery对象(实例)。

用法示比如下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
var $n4 = $("#n4");
//获取n4的祖先元素
var $parents1 = $n4.parents();
document.writeln( getTagsInfo( $parents1 ) ); // P#n3,DIV#n1,BODY,HTML
var $p = $("p");
//获取所有p元素的祖先元素
var $parents2 = $p.parents();
document.writeln( getTagsInfo( $parents2 ) ); // DIV#n5,DIV#n1,BODY,HTML
//获取所有p元素的包含类名"bar"的祖先元素
var $parents3 = $p.parents(".bar");
document.writeln( getTagsInfo( $parents3 ) ); // DIV#n5
var $foo = $(".foo");
//获取所有包含类名"foo"的元素的祖先元素中的div元素
var $parents4 = $foo.parents("div");
document.writeln( getTagsInfo( $parents4 ) ); // DIV#n5,DIV#n1

8. siblings()函数

siblings()函数用于接收各种相配成分的具备同辈成分(不包蕴本人),并以jQuery对象的情势再次回到。
你还足以行使选拔器来一发压缩选用范围,筛选出切合钦定选拔器的因素。
该函数归于jQuery对象(实例)。

用法示举例下:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n4 = $("#n4");
//匹配n4的所有同辈元素(同辈元素不会包括n4自己,下同)
var $elements = $n4.siblings( );
document.writeln( getTagsInfo( $elements ) ); // #n2,#n5,#n7,#n8
//匹配n4所有的同辈span元素
var $matches = $n4.siblings("span");
document.writeln( getTagsInfo( $matches ) ); // #n2,#n5,#n8
var $label = $("label");
//匹配所有label元素的含有类名"active"的同辈元素
var $actives = $label.siblings(".active");
document.writeln( getTagsInfo( $actives ) ); // #n7,#n8,#n12

9. prev()与prevAll()函数

prev()函数用于筛选各类相称成分从前紧邻的同辈成分,并以jQuery对象的款型再次回到。
您还足以应用钦赐的选用器进一层裁减筛选范围,筛选出符合钦点选择器的要素。
与该函数绝没错是next()函数,用于挑选各样相配成分之后紧邻的同辈成分。

prevAll()函数用于选择各样相称元素在此之前的具备同辈成分,并以jQuery对象的花样重返。
你还是能够选取接受器来越发压缩接收范围,筛选出相符内定选拔器的成分。
与该函数相没错是nextAll()函数,用于选拔种种相配元素之后的具备同辈元素。

prev()用法示举个例子下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
//匹配所有span元素:e2、e3、e4、e5、e7、e9
var $span = $("span");
//匹配所有span元素之前紧邻的同辈元素:e3、e2、e8
//e2 => 无【没有上一个紧邻的同辈元素,因为它是同辈元素中的第一个,下同】
//e3 => 无
//e4 => e3
//e5 => e2
//e7 => 无
//e9 => e8
var $span_prev = $span.prev( );
document.writeln( getTagsInfo( $span_prev ) ); // SPAN#e3,SPAN#e2,A#e8
//匹配所有span元素之前紧邻的同辈span元素
var $span_prev_span = $span.prev( "span" );
document.writeln( getTagsInfo( $span_prev_span ) ); // SPAN#e3,SPAN#e2

prevAll()用法示举例下:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n6 = $("#n6");
//匹配n6之前所有的同辈元素
var $n6_prevAll = $n6.prevAll();
document.writeln( getTagsInfo( $n6_prevAll ) ); // #n5,#n4,#n2
//匹配n6之前的所有同辈strong元素
var $n6_prevAll_strong = $n6.prevAll("strong");
document.writeln( getTagsInfo( $n6_prevAll_strong ) ); // #n4
var $label = $("label");
//匹配所有label元素之前的包含类名"active"的同辈元素
var $label_prevAll_active = $label.prevAll(".active");
document.writeln( getTagsInfo( $label_prevAll_active ) ); // #n10,#n5,#n4

10. next()函数与nextAll()函数

next()函数用于筛选每种相配成分之后紧邻的同辈成分,并以jQuery对象的样式重临。
您还足以使用钦点的选取器进一层减弱筛选范围,筛选出适合钦定接纳器的要素。
与该函数绝没错是prev()函数,用于筛选每一个匹配成分从前紧邻的同辈元素。

nextAll()函数用于选拔各种相称成分之后的有着同辈成分,并以jQuery对象的花样再次来到。
你还能行使接纳器来尤其压缩采取范围,挑选出符合内定选拔器的成分。
与该函数相对的是prevAll()函数,用于选择各种相称成分从前的具有同辈成分。

next()用法示比如下:

// 返回jQuery对象所有匹配元素的标识信息数组
// 每个元素形如:tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
  return $doms.map(function(){
    return this.tagName + (this.id ? "#" + this.id : "");
  }).get();
}
// 匹配所有span元素:e2、e3、e4、e5、e7、e9
var $span = $("span");
// 匹配所有span元素之后紧邻的同辈元素:e5、e4、e8
// e2的下一个紧邻的同辈元素是e5
// e3的是e4
// e4没有(因为它是同辈元素中的最后一个,下同)
// e5没有
// e7的是e8
// e9没有
var $span_next = $span.next( );
document.writeln( getTagsInfo( $span_next ) ); // SPAN#e5,SPAN#e4,A#e8
// 匹配所有span元素之后紧邻的同辈span元素
var $span_next_span = $span.next( "span" );
document.writeln( getTagsInfo( $span_next_span ) ); // SPAN#e5,SPAN#e4

nextAll()用法示比方下:

//返回jQuery对象所有匹配元素的标识信息数组
//每个元素形如:#id
function getTagsInfo($doms){
  return $doms.map(function(){
    return "#" + this.id;
  }).get();
}
var $n4 = $("#n4");
//匹配n4之后所有的同辈元素
var $n4_nextAll = $n4.nextAll();
document.writeln( getTagsInfo( $n4_nextAll ) ); // #n5,#n7,#n8
//匹配n4之后的所有同辈strong元素
var $n4_nextAll_strong = $n4.nextAll("strong");
document.writeln( getTagsInfo( $n4_nextAll_strong ) ); // #n7
var $label = $("label");
var $label_nextAll_active = $label.nextAll(".active");
document.writeln( getTagsInfo( $label_nextAll_active ) ); // #n7,#n8,#n12

愿意本文所述对我们的jquery程序设计有着帮忙。

你也许感兴趣的稿子:

  • jQuery 遍历函数详细明白
  • 浅析jQuery 遍历函数,javascript中的each遍历
  • jquery遍历函数siblings()用法实例
  • 行使JQuery选拔HTML遍历函数的点子

本文由ag旗舰厅官网发布于计算机网络,转载请注明出处:jQuery中常用的遍历函数用法实例总结,each遍历数

关键词:

上一篇:没有了

下一篇:没有了