JavaScript 11.08 (2)

JQuery 第二天

1.1 js中的对象

javascript也是一门 面向对象语言，所以也有对象的概念。
​
我们在编程中有一个思想：  间接 
​
所以就产生了能存储数据的存储单元。
​
变量： 是编程中最小的存储单元，能存储单一数据。（单人间）
      但是多个变量存储一组数据的时候没有联系。
      例如： var  a=180;var b=190;var c=90;var d=100;
      此时有四个变量，分别存储的是两个人的 身高和体重。 此时我们这四个变量 哪两个是一组 我们无法区分。
 
​
数组： 能存储一组数据集合。此时我们使用数组存储一组数据
      var  arr1 = [180,100]; var arr2 = [190,90];
      但是数组存取数据的形式是操作索引值。索引值从0开始的编号 所以数组存储数据的局限性就是没有语义化。
      例如：  arr1[0]  我们只能从这句代码中得知的信息是 从数组arr1中获取索引为0的数据
      那么数组中索引的0的数据 代表什么我们无从得知
​
​
object对象类型 既能存储一组数据，并且还有语义化。因为对象存储数据的形式是 key：value的形式 key就是这个数据的关键字  value就是要存储的数据
注意 key不能重复 value可以重复
​

1.2 js中对象的创建与存取


        <script type="text/javascript">
            
            /**
             * 字面量总结
             * var  a = 10;     数字类型
             * var  b = "asdf"; 字符串类型
             * var  c = [];     数组 
             * var  d = {};     对象
             * var  e = /123/;     正则
             */
            
            var  obj = { 
                "name"     : "张三"  ,
                "nickname" : "法外狂徒"  ,
                "height"   :  180 
            };
            
            /* 取 */
            var  a = obj["name"];
            
            var  b = "nickname";
            var  c = obj[  b  ];
            
            var  d = obj.height;
            
            //var  e = obj.b;
            /* 存 */
            obj["address"]  = "北京";
            obj.hobby = "唱";
            
            console.log(obj)
            
            
        </script>
​
<script>
    
            var  obj = { 
                "name"     : "张三"  ,
                "nickname" : "法外狂徒"  ,
                "height"   :  180  ,
                "hobby"    : ["唱","跳","rap","篮球"] ,
                "friends"  : [
                    {"name":"李四" , "age":18  },
                    {"name":"万物" , "age":18  },
                    {"name":"赵六" , "age":18  }
                ]
            };
            
            // 请获取对象的名字
            var  a = obj.name;
            console.log(a);
            // 请获取对象 的 第三大爱好
            var b = obj.hobby[2];
            console.log(b);
            // 请获取对象 的 第二个朋友的年龄
            console.log(  obj["friends"][1]["age"] );
            // 对象有个新爱好  王者荣耀
            obj.hobby.push(  "王者荣耀" );
            // 对象有个新朋友  马奇 18
            obj.friends.push(     {"name":"马奇" , "age":18  }      );
            console.log(obj);
            
​
</script>
​
js中循环遍历对象 使用的是  for-in循环
​
<script type="text/javascript">
            
            var  obj = { 
                "name"     : "张三"  ,
                "nickname" : "法外狂徒"  ,
                "height"   :  180  ,
                "hobby"    : ["唱","跳","rap","篮球"] ,
                "friends"  : [
                    {"name":"李四" , "age":18  },
                    {"name":"万物" , "age":18  },
                    {"name":"赵六" , "age":18  }
                ]
            };
            
             for( var   a   in   obj   ){
                 
console.log(   a   +  "-----------------" +  obj[ a ]  );

     }
</script>
​

 

1.3 省市联动


<body>
​
        <select id="p"></select>省
        <select id="c"></select>市
        
        <script type="text/javascript" src="js/jq.js"></script>
        <script type="text/javascript">
        
             /* 数据源头  */
            var  data = {
                "河南"  :  ["郑州","开封","洛阳","许昌","驻马店","周口","其他"]    ,
                "湖南"  :  ["长沙" , "其他"]    ,
                "云南"  :  ["昆明", "大理" , "香格里拉","玉溪","其它"]    ,
                "海南"  :  ["三亚","海口","其他"],
                "haha南"  :  ["三亚","海口","其他"]
            };
            
            for( var  a    in    data ){
                $("<option>"+a+"</option>").appendTo("#p");
            }
            
            $("#p").change( function(){
                 // 1 获取当前的省份
                 var  a = $("#p").val();
                 // 2 根据省获取对应的城市数组
                 var  arr = data[a];
                 // 2.5 清空之前的数据
                 $("#c").html("");
                 // 3 遍历数组动态生成到 #c
                 for(var i=0;i<arr.length;i++){
                     $("<option>"+arr[i]+"</option>").appendTo("#c");
                 }
            } );
        
            $("#p").change();
        </script>
        
    </body>
​

 

1.4 商品展示

posted @ 2021-11-08 19:25  吴光熠  阅读(182)  评论(0)    收藏  举报