zoukankan      html  css  js  c++  java
  • js中的循环

    js中的循环是我们经常要用到的,现在进行一些归纳。

    一.javascript种的循环。

    1.循环对象

    var o = {
        name: 'Jack',
        age: 20,
        city: 'Beijing'
    };
    for (var key in o) {
        if (o.hasOwnProperty(key)) {
            console.log(key); // 'name', 'age', 'city'
            console.log(o[key]); //'jack',20,'Beijing'
        }
    }

    2.循环数组

    var arr = ['Bart', 'Lisa', 'Adam'];
    for (var i in arr){
      console.log("hello,"+arr[i]);
    }

    或者

    var a = ['A', 'B', 'C'];
    a.forEach(function (element, index, array) {
        // element: 指向当前元素的值
        // index: 指向当前索引
        // array: 指向Array对象本身
        console.log(element + ', index = ' + index);
    });

    可根据兴趣写回调决定回调函数中的参数

    var a = ['A', 'B', 'C'];
    a.forEach(function (element) {
        console.log(element);
    });

    循环set和map

    var s = new Set(['A', 'B', 'C']);
    s.forEach(function (element, sameElement, set) {
      // element: 指向当前元素的值 
      // sameElement: 也是当前元素
      // set: 指向set对象本身
        console.log(element);
    });
    var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
    m.forEach(function (value, key, map) {
        console.log(value);
    });

    二.jquery的循环

    基本是循环数组。

    1.取得jquery对象后循环

     $("li").each(function(){
        alert($(this).text())
      });

    其实方法的完整形式是

    $(selector).each(function(index,element))

    可以根据自己的需要添加参数。

    2.不取得jquery对象,直接使用$.each()方法。第一个参数是被循环的数组对象,第二个为回调函数。

    var userList = [11,22,33,44];
      $.each(userList,function(i,item){
        console.log(i, item);
    
      });

     3.遍历选择器得到的元素

      $(function(){
                var selector=$('ul.lang li.lang-javascript');
                //var selector=$('div.testing li.lang-javascript');
                console.log(selector.length);
                selector.each(function(i){
                    var _this=$(this);
                    if(_this[0].tagName=="DIV"){
                        console.log(_this.html());
                    }else if(_this[0].tagName=="INPUT"){
                        console.log(_this.val());
                    }else{
                        console.log(_this.text());
                    }
                });
            });
  • 相关阅读:
    CSS知识(18---21.CSS完毕)
    CSS 知识(13---)
    CSS编辑知识 ( 1---12 )
    CSS 选择器
    前端CSS
    修建泳池的题解
    2020-3-7模拟赛题解
    奶牛排队的题解
    数的拆分的题解
    青蛙王子的题解
  • 原文地址:https://www.cnblogs.com/roy-blog/p/8214747.html
Copyright © 2011-2022 走看看