[关闭]
@GivenCui 2016-06-17T18:54:09.000000Z 字数 115506 阅读 1406

刘升旭经典课上demo

js上机练习

目录

JS课程合集跳转链接

名片管理器

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>名片管理器</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         /*
  10.             需求：名片管理器管理名片
  12.             构造函数：名片、名片管理器
  13.             名片属性：姓名、公司、电话、邮箱
  14.             名片管理器属性：名片数组
  15.             名片管理器方法：添加名片、显示所有名片信息、删除名片
  16.         */
  18.         //名片构造函数
  19.         function Card (name, company, phoneNum, mail) {
  20.             this.name = name;
  21.             this.company = company;
  22.             this.phoneNum = phoneNum;
  23.             this.mail = mail;
  24.         }
  26.         //名片管理器构造函数
  27.         function CardManager () {
  28.             //名片数组的属性，用来存储名片的
  29.             this.cards = new Array();
  30.         }
  32.         //添加名片的方法
  33.         CardManager.prototype.addCard = function (newCard) {
  34.             //把名片添加到管理器的名片数组里
  35.             this.cards.push(newCard);
  36.         }
  38.         //显示所有名片信息的方法
  39.         CardManager.prototype.showAllCardInfo = function () {
  40.             //通过循环遍历卡片数组得到每个卡片对象
  41.             for (var i = 0; i < this.cards.length; i++) {
  42.                 var tempCard = this.cards[i];
  43.                 //格式化输出卡片信息
  44.                 console.log(" \n 名字：" + tempCard.name + " \n 公司：" + tempCard.company + " \n 电话：" + tempCard.phoneNum + " \n 邮箱：" + tempCard.mail);
  45.             }
  46.         }
  48.         //模仿indexOf方法
  49.         Array.prototype.myIndexOf = function (removeCard) {
  50.             //this指向的是当前的数组对象
  51.             for (var i = 0; i < this.length; i++) {
  52.                 if (this[i] === removeCard) {
  53.                     return i;
  54.                 }   
  55.             }
  56.             return -1;
  57.         }
  59.         //模拟其他面向对象语言的按照指定元素删除的方法
  60.         Array.prototype.removeObj = function (removeObj) {
  61.             //this指向的是当前的数组对象
  62.             var idx = this.myIndexOf(removeObj);
  63.             //判断找没找到
  64.             if (idx > -1) {
  65.                 this.splice(idx, 1);
  66.                 return;
  67.             }
  69.             console.log("没有找到要删除的名片！");
  70.         }
  74.         //删除名片的方法(因为JS中，没有按照指定元素删除的方法，所以我们要通过给数组构造函数的原型添加额外的方法)
  75.         CardManager.prototype.removeCard = function (removeCard) {
  76.             //调用咱们自己写的删除方法
  77.             this.cards.removeObj(removeCard);
  78.         }
  81.         //创建名片管理器对象
  82.         var cardManager = new CardManager();
  84.         //创建很多名片对象
  85.         var card1 = new Card("刘轶佳", "育知同创", "18688889999", "liuyijia@163.com");
  86.         var card2 = new Card("李慧玲", "育知同创", "13600005555", "lihuiling@126.com");
  87.         var card3 = new Card("刘升旭", "苹果", "18612597091", "278305920@qq.com");
  89.         //添加名片 (数组是有序可以重复的)
  90.         cardManager.addCard(card2);
  91.         cardManager.addCard(card3);
  92.         cardManager.addCard(card1);
  94.         //显示所有名片信息
  95.         cardManager.showAllCardInfo();
  97.         //删除指定名片
  98.         cardManager.removeCard(card3);
  100.         //打印分隔符
  101.         console.log("---------------------");
  103.         //显示所有名片信息
  104.         cardManager.showAllCardInfo();
  106.         var card4 = new Card("abc", "ddd", "1833", "sdf@174.com");
  108.         //删除指定名片
  109.         cardManager.removeCard(card4);
  111.         //打印分隔符
  112.         console.log("---------------------");
  114.         //显示所有名片信息
  115.         cardManager.showAllCardInfo();
  120.     </script>
  121. </body>
  122. </html>

书签管理器

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>书签管理器</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 需求：通过书签管理器来管理网页中的书签项。具备书签的增删改查功能。
  12.                 构造函数：书签管理器、书签
  13.                 书签的属性：网址、标题、星级
  14.                 书签管理的属性：书签数组
  15.                 书签管理的方法：
  16.                     1、添加书签（要求：不能重复添加标题或网址，也就是说只要符合一个条件就不让添加）
  17.                     2、显示所有标签信息（要求：按照星级排序）
  18.                     3、删除标签（通过标题删除）
  19.                     4、修改标签（通过标题去修改）
  20.             */
  22.             //书签构造函数
  23.             function Book (url, title, star) {
  24.                 this.url = url;
  25.                 this.title = title;
  26.                 this.star = star;
  27.             }
  29.             //书签管理器构造函数
  30.             function BookManager () {
  31.                 //属性：书签数组，用来存储很多书签的
  32.                 this.books = new Array();
  33.             }
  35.             //添加书签的方法（要求：不能重复添加标题或网址，也就是说只要符合一个条件就不让添加）
  36.             BookManager.prototype.addBook = function (newBook) {
  37.                 //通过遍历得到书签数组中的每一个书签，目的是和新加的书签做判断。
  38.                 for (var i = 0; i < this.books.length; i++) {
  39.                     //得到每一个书签对象
  40.                     var tempBook = this.books[i];
  41.                     //判断新加的书签对象的标题或网址是否和之前存在的书签的标题或网址相同。
  42.                     if (tempBook.title === newBook.title || tempBook.url === newBook.url) {
  43.                         console.log("不能重复添加网址！");
  44.                         //return; 函数结束
  45.                         return;
  46.                     }
  47.                 }
  48.                 //经过循环判断没有重复的，就可以添加新书签
  49.                 this.books.push(newBook);
  50.             }
  52.             //显示所有标签信息的方法（要求：按照星级排序）
  53.             BookManager.prototype.showAllBookInfo = function () {
  54.                 //冒泡排序，星级从小到大排序
  55.                 for (var i = 0; i < this.books.length - 1; i++) {
  56.                     for (var j = 0; j < this.books.length - 1 - i; j++) {
  57.                         //把位置为j 和 j +１的对象取出来
  58.                         var tempBook1 = this.books[j];
  59.                         var tempBook2 = this.books[j + 1];
  60.                         //判断相邻两个对象的星级属性大小
  61.                         if (tempBook1.star >= tempBook2.star) {
  62.                             //利用数组的splice函数，来实现数组两个位置元素的替换
  63.                             this.books.splice(j, 1, tempBook2);
  64.                             this.books.splice(j + 1, 1, tempBook1);
  65.                         }
  66.                     }
  67.                 }
  69.                 //格式化输出书签信息
  70.                 for (var i = 0; i < this.books.length; i++) {
  71.                     //得到每一个书签对象
  72.                     var tempBook = this.books[i];
  73.                     console.log(" \n 标题：" + tempBook.title + " \n 网址：" + tempBook.url + " \n 星级：" + tempBook.star);
  74.                 }
  75.             }
  77.             //给数组构造函数的原型添加方法(查找元素的下标)
  78.             Array.prototype.myIndexOf = function (removeTitle) {
  79.                 for (var i = 0; i < this.length; i++) {
  80.                     //得当每一个数组里的对象
  81.                     var tempObj = this[i];
  82.                     //判断该对象的title属性 是否等于 要删除的title
  83.                     //如果相等，就说明找到要删除的对象了。返回其下标
  84.                     if (tempObj.title === removeTitle) {
  85.                         return i;
  86.                     }
  87.                 }
  88.                 return -1;
  89.             }
  91.             //给数组构造函数的原型添加方法(通过指定元素的标题删除)
  92.             Array.prototype.removeObj = function (removeTitle) {
  93.                 var idx = this.myIndexOf(removeTitle);
  94.                 if (idx > -1) {
  95.                     this.splice(idx, 1);
  96.                     return;
  97.                 }
  98.                 console.log("没有找到该标题的书签！");
  99.             }
  101.             //删除书签（通过标题删除）
  102.             BookManager.prototype.removeBook = function (removeTitle) {
  103.                 // for (var i = 0; i < this.books.length; i++) {
  104.                 //  if (this.books[i].title === removeTitle) {
  105.                 //      this.books.splice(i, 1);
  106.                 //      break;
  107.                 //  }
  108.                 // }
  109.                 this.books.removeObj(removeTitle);
  110.             }
  112.             //修改书签（通过标题去修改网址）
  113.             BookManager.prototype.modifyBookUrlByTitle = function (targetTitle, modiyUrl) {
  114.                 //遍历书签数组，得到每一个书签对象
  115.                 for (var i = 0; i < this.books.length; i++) {
  116.                     //得到每一个书签对象
  117.                     var tempBook = this.books[i];
  118.                     //找到要修改的title书签对象
  119.                     if (tempBook.title === targetTitle) {
  120.                         //找到后，修改该书签的url
  121.                         tempBook.url = modiyUrl;
  122.                         return;
  123.                     }
  124.                 }
  125.                 console.log("没找到您要修改的书签！");
  126.             }
  128.             /************ 以上是构造函数相关 ************/
  130.             //创建一个书签管理器对象
  131.             var bookManager = new BookManager();
  132.             //创建一堆书签对象
  133.             var book1 = new Book("www.baidu.com", "百度", 4);
  134.             var book2 = new Book("www.tencent.com", "腾讯", 5);
  135.             var book3 = new Book("www.163.com", "网易", 2);
  136.             var book4 = new Book("www.baidu.com", "必读", 3);
  137.             var book5 = new Book("www.sina.com", "百度", 1);
  140.             //添加书签
  141.             bookManager.addBook(book1);
  142.             //添加书签
  143.             bookManager.addBook(book2);
  144.             //添加书签
  145.             bookManager.addBook(book3);
  146.             //添加书签
  147.             bookManager.addBook(book4);
  148.             //添加书签
  149.             bookManager.addBook(book5);
  151.             //显示所有书签信息
  152.             bookManager.showAllBookInfo();
  154.             //删除书签
  155.             bookManager.removeBook("腾讯");
  157.             //打印分隔符
  158.             console.log("===================");
  160.             //显示所有书签信息
  161.             bookManager.showAllBookInfo();
  163.             //修改书签（通过标题修改网址）
  164.             bookManager.modifyBookUrlByTitle("网易", "www.126.com");
  166.             //打印分隔符
  167.             console.log("===================");
  169.             //显示所有书签信息
  170.             bookManager.showAllBookInfo();
  172.             //修改书签（通过标题修改网址）
  173.             bookManager.modifyBookUrlByTitle("网易2", "www.120.com");
  175.             //打印分隔符
  176.             console.log("===================");
  178.             //显示所有书签信息
  179.             bookManager.showAllBookInfo();
  181.         </script>
  182.     </body>
  183. </html>

json文件

car.json

  1. {
  2.   "ListContents" : [
  3.     {
  4.       "GroupCount" : "2",
  5.       "GroupInfo" : [
  6.         {
  7.           "BrandID" : "1",
  8.           "MainBrandName" : "奥迪",
  9.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/1.png"
  10.         },
  11.         {
  12.           "BrandID" : "57",
  13.           "MainBrandName" : "阿斯顿·马丁",
  14.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/57.png"
  15.         }
  16.       ],
  17.       "PinYin" : "A"
  18.     },
  19.     {
  20.       "GroupCount" : "16",
  21.       "GroupInfo" : [
  22.         {
  23.           "BrandID" : "58",
  24.           "MainBrandName" : "保时捷",
  25.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/58.png"
  26.         },
  27.         {
  28.           "BrandID" : "59",
  29.           "MainBrandName" : "宾利",
  30.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/59.png"
  31.         },
  32.         {
  33.           "BrandID" : "2",
  34.           "MainBrandName" : "北汽制造",
  35.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/2.png"
  36.         },
  37.         {
  38.           "BrandID" : "3",
  39.           "MainBrandName" : "奔驰",
  40.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/3.png"
  41.         },
  42.         {
  43.           "BrandID" : "4",
  44.           "MainBrandName" : "宝马",
  45.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/4.png"
  46.         },
  47.         {
  48.           "BrandID" : "5",
  49.           "MainBrandName" : "别克",
  50.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/5.png"
  51.         },
  52.         {
  53.           "BrandID" : "6",
  54.           "MainBrandName" : "比亚迪",
  55.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/6.png"
  56.         },
  57.         {
  58.           "BrandID" : "21",
  59.           "MainBrandName" : "本田",
  60.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/21.png"
  61.         },
  62.         {
  63.           "BrandID" : "37",
  64.           "MainBrandName" : "标致",
  65.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/37.png"
  66.         },
  67.         {
  68.           "BrandID" : "107",
  69.           "MainBrandName" : "奔腾",
  70.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/107.png"
  71.         },
  72.         {
  73.           "BrandID" : "122",
  74.           "MainBrandName" : "宝骏",
  75.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/122.png"
  76.         },
  77.         {
  78.           "BrandID" : "138",
  79.           "MainBrandName" : "巴博斯",
  80.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/138.png"
  81.         },
  82.         {
  83.           "BrandID" : "135",
  84.           "MainBrandName" : "北京汽车",
  85.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/135.png"
  86.         },
  87.         {
  88.           "BrandID" : "150",
  89.           "MainBrandName" : "北汽幻速",
  90.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/150.png"
  91.         },
  92.         {
  93.           "BrandID" : "153",
  94.           "MainBrandName" : "北汽威旺",
  95.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/153.png"
  96.         },
  97.         {
  98.           "BrandID" : "156",
  99.           "MainBrandName" : "北汽新能源",
  100.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/156.png"
  101.         }
  102.       ],
  103.       "PinYin" : "B"
  104.     },
  105.     {
  106.       "GroupCount" : "4",
  107.       "GroupInfo" : [
  108.         {
  109.           "BrandID" : "116",
  110.           "MainBrandName" : "长安汽车",
  111.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/116.png"
  112.         },
  113.         {
  114.           "BrandID" : "7",
  115.           "MainBrandName" : "长安商用",
  116.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/7.png"
  117.         },
  118.         {
  119.           "BrandID" : "8",
  120.           "MainBrandName" : "长城",
  121.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/8.png"
  122.         },
  123.         {
  124.           "BrandID" : "10",
  125.           "MainBrandName" : "昌河",
  126.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/10.png"
  127.         }
  128.       ],
  129.       "PinYin" : "C"
  130.     },
  131.     {
  132.       "GroupCount" : "10",
  133.       "GroupInfo" : [
  134.         {
  135.           "BrandID" : "14",
  136.           "MainBrandName" : "东风风行",
  137.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/14.png"
  138.         },
  139.         {
  140.           "BrandID" : "44",
  141.           "MainBrandName" : "东南",
  142.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/44.png"
  143.         },
  144.         {
  145.           "BrandID" : "61",
  146.           "MainBrandName" : "道奇",
  147.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/61.png"
  148.         },
  149.         {
  150.           "BrandID" : "47",
  151.           "MainBrandName" : "大众",
  152.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/47.png"
  153.         },
  154.         {
  155.           "BrandID" : "93",
  156.           "MainBrandName" : "大迪",
  157.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/93.png"
  158.         },
  159.         {
  160.           "BrandID" : "117",
  161.           "MainBrandName" : "东风小康",
  162.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/117.png"
  163.         },
  164.         {
  165.           "BrandID" : "114",
  166.           "MainBrandName" : "东风风神",
  167.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/114.png"
  168.         },
  169.         {
  170.           "BrandID" : "146",
  171.           "MainBrandName" : "东风风度",
  172.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/146.png"
  173.         },
  174.         {
  175.           "BrandID" : "140",
  176.           "MainBrandName" : "DS",
  177.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/140.png"
  178.         },
  179.         {
  180.           "BrandID" : "141",
  181.           "MainBrandName" : "东风御风",
  182.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/141.png"
  183.         }
  184.       ],
  185.       "PinYin" : "D"
  186.     },
  187.     {
  188.       "GroupCount" : "6",
  189.       "GroupInfo" : [
  190.         {
  191.           "BrandID" : "62",
  192.           "MainBrandName" : "法拉利",
  193.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/62.png"
  194.         },
  195.         {
  196.           "BrandID" : "46",
  197.           "MainBrandName" : "丰田",
  198.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/46.png"
  199.         },
  200.         {
  201.           "BrandID" : "15",
  202.           "MainBrandName" : "菲亚特",
  203.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/15.png"
  204.         },
  205.         {
  206.           "BrandID" : "16",
  207.           "MainBrandName" : "福特",
  208.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/16.png"
  209.         },
  210.         {
  211.           "BrandID" : "17",
  212.           "MainBrandName" : "福田",
  213.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/17.png"
  214.         },
  215.         {
  216.           "BrandID" : "18",
  217.           "MainBrandName" : "福迪",
  218.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/18.png"
  219.         }
  220.       ],
  221.       "PinYin" : "F"
  222.     },
  223.     {
  224.       "GroupCount" : "4",
  225.       "GroupInfo" : [
  226.         {
  227.           "BrandID" : "55",
  228.           "MainBrandName" : "广汽吉奥",
  229.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/55.png"
  230.         },
  231.         {
  232.           "BrandID" : "115",
  233.           "MainBrandName" : "GMC",
  234.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/115.png"
  235.         },
  236.         {
  237.           "BrandID" : "120",
  238.           "MainBrandName" : "广汽乘用车",
  239.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/120.png"
  240.         },
  241.         {
  242.           "BrandID" : "133",
  243.           "MainBrandName" : "观致",
  244.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/133.png"
  245.         }
  246.       ],
  247.       "PinYin" : "G"
  248.     },
  249.     {
  250.       "GroupCount" : "10",
  251.       "GroupInfo" : [
  252.         {
  253.           "BrandID" : "119",
  254.           "MainBrandName" : "海格",
  255.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/119.png"
  256.         },
  257.         {
  258.           "BrandID" : "104",
  259.           "MainBrandName" : "华泰汽车",
  260.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/104.png"
  261.         },
  262.         {
  263.           "BrandID" : "143",
  264.           "MainBrandName" : "哈弗",
  265.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/143.png"
  266.         },
  267.         {
  268.           "BrandID" : "96",
  269.           "MainBrandName" : "海马",
  270.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/96.png"
  271.         },
  272.         {
  273.           "BrandID" : "64",
  274.           "MainBrandName" : "悍马",
  275.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/64.png"
  276.         },
  277.         {
  278.           "BrandID" : "22",
  279.           "MainBrandName" : "红旗",
  280.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/22.png"
  281.         },
  282.         {
  283.           "BrandID" : "43",
  284.           "MainBrandName" : "华普",
  285.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/43.png"
  286.         },
  287.         {
  288.           "BrandID" : "40",
  289.           "MainBrandName" : "黄海汽车",
  290.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/40.png"
  291.         },
  292.         {
  293.           "BrandID" : "41",
  294.           "MainBrandName" : "汇众",
  295.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/41.png"
  296.         },
  297.         {
  298.           "BrandID" : "20",
  299.           "MainBrandName" : "哈飞",
  300.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/20.png"
  301.         }
  302.       ],
  303.       "PinYin" : "H"
  304.     },
  305.     {
  306.       "GroupCount" : "8",
  307.       "GroupInfo" : [
  308.         {
  309.           "BrandID" : "25",
  310.           "MainBrandName" : "江淮汽车",
  311.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/25.png"
  312.         },
  313.         {
  314.           "BrandID" : "27",
  315.           "MainBrandName" : "Jeep",
  316.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/27.png"
  317.         },
  318.         {
  319.           "BrandID" : "29",
  320.           "MainBrandName" : "金杯",
  321.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/29.png"
  322.         },
  323.         {
  324.           "BrandID" : "30",
  325.           "MainBrandName" : "江铃",
  326.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/30.png"
  327.         },
  328.         {
  329.           "BrandID" : "19",
  330.           "MainBrandName" : "吉利汽车",
  331.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/19.png"
  332.         },
  333.         {
  334.           "BrandID" : "65",
  335.           "MainBrandName" : "捷豹",
  336.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/65.png"
  337.         },
  338.         {
  339.           "BrandID" : "144",
  340.           "MainBrandName" : "金龙",
  341.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/144.png"
  342.         },
  343.         {
  344.           "BrandID" : "127",
  345.           "MainBrandName" : "九龙汽车",
  346.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/127.png"
  347.         }
  348.       ],
  349.       "PinYin" : "J"
  350.     },
  351.     {
  352.       "GroupCount" : "5",
  353.       "GroupInfo" : [
  354.         {
  355.           "BrandID" : "108",
  356.           "MainBrandName" : "开瑞",
  357.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/108.png"
  358.         },
  359.         {
  360.           "BrandID" : "152",
  361.           "MainBrandName" : "卡威",
  362.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/152.png"
  363.         },
  364.         {
  365.           "BrandID" : "154",
  366.           "MainBrandName" : "凯翼",
  367.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/154.png"
  368.         },
  369.         {
  370.           "BrandID" : "66",
  371.           "MainBrandName" : "凯迪拉克",
  372.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/66.png"
  373.         },
  374.         {
  375.           "BrandID" : "67",
  376.           "MainBrandName" : "克莱斯勒",
  377.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/67.png"
  378.         }
  379.       ],
  380.       "PinYin" : "K"
  381.     },
  382.     {
  383.       "GroupCount" : "12",
  384.       "GroupInfo" : [
  385.         {
  386.           "BrandID" : "68",
  387.           "MainBrandName" : "兰博基尼",
  388.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/68.png"
  389.         },
  390.         {
  391.           "BrandID" : "70",
  392.           "MainBrandName" : "劳斯莱斯",
  393.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/70.png"
  394.         },
  395.         {
  396.           "BrandID" : "71",
  397.           "MainBrandName" : "雷克萨斯",
  398.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/71.png"
  399.         },
  400.         {
  401.           "BrandID" : "72",
  402.           "MainBrandName" : "雷诺",
  403.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/72.png"
  404.         },
  405.         {
  406.           "BrandID" : "74",
  407.           "MainBrandName" : "林肯",
  408.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/74.png"
  409.         },
  410.         {
  411.           "BrandID" : "75",
  412.           "MainBrandName" : "路虎",
  413.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/75.png"
  414.         },
  415.         {
  416.           "BrandID" : "90",
  417.           "MainBrandName" : "力帆",
  418.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/90.png"
  419.         },
  420.         {
  421.           "BrandID" : "31",
  422.           "MainBrandName" : "陆风",
  423.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/31.png"
  424.         },
  425.         {
  426.           "BrandID" : "45",
  427.           "MainBrandName" : "铃木",
  428.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/45.png"
  429.         },
  430.         {
  431.           "BrandID" : "121",
  432.           "MainBrandName" : "理念",
  433.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/121.png"
  434.         },
  435.         {
  436.           "BrandID" : "128",
  437.           "MainBrandName" : "路特斯",
  438.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/128.png"
  439.         },
  440.         {
  441.           "BrandID" : "126",
  442.           "MainBrandName" : "猎豹汽车",
  443.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/126.png"
  444.         }
  445.       ],
  446.       "PinYin" : "L"
  447.     },
  448.     {
  449.       "GroupCount" : "5",
  450.       "GroupInfo" : [
  451.         {
  452.           "BrandID" : "33",
  453.           "MainBrandName" : "马自达",
  454.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/33.png"
  455.         },
  456.         {
  457.           "BrandID" : "97",
  458.           "MainBrandName" : "MG",
  459.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/97.png"
  460.         },
  461.         {
  462.           "BrandID" : "77",
  463.           "MainBrandName" : "玛莎拉蒂",
  464.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/77.png"
  465.         },
  466.         {
  467.           "BrandID" : "78",
  468.           "MainBrandName" : "迈巴赫",
  469.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/78.png"
  470.         },
  471.         {
  472.           "BrandID" : "79",
  473.           "MainBrandName" : "MINI",
  474.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/79.png"
  475.         }
  476.       ],
  477.       "PinYin" : "M"
  478.     },
  479.     {
  480.       "GroupCount" : "1",
  481.       "GroupInfo" : [
  482.         {
  483.           "BrandID" : "118",
  484.           "MainBrandName" : "纳智捷",
  485.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/118.png"
  486.         }
  487.       ],
  488.       "PinYin" : "N"
  489.     },
  490.     {
  491.       "GroupCount" : "3",
  492.       "GroupInfo" : [
  493.         {
  494.           "BrandID" : "131",
  495.           "MainBrandName" : "欧朗",
  496.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/131.png"
  497.         },
  498.         {
  499.           "BrandID" : "80",
  500.           "MainBrandName" : "欧宝",
  501.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/80.png"
  502.         },
  503.         {
  504.           "BrandID" : "92",
  505.           "MainBrandName" : "讴歌",
  506.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/92.png"
  507.         }
  508.       ],
  509.       "PinYin" : "O"
  510.     },
  511.     {
  512.       "GroupCount" : "4",
  513.       "GroupInfo" : [
  514.         {
  515.           "BrandID" : "32",
  516.           "MainBrandName" : "起亚",
  517.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/32.png"
  518.         },
  519.         {
  520.           "BrandID" : "11",
  521.           "MainBrandName" : "奇瑞",
  522.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/11.png"
  523.         },
  524.         {
  525.           "BrandID" : "130",
  526.           "MainBrandName" : "启辰",
  527.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/130.png"
  528.         },
  529.         {
  530.           "BrandID" : "102",
  531.           "MainBrandName" : "青年莲花",
  532.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/102.png"
  533.         }
  534.       ],
  535.       "PinYin" : "Q"
  536.     },
  537.     {
  538.       "GroupCount" : "3",
  539.       "GroupInfo" : [
  540.         {
  541.           "BrandID" : "109",
  542.           "MainBrandName" : "瑞麒",
  543.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/109.png"
  544.         },
  545.         {
  546.           "BrandID" : "36",
  547.           "MainBrandName" : "日产",
  548.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/36.png"
  549.         },
  550.         {
  551.           "BrandID" : "94",
  552.           "MainBrandName" : "荣威",
  553.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/94.png"
  554.         }
  555.       ],
  556.       "PinYin" : "R"
  557.     },
  558.     {
  559.       "GroupCount" : "12",
  560.       "GroupInfo" : [
  561.         {
  562.           "BrandID" : "95",
  563.           "MainBrandName" : "smart",
  564.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/95.png"
  565.         },
  566.         {
  567.           "BrandID" : "98",
  568.           "MainBrandName" : "世爵",
  569.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/98.png"
  570.         },
  571.         {
  572.           "BrandID" : "82",
  573.           "MainBrandName" : "萨博",
  574.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/82.png"
  575.         },
  576.         {
  577.           "BrandID" : "83",
  578.           "MainBrandName" : "双龙",
  579.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/83.png"
  580.         },
  581.         {
  582.           "BrandID" : "84",
  583.           "MainBrandName" : "斯巴鲁",
  584.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/84.png"
  585.         },
  586.         {
  587.           "BrandID" : "85",
  588.           "MainBrandName" : "斯柯达",
  589.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/85.png"
  590.         },
  591.         {
  592.           "BrandID" : "34",
  593.           "MainBrandName" : "三菱",
  594.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/34.png"
  595.         },
  596.         {
  597.           "BrandID" : "42",
  598.           "MainBrandName" : "双环",
  599.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/42.png"
  600.         },
  601.         {
  602.           "BrandID" : "123",
  603.           "MainBrandName" : "陕汽通家",
  604.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/123.png"
  605.         },
  606.         {
  607.           "BrandID" : "145",
  608.           "MainBrandName" : "上汽大通",
  609.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/145.png"
  610.         },
  611.         {
  612.           "BrandID" : "136",
  613.           "MainBrandName" : "思铭",
  614.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/136.png"
  615.         },
  616.         {
  617.           "BrandID" : "148",
  618.           "MainBrandName" : "绅宝",
  619.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/148.png"
  620.         }
  621.       ],
  622.       "PinYin" : "S"
  623.     },
  624.     {
  625.       "GroupCount" : "2",
  626.       "GroupInfo" : [
  627.         {
  628.           "BrandID" : "149",
  629.           "MainBrandName" : "特斯拉",
  630.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/149.png"
  631.         },
  632.         {
  633.           "BrandID" : "147",
  634.           "MainBrandName" : "腾势",
  635.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/147.png"
  636.         }
  637.       ],
  638.       "PinYin" : "T"
  639.     },
  640.     {
  641.       "GroupCount" : "6",
  642.       "GroupInfo" : [
  643.         {
  644.           "BrandID" : "110",
  645.           "MainBrandName" : "威麟",
  646.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/110.png"
  647.         },
  648.         {
  649.           "BrandID" : "103",
  650.           "MainBrandName" : "威兹曼",
  651.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/103.png"
  652.         },
  653.         {
  654.           "BrandID" : "151",
  655.           "MainBrandName" : "潍柴",
  656.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/151.png"
  657.         },
  658.         {
  659.           "BrandID" : "86",
  660.           "MainBrandName" : "沃尔沃",
  661.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/86.png"
  662.         },
  663.         {
  664.           "BrandID" : "54",
  665.           "MainBrandName" : "五十铃",
  666.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/54.png"
  667.         },
  668.         {
  669.           "BrandID" : "49",
  670.           "MainBrandName" : "五菱",
  671.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/49.png"
  672.         }
  673.       ],
  674.       "PinYin" : "W"
  675.     },
  676.     {
  677.       "GroupCount" : "7",
  678.       "GroupInfo" : [
  679.         {
  680.           "BrandID" : "50",
  681.           "MainBrandName" : "夏利",
  682.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/50.png"
  683.         },
  684.         {
  685.           "BrandID" : "35",
  686.           "MainBrandName" : "新雅途",
  687.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/35.png"
  688.         },
  689.         {
  690.           "BrandID" : "12",
  691.           "MainBrandName" : "雪佛兰",
  692.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/12.png"
  693.         },
  694.         {
  695.           "BrandID" : "13",
  696.           "MainBrandName" : "雪铁龙",
  697.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/13.png"
  698.         },
  699.         {
  700.           "BrandID" : "23",
  701.           "MainBrandName" : "现代",
  702.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/23.png"
  703.         },
  704.         {
  705.           "BrandID" : "129",
  706.           "MainBrandName" : "新凯",
  707.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/129.png"
  708.         },
  709.         {
  710.           "BrandID" : "132",
  711.           "MainBrandName" : "西雅特",
  712.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/132.png"
  713.         }
  714.       ],
  715.       "PinYin" : "X"
  716.     },
  717.     {
  718.       "GroupCount" : "6",
  719.       "GroupInfo" : [
  720.         {
  721.           "BrandID" : "106",
  722.           "MainBrandName" : "野马汽车",
  723.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/106.png"
  724.         },
  725.         {
  726.           "BrandID" : "24",
  727.           "MainBrandName" : "依维柯",
  728.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/24.png"
  729.         },
  730.         {
  731.           "BrandID" : "53",
  732.           "MainBrandName" : "一汽",
  733.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/53.png"
  734.         },
  735.         {
  736.           "BrandID" : "99",
  737.           "MainBrandName" : "永源汽车",
  738.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/99.png"
  739.         },
  740.         {
  741.           "BrandID" : "101",
  742.           "MainBrandName" : "扬子",
  743.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/101.png"
  744.         },
  745.         {
  746.           "BrandID" : "87",
  747.           "MainBrandName" : "英菲尼迪",
  748.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/87.png"
  749.         }
  750.       ],
  751.       "PinYin" : "Y"
  752.     },
  753.     {
  754.       "GroupCount" : "4",
  755.       "GroupInfo" : [
  756.         {
  757.           "BrandID" : "91",
  758.           "MainBrandName" : "众泰",
  759.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/91.png"
  760.         },
  761.         {
  762.           "BrandID" : "51",
  763.           "MainBrandName" : "中华",
  764.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/51.png"
  765.         },
  766.         {
  767.           "BrandID" : "52",
  768.           "MainBrandName" : "中兴",
  769.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/52.png"
  770.         },
  771.         {
  772.           "BrandID" : "105",
  773.           "MainBrandName" : "中誉",
  774.           "imgURL" : "http://www.webcars.com.cn/CarsPhoto/Brands/0/105.png"
  775.         }
  776.       ],
  777.       "PinYin" : "Z"
  778.     }
  779.   ],
  780.   "ListCount" : "130"
  781. }

city.json

  1. {
  2.   "城市代码" : [
  3.     {
  4.       "市" : [
  5.         {
  6.           "市名" : "北京",
  7.           "编码" : "101010100"
  8.         },
  9.         {
  10.           "市名" : "朝阳",
  11.           "编码" : "101010300"
  12.         },
  13.         {
  14.           "市名" : "顺义",
  15.           "编码" : "101010400"
  16.         },
  17.         {
  18.           "市名" : "怀柔",
  19.           "编码" : "101010500"
  20.         },
  21.         {
  22.           "市名" : "通州",
  23.           "编码" : "101010600"
  24.         },
  25.         {
  26.           "市名" : "昌平",
  27.           "编码" : "101010700"
  28.         },
  29.         {
  30.           "市名" : "延庆",
  31.           "编码" : "101010800"
  32.         },
  33.         {
  34.           "市名" : "丰台",
  35.           "编码" : "101010900"
  36.         },
  37.         {
  38.           "市名" : "石景山",
  39.           "编码" : "101011000"
  40.         },
  41.         {
  42.           "市名" : "大兴",
  43.           "编码" : "101011100"
  44.         },
  45.         {
  46.           "市名" : "房山",
  47.           "编码" : "101011200"
  48.         },
  49.         {
  50.           "市名" : "密云",
  51.           "编码" : "101011300"
  52.         },
  53.         {
  54.           "市名" : "门头沟",
  55.           "编码" : "101011400"
  56.         },
  57.         {
  58.           "市名" : "平谷",
  59.           "编码" : "101011500"
  60.         },
  61.         {
  62.           "市名" : "八达岭",
  63.           "编码" : "101011600"
  64.         },
  65.         {
  66.           "市名" : "佛爷顶",
  67.           "编码" : "101011700"
  68.         },
  69.         {
  70.           "市名" : "汤河口",
  71.           "编码" : "101011800"
  72.         },
  73.         {
  74.           "市名" : "密云上甸子",
  75.           "编码" : "101011900"
  76.         },
  77.         {
  78.           "市名" : "斋堂",
  79.           "编码" : "101012000"
  80.         },
  81.         {
  82.           "市名" : "霞云岭",
  83.           "编码" : "101012100"
  84.         },
  85.         {
  86.           "市名" : "北京城区",
  87.           "编码" : "101012200"
  88.         },
  89.         {
  90.           "市名" : "海淀",
  91.           "编码" : "101010200"
  92.         }
  93.       ],
  94.       "省" : "北京"
  95.     },
  96.     {
  97.       "市" : [
  98.         {
  99.           "市名" : "天津",
  100.           "编码" : "101030100"
  101.         },
  102.         {
  103.           "市名" : "宝坻",
  104.           "编码" : "101030300"
  105.         },
  106.         {
  107.           "市名" : "东丽",
  108.           "编码" : "101030400"
  109.         },
  110.         {
  111.           "市名" : "西青",
  112.           "编码" : "101030500"
  113.         },
  114.         {
  115.           "市名" : "北辰",
  116.           "编码" : "101030600"
  117.         },
  118.         {
  119.           "市名" : "蓟县",
  120.           "编码" : "101031400"
  121.         },
  122.         {
  123.           "市名" : "汉沽",
  124.           "编码" : "101030800"
  125.         },
  126.         {
  127.           "市名" : "静海",
  128.           "编码" : "101030900"
  129.         },
  130.         {
  131.           "市名" : "津南",
  132.           "编码" : "101031000"
  133.         },
  134.         {
  135.           "市名" : "塘沽",
  136.           "编码" : "101031100"
  137.         },
  138.         {
  139.           "市名" : "大港",
  140.           "编码" : "101031200"
  141.         },
  142.         {
  143.           "市名" : "武清",
  144.           "编码" : "101030200"
  145.         },
  146.         {
  147.           "市名" : "宁河",
  148.           "编码" : "101030700"
  149.         }
  150.       ],
  151.       "省" : "天津市"
  152.     },
  153.     {
  154.       "市" : [
  155.         {
  156.           "市名" : "上海",
  157.           "编码" : "101020100"
  158.         },
  159.         {
  160.           "市名" : "宝山",
  161.           "编码" : "101020300"
  162.         },
  163.         {
  164.           "市名" : "嘉定",
  165.           "编码" : "101020500"
  166.         },
  167.         {
  168.           "市名" : "南汇",
  169.           "编码" : "101020600"
  170.         },
  171.         {
  172.           "市名" : "浦东",
  173.           "编码" : "101021300"
  174.         },
  175.         {
  176.           "市名" : "青浦",
  177.           "编码" : "101020800"
  178.         },
  179.         {
  180.           "市名" : "松江",
  181.           "编码" : "101020900"
  182.         },
  183.         {
  184.           "市名" : "奉贤",
  185.           "编码" : "101021000"
  186.         },
  187.         {
  188.           "市名" : "崇明",
  189.           "编码" : "101021100"
  190.         },
  191.         {
  192.           "市名" : "徐家汇",
  193.           "编码" : "101021200"
  194.         },
  195.         {
  196.           "市名" : "闵行",
  197.           "编码" : "101020200"
  198.         },
  199.         {
  200.           "市名" : "金山",
  201.           "编码" : "101020700"
  202.         }
  203.       ],
  204.       "省" : "上海"
  205.     },
  206.     {
  207.       "市" : [
  208.         {
  209.           "市名" : "石家庄",
  210.           "编码" : "101090101"
  211.         },
  212.         {
  213.           "市名" : "张家口",
  214.           "编码" : "101090301"
  215.         },
  216.         {
  217.           "市名" : "承德",
  218.           "编码" : "101090402"
  219.         },
  220.         {
  221.           "市名" : "唐山",
  222.           "编码" : "101090501"
  223.         },
  224.         {
  225.           "市名" : "秦皇岛",
  226.           "编码" : "101091101"
  227.         },
  228.         {
  229.           "市名" : "沧州",
  230.           "编码" : "101090701"
  231.         },
  232.         {
  233.           "市名" : "衡水",
  234.           "编码" : "101090801"
  235.         },
  236.         {
  237.           "市名" : "邢台",
  238.           "编码" : "101090901"
  239.         },
  240.         {
  241.           "市名" : "邯郸",
  242.           "编码" : "101091001"
  243.         },
  244.         {
  245.           "市名" : "保定",
  246.           "编码" : "101090201"
  247.         },
  248.         {
  249.           "市名" : "廊坊",
  250.           "编码" : "101090601"
  251.         }
  252.       ],
  253.       "省" : "河北"
  254.     },
  255.     {
  256.       "市" : [
  257.         {
  258.           "市名" : "郑州",
  259.           "编码" : "101180101"
  260.         },
  261.         {
  262.           "市名" : "新乡",
  263.           "编码" : "101180301"
  264.         },
  265.         {
  266.           "市名" : "许昌",
  267.           "编码" : "101180401"
  268.         },
  269.         {
  270.           "市名" : "平顶山",
  271.           "编码" : "101180501"
  272.         },
  273.         {
  274.           "市名" : "信阳",
  275.           "编码" : "101180601"
  276.         },
  277.         {
  278.           "市名" : "南阳",
  279.           "编码" : "101180701"
  280.         },
  281.         {
  282.           "市名" : "开封",
  283.           "编码" : "101180801"
  284.         },
  285.         {
  286.           "市名" : "洛阳",
  287.           "编码" : "101180901"
  288.         },
  289.         {
  290.           "市名" : "商丘",
  291.           "编码" : "101181001"
  292.         },
  293.         {
  294.           "市名" : "焦作",
  295.           "编码" : "101181101"
  296.         },
  297.         {
  298.           "市名" : "鹤壁",
  299.           "编码" : "101181201"
  300.         },
  301.         {
  302.           "市名" : "濮阳",
  303.           "编码" : "101181301"
  304.         },
  305.         {
  306.           "市名" : "周口",
  307.           "编码" : "101181401"
  308.         },
  309.         {
  310.           "市名" : "漯河",
  311.           "编码" : "101181501"
  312.         },
  313.         {
  314.           "市名" : "驻马店",
  315.           "编码" : "101181601"
  316.         },
  317.         {
  318.           "市名" : "三门峡",
  319.           "编码" : "101181701"
  320.         },
  321.         {
  322.           "市名" : "济源",
  323.           "编码" : "101181801"
  324.         },
  325.         {
  326.           "市名" : "安阳",
  327.           "编码" : "101180201"
  328.         }
  329.       ],
  330.       "省" : "河南"
  331.     },
  332.     {
  333.       "市" : [
  334.         {
  335.           "市名" : "合肥",
  336.           "编码" : "101220101"
  337.         },
  338.         {
  339.           "市名" : "芜湖",
  340.           "编码" : "101220301"
  341.         },
  342.         {
  343.           "市名" : "淮南",
  344.           "编码" : "101220401"
  345.         },
  346.         {
  347.           "市名" : "马鞍山",
  348.           "编码" : "101220501"
  349.         },
  350.         {
  351.           "市名" : "安庆",
  352.           "编码" : "101220601"
  353.         },
  354.         {
  355.           "市名" : "宿州",
  356.           "编码" : "101220701"
  357.         },
  358.         {
  359.           "市名" : "阜阳",
  360.           "编码" : "101220801"
  361.         },
  362.         {
  363.           "市名" : "亳州",
  364.           "编码" : "101220901"
  365.         },
  366.         {
  367.           "市名" : "黄山",
  368.           "编码" : "101221001"
  369.         },
  370.         {
  371.           "市名" : "滁州",
  372.           "编码" : "101221101"
  373.         },
  374.         {
  375.           "市名" : "淮北",
  376.           "编码" : "101221201"
  377.         },
  378.         {
  379.           "市名" : "铜陵",
  380.           "编码" : "101221301"
  381.         },
  382.         {
  383.           "市名" : "宣城",
  384.           "编码" : "101221401"
  385.         },
  386.         {
  387.           "市名" : "六安",
  388.           "编码" : "101221501"
  389.         },
  390.         {
  391.           "市名" : "巢湖",
  392.           "编码" : "101221601"
  393.         },
  394.         {
  395.           "市名" : "池州",
  396.           "编码" : "101221701"
  397.         },
  398.         {
  399.           "市名" : "蚌埠",
  400.           "编码" : "101220201"
  401.         }
  402.       ],
  403.       "省" : "安徽"
  404.     },
  405.     {
  406.       "市" : [
  407.         {
  408.           "市名" : "杭州",
  409.           "编码" : "101210101"
  410.         },
  411.         {
  412.           "市名" : "舟山",
  413.           "编码" : "101211101"
  414.         },
  415.         {
  416.           "市名" : "湖州",
  417.           "编码" : "101210201"
  418.         },
  419.         {
  420.           "市名" : "嘉兴",
  421.           "编码" : "101210301"
  422.         },
  423.         {
  424.           "市名" : "金华",
  425.           "编码" : "101210901"
  426.         },
  427.         {
  428.           "市名" : "绍兴",
  429.           "编码" : "101210501"
  430.         },
  431.         {
  432.           "市名" : "台州",
  433.           "编码" : "101210601"
  434.         },
  435.         {
  436.           "市名" : "温州",
  437.           "编码" : "101210701"
  438.         },
  439.         {
  440.           "市名" : "丽水",
  441.           "编码" : "101210801"
  442.         },
  443.         {
  444.           "市名" : "衢州",
  445.           "编码" : "101211001"
  446.         },
  447.         {
  448.           "市名" : "宁波",
  449.           "编码" : "101210401"
  450.         }
  451.       ],
  452.       "省" : "浙江"
  453.     },
  454.     {
  455.       "市" : [
  456.         {
  457.           "市名" : "重庆",
  458.           "编码" : "101040100"
  459.         },
  460.         {
  461.           "市名" : "合川",
  462.           "编码" : "101040300"
  463.         },
  464.         {
  465.           "市名" : "南川",
  466.           "编码" : "101040400"
  467.         },
  468.         {
  469.           "市名" : "江津",
  470.           "编码" : "101040500"
  471.         },
  472.         {
  473.           "市名" : "万盛",
  474.           "编码" : "101040600"
  475.         },
  476.         {
  477.           "市名" : "渝北",
  478.           "编码" : "101040700"
  479.         },
  480.         {
  481.           "市名" : "北碚",
  482.           "编码" : "101040800"
  483.         },
  484.         {
  485.           "市名" : "巴南",
  486.           "编码" : "101040900"
  487.         },
  488.         {
  489.           "市名" : "长寿",
  490.           "编码" : "101041000"
  491.         },
  492.         {
  493.           "市名" : "黔江",
  494.           "编码" : "101041100"
  495.         },
  496.         {
  497.           "市名" : "万州天城",
  498.           "编码" : "101041200"
  499.         },
  500.         {
  501.           "市名" : "万州龙宝",
  502.           "编码" : "101041300"
  503.         },
  504.         {
  505.           "市名" : "涪陵",
  506.           "编码" : "101041400"
  507.         },
  508.         {
  509.           "市名" : "开县",
  510.           "编码" : "101041500"
  511.         },
  512.         {
  513.           "市名" : "城口",
  514.           "编码" : "101041600"
  515.         },
  516.         {
  517.           "市名" : "云阳",
  518.           "编码" : "101041700"
  519.         },
  520.         {
  521.           "市名" : "巫溪",
  522.           "编码" : "101041800"
  523.         },
  524.         {
  525.           "市名" : "奉节",
  526.           "编码" : "101041900"
  527.         },
  528.         {
  529.           "市名" : "巫山",
  530.           "编码" : "101042000"
  531.         },
  532.         {
  533.           "市名" : "潼南",
  534.           "编码" : "101042100"
  535.         },
  536.         {
  537.           "市名" : "垫江",
  538.           "编码" : "101042200"
  539.         },
  540.         {
  541.           "市名" : "梁平",
  542.           "编码" : "101042300"
  543.         },
  544.         {
  545.           "市名" : "忠县",
  546.           "编码" : "101042400"
  547.         },
  548.         {
  549.           "市名" : "石柱",
  550.           "编码" : "101042500"
  551.         },
  552.         {
  553.           "市名" : "大足",
  554.           "编码" : "101042600"
  555.         },
  556.         {
  557.           "市名" : "荣昌",
  558.           "编码" : "101042700"
  559.         },
  560.         {
  561.           "市名" : "铜梁",
  562.           "编码" : "101042800"
  563.         },
  564.         {
  565.           "市名" : "璧山",
  566.           "编码" : "101042900"
  567.         },
  568.         {
  569.           "市名" : "丰都",
  570.           "编码" : "101043000"
  571.         },
  572.         {
  573.           "市名" : "武隆",
  574.           "编码" : "101043100"
  575.         },
  576.         {
  577.           "市名" : "彭水",
  578.           "编码" : "101043200"
  579.         },
  580.         {
  581.           "市名" : "綦江",
  582.           "编码" : "101043300"
  583.         },
  584.         {
  585.           "市名" : "酉阳",
  586.           "编码" : "101043400"
  587.         },
  588.         {
  589.           "市名" : "秀山",
  590.           "编码" : "101043600"
  591.         },
  592.         {
  593.           "市名" : "沙坪坝",
  594.           "编码" : "101043700"
  595.         },
  596.         {
  597.           "市名" : "永川",
  598.           "编码" : "101040200"
  599.         }
  600.       ],
  601.       "省" : "重庆"
  602.     },
  603.     {
  604.       "市" : [
  605.         {
  606.           "市名" : "福州",
  607.           "编码" : "101230101"
  608.         },
  609.         {
  610.           "市名" : "泉州",
  611.           "编码" : "101230501"
  612.         },
  613.         {
  614.           "市名" : "漳州",
  615.           "编码" : "101230601"
  616.         },
  617.         {
  618.           "市名" : "龙岩",
  619.           "编码" : "101230701"
  620.         },
  621.         {
  622.           "市名" : "晋江",
  623.           "编码" : "101230509"
  624.         },
  625.         {
  626.           "市名" : "南平",
  627.           "编码" : "101230901"
  628.         },
  629.         {
  630.           "市名" : "厦门",
  631.           "编码" : "101230201"
  632.         },
  633.         {
  634.           "市名" : "宁德",
  635.           "编码" : "101230301"
  636.         },
  637.         {
  638.           "市名" : "莆田",
  639.           "编码" : "101230401"
  640.         },
  641.         {
  642.           "市名" : "三明",
  643.           "编码" : "101230801"
  644.         }
  645.       ],
  646.       "省" : "福建"
  647.     },
  648.     {
  649.       "市" : [
  650.         {
  651.           "市名" : "兰州",
  652.           "编码" : "101160101"
  653.         },
  654.         {
  655.           "市名" : "平凉",
  656.           "编码" : "101160301"
  657.         },
  658.         {
  659.           "市名" : "庆阳",
  660.           "编码" : "101160401"
  661.         },
  662.         {
  663.           "市名" : "武威",
  664.           "编码" : "101160501"
  665.         },
  666.         {
  667.           "市名" : "金昌",
  668.           "编码" : "101160601"
  669.         },
  670.         {
  671.           "市名" : "嘉峪关",
  672.           "编码" : "101161401"
  673.         },
  674.         {
  675.           "市名" : "酒泉",
  676.           "编码" : "101160801"
  677.         },
  678.         {
  679.           "市名" : "天水",
  680.           "编码" : "101160901"
  681.         },
  682.         {
  683.           "市名" : "武都",
  684.           "编码" : "101161001"
  685.         },
  686.         {
  687.           "市名" : "临夏",
  688.           "编码" : "101161101"
  689.         },
  690.         {
  691.           "市名" : "合作",
  692.           "编码" : "101161201"
  693.         },
  694.         {
  695.           "市名" : "白银",
  696.           "编码" : "101161301"
  697.         },
  698.         {
  699.           "市名" : "定西",
  700.           "编码" : "101160201"
  701.         },
  702.         {
  703.           "市名" : "张掖",
  704.           "编码" : "101160701"
  705.         }
  706.       ],
  707.       "省" : "甘肃"
  708.     },
  709.     {
  710.       "市" : [
  711.         {
  712.           "市名" : "广州",
  713.           "编码" : "101280101"
  714.         },
  715.         {
  716.           "市名" : "惠州",
  717.           "编码" : "101280301"
  718.         },
  719.         {
  720.           "市名" : "梅州",
  721.           "编码" : "101280401"
  722.         },
  723.         {
  724.           "市名" : "汕头",
  725.           "编码" : "101280501"
  726.         },
  727.         {
  728.           "市名" : "深圳",
  729.           "编码" : "101280601"
  730.         },
  731.         {
  732.           "市名" : "珠海",
  733.           "编码" : "101280701"
  734.         },
  735.         {
  736.           "市名" : "佛山",
  737.           "编码" : "101280800"
  738.         },
  739.         {
  740.           "市名" : "肇庆",
  741.           "编码" : "101280901"
  742.         },
  743.         {
  744.           "市名" : "湛江",
  745.           "编码" : "101281001"
  746.         },
  747.         {
  748.           "市名" : "江门",
  749.           "编码" : "101281101"
  750.         },
  751.         {
  752.           "市名" : "河源",
  753.           "编码" : "101281201"
  754.         },
  755.         {
  756.           "市名" : "清远",
  757.           "编码" : "101281301"
  758.         },
  759.         {
  760.           "市名" : "云浮",
  761.           "编码" : "101281401"
  762.         },
  763.         {
  764.           "市名" : "潮州",
  765.           "编码" : "101281501"
  766.         },
  767.         {
  768.           "市名" : "东莞",
  769.           "编码" : "101281601"
  770.         },
  771.         {
  772.           "市名" : "中山",
  773.           "编码" : "101281701"
  774.         },
  775.         {
  776.           "市名" : "阳江",
  777.           "编码" : "101281801"
  778.         },
  779.         {
  780.           "市名" : "揭阳",
  781.           "编码" : "101281901"
  782.         },
  783.         {
  784.           "市名" : "茂名",
  785.           "编码" : "101282001"
  786.         },
  787.         {
  788.           "市名" : "汕尾",
  789.           "编码" : "101282101"
  790.         },
  791.         {
  792.           "市名" : "韶关",
  793.           "编码" : "101280201"
  794.         }
  795.       ],
  796.       "省" : "广东"
  797.     },
  798.     {
  799.       "市" : [
  800.         {
  801.           "市名" : "南宁",
  802.           "编码" : "101300101"
  803.         },
  804.         {
  805.           "市名" : "柳州",
  806.           "编码" : "101300301"
  807.         },
  808.         {
  809.           "市名" : "来宾",
  810.           "编码" : "101300401"
  811.         },
  812.         {
  813.           "市名" : "桂林",
  814.           "编码" : "101300501"
  815.         },
  816.         {
  817.           "市名" : "梧州",
  818.           "编码" : "101300601"
  819.         },
  820.         {
  821.           "市名" : "防城港",
  822.           "编码" : "101301401"
  823.         },
  824.         {
  825.           "市名" : "贵港",
  826.           "编码" : "101300801"
  827.         },
  828.         {
  829.           "市名" : "玉林",
  830.           "编码" : "101300901"
  831.         },
  832.         {
  833.           "市名" : "百色",
  834.           "编码" : "101301001"
  835.         },
  836.         {
  837.           "市名" : "钦州",
  838.           "编码" : "101301101"
  839.         },
  840.         {
  841.           "市名" : "河池",
  842.           "编码" : "101301201"
  843.         },
  844.         {
  845.           "市名" : "北海",
  846.           "编码" : "101301301"
  847.         },
  848.         {
  849.           "市名" : "崇左",
  850.           "编码" : "101300201"
  851.         },
  852.         {
  853.           "市名" : "贺州",
  854.           "编码" : "101300701"
  855.         }
  856.       ],
  857.       "省" : "广西"
  858.     },
  859.     {
  860.       "市" : [
  861.         {
  862.           "市名" : "贵阳",
  863.           "编码" : "101260101"
  864.         },
  865.         {
  866.           "市名" : "安顺",
  867.           "编码" : "101260301"
  868.         },
  869.         {
  870.           "市名" : "都匀",
  871.           "编码" : "101260401"
  872.         },
  873.         {
  874.           "市名" : "兴义",
  875.           "编码" : "101260906"
  876.         },
  877.         {
  878.           "市名" : "铜仁",
  879.           "编码" : "101260601"
  880.         },
  881.         {
  882.           "市名" : "毕节",
  883.           "编码" : "101260701"
  884.         },
  885.         {
  886.           "市名" : "六盘水",
  887.           "编码" : "101260801"
  888.         },
  889.         {
  890.           "市名" : "遵义",
  891.           "编码" : "101260201"
  892.         },
  893.         {
  894.           "市名" : "凯里",
  895.           "编码" : "101260501"
  896.         }
  897.       ],
  898.       "省" : "贵州"
  899.     },
  900.     {
  901.       "市" : [
  902.         {
  903.           "市名" : "昆明",
  904.           "编码" : "101290101"
  905.         },
  906.         {
  907.           "市名" : "红河",
  908.           "编码" : "101290301"
  909.         },
  910.         {
  911.           "市名" : "文山",
  912.           "编码" : "101290601"
  913.         },
  914.         {
  915.           "市名" : "玉溪",
  916.           "编码" : "101290701"
  917.         },
  918.         {
  919.           "市名" : "楚雄",
  920.           "编码" : "101290801"
  921.         },
  922.         {
  923.           "市名" : "普洱",
  924.           "编码" : "101290901"
  925.         },
  926.         {
  927.           "市名" : "昭通",
  928.           "编码" : "101291001"
  929.         },
  930.         {
  931.           "市名" : "临沧",
  932.           "编码" : "101291101"
  933.         },
  934.         {
  935.           "市名" : "怒江",
  936.           "编码" : "101291201"
  937.         },
  938.         {
  939.           "市名" : "香格里拉",
  940.           "编码" : "101291301"
  941.         },
  942.         {
  943.           "市名" : "丽江",
  944.           "编码" : "101291401"
  945.         },
  946.         {
  947.           "市名" : "德宏",
  948.           "编码" : "101291501"
  949.         },
  950.         {
  951.           "市名" : "景洪",
  952.           "编码" : "101291601"
  953.         },
  954.         {
  955.           "市名" : "大理",
  956.           "编码" : "101290201"
  957.         },
  958.         {
  959.           "市名" : "曲靖",
  960.           "编码" : "101290401"
  961.         },
  962.         {
  963.           "市名" : "保山",
  964.           "编码" : "101290501"
  965.         }
  966.       ],
  967.       "省" : "云南"
  968.     },
  969.     {
  970.       "市" : [
  971.         {
  972.           "市名" : "呼和浩特",
  973.           "编码" : "101080101"
  974.         },
  975.         {
  976.           "市名" : "乌海",
  977.           "编码" : "101080301"
  978.         },
  979.         {
  980.           "市名" : "集宁",
  981.           "编码" : "101080401"
  982.         },
  983.         {
  984.           "市名" : "通辽",
  985.           "编码" : "101080501"
  986.         },
  987.         {
  988.           "市名" : "阿拉善左旗",
  989.           "编码" : "101081201"
  990.         },
  991.         {
  992.           "市名" : "鄂尔多斯",
  993.           "编码" : "101080701"
  994.         },
  995.         {
  996.           "市名" : "临河",
  997.           "编码" : "101080801"
  998.         },
  999.         {
  1000.           "市名" : "锡林浩特",
  1001.           "编码" : "101080901"
  1002.         },
  1003.         {
  1004.           "市名" : "呼伦贝尔",
  1005.           "编码" : "101081000"
  1006.         },
  1007.         {
  1008.           "市名" : "乌兰浩特",
  1009.           "编码" : "101081101"
  1010.         },
  1011.         {
  1012.           "市名" : "包头",
  1013.           "编码" : "101080201"
  1014.         },
  1015.         {
  1016.           "市名" : "赤峰",
  1017.           "编码" : "101080601"
  1018.         }
  1019.       ],
  1020.       "省" : "内蒙古"
  1021.     },
  1022.     {
  1023.       "市" : [
  1024.         {
  1025.           "市名" : "南昌",
  1026.           "编码" : "101240101"
  1027.         },
  1028.         {
  1029.           "市名" : "上饶",
  1030.           "编码" : "101240301"
  1031.         },
  1032.         {
  1033.           "市名" : "抚州",
  1034.           "编码" : "101240401"
  1035.         },
  1036.         {
  1037.           "市名" : "宜春",
  1038.           "编码" : "101240501"
  1039.         },
  1040.         {
  1041.           "市名" : "鹰潭",
  1042.           "编码" : "101241101"
  1043.         },
  1044.         {
  1045.           "市名" : "赣州",
  1046.           "编码" : "101240701"
  1047.         },
  1048.         {
  1049.           "市名" : "景德镇",
  1050.           "编码" : "101240801"
  1051.         },
  1052.         {
  1053.           "市名" : "萍乡",
  1054.           "编码" : "101240901"
  1055.         },
  1056.         {
  1057.           "市名" : "新余",
  1058.           "编码" : "101241001"
  1059.         },
  1060.         {
  1061.           "市名" : "九江",
  1062.           "编码" : "101240201"
  1063.         },
  1064.         {
  1065.           "市名" : "吉安",
  1066.           "编码" : "101240601"
  1067.         }
  1068.       ],
  1069.       "省" : "江西"
  1070.     },
  1071.     {
  1072.       "市" : [
  1073.         {
  1074.           "市名" : "武汉",
  1075.           "编码" : "101200101"
  1076.         },
  1077.         {
  1078.           "市名" : "黄冈",
  1079.           "编码" : "101200501"
  1080.         },
  1081.         {
  1082.           "市名" : "荆州",
  1083.           "编码" : "101200801"
  1084.         },
  1085.         {
  1086.           "市名" : "宜昌",
  1087.           "编码" : "101200901"
  1088.         },
  1089.         {
  1090.           "市名" : "恩施",
  1091.           "编码" : "101201001"
  1092.         },
  1093.         {
  1094.           "市名" : "十堰",
  1095.           "编码" : "101201101"
  1096.         },
  1097.         {
  1098.           "市名" : "神农架",
  1099.           "编码" : "101201201"
  1100.         },
  1101.         {
  1102.           "市名" : "随州",
  1103.           "编码" : "101201301"
  1104.         },
  1105.         {
  1106.           "市名" : "荆门",
  1107.           "编码" : "101201401"
  1108.         },
  1109.         {
  1110.           "市名" : "天门",
  1111.           "编码" : "101201501"
  1112.         },
  1113.         {
  1114.           "市名" : "仙桃",
  1115.           "编码" : "101201601"
  1116.         },
  1117.         {
  1118.           "市名" : "潜江",
  1119.           "编码" : "101201701"
  1120.         },
  1121.         {
  1122.           "市名" : "襄樊",
  1123.           "编码" : "101200201"
  1124.         },
  1125.         {
  1126.           "市名" : "鄂州",
  1127.           "编码" : "101200301"
  1128.         },
  1129.         {
  1130.           "市名" : "孝感",
  1131.           "编码" : "101200401"
  1132.         },
  1133.         {
  1134.           "市名" : "黄石",
  1135.           "编码" : "101200601"
  1136.         },
  1137.         {
  1138.           "市名" : "咸宁",
  1139.           "编码" : "101200701"
  1140.         }
  1141.       ],
  1142.       "省" : "湖北"
  1143.     },
  1144.     {
  1145.       "市" : [
  1146.         {
  1147.           "市名" : "成都",
  1148.           "编码" : "101270101"
  1149.         },
  1150.         {
  1151.           "市名" : "自贡",
  1152.           "编码" : "101270301"
  1153.         },
  1154.         {
  1155.           "市名" : "绵阳",
  1156.           "编码" : "101270401"
  1157.         },
  1158.         {
  1159.           "市名" : "南充",
  1160.           "编码" : "101270501"
  1161.         },
  1162.         {
  1163.           "市名" : "达州",
  1164.           "编码" : "101270601"
  1165.         },
  1166.         {
  1167.           "市名" : "遂宁",
  1168.           "编码" : "101270701"
  1169.         },
  1170.         {
  1171.           "市名" : "广安",
  1172.           "编码" : "101270801"
  1173.         },
  1174.         {
  1175.           "市名" : "巴中",
  1176.           "编码" : "101270901"
  1177.         },
  1178.         {
  1179.           "市名" : "泸州",
  1180.           "编码" : "101271001"
  1181.         },
  1182.         {
  1183.           "市名" : "宜宾",
  1184.           "编码" : "101271101"
  1185.         },
  1186.         {
  1187.           "市名" : "内江",
  1188.           "编码" : "101271201"
  1189.         },
  1190.         {
  1191.           "市名" : "资阳",
  1192.           "编码" : "101271301"
  1193.         },
  1194.         {
  1195.           "市名" : "乐山",
  1196.           "编码" : "101271401"
  1197.         },
  1198.         {
  1199.           "市名" : "眉山",
  1200.           "编码" : "101271501"
  1201.         },
  1202.         {
  1203.           "市名" : "凉山",
  1204.           "编码" : "101271601"
  1205.         },
  1206.         {
  1207.           "市名" : "雅安",
  1208.           "编码" : "101271701"
  1209.         },
  1210.         {
  1211.           "市名" : "甘孜",
  1212.           "编码" : "101271801"
  1213.         },
  1214.         {
  1215.           "市名" : "阿坝",
  1216.           "编码" : "101271901"
  1217.         },
  1218.         {
  1219.           "市名" : "德阳",
  1220.           "编码" : "101272001"
  1221.         },
  1222.         {
  1223.           "市名" : "广元",
  1224.           "编码" : "101272101"
  1225.         },
  1226.         {
  1227.           "市名" : "攀枝花",
  1228.           "编码" : "101270201"
  1229.         }
  1230.       ],
  1231.       "省" : "四川"
  1232.     },
  1233.     {
  1234.       "市" : [
  1235.         {
  1236.           "市名" : "银川",
  1237.           "编码" : "101170101"
  1238.         },
  1239.         {
  1240.           "市名" : "中卫",
  1241.           "编码" : "101170501"
  1242.         },
  1243.         {
  1244.           "市名" : "固原",
  1245.           "编码" : "101170401"
  1246.         },
  1247.         {
  1248.           "市名" : "石嘴山",
  1249.           "编码" : "101170201"
  1250.         },
  1251.         {
  1252.           "市名" : "吴忠",
  1253.           "编码" : "101170301"
  1254.         }
  1255.       ],
  1256.       "省" : "宁夏"
  1257.     },
  1258.     {
  1259.       "市" : [
  1260.         {
  1261.           "市名" : "西宁",
  1262.           "编码" : "101150101"
  1263.         },
  1264.         {
  1265.           "市名" : "黄南",
  1266.           "编码" : "101150301"
  1267.         },
  1268.         {
  1269.           "市名" : "海北",
  1270.           "编码" : "101150801"
  1271.         },
  1272.         {
  1273.           "市名" : "果洛",
  1274.           "编码" : "101150501"
  1275.         },
  1276.         {
  1277.           "市名" : "玉树",
  1278.           "编码" : "101150601"
  1279.         },
  1280.         {
  1281.           "市名" : "海西",
  1282.           "编码" : "101150701"
  1283.         },
  1284.         {
  1285.           "市名" : "海东",
  1286.           "编码" : "101150201"
  1287.         },
  1288.         {
  1289.           "市名" : "海南",
  1290.           "编码" : "101150401"
  1291.         }
  1292.       ],
  1293.       "省" : "青海省"
  1294.     },
  1295.     {
  1296.       "市" : [
  1297.         {
  1298.           "市名" : "济南",
  1299.           "编码" : "101120101"
  1300.         },
  1301.         {
  1302.           "市名" : "潍坊",
  1303.           "编码" : "101120601"
  1304.         },
  1305.         {
  1306.           "市名" : "临沂",
  1307.           "编码" : "101120901"
  1308.         },
  1309.         {
  1310.           "市名" : "菏泽",
  1311.           "编码" : "101121001"
  1312.         },
  1313.         {
  1314.           "市名" : "滨州",
  1315.           "编码" : "101121101"
  1316.         },
  1317.         {
  1318.           "市名" : "东营",
  1319.           "编码" : "101121201"
  1320.         },
  1321.         {
  1322.           "市名" : "威海",
  1323.           "编码" : "101121301"
  1324.         },
  1325.         {
  1326.           "市名" : "枣庄",
  1327.           "编码" : "101121401"
  1328.         },
  1329.         {
  1330.           "市名" : "日照",
  1331.           "编码" : "101121501"
  1332.         },
  1333.         {
  1334.           "市名" : "莱芜",
  1335.           "编码" : "101121601"
  1336.         },
  1337.         {
  1338.           "市名" : "聊城",
  1339.           "编码" : "101121701"
  1340.         },
  1341.         {
  1342.           "市名" : "青岛",
  1343.           "编码" : "101120201"
  1344.         },
  1345.         {
  1346.           "市名" : "淄博",
  1347.           "编码" : "101120301"
  1348.         },
  1349.         {
  1350.           "市名" : "德州",
  1351.           "编码" : "101120401"
  1352.         },
  1353.         {
  1354.           "市名" : "烟台",
  1355.           "编码" : "101120501"
  1356.         },
  1357.         {
  1358.           "市名" : "济宁",
  1359.           "编码" : "101120701"
  1360.         },
  1361.         {
  1362.           "市名" : "泰安",
  1363.           "编码" : "101120801"
  1364.         }
  1365.       ],
  1366.       "省" : "山东"
  1367.     },
  1368.     {
  1369.       "市" : [
  1370.         {
  1371.           "市名" : "西安",
  1372.           "编码" : "101110101"
  1373.         },
  1374.         {
  1375.           "市名" : "延安",
  1376.           "编码" : "101110300"
  1377.         },
  1378.         {
  1379.           "市名" : "榆林",
  1380.           "编码" : "101110401"
  1381.         },
  1382.         {
  1383.           "市名" : "铜川",
  1384.           "编码" : "101111001"
  1385.         },
  1386.         {
  1387.           "市名" : "商洛",
  1388.           "编码" : "101110601"
  1389.         },
  1390.         {
  1391.           "市名" : "安康",
  1392.           "编码" : "101110701"
  1393.         },
  1394.         {
  1395.           "市名" : "汉中",
  1396.           "编码" : "101110801"
  1397.         },
  1398.         {
  1399.           "市名" : "宝鸡",
  1400.           "编码" : "101110901"
  1401.         },
  1402.         {
  1403.           "市名" : "咸阳",
  1404.           "编码" : "101110200"
  1405.         },
  1406.         {
  1407.           "市名" : "渭南",
  1408.           "编码" : "101110501"
  1409.         }
  1410.       ],
  1411.       "省" : "陕西省"
  1412.     },
  1413.     {
  1414.       "市" : [
  1415.         {
  1416.           "市名" : "太原",
  1417.           "编码" : "101100101"
  1418.         },
  1419.         {
  1420.           "市名" : "临汾",
  1421.           "编码" : "101100701"
  1422.         },
  1423.         {
  1424.           "市名" : "运城",
  1425.           "编码" : "101100801"
  1426.         },
  1427.         {
  1428.           "市名" : "朔州",
  1429.           "编码" : "101100901"
  1430.         },
  1431.         {
  1432.           "市名" : "忻州",
  1433.           "编码" : "101101001"
  1434.         },
  1435.         {
  1436.           "市名" : "长治",
  1437.           "编码" : "101100501"
  1438.         },
  1439.         {
  1440.           "市名" : "大同",
  1441.           "编码" : "101100201"
  1442.         },
  1443.         {
  1444.           "市名" : "阳泉",
  1445.           "编码" : "101100301"
  1446.         },
  1447.         {
  1448.           "市名" : "晋中",
  1449.           "编码" : "101100401"
  1450.         },
  1451.         {
  1452.           "市名" : "晋城",
  1453.           "编码" : "101100601"
  1454.         },
  1455.         {
  1456.           "市名" : "吕梁",
  1457.           "编码" : "101101100"
  1458.         }
  1459.       ],
  1460.       "省" : "山西"
  1461.     },
  1462.     {
  1463.       "市" : [
  1464.         {
  1465.           "市名" : "乌鲁木齐",
  1466.           "编码" : "101130101"
  1467.         },
  1468.         {
  1469.           "市名" : "石河子",
  1470.           "编码" : "101130301"
  1471.         },
  1472.         {
  1473.           "市名" : "昌吉",
  1474.           "编码" : "101130401"
  1475.         },
  1476.         {
  1477.           "市名" : "吐鲁番",
  1478.           "编码" : "101130501"
  1479.         },
  1480.         {
  1481.           "市名" : "库尔勒",
  1482.           "编码" : "101130601"
  1483.         },
  1484.         {
  1485.           "市名" : "阿拉尔",
  1486.           "编码" : "101130701"
  1487.         },
  1488.         {
  1489.           "市名" : "阿克苏",
  1490.           "编码" : "101130801"
  1491.         },
  1492.         {
  1493.           "市名" : "喀什",
  1494.           "编码" : "101130901"
  1495.         },
  1496.         {
  1497.           "市名" : "伊宁",
  1498.           "编码" : "101131001"
  1499.         },
  1500.         {
  1501.           "市名" : "塔城",
  1502.           "编码" : "101131101"
  1503.         },
  1504.         {
  1505.           "市名" : "哈密",
  1506.           "编码" : "101131201"
  1507.         },
  1508.         {
  1509.           "市名" : "和田",
  1510.           "编码" : "101131301"
  1511.         },
  1512.         {
  1513.           "市名" : "阿勒泰",
  1514.           "编码" : "101131401"
  1515.         },
  1516.         {
  1517.           "市名" : "阿图什",
  1518.           "编码" : "101131501"
  1519.         },
  1520.         {
  1521.           "市名" : "博乐",
  1522.           "编码" : "101131601"
  1523.         },
  1524.         {
  1525.           "市名" : "克拉玛依",
  1526.           "编码" : "101130201"
  1527.         }
  1528.       ],
  1529.       "省" : "新疆"
  1530.     },
  1531.     {
  1532.       "市" : [
  1533.         {
  1534.           "市名" : "拉萨",
  1535.           "编码" : "101140101"
  1536.         },
  1537.         {
  1538.           "市名" : "山南",
  1539.           "编码" : "101140301"
  1540.         },
  1541.         {
  1542.           "市名" : "阿里",
  1543.           "编码" : "101140701"
  1544.         },
  1545.         {
  1546.           "市名" : "昌都",
  1547.           "编码" : "101140501"
  1548.         },
  1549.         {
  1550.           "市名" : "那曲",
  1551.           "编码" : "101140601"
  1552.         },
  1553.         {
  1554.           "市名" : "日喀则",
  1555.           "编码" : "101140201"
  1556.         },
  1557.         {
  1558.           "市名" : "林芝",
  1559.           "编码" : "101140401"
  1560.         }
  1561.       ],
  1562.       "省" : "西藏"
  1563.     },
  1564.     {
  1565.       "市" : [
  1566.         {
  1567.           "市名" : "台北县",
  1568.           "编码" : "101340101"
  1569.         },
  1570.         {
  1571.           "市名" : "高雄",
  1572.           "编码" : "101340201"
  1573.         },
  1574.         {
  1575.           "市名" : "台中",
  1576.           "编码" : "101340401"
  1577.         }
  1578.       ],
  1579.       "省" : "台湾"
  1580.     },
  1581.     {
  1582.       "市" : [
  1583.         {
  1584.           "市名" : "海口",
  1585.           "编码" : "101310101"
  1586.         },
  1587.         {
  1588.           "市名" : "三亚",
  1589.           "编码" : "101310201"
  1590.         },
  1591.         {
  1592.           "市名" : "东方",
  1593.           "编码" : "101310202"
  1594.         },
  1595.         {
  1596.           "市名" : "临高",
  1597.           "编码" : "101310203"
  1598.         },
  1599.         {
  1600.           "市名" : "澄迈",
  1601.           "编码" : "101310204"
  1602.         },
  1603.         {
  1604.           "市名" : "儋州",
  1605.           "编码" : "101310205"
  1606.         },
  1607.         {
  1608.           "市名" : "昌江",
  1609.           "编码" : "101310206"
  1610.         },
  1611.         {
  1612.           "市名" : "白沙",
  1613.           "编码" : "101310207"
  1614.         },
  1615.         {
  1616.           "市名" : "琼中",
  1617.           "编码" : "101310208"
  1618.         },
  1619.         {
  1620.           "市名" : "定安",
  1621.           "编码" : "101310209"
  1622.         },
  1623.         {
  1624.           "市名" : "屯昌",
  1625.           "编码" : "101310210"
  1626.         },
  1627.         {
  1628.           "市名" : "琼海",
  1629.           "编码" : "101310211"
  1630.         },
  1631.         {
  1632.           "市名" : "文昌",
  1633.           "编码" : "101310212"
  1634.         },
  1635.         {
  1636.           "市名" : "保亭",
  1637.           "编码" : "101310214"
  1638.         },
  1639.         {
  1640.           "市名" : "万宁",
  1641.           "编码" : "101310215"
  1642.         },
  1643.         {
  1644.           "市名" : "陵水",
  1645.           "编码" : "101310216"
  1646.         },
  1647.         {
  1648.           "市名" : "西沙",
  1649.           "编码" : "101310217"
  1650.         },
  1651.         {
  1652.           "市名" : "南沙岛",
  1653.           "编码" : "101310220"
  1654.         },
  1655.         {
  1656.           "市名" : "乐东",
  1657.           "编码" : "101310221"
  1658.         },
  1659.         {
  1660.           "市名" : "五指山",
  1661.           "编码" : "101310222"
  1662.         },
  1663.         {
  1664.           "市名" : "琼山",
  1665.           "编码" : "101310102"
  1666.         }
  1667.       ],
  1668.       "省" : "海南省"
  1669.     },
  1670.     {
  1671.       "市" : [
  1672.         {
  1673.           "市名" : "长沙",
  1674.           "编码" : "101250101"
  1675.         },
  1676.         {
  1677.           "市名" : "株洲",
  1678.           "编码" : "101250301"
  1679.         },
  1680.         {
  1681.           "市名" : "衡阳",
  1682.           "编码" : "101250401"
  1683.         },
  1684.         {
  1685.           "市名" : "郴州",
  1686.           "编码" : "101250501"
  1687.         },
  1688.         {
  1689.           "市名" : "常德",
  1690.           "编码" : "101250601"
  1691.         },
  1692.         {
  1693.           "市名" : "益阳",
  1694.           "编码" : "101250700"
  1695.         },
  1696.         {
  1697.           "市名" : "娄底",
  1698.           "编码" : "101250801"
  1699.         },
  1700.         {
  1701.           "市名" : "邵阳",
  1702.           "编码" : "101250901"
  1703.         },
  1704.         {
  1705.           "市名" : "岳阳",
  1706.           "编码" : "101251001"
  1707.         },
  1708.         {
  1709.           "市名" : "张家界",
  1710.           "编码" : "101251101"
  1711.         },
  1712.         {
  1713.           "市名" : "怀化",
  1714.           "编码" : "101251201"
  1715.         },
  1716.         {
  1717.           "市名" : "黔阳",
  1718.           "编码" : "101251301"
  1719.         },
  1720.         {
  1721.           "市名" : "永州",
  1722.           "编码" : "101251401"
  1723.         },
  1724.         {
  1725.           "市名" : "吉首",
  1726.           "编码" : "101251501"
  1727.         },
  1728.         {
  1729.           "市名" : "湘潭",
  1730.           "编码" : "101250201"
  1731.         }
  1732.       ],
  1733.       "省" : "湖南"
  1734.     },
  1735.     {
  1736.       "市" : [
  1737.         {
  1738.           "市名" : "南京",
  1739.           "编码" : "101190101"
  1740.         },
  1741.         {
  1742.           "市名" : "镇江",
  1743.           "编码" : "101190301"
  1744.         },
  1745.         {
  1746.           "市名" : "苏州",
  1747.           "编码" : "101190401"
  1748.         },
  1749.         {
  1750.           "市名" : "南通",
  1751.           "编码" : "101190501"
  1752.         },
  1753.         {
  1754.           "市名" : "扬州",
  1755.           "编码" : "101190601"
  1756.         },
  1757.         {
  1758.           "市名" : "宿迁",
  1759.           "编码" : "101191301"
  1760.         },
  1761.         {
  1762.           "市名" : "徐州",
  1763.           "编码" : "101190801"
  1764.         },
  1765.         {
  1766.           "市名" : "淮安",
  1767.           "编码" : "101190901"
  1768.         },
  1769.         {
  1770.           "市名" : "连云港",
  1771.           "编码" : "101191001"
  1772.         },
  1773.         {
  1774.           "市名" : "常州",
  1775.           "编码" : "101191101"
  1776.         },
  1777.         {
  1778.           "市名" : "泰州",
  1779.           "编码" : "101191201"
  1780.         },
  1781.         {
  1782.           "市名" : "无锡",
  1783.           "编码" : "101190201"
  1784.         },
  1785.         {
  1786.           "市名" : "盐城",
  1787.           "编码" : "101190701"
  1788.         }
  1789.       ],
  1790.       "省" : "江苏"
  1791.     },
  1792.     {
  1793.       "市" : [
  1794.         {
  1795.           "市名" : "哈尔滨",
  1796.           "编码" : "101050101"
  1797.         },
  1798.         {
  1799.           "市名" : "牡丹江",
  1800.           "编码" : "101050301"
  1801.         },
  1802.         {
  1803.           "市名" : "佳木斯",
  1804.           "编码" : "101050401"
  1805.         },
  1806.         {
  1807.           "市名" : "绥化",
  1808.           "编码" : "101050501"
  1809.         },
  1810.         {
  1811.           "市名" : "黑河",
  1812.           "编码" : "101050601"
  1813.         },
  1814.         {
  1815.           "市名" : "双鸭山",
  1816.           "编码" : "101051301"
  1817.         },
  1818.         {
  1819.           "市名" : "伊春",
  1820.           "编码" : "101050801"
  1821.         },
  1822.         {
  1823.           "市名" : "大庆",
  1824.           "编码" : "101050901"
  1825.         },
  1826.         {
  1827.           "市名" : "七台河",
  1828.           "编码" : "101051002"
  1829.         },
  1830.         {
  1831.           "市名" : "鸡西",
  1832.           "编码" : "101051101"
  1833.         },
  1834.         {
  1835.           "市名" : "鹤岗",
  1836.           "编码" : "101051201"
  1837.         },
  1838.         {
  1839.           "市名" : "齐齐哈尔",
  1840.           "编码" : "101050201"
  1841.         },
  1842.         {
  1843.           "市名" : "大兴安岭",
  1844.           "编码" : "101050701"
  1845.         }
  1846.       ],
  1847.       "省" : "黑龙江"
  1848.     },
  1849.     {
  1850.       "市" : [
  1851.         {
  1852.           "市名" : "长春",
  1853.           "编码" : "101060101"
  1854.         },
  1855.         {
  1856.           "市名" : "延吉",
  1857.           "编码" : "101060301"
  1858.         },
  1859.         {
  1860.           "市名" : "四平",
  1861.           "编码" : "101060401"
  1862.         },
  1863.         {
  1864.           "市名" : "白山",
  1865.           "编码" : "101060901"
  1866.         },
  1867.         {
  1868.           "市名" : "白城",
  1869.           "编码" : "101060601"
  1870.         },
  1871.         {
  1872.           "市名" : "辽源",
  1873.           "编码" : "101060701"
  1874.         },
  1875.         {
  1876.           "市名" : "松原",
  1877.           "编码" : "101060801"
  1878.         },
  1879.         {
  1880.           "市名" : "吉林",
  1881.           "编码" : "101060201"
  1882.         },
  1883.         {
  1884.           "市名" : "通化",
  1885.           "编码" : "101060501"
  1886.         }
  1887.       ],
  1888.       "省" : "吉林"
  1889.     },
  1890.     {
  1891.       "市" : [
  1892.         {
  1893.           "市名" : "沈阳",
  1894.           "编码" : "101070101"
  1895.         },
  1896.         {
  1897.           "市名" : "鞍山",
  1898.           "编码" : "101070301"
  1899.         },
  1900.         {
  1901.           "市名" : "抚顺",
  1902.           "编码" : "101070401"
  1903.         },
  1904.         {
  1905.           "市名" : "本溪",
  1906.           "编码" : "101070501"
  1907.         },
  1908.         {
  1909.           "市名" : "丹东",
  1910.           "编码" : "101070601"
  1911.         },
  1912.         {
  1913.           "市名" : "葫芦岛",
  1914.           "编码" : "101071401"
  1915.         },
  1916.         {
  1917.           "市名" : "营口",
  1918.           "编码" : "101070801"
  1919.         },
  1920.         {
  1921.           "市名" : "阜新",
  1922.           "编码" : "101070901"
  1923.         },
  1924.         {
  1925.           "市名" : "辽阳",
  1926.           "编码" : "101071001"
  1927.         },
  1928.         {
  1929.           "市名" : "铁岭",
  1930.           "编码" : "101071101"
  1931.         },
  1932.         {
  1933.           "市名" : "朝阳",
  1934.           "编码" : "101071201"
  1935.         },
  1936.         {
  1937.           "市名" : "盘锦",
  1938.           "编码" : "101071301"
  1939.         },
  1940.         {
  1941.           "市名" : "大连",
  1942.           "编码" : "101070201"
  1943.         },
  1944.         {
  1945.           "市名" : "锦州",
  1946.           "编码" : "101070701"
  1947.         }
  1948.       ],
  1949.       "省" : "辽宁"
  1950.     }
  1951.   ]
  1952. }

解析城市json

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>作业</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //根据city.json 手动写一个JS字面量对象，并且封装到数据模型中
  10.             var rootObj = {
  11.                 //省份数组
  12.                 provinces : [
  13.                     //每个省份对象
  14.                     {
  15.                         provinceName : "黑龙江省",
  16.                         //城市数组
  17.                         cities : [
  18.                             //每个城市对象
  19.                             {
  20.                                 cityName : "哈尔滨市",
  21.                                 cityCode : "1001"
  22.                             },
  23.                             {
  24.                                 cityName : "大庆市",
  25.                                 cityCode : "1002"
  26.                             },
  27.                             {
  28.                                 cityName : "鸡西市",
  29.                                 cityCode : "1003"
  30.                             }
  31.                         ]
  32.                     },
  33.                     {
  34.                         provinceName : "河北省",
  35.                         cities : [
  36.                             {
  37.                                 cityName : "石家庄",
  38.                                 cityCode : "2001"
  39.                             },
  40.                             {
  41.                                 cityName : "廊坊市",
  42.                                 cityCode : "2002"
  43.                             }
  44.                         ]
  45.                     }
  46.                 ] 
  47.             }
  50.             //省份构造函数
  51.             function Province (provinceName) {
  52.                 this.provinceName = provinceName;
  53.                 //城市数组
  54.                 this.cities = new Array();
  55.             }
  57.             //城市构造函数
  58.             function City (cityName, cityCode) {
  59.                 this.cityName = cityName;
  60.                 this.cityCode = cityCode;
  61.             }
  64.             //存储省份对象的数组
  65.             var provinceArray = new Array();
  68.             //解析字面量对象、并且封装数据模型
  69.             //获得省份数组
  70.             var provinces = rootObj.provinces;
  71.             //遍历省份数组
  72.             for (var tempProvinceIdx in provinces) {
  73.                 //得到每一个省份对象
  74.                 var tempProvince = provinces[tempProvinceIdx];
  76.                 /** 创建省份对象（构造函数） **/
  77.                 var tempProvinceObj = new Province(tempProvince.provinceName);
  79.                 /** 把省份对象添加到省份数组中 **/
  80.                 provinceArray.push(tempProvinceObj);
  82.                 //获得城市数组
  83.                 var cities = tempProvince.cities;
  84.                 //遍历城市数组
  85.                 for (var tempCityIdx in cities) {
  86.                     //得到每一个城市对象
  87.                     var tempCity = cities[tempCityIdx];
  89.                     /** 创建城市对象（构造函数） **/
  90.                     var tempCityObj = new City(tempCity.cityName, tempCity.cityCode);
  92.                     /** 把每个城市对象添加到当前省的城市数组中 **/
  93.                     tempProvinceObj.cities.push(tempCityObj);
  95.                     // 遍历城市对象
  96.                     for (var tempCityProperty in tempCity) {
  97.                         //找某个城市
  98.                         if (tempCityProperty === 'cityName') {
  99.                             //获得城市名字
  100.                             var cityName = tempCity[tempCityProperty];
  101.                             if (cityName === '石家庄') {
  102.                                 //格式化输出
  103.                                 console.log(" \n 省份：" + tempProvince.provinceName + " \n 城市：" + tempCity.cityName + " \n 编码：" + tempCity.cityCode);
  104.                             }
  105.                         }
  106.                     }
  107.                 }
  108.             }
  111.         console.log(provinceArray);
  115.         </script>
  116.     </body>
  117. </html>

AjaxUtil

  1. /*
  2.  * 封装ajax
  3.  * method: 请求方式 GET/POST
  4.  * url: 请求路径
  5.  * data: 参数
  6.  * successCallBackFn: 响应成功回调函数
  7.  * failCallBackFn: 响应失败回调函数
  8.  */
  9. function ajaxFn (method, url, data, successCallBackFn, failCallBackFn) {
  10.     var xhr;
  11.     //创建请求对象
  12.     if (window.XMLHttpRequest) {
  13.         xhr = new XMLHttpRequest();
  14.     } else if (window.ActiveXObject) {
  15.         var versions = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
  16.         for (var i = 0; i < versions.length; i++) {
  17.             try {
  18.                 xhr = new ActiveXObject(versions[i]);
  19.                 break;
  20.             } catch (e) {
  21.                 console.log(e);
  22.             }
  23.         }
  24.     } else {
  25.         //创建一个错误对象
  26.         //throw 是主动抛出一个异常错误
  27.         throw new Error("浏览器不支持AJAX");
  28.     }
  30.     //打开链接 和 发送请求
  31.     if (method == "GET" || method == "get") {
  32.         //利用ajax GET请求会有缓存，为了避免每次访问的路径不一样。我们可以在
  33.         //url后面加上 Math.random()来解决。
  34.         xhr.open(method, url + "?" + data + Math.random(), true);
  35.         xhr.send(null);
  36.     } else if (method == "POST" || method == "post") {
  37.         xhr.open(method, url, true);
  38.         //post请求需要设置请求头
  39.         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  40.         xhr.send(data);
  41.     } else {
  42.         console.log("请求方式不对！");
  43.     }
  45.     //请求响应结果
  46.     xhr.onreadystatechange = function () {
  47.         if (xhr.readyState == 4 ) {
  48.             if (xhr.status == 200) {
  49.                 //回调成功的函数
  50.                 successCallBackFn(xhr.responseText);
  51.             } else {
  52.                 //失败
  53.                 failCallBackFn("失败！");
  54.             }   
  55.         }
  56.     }
  58.     return xhr;
  59. }

EventUtil

  1. /*
  2.  * 事件封装工具
  3.  */
  4. var EventUtil = {
  5.     //添加事件的方法
  6.     /*
  7.      * element: 给"谁"(某个元素)添加事件
  8.      * eventType: 事件类型
  9.      * handler: 具体实现函数
  10.      */
  11.     addHandler : function (element, eventType, handler) {
  12.         //三种实现
  13.         if (window.addEventListener) {
  14.             //IE9及IE9以上
  15.             element.addEventListener(eventType, handler);
  16.         } else if (window.attachEvent) {
  17.             //IE8及IE8以下实现 
  18.             //attachEvent需要的事件类型 需要 加上 on
  19.             element.attachEvent("on" + eventType, handler);
  20.         } else {
  21.             //通过中括号访问属性的语法才可以
  22.             element["on" + eventType] = handler;
  23.         }
  24.     },
  25.     removeHandler : function (element, eventType, handler) {
  26.         if (window.removeEventListener) {
  27.             element.removeEventListener(eventType, handler);
  28.         } else if (window.detachEvent) {
  29.             element.detachEvent("on" + eventType, handler);
  30.         } else {
  31.             element["on" + eventType] = null;
  32.         }
  33.     }
  35. }

解析carjson

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>解析carJson</title>
  6.         <script type="text/javascript" src="js/AjaxUtil.js" ></script>
  7.         <script type="text/javascript" src="js/EventUtil.js" ></script>
  8.     </head>
  9.     <body>
  10.         <script type="text/javascript">
  12.             //通过工具类，给window添加onload事件
  13.             EventUtil.addHandler(window, "load", function () {
  14. //              alert($("load_btn").value);
  15. 				//执行完onload事件后，给button添加单击事件
  16. 				EventUtil.addHandler($("load_btn"), "click", function () {
  17.                     //点击按钮通过ajax来异步加载数据
  18. //                  ajaxFn("GET", "car.json", null, function () {
  19. //                      可以这么写 这个是成功
  20. //                  }, function () {
  21. //                      这个是失败
  22. //                  });
  23.                     //调用ajax异步请求数据
  24.                     ajaxFn("GET", "car.json", null, successCallBackFn,
  25.                     failCallBackFn);
  26.                 });
  27.             });
  29.             //ajax返回的成功函数
  30.             function successCallBackFn (returnValue) {
  31. //              console.log(returnValue);
  32.                 //把JSON字符串转换成JS对象
  33.                 var rootObj = JSON.parse(returnValue);
  34. //              console.log(rootObj);
  35.                 //得到listContents数组
  36.                 var listContentArray = rootObj.ListContents;
  38.                 //获得外层table
  39.                 var outTable = $("out_table");
  41.                 //遍历listContentArray
  42.                 for (var tempListContentIdx in listContentArray) {
  44.                     //得到每一个listContent对象
  45.                     var tempListContent = listContentArray[tempListContentIdx];
  47.                     //创建外层tr
  48.                     var outTr = createElement("tr");
  49.                     //创建外层td
  50.                     var outTd = createElement("td");
  51.                     //创建内层table
  52.                     var inTable = createElement("table");
  53.                     //创建内层thead
  54.                     var inThead = createElement("thead");
  55.                     //创建内层thead的textNode
  56.                     var inTheadValue = createTextNode(tempListContent.PinYin);
  57.                     //添加textNode
  58.                     inThead.appendChild(inTheadValue);
  59.                     //添加inThead
  60.                     inTable.appendChild(inThead);
  61.                     //添加inTable
  62.                     outTd.appendChild(inTable);
  63.                     //添加outTd
  64.                     outTr.appendChild(outTd);
  65.                     //添加outTr
  66.                     outTable.appendChild(outTr);
  68.                     /******** 创建内部的tr 和 td *******/
  69.                     //得到carArray数组
  70.                     var carArray = tempListContent.GroupInfo;
  71.                     //遍历carArray
  72.                     for (var tempCarIdx in carArray) {
  73.                         //得到每一个car对象
  74.                         var tempCar = carArray[tempCarIdx];
  75.                         //创建内部tr
  76.                         var inTr = createElement("tr");
  77.                         //创建内部td
  78.                         var inTd = createElement("td");
  79.                         //创建内部td的textNode
  80.                         var inTdValue = createTextNode(tempCar.MainBrandName);
  81.                         //添加textNode
  82.                         inTd.appendChild(inTdValue);
  83.                         //添加inTd
  84.                         inTr.appendChild(inTd);
  85.                         //添加inTr
  86.                         inTable.appendChild(inTr);
  87.                     }
  88.                 }
  90.             }
  92.             //ajax返回的失败函数
  93.             function failCallBackFn (returnValue) {
  94.                 alert(returnValue);
  95.             }
  98.             //封装一下通过id获取标签元素
  99.             function $ (idValue) {
  100.                 return document.getElementById(idValue);
  101.             }
  103.             //封装一下创建元素的方法
  104.             function createElement (elementName) {
  105.                 return document.createElement(elementName);
  106.             }
  108.             //封装一下创建textNode
  109.             function createTextNode (elementValue) {
  110.                 return document.createTextNode(elementValue);
  111.             }
  113.         </script>
  115.         <input type="button" value="加载数据" id="load_btn"/>
  117.         <br />
  118.         <br />
  120.         <table id="out_table" border="1px" >
  121.             <!--<tr>
  122.                 <td>
  123.                     <table>
  124.                         <thead>A</thead>
  125.                         <tr>
  126.                             <td>阿拉斯加</td>
  127.                         </tr>
  128.                         <tr>
  129.                             <td>阿拉丁</td>
  130.                         </tr>
  131.                     </table>
  132.                 </td>
  133.             </tr>
  134.             <tr>
  135.                 <td>
  136.                     <table>
  137.                         <thead>B</thead>
  138.                         <tr>
  139.                             <td>宝马</td>
  140.                         </tr>
  141.                         <tr>
  142.                             <td>奔驰</td>
  143.                         </tr>
  144.                     </table>
  145.                 </td>
  146.             </tr>-->
  147.         </table>
  149.     </body>
  150. </html>

左右选人

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>选人</title>
  6.         <style type="text/css">
  7.             div {
  8.                 float: left;
  9.                 border: 1px solid red;
  10.             }
  12.             #main_div {
  13.                 width: 500px;
  14.                 height: 300px;
  15.                 margin-left: 300px;
  16.             }
  18.             #left_div {
  19.                 width: 200px;
  20.                 height: 300px;
  21.             }
  23.             #center_div {
  24.                 width: 94px;
  25.                 height: 300px;
  26.                 text-align: center;
  27.             }
  29.             #right_div {
  30.                 width: 200px;
  31.                 height: 300px;
  32.                 float: right;
  33.             }
  34.             #left_sel {
  35.                 width: 200px;
  36.                 height: 280px;
  37.             }
  38.             #right_sel {
  39.                 width: 200px;
  40.                 height: 280px;
  41.             }
  42.             input {
  43.                 margin-top: 30px;
  44.             }
  47.         </style>
  48.         <!-- 导入事件工具js文件 -->
  49.         <script type="text/javascript" src="EventUtil.js"></script>
  50.     </head>
  51.     <body>
  52.         <div id="main_div">
  53.             <!-- 左边的div -->
  54.             <div id="left_div">
  55.                 <label id="left_label">0</label>
  56.                 <select id="left_sel" multiple>
  58.                 </select>
  59.             </div>
  61.             <!-- 中间的div -->
  62.             <div id="center_div">
  63.                 <input type="button" value="添加" id="add_btn" />
  64.                 <br />
  65.                 <input type="button" value="移除" id="remove_btn" />
  66.                 <br />
  67.                 <input type="button" value="全部添加" id="addAll_btn" />
  68.                 <br />
  69.                 <input type="button" value="全部移除" id="removeAll_btn" />
  70.             </div>
  72.             <!-- 右边的div -->
  73.             <div id="right_div">
  74.                 <label id="right_label">0</label>
  75.                 <select id="right_sel" multiple>
  77.                 </select>
  78.             </div>
  79.         </div>
  81.         <script type="text/javascript">
  83.         //左边sel
  84.         var leftSel = $("left_sel");
  85.         //左边数据数组
  86.         var leftPersonArray = new Array();
  88.         //右边sel
  89.         var rightSel = $("right_sel");
  90.         //右边数据数组
  91.         var rightPersonArray = new Array();
  93.         //window的onload事件
  94.         EventUtil.addHandler(window, "load", function () {
  95.             //1、初始化数据
  96.             var personObj = [
  97.                 {
  98.                     name : "张三"
  99.                 },
  100.                 {
  101.                     name : "李四"
  102.                 },
  103.                 {
  104.                     name : "王五"
  105.                 },
  106.                 {
  107.                     name : "赵六"
  108.                 },
  109.                 {
  110.                     name : "冯七"
  111.                 }
  112.             ];
  114.             //遍历personObj 
  115.             for (var tempIdx in personObj) {
  116.                 //得到每个person对象
  117.                 var tempPerson = personObj[tempIdx];
  118.                 //添加到左边数据数组
  119.                 leftPersonArray.push(tempPerson);
  120.                 //重置左边sel
  121.                 resetSel(leftSel, tempPerson.name);
  122.                 //人数
  123.                 leftAndRightCount();
  124.             }
  126.             //2、给左边sel添加事件
  127.             EventUtil.addHandler(leftSel, "dblclick", function () {
  128.                 //添加右边数据数组
  129.                 // this.selectedIndex 相当于leftSel.selectedIndex，获得选中option的下标
  130.                 rightPersonArray.push(leftPersonArray[this.selectedIndex]);
  131.                 //重置右边sel
  132.                 resetSel(rightSel, leftPersonArray[this.selectedIndex].name);
  134.                 //删除左边数据数组
  135.                 leftPersonArray.splice(this.selectedIndex, 1);
  136.                 //删除左边option
  137.                 //this.options 获得所有option 是一个数组
  138.                 leftSel.removeChild(this.options[this.selectedIndex]);
  140.                 //人数
  141.                 leftAndRightCount();
  142.             });
  144.             //3、给添加按钮添加事件
  145.             EventUtil.addHandler($("add_btn"), "click", function () {
  146.                 //遍历options
  147.                 for (var i = 0; i < leftSel.options.length; i++) {
  148.                     //找出选中的option
  149.                     if (leftSel.options[i].selected) {
  150.                         //添加右边数据数组
  151.                         rightPersonArray.push(leftPersonArray[i]);
  152.                         //重置右边sel的方法
  153.                         resetSel(rightSel, leftPersonArray[i].name);
  155.                         //删除左边数据数组
  156.                         leftPersonArray.splice(i, 1);
  157.                         //删除左边的option
  158.                         leftSel.removeChild(leftSel.options[i]);
  160.                         //每次删除后要改变下标
  161.                         // i -= 1;
  162.                         i--;
  163.                     }
  164.                 }
  165.                 //人数
  166.                 leftAndRightCount();
  167.             });
  169.             //4、右边sel添加事件
  171.             //5、给移除按钮添加事件
  173.             //6、给全部添加按钮添加事件
  174.             EventUtil.addHandler($("addAll_btn"), "click", function () {
  175.                 //遍历左边的options
  176.                 for (var i = 0; i < leftSel.options.length; i++) {
  177.                     //添加右边数据数组
  178.                     rightPersonArray.push(leftPersonArray[i]);
  179.                     //重置右边sel
  180.                     resetSel(rightSel, leftPersonArray[i].name);
  182.                     //删除左边数据数组
  183.                     leftPersonArray.splice(i, 1);
  184.                     //删除左边option
  185.                     leftSel.removeChild(leftSel.options[i]);
  187.                     //改变下标
  188.                     i--;
  189.                 }
  191.                 //人数
  192.                 leftAndRightCount();
  193.             });
  195.             //7、给全部移除按钮添加事件
  197.         });
  200.         //封装左边和右边人数的方法
  201.         function leftAndRightCount () {
  202.             $("left_label").innerHTML = leftPersonArray.length;
  203. 			$("right_label").innerHTML = rightPersonArray.length;
  204.         }
  206.         //封装重置sel的方法
  207.         function resetSel (sel, textNodeValue) {
  208.             //创建option
  209.             var option = createElement("option");
  210.             //创建textNode
  211.             var optionValue = createTextNode(textNodeValue);
  212.             //添加textNode
  213.             option.appendChild(optionValue);
  214.             //添加option
  215.             sel.appendChild(option);
  216.         }
  218.         //封装创建元素的方法
  219.         function createElement (elementName) {
  220.             return document.createElement(elementName);
  221.         }
  223.         //封装创建textNode的方法
  224.         function createTextNode (elementValue) {
  225.             return document.createTextNode(elementValue);
  226.         }
  228.         //封装通过id获取标签的方法
  229.         function $ (idName) {
  230.             return document.getElementById(idName);
  231.         }
  233.         </script>
  235.     </body>
  236. </html>

open()跨窗口传值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面1</title>
  6.     <script type="text/javascript">
  7.         window.onload = function () {
  8.             var oBtn = document.getElementById('btn1');
  9.             oBtn.onclick = function () {
  10.                 window.open("open跨窗口传值2.html","123",'height=400,width=400,top=100,left=200,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
  11.                 var content1 = document.getElementById('input1').value;
  12.             }
  13.         }
  14.     </script>
  15. </head>
  16. <body>
  17.     <input type="text" id="input1">
  18.     <button id="btn1">点击</button>
  19. </body>
  20. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面2</title>
  6.     <script type="text/javascript">
  7.         window.onload = function () {
  8.             /*var oBtn = document.getElementById('btn1');
  9.             oBtn.onclick = function () {
  10.                 window.open("open跨窗口传值2.html");
  11.                 var content1 = document.getElementById('input1').value;
  12.             }*/
  13.             var content2 = document.getElementById("input2");
  14.              content2.value= window.opener.document.getElementById('input1').value 
  16.              // 传回
  17.              var oBtn = document.getElementById('btn2');
  18.             oBtn.onclick = function () {
  20.                  window.opener.document.getElementById('input1').value = content2.value;
  22.             }
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27.     <input type="text" id="input2">
  28.     <button id="btn2">点击</button>
  29. </body>
  30. </html>

代理设计模式

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>代理设计模式</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 小明喜欢小红，想给小红送一朵花，但小明不好意思直接送，委托
  11.                 小红的闺蜜小兰去送。最后小红接收到花。
  12.             */
  14.             // function Flower () {
  16.             // }
  18.             //构造函数
  19.             var Flower = function (name) {
  20.                 this.name = name;
  21.             }
  23.             //小明
  24.             var xiaoming = {
  25.                 sendFlower : function (target) {
  26.                     var flower = new Flower("菊花");
  27.                     //送给委托人小兰（最终通过委托人在送给小红）
  28.                     target.receive(flower);
  29.                 }
  30.             }
  32.             //小红
  33.             var xiaohong = {
  34.                 //最后接花的人
  35.                 receive : function (flower) {
  36.                     console.log("接收到 " + flower.name + "了，好开心！");
  37.                 }
  38.             }
  40.             //小兰
  41.             var xiaolan = {
  42.                 //接收花的方法，刚接完就送给小红
  43.                 receive : function (flower) {
  44.                     //给小红
  45.                     xiaohong.receive(flower);
  46.                 }
  47.             }
  49.             //小明送花
  50.             xiaoming.sendFlower(xiaolan);
  53.         </script>
  54.     </body>
  55. </html>

单例设计模式

  1.  <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>单例设计模式</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //人的构造函数
  10.             var Person = function () {
  12.             }
  13.             //创建两个人的对象，证明是两个不同的实例
  14.             var person1 = new Person();
  15.             var person2 = new Person();
  16.             console.log("person1 === person2：" + person1 === person2);
  19.             // function fn () {
  20.             //  console.log("测试");
  21.             // }
  23.             //这种方式，声明即调用。
  24.             //语法：(函数声明)();
  25.             (function fn () {
  26.                 console.log("测试");
  27.             })();
  29.             //还可以这么写
  30.             var fn1 = (function () {
  31.                 console.log("测试");
  32.             })();
  35.             //写一个单利
  36.             var Dog = (function () {
  37.                 // console.log(123);
  38.                 console.log("==========");
  40.                 //通过闭包外部函数的局部变量，模拟“静态”变量，这个变量会存在内存中，每次调用外部函数的时候才初始化这个instance
  41.                 var instance;
  43.                 //这个才是真的构造函数实现
  44.                 var Dog = function (name) {
  45.                     console.log("---------");
  46.                     this.name = name;
  48.                     //判断instance是否为空
  49.                     if (instance) {
  50.                         return instance;
  51.                     }
  53.                     //如果不存在，把当前对象赋值给instance
  54.                     instance = this;
  55.                     return instance;
  56.                 }
  57.                 //外部函数return一个 内部的构造函数
  58.                 return Dog;
  59.             })();
  61.             var dog1 = new Dog("妞妞");
  62.             var dog2 = new Dog("憨憨");
  64.             console.log("dog1 === dog2 : " + (dog1 === dog2));
  66.             //注意: 打印的是妞妞，因为还没有等到这个对象生成，就返回第一次那个对象了。
  67.             console.log(dog2.name);
  69.             dog2.name = "打脸";
  70.             console.log(dog1.name);
  71.         </script>
  73.     </body>
  74. </html>

策略设计模式

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>策略设计模式</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //创建一个策略对象，方便管理相应的算法
  10.             var stategaies = {
  11.                 a : function (salary) {
  12.                     return salary * 2;
  13.                 },
  14.                 b : function (salary) {
  15.                     return salary * 3;
  16.                 },
  17.                 c : function (salary) {
  18.                     return salary * 4;
  19.                 }
  20.             }
  22.             //
  23.             var getMoney = function (level, salary) {
  24.                 //分配策略，因为是形参，通过中括号的语法调用属性，得到的是a、b、c方法，传入salary直接调用即可
  25.                 return stategaies[level](salary);
  26.             }
  28.             var money = getMoney("c", 20000);
  30.             console.log(money);
  32.         </script>
  34.     </body>
  35. </html>

适配器设计模式

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>适配器设计模式01</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //开发调用外部接口的方式（没用适配器）
  10.             var googleMap = {
  11.                 show : function () {
  12.                     console.log("显示谷歌地图数据！");
  13.                 }
  14.             }
  16.             var baiduMap = {
  17.                 show : function () {
  18.                     console.log("显示百度地图数据！");
  19.                 }
  20.             }
  22.             var renderMap = function (map) {
  23.                 //判断各种地图中是否有show函数
  24.                 if (map.show instanceof Function) {
  25.                     //如果有的话，就可以直接调用，显示数据
  26.                     map.show();
  27.                 }
  28.             }
  30.             renderMap(baiduMap);
  31.             renderMap(googleMap);
  33.         </script>
  34.     </body>
  35. </html>
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>适配器设计模式02</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //利用适配器设计模式，解决谷歌和百度地图数据方法不兼容的问题
  10.             var googleMap = {
  11.                 show : function () {
  12.                     console.log("显示谷歌地图！");
  13.                 }
  14.             }
  16.             var baiduMap = {
  17.                 loadData : function () {
  18.                     console.log("显示百度地图数据！");
  19.                 }
  20.             }
  22.             //给百度地图添加一个适配器对象
  23.             var baiduAdapter = {
  24.                 //适配器实现一个show函数
  25.                 show : function () {
  26.                     //在这里调用百度显示数据的函数，并且把运行结果返回
  27.                     return baiduMap.loadData();
  28.                 }
  29.             }
  31.             var renderMap = function (map) {
  32.                 if (map.show instanceof Function) {
  33.                     map.show();
  34.                 }
  35.             }
  37.             renderMap(googleMap);
  38.             // renderMap(baiduMap);
  39.             //为了兼容，这里需要传入我们写的适配器对象
  40.             renderMap(baiduAdapter);
  44.         </script>
  45.     </body>
  46. </html>

工厂设计模式

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>工厂设计模式</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //利用工厂设计模式创建对象
  10.             function createPerson (name, age, sex) {
  11.                 var person = new Object();
  12.                 //动态插入了一个属性
  13.                 person.name = name;
  14.                 person.age = age;
  15.                 person.sex = sex;
  16.                 person.sayHello = function () {
  17.                     console.log(this.name);
  18.                 }
  20.                 return person;
  21.             }
  23.             var person1 = createPerson("小红", 18, "女");
  24.             var person2 = createPerson("小明", 19, "男");
  25.             person1.sayHello();
  26.             person2.sayHello();
  28.             console.log(person1 === person2);
  30.             /*
  31.                 工厂设计模式创建对象的优缺点
  32.                 优点：解决了创建多个相似对象的问题。
  33.                 缺点：没有解决对对象的识别问题(没有明确对象的类型)。
  34.             */
  36.         </script>
  37.     </body>
  38. </html>

模板设计模式

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>模板设计模式</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 咖啡
  11.                 1、烧水
  12.                 2、冲咖啡
  13.                 3、把咖啡倒入杯子
  14.                 4、加糖和奶
  15.             */
  16.             //喝咖啡的构造函数
  17.             var Coffee = function () {
  19.             }
  20.             // function Coffee () {
  22.             // }
  24.             //1、烧水
  25.             Coffee.prototype.boilWater = function () {
  26.                 console.log("烧水");
  27.             }
  29.             //2、冲咖啡
  30.             Coffee.prototype.brewCoffee = function () {
  31.                 console.log("冲咖啡");
  32.             }
  34.             //3、把咖啡倒入杯子
  35.             Coffee.prototype.pourInCup = function () {
  36.                 console.log("把咖啡倒入杯子");
  37.             }
  39.             //4、加糖、奶
  40.             Coffee.prototype.addSugarAndMilk = function () {
  41.                 console.log("加糖和奶");
  42.             }
  44.             // 封装一下喝咖啡的流程
  45.             Coffee.prototype.init = function () {
  46.                 this.boilWater();
  47.                 this.brewCoffee();
  48.                 this.pourInCup();
  49.                 this.addSugarAndMilk();
  50.             }
  52.             //创建一个咖啡对象
  53.             var coffee = new Coffee();
  54.             coffee.init();
  56.             /*
  57.                 茶
  58.                 1、烧水
  59.                 2、沏茶
  60.                 3、把茶放入杯子中
  61.                 4、加柠檬
  62.             */
  63.             //喝茶的构造函数
  64.             var Tea = function () {
  66.             }
  68.             //1、烧水
  69.             Tea.prototype.boilWater = function () {
  70.                 console.log("烧水");
  71.             }
  73.             //2、沏茶
  74.             Tea.prototype.brewTea = function () {
  75.                 console.log("沏茶");
  76.             }
  78.             //3、把茶放到杯子中
  79.             Tea.prototype.pourInCup = function () {
  80.                 console.log("把茶放到杯子中");
  81.             }
  83.             //4、加柠檬
  84.             Tea.prototype.addLemon = function () {
  85.                 console.log("加柠檬");
  86.             }
  88.             //封装喝茶的流程
  89.             Tea.prototype.init = function () {
  90.                 this.boilWater();
  91.                 this.brewTea();
  92.                 this.pourInCup();
  93.                 this.addLemon();
  94.             }
  96.             Tea.prototype = new S();
  98.             //创建茶的对象
  99.             var tea = new Tea();
  100.             tea.init();
  102.         </script>
  103.     </body>
  104. </html>
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>模板设计模式02</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 经过分析，我们可以把某些构造函数，相同的部分抽象出来，抽象到一个父类（构造函数）里，那么其他子类（构造函数）的原型对象只要指向这个父类（构造函数）的实例，就形成了一个继承关系。切记：JS中没有类的继承，只有对象的继承。换句话说，某个类型只能继承于某个类型的一个实例对象。
  12.                 之前写的咖啡和茶的流程，我们可以抽象出来以下几个步骤：
  13.                 1、烧水
  14.                 2、冲（饮品）名字可以叫做：brew()
  15.                 3、把（饮品）放到杯子中
  16.                 4、加（材料）名字可以叫做：addDrink()
  17.             */
  19.             //父类（构造函数）
  20.             var SuperObj = function () {
  22.             }
  24.             //抽象出来的烧水方法
  25.             SuperObj.prototype.boilWater = function () {
  26.                 //这个要实现，因为无论喝的是什么饮品，都需要烧水，它们（子类）都具备相同的烧水功能，所以在父类里实现这个方法。子类就不用实现了，直接调用即可。
  27.                 console.log("烧水！");
  28.             }
  30.             //抽象出来的冲（饮品）方法
  31.             SuperObj.prototype.brew = function () {
  32.                 //这里什么都不用实现，让子类去实现它们想要实现的功能，
  33.                 //因为冲什么父类也不知道。
  34.             }
  36.             //抽象出来的把饮品放在杯子中
  37.             SuperObj.prototype.pourInCup = function () {
  38.                 //这里也是什么都不用实现，因为不确定放的是什么饮品。
  39.             }
  41.             //抽象出来的加材料的方法
  42.             SuperObj.prototype.addDrink = function () {
  43.                 //这里也什么都不用实现，因为不确定加的是什么材料
  44.             }
  46.             //抽象出来的喝饮品流程的方法
  47.             SuperObj.prototype.init = function () {
  48.                 //要实现这个方法，因为无论是咖啡还是茶，都是以上者四个流程，
  49.                 //只是流程内部的实现不一样而已。
  50.                 this.boilWater();
  51.                 this.brew();
  52.                 this.pourInCup();
  53.                 this.addDrink();
  54.             }
  57.             //咖啡构造函数
  58.             var Coffee = function () {
  60.             }
  62.             //建立子类和父类的关系（也就是指定一下原型对象）
  63.             Coffee.prototype = new SuperObj();
  65.             //父类烧水的方法可以满足当前子类，所以不用重写。
  66.             //重写：重写的意思就是，重新实现一下父类的某个方法，相当于覆盖掉了父类的这个方法。重写的方法名一定要和父类你要覆盖的那个方法名一致，参数也一模一样。
  68.             //重写冲饮品的方法
  69.             Coffee.prototype.brew = function () {
  70.                 console.log("准备冲咖啡！");
  71.             }
  73.             //重写把饮品放到杯子中的方法
  74.             Coffee.prototype.pourInCup = function () {
  75.                 console.log("把咖啡倒入杯子中！");
  76.             }
  78.             //重写加材料的方法
  79.             Coffee.prototype.addDrink = function () {
  80.                 console.log("给咖啡加糖和牛奶！");
  81.             }
  83.             //创建一个咖啡对象
  84.             var coffee1 = new Coffee();
  85.             coffee1.init();
  88.             //茶的构造函数
  89.             var Tea = function () {
  91.             }
  93.             //子类和父类建立联系（设置原型对象）
  94.             Tea.prototype = new SuperObj();
  96.             //重写冲饮品的方法
  97.             Tea.prototype.brew = function () {
  98.                 console.log("沏茶！");
  99.             }
  101.             //重写把饮品放到杯子中的方法
  102.             Tea.prototype.pourInCup = function () {
  103.                 console.log("把茶倒入杯子中！");
  104.             }
  106.             //重写加材料的方法
  107.             Tea.prototype.addDrink = function () {
  108.                 console.log("给茶添加柠檬！");
  109.             }
  111.             //创建tea对象
  112.             var tea1 = new Tea();
  113.             tea1.init();
  115.         </script>
  116.     </body>
  117. </html>

观察者模式

  1. <!doctype html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>观察者设计模式缺陷版</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 场景：小明、小红等人去售楼处买房，但没有中意的房子，留了自己的联系方式给售楼处，然后将来有合适的房源后，会发短信通知小明或小红等人。
  12.                 发布者：售楼处
  13.                 订阅者：小红、小明等人
  14.                 - 售楼处收集或存储小红、小明等人的信息（回调函数）
  15.                 - 售楼处发短信通知小红、小明等人来看房。
  16.             */
  18.             //售楼处对象 （发布者）
  19.             var saleHouse = {
  21.             };
  23.             //用户信息列表（订阅者）
  24.             saleHouse.clientList = [];
  26.             //添加用户信息的方法 （回调函数）
  27.             //参数是一个回调函数
  28.             saleHouse.listen = function (callBackFn) {
  29.                 //把函数添加到用户信息列表中
  30.                 this.clientList.push(callBackFn);
  31.             }
  33.             //通知方法
  34.             saleHouse.trigger = function () {
  35.                 for (var i = 0; i < this.clientList.length; i++) {
  36.                     // this.clientList[i]();
  37.                     //调用函数 （就是获取信息列表里存取的回调函数，然后进行调用）
  38.                     this.clientList[i].apply(this, arguments);
  39.                 }
  40.             }
  44.             //调用添加用户信息方法
  45.             //可以理解为这个是注册小明的用户信息
  46.             saleHouse.listen(function (houseName, price) {
  47.                 console.log("房名：" + houseName);
  48.                 console.log("价格：" + price);
  49.             });
  51.             //在添加一个小红
  52.             saleHouse.listen(function (houseName, price) {
  53.                 console.log("房名：" + houseName);
  54.                 console.log("价格：" + price);
  55.             });
  58.             // console.log(saleHouse.clientList); //
  59.             //通知小明和小红房源信息
  60.             saleHouse.trigger('英国宫', 1100000);
  61.             console.log("-----------------");
  62.             saleHouse.trigger('剑桥郡', 1300000);
  67.         </script>
  68.     </body>
  69. </html>
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>观察者设计模式_改进版</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //售楼处 发布者
  10.             var saleHouse = {
  12.             }
  14.             //用户信息列表（Map中的值是用户信息列表，键是相应的订阅者） (订阅者)
  15.             saleHouse.clientMap = new Map();
  17.             //添加用户信息的方法 （回调函数）
  18.             //参数是一个回调函数 (带标示)
  19.             saleHouse.listen = function (key, callBackFn) {
  20.                 //先判断用户信息Map中是否有这个key
  21.                 if (!saleHouse.clientMap.get(key)) {
  22.                     //如果没有当前key，则加入key并且初始化key对应的value，value是一个回调函数数组
  23.                     saleHouse.clientMap.set(key, []);
  24.                 }
  25.                 //把传进来的回调函数push到Map中key对应的value数组中
  26.                 saleHouse.clientMap.get(key).push(callBackFn);
  27.             }
  29.             //通知方法
  30.             saleHouse.trigger = function () {
  31.                 //获取传进来参数数组中的第一个参数，也就是订阅者Map中的key
  32.                 var key = arguments[0];
  33.                 // Array.prototype.shift.call(this,arguments);
  34.                 //获得该标识下的回调函数数组
  35.                 var callBackFns = this.clientMap.get(key);
  36.                 //判断数组是否为空
  37.                 if (!callBackFns || callBackFns.length == 0) {
  38.                     return;
  39.                 }
  41.                 //遍历当前key下对应的value函数数组,并且调用
  42.                 for (var i = 0; i < callBackFns.length; i++) {
  43.                     callBackFns[i].call(this, arguments[1], arguments[2]);
  44.                 }
  45.             }
  47.             //调用listen方法（添加小明）
  48.             saleHouse.listen('小明' ,function (houseName, price) {
  49.                 console.log('小明');
  50.                 console.log('房子：' + houseName);
  51.                 console.log('价格：' + price);
  52.             });
  54.             //调用listen方法（添加小红）
  55.             saleHouse.listen('小红' ,function (houseName, price) {
  56.                 console.log('小红');
  57.                 console.log('房子：' + houseName);
  58.                 console.log('价格：' + price);
  59.             });
  62.             //调用通知方法
  63.             saleHouse.trigger('小明','英国宫', 2000000);
  64.             saleHouse.trigger('小明','剑桥郡', 3000000);
  65.             saleHouse.trigger('小红','英国宫', 2000000);
  68.         </script>
  69.     </body>
  70. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>观察者模式最终完美版</title>
  6.         <script src="../../../../../jquery-2.2.3.js"></script>
  7.         <script>
  8.             /*
  9.                 发布者: 售楼处
  10.                 订阅者: 小明小红等人
  11.                 开发思路: 
  12.                 1. 售楼处存储小红,小明等人的信息(用到回调函数的概念)
  13.                 2. 售楼处发短信通知小明和小红来看房
  16.              */ 
  18.              /*
  19.                 取消订阅的功能
  20.                 售楼处2不能用售楼处的方法
  21.              */ 
  23.             // 观察者设计模式通用模板对象
  24.             var eventObj = {
  25.                 clientMap : new Map(),
  26.                 // 订阅方法
  27.                 listen : function (key, callback) {
  28.                     if (!this.clientMap.get(key)) {
  29.                         this.clientMap.set(key, []);
  30.                     }
  31.                     // callback 添加到key对应的value数组中
  32.                     this.clientMap.get(key).push(callback);
  33.                 },
  34.                 // 取消订阅方法
  35.                 remove : function (key) {
  36.                     if (!this.clientMap.get(key)) {
  37.                         alert("无此人");
  38.                         return;
  39.                     }
  41.                     /*
  42.                         数组的方法: 
  43.                         slice是截取子数组
  44.                         slice(start, end)
  45.                         splice 是 删,改,增
  46.                         splice(start, length, 替换1, 替换2, 替换3,.....)
  47.                         split: 是字符串的方法
  48.                         字符串中没有splice方法
  50.                      */
  53.                     // 方法一: 
  54.                     // key有,value中数组为空
  55.                     this.clientMap.get(key).splice(0);
  56.                     // 方法二: 
  57.                     // key有,value中数组为空
  58.                     //this.clientMap.set(key,[]);
  59.                     // 方法三:
  60.                     // 删除键和值
  61.                     //this.clientMap.delete(key);
  64.                     console.log("已经取消订阅");
  65.                 },
  66.                 // 通知方法
  67.                 trigger : function () {
  68.                     var key = arguments[0];
  69.                     var callbackFns = this.clientMap.get(key);
  70.                     if(!callbackFns || callbackFns.length === 0) {
  71.                         return;
  72.                     } 
  74.                     for (var i = 0; i< callbackFns.length; i++) {
  75.                         callbackFns[i].call(this, arguments[1],arguments[2]);
  76.                     }
  78.                     // 测试
  79.                     console.log(callbackFns.length);
  80.                 }
  81.             };
  83.             // 复制工厂 , 调用这个方法后,对象就拥有了模板里的所有属性
  84.             // 用来渲染属性
  85.             var  installEvent = function (obj) {
  86.                 // 把模板对象的指针赋值给了obj
  87.                 // obj 也指向了eventObj对象
  88.                 // obj = eventObj;   // 不能直接赋值
  90.                 for (var tempProp in eventObj) {
  91.                     // obj[tempProp] 给obj添加了一个新的tempProp属性
  92.                      obj[tempProp] = eventObj[tempProp];
  93.                 }
  94.                 //obj['clientMap'] = new Map();
  95.                 obj.clientMap = new Map();
  96.             };
  100.             // 售楼处1
  101.             var saleHouse1 = {};
  102.             // 售楼处2
  103.             var saleHouse2 = {};
  105.             // 渲染属性
  106.             installEvent(saleHouse1);
  107.             installEvent(saleHouse2);
  109.             // 复制过了, 售楼处已经有属性了
  111.             // 添加用户信息方法
  112.             // 调用listen方法 (添加小明)
  113.             saleHouse1.listen('小明',function(houseName, price) {
  114.                 console.log('小明');
  115.                 console.log("房名:" +houseName);
  116.                 console.log("价格:" +price);
  117.             });
  119.             saleHouse2.listen('小明',function(houseName, price) {
  120.                 console.log('小明');
  121.                 console.log("房名:" +houseName);
  122.                 console.log("价格:" +price);
  123.             });
  125.             // 调用listen方法 (添加小红)
  126.             saleHouse1.listen('小红',function(houseName, price) {
  127.                 console.log('小红');
  128.                 console.log("房名:" +houseName);
  129.                 console.log("价格:" +price);
  130.             });
  132.             saleHouse2.listen('小红',function(houseName, price) {
  133.                 console.log('小红');
  134.                 console.log("房名:" +houseName);
  135.                 console.log("价格:" +price);
  136.             });
  139.             // 小明取消订阅
  140.             saleHouse1.remove("小明");
  141.             // 通知
  142.             // 通知小明和小红  (群发)
  143.             saleHouse1.trigger('小明','英国宫_售楼处1',110000);
  144.             saleHouse2.trigger('小明','英国宫_售楼处2',110000);
  145.             console.log("*******");
  146.             saleHouse1.trigger('小红','剑桥郡_售楼处1',130000);
  147.             saleHouse2.trigger('小红','剑桥郡_售楼处2',130000);
  155.         </script>
  156.     </head>
  157.     <body>
  158.     </body>
  159. </html>

高级函数

作用域安全问题

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>高阶函数</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //高阶函数  (函数可以作为参数、函数可以赋值给变量、函数可以作为返回值)
  10.             //1、事件的封装
  11.             // .....
  12.             //2、Ajax的封装
  13.             //......
  15.             //作用域安全问题
  16.             //猫的构造器
  17.             var Cat = function (name, type) {
  18.                 this.name = name;
  19.                 this.type = type;
  20.             }
  22.             //创建猫的对象
  23.             var cat1 = new Cat("端午", "波斯猫");
  24.             console.log(cat1.name, cat1.type);
  25.             //这只是一个普通函数调用
  26.             var cat2 = Cat("咪咪", "加菲猫");
  27.             // console.log(cat2.name, cat2.type);
  28.             //如果直接调用Cat函数的话，内部的this指针，就会根据当前运行环境改变而变成window
  29.             console.log(window.name, window.type);
  32.             //解决上面的问题。
  33.             //狗的构造函数
  34.             var Dog = function (name, type) {
  35.                 //判断this指针的构造函数是否是Dog
  36.                 if (this instanceof Dog) {
  37.                     this.name = name;
  38.                     this.type = type;
  39.                     //返回当前对象
  40.                     return this;
  41.                 }
  42.                 return new Dog(name, type);
  43.             }
  45.             //正常通过new 关键字创建狗的对象
  46.             var dog1 = new Dog("妞妞", "萨摩耶");
  47.             console.log(dog1.name, dog1.type);
  49.             //直接调用Dog() 创建狗的对象
  50.             var dog2 = Dog("八公", "秋田犬");
  51.             console.log(dog2.name, dog2.type);
  52.             console.log(window.name, window.type);
  55.         </script>
  56.     </body>
  57. </html>

函数的柯里化

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>柯里化</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //全局变量实现叠加功能
  10.             //声明全局变量
  11.             var totalCount = 0;
  12.             var fn = function (count) {
  13.                 totalCount += count;
  14.             }
  16.             //每次调用fn
  17.             fn(100);
  18.             fn(200);
  19.             fn(300);
  20.             console.log(totalCount);
  22.             //利用柯里化可以实现，把每次执行函数的结果存储起来，当你最后想得到结果的时候在停止存储。
  24.             var fn2 = (function () {
  25.                 //把每次调用内部函数的结果都存在这个数组中，因为是闭包，这个数组不会被销毁，存在内存中。
  26.                 var args = [];
  27.                 return function () {
  28.                     //当没有参数传入的时候，停止，得到最后的结果
  29.                     if (!arguments.length) { 
  30.                         //!arguments.length 和 arguments.length == 0 是一个意思
  31.                         var returnNum = 0;
  32.                         //遍历args取出每个结果，叠加起来，返回。
  33.                         for (var i = 0; i < args.length; i++) {
  34.                             returnNum += args[i];
  35.                         }
  36.                         return returnNum;
  37.                     }
  38.                     //把每次传进来的数值存储到args数组中
  39.                     // args.push(arguments[0]);
  40.                     [].push.apply(args, arguments);
  41.                 }
  42.             })();
  44.             fn2(100);
  45.             fn2(300);
  46.             fn2(600);
  47.             //当函数没有传入任何参数的时候停止。得到最后的结果。
  48.             console.log(fn2());
  50.         </script>
  51.     </body>
  52. </html>

定时器

setTimeOut

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>柯里化</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //全局变量实现叠加功能
  10.             //声明全局变量
  11.             var totalCount = 0;
  12.             var fn = function (count) {
  13.                 totalCount += count;
  14.             }
  16.             //每次调用fn
  17.             fn(100);
  18.             fn(200);
  19.             fn(300);
  20.             console.log(totalCount);
  22.             //利用柯里化可以实现，把每次执行函数的结果存储起来，当你最后想得到结果的时候在停止存储。
  24.             var fn2 = (function () {
  25.                 //把每次调用内部函数的结果都存在这个数组中，因为是闭包，这个数组不会被销毁，存在内存中。
  26.                 var args = [];
  27.                 return function () {
  28.                     //当没有参数传入的时候，停止，得到最后的结果
  29.                     if (!arguments.length) { 
  30.                         //!arguments.length 和 arguments.length == 0 是一个意思
  31.                         var returnNum = 0;
  32.                         //遍历args取出每个结果，叠加起来，返回。
  33.                         for (var i = 0; i < args.length; i++) {
  34.                             returnNum += args[i];
  35.                         }
  36.                         return returnNum;
  37.                     }
  38.                     //把每次传进来的数值存储到args数组中
  39.                     // args.push(arguments[0]);
  40.                     [].push.apply(args, arguments);
  41.                 }
  42.             })();
  44.             fn2(100);
  45.             fn2(300);
  46.             fn2(600);
  47.             //当函数没有传入任何参数的时候停止。得到最后的结果。
  48.             console.log(fn2());
  50.         </script>
  51.     </body>
  52. </html>

setInterval()

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>setInterval的使用</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //setInterval的使用
  10.             setInterval(function () {
  11.                 console.log("a");
  12.             }, 2000);
  14.             //带参数
  15.             setInterval(function (a, b) {
  16.                 console.log(a + b);
  17.             }, 2000, 5, 5);
  19.             //利用setTimeout()实现setInterval()的功能
  20.             var mySetInterval = function (fn, wait) {
  21.                 var tempSetInterval = function () {
  22.                     //fn指向全局
  23.                     fn.call();
  24.                     setTimeout(tempSetInterval, wait);
  25.                 }
  27.                 //第一次的时候调用
  28.                 setTimeout(tempSetInterval, wait);
  29.             }
  31.             mySetInterval(function () {
  32.                 console.log("自己实现的setInterval");
  33.             }, 1000);
  35.             //setTimeout()函数和setInterval()函数的返回值，是一个整数类型连续的值(在正常的环境下)。
  36.             //换句话说，第二个开启的setTimeout函数的返回值，要比第一个开启的值大。
  38.             (function () {
  39.                 //0表示没有间隔，gid是返回值。用于销毁定时器
  40.                 var gid = setInterval(clearAllTimer, 0);
  41.                 //清空所有定时器
  42.                 function clearAllTimer () {
  43.                     var id = setTimeout(function () {}, 0);
  44.                     while (id > 0) {
  45.                         //除了外面轮训的gid以外 全部清空
  46.                         // if (id !== gid) {
  47.                             clearTimeout(id);
  48.                         // }
  49.                         id--;
  50.                     }
  51.                 }
  52.             })();
  55.         </script>
  56.     </body>
  57. </html>

飞翔的小球和弹弹球

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>飞翔的小球和弹弹球</title>
  6.     </head>
  7.     <body>
  8.         <div id="left_div" style="width:500px;height:500px;position:absolute;background:red;">
  9.             <div id="left_fly_div" style="width:50px;height:50px;border-radius:25px;background:green;position:absolute;">
  11.             </div>
  12.         </div>
  14.         <div id="right_div" style="width:500px;height:500px;position:relative;float:right;background:blue;">
  15.             <div id="right_fly_div" style="width:50px;height:50px;border-radius:25px;background:red;position:absolute;" >
  17.             </div>
  18.         </div>
  20.         <script type="text/javascript">
  21.             //飞翔的小球
  22.             //获得左边的小球div
  23.             var leftFlyDiv = document.getElementById("left_fly_div");
  24.             //飞翔差值初始化
  25.             var frameX = 0;
  26.             var frameY = 0;
  27.             //开启定时器
  28.             var leftTimerId = setInterval(function () {
  29.                 //改变差值
  30.                 frameX += 1;
  31.                 frameY += 1;
  32.                 //改变小球的left
  33.                 leftFlyDiv.style.left = frameX + 'px';
  34.                 //改变小球的top
  35.                 leftFlyDiv.style.top = frameY + 'px';
  36.             }, 10);
  39.             //弹弹球
  40.             //获得右边小球的div
  41.             var rightFlyDiv = document.getElementById("right_fly_div");
  42.             //获得右边外部的div
  43.             var rightDiv = document.getElementById("right_div");
  44.             //初始化右边小球的left和top
  45.             rightFlyDiv.style.left = "0px";
  46.             rightFlyDiv.style.top = "0px";
  47.             //弹弹球的差值
  48.             var rightFrameX = 5;
  49.             var rightFrameY = 2;
  50.             // alert(rightFlyDiv.style.left);
  51.             // alert(rightFlyDiv.style.width);
  52.             // alert(parseInt("0px"));
  53.             //开启轮询定时器
  54.             var rightTimer = setInterval(function () {
  55.                 //先计算每次飞多少left 和 top
  56.                 rightFlyDiv.style.left = parseInt(rightFlyDiv.style.left) + rightFrameX + 'px';
  57.                 rightFlyDiv.style.top = parseInt(rightFlyDiv.style.top) + rightFrameY + 'px';
  59.                 //判断什么时候反向弹
  60.                 //左右
  61.                 if (parseInt(rightFlyDiv.style.left) + parseInt(rightFlyDiv.style.width) >= parseInt(rightDiv.style.width) || parseInt(rightFlyDiv.style.left) <= 0) {
  62.                     //改变差值
  63.                     rightFrameX *= -1;
  64.                 }
  66.                 //上下
  67.                 if (parseInt(rightFlyDiv.style.top) + parseInt(rightFlyDiv.style.height) >= parseInt(rightDiv.style.height) || parseInt(rightFlyDiv.style.top) <= 0) {
  68.                     //改变差值
  69.                     rightFrameY *= -1;
  70.                 }
  72.             }, 10);
  74.         </script>
  75.     </body>
  76. </html>
  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>飞翔的小球和弹弹球</title>
  6.     </head>
  7.     <body>
  8.         <div id="left_div" style="width:500px;height:500px;position:absolute;background:red;">
  9.             <div id="left_fly_div" style="width:50px;height:50px;border-radius:25px;background:green;position:absolute;">
  11.             </div>
  12.         </div>
  14.         <div style="float:left; width:100px;height:100px;margin-left:600px;" >
  15.             <input type="button" value="开始" id="my_btn" style="width:100px;height:100px;font-size:28px;"/>
  16.         </div>
  19.         <div id="right_div" style="width:500px;height:500px;position:relative;float:right;background:blue;">
  20.             <div id="right_fly_div" style="width:50px;height:50px;border-radius:25px;background:red;position:absolute;" >
  22.             </div>
  23.         </div>
  27.         <script type="text/javascript">
  28.             //飞翔的小球
  29.             //获得左边的小球div
  30.             var leftFlyDiv = document.getElementById("left_fly_div");
  31.             //飞翔差值初始化
  32.             var frameX = 0;
  33.             var frameY = 0;
  34.             //开启定时器
  35.             var leftTimerId = setInterval(function () {
  36.                 //改变差值
  37.                 frameX += 1;
  38.                 frameY += 1;
  39.                 //改变小球的left
  40.                 leftFlyDiv.style.left = frameX + 'px';
  41.                 //改变小球的top
  42.                 leftFlyDiv.style.top = frameY + 'px';
  43.             }, 10);
  47.             var myFn = (function () {
  49.                 //定时器返回的timerId
  50.                 var rightTimer;
  52.                 //弹弹球
  53.                     //获得右边外部的div
  54.                     var rightDiv = document.getElementById("right_div");    
  55.                     //获得右边小球的div
  56.                     var rightFlyDiv = document.getElementById("right_fly_div");
  57.                     //初始化右边小球的left和top
  58.                     rightFlyDiv.style.left = "0px";
  59.                     rightFlyDiv.style.top = "0px";
  60.                     //弹弹球的差值
  61.                     var rightFrameX = 5;
  62.                     var rightFrameY = 2;
  64.                 return function (flag) {
  65.                     //如果点击停止就清除定时器
  66.                     if (!flag) {
  67.                         clearInterval(rightTimer);
  68.                         return;
  69.                     }
  71.                     // alert(rightFlyDiv.style.left);
  72.                     // alert(rightFlyDiv.style.width);
  73.                     // alert(parseInt("0px"));
  74.                     //开启轮询定时器
  75.                     rightTimer = setInterval(function () {
  76.                         //先计算每次飞多少left 和 top
  77.                         rightFlyDiv.style.left = parseInt(rightFlyDiv.style.left) + rightFrameX + 'px';
  78.                         rightFlyDiv.style.top = parseInt(rightFlyDiv.style.top) + rightFrameY + 'px';
  80.                         //判断什么时候反向弹
  81.                         //左右
  82.                         if (parseInt(rightFlyDiv.style.left) + parseInt(rightFlyDiv.style.width) >= parseInt(rightDiv.style.width) || parseInt(rightFlyDiv.style.left) <= 0) {
  83.                             //改变差值
  84.                             rightFrameX *= -1;
  85.                         }
  87.                         //上下
  88.                         if (parseInt(rightFlyDiv.style.top) + parseInt(rightFlyDiv.style.height) >= parseInt(rightDiv.style.height) || parseInt(rightFlyDiv.style.top) <= 0) {
  89.                             //改变差值
  90.                             rightFrameY *= -1;
  91.                         }
  93.                     }, 10);
  94.                 }
  95.             })();
  102.             //按钮点击事件
  103.             var myBtn = document.getElementById("my_btn");
  104.             myBtn.onclick = function () {
  105.                 if (this.value == '开始') {
  106.                     this.value = '停止';
  107.                     myFn(true);
  108.                 } else {
  109.                     this.value = '开始';
  110.                     myFn(false);
  111.                 }
  112.             }
  118.         </script>
  119.     </body>
  120. </html>

div透明度渐变

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>div透明度渐变</title>
  6.     </head>
  7.     <body>
  8.         <div id="my_div" style="width:500px;height:500px;background:red;float:left;">
  10.         </div>
  12.         <div id="right_div" style="width:500px;height:500px;background:blue;float:right;">
  14.         </div>
  16.         <script type="text/javascript">
  17.             //实现渐隐功能
  18.             //获取要渐隐的div
  19.             var myDiv = document.getElementById("my_div");
  20.             //透明度初始值
  21.             var opacity = 1;
  22.             var timerId = setInterval(function () {
  23.                 //每次轮训都把透明度的变量减少0.05
  24.                 opacity -= 0.1;
  25.                 if (opacity > 0) {
  26.                     //改变myDiv的透明度
  27.                     myDiv.style.opacity = opacity;
  28.                 } else {
  29.                     //手动变成0
  30.                     // myDiv.style.opacity = 0;
  31.                     //透明度没了之后，清空定时器
  32.                     clearInterval(timerId);
  33.                 }
  34.             }, 100);
  37.             //获取右边div
  38.             var rightDiv = document.getElementById("right_div");
  39.             //手动初始化一下透明度样式，不初始化，不能直接调用
  40.             rightDiv.style.opacity = 1;
  41.             //渐变差值
  42.             var rightOpacity = 0.1;
  43.             var rightTimerId = setInterval(function () {
  44.                 //透明度每次改变
  45.                 rightDiv.style.opacity -= rightOpacity;
  46.                 if (rightDiv.style.opacity >= 1) {
  47.                     rightOpacity *= -1;
  48.                 } else if (rightDiv.style.opacity <= 0) {
  49.                     rightOpacity *= -1;
  50.                 }
  51.             }, 100);
  53.         </script>
  55.     </body>
  56. </html>

js中调用css中的属性遇到的问题

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>JS调用CSS遇到的问题</title>
  6.         <style type="text/css">
  7.             #your_div {
  8.                 width: 200px;
  9.                 height: 200px;
  10.                 background: blue;
  11.             }
  12.         </style>
  13.     </head>asdgghffj,l.kgv
  14.     <body>
  16.         <div id="my_div" style="width:200px;height:200px;background:red">
  18.         </div>
  20.         <div id="your_div">
  22.         </div>
  24.         <script type="text/javascript">
  25.             //测试
  26.             //获得两个div
  27.             var myDiv = document.getElementById("my_div");
  28.             var yourDiv = document.getElementById("your_div");
  30.             //通过style属性获得它们相应的样式
  31.             console.log("myDiv = " + myDiv.style.width);
  32.             console.log("yourDiv = " +yourDiv.style.width);
  33.             //给yourDiv设值样式值
  34.             yourDiv.style.width = "200px";
  35.             console.log("yourDiv = " + yourDiv.style.width);
  37.             //通过getComputedStyle()函数来获取yourDiv的高度，
  38.             //不需要提前赋值就可以获取到
  39.             console.log("yourDiv = " + getComputedStyle(yourDiv, null).height);
  41.             //调用封装后的获取样式值
  42.             console.log("yourDiv = " + getStyle(yourDiv, "height"));
  44.             //封装一个通过样式属性名获取值得函数
  45.             function getStyle (element, attr) {
  46.                 if (window.getComputedStyle) {
  47.                     return getComputedStyle(element, null)[attr];
  48.                 } else if (window.currentStyle) {
  49.                     return element.currentStyle[attr];
  50.                 } else {
  51.                     return element.style[attr];
  52.                 }
  53.             }
  55.         </script>
  56.     </body>
  57. </html>

鼠标点击出现div

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>鼠标点击出现DIV</title>
  6.         <style type="text/css">
  7.             #out_div {
  8.                 width: 500px;
  9.                 height: 500px;
  10.                 background: red;
  11.                 position: relative;
  12.             }
  14.             #in_div {
  15.                 width: 100px;
  16.                 height: 100px;
  17.                 position: absolute;
  18.                 background: yellow;
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.         <div id="out_div">
  24.             <div id="in_div">
  26.             </div>
  27.         </div>
  29.         <script type="text/javascript">
  30.             //获得最后div要移动坐标的函数
  31.             function getPosition (event) {
  32.                 var x = event.clientX; //获得鼠标当前在浏览器中的x坐标
  33.                 var y = event.clientY; //获得鼠标当前在浏览器中的y坐标
  34.                 var r = event.target.getBoundingClientRect(); //获取在浏览器中被点击元素的范围信息
  35.                 //鼠标最后点击的x、y的位置
  36.                 x -= r.left;
  37.                 y -= r.top;
  38.                 //把最后的x、y 封装到一个对象中 返回。
  39.                 var positionObj = {
  40.                     m_x : x,
  41.                     m_y : y
  42.                 }   
  43.                 return positionObj;
  44.             }
  46.             //给out_div添加单击事件
  47.             var outDiv = document.getElementById("out_div");
  48.             outDiv.onclick = function (event) {
  49.                 //获得in_div
  50.                 var inDiv = document.getElementById("in_div");
  51.                 //判断是否点击在了inDiv上
  52.                 if (event.target === inDiv) {
  53.                     return;
  54.                 }
  56.                 //否则改变inDiv的位置
  57.                 var positionObj = getPosition(event);
  58.                 inDiv.style.left = positionObj.m_x + "px";
  59.                 inDiv.style.top = positionObj.m_y + "px";
  60.             }
  61.         </script>
  62.     </body>
  63. </html>

iphone秒表

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>ipone秒表</title>
  6.         <style type="text/css">
  7.             #out_div{
  8.                 width: 350px;
  9.                 height: 500px;
  10.                 margin: 0 auto;
  11.                 background: #ccc;
  12.             }
  14.             #top_div {
  15.                 width: 350px;
  16.                 height: 200px;
  17.                 background: red;
  19.             }
  21.             #center_div{
  22.                 width: 350px;
  23.                 height: 100px;
  24.                 background: green;
  25.             }
  27.             #bottom_div {
  28.                 width: 350px;
  29.                 height: 200px;
  30.                 background: orange;
  31.             }
  32.             h3{
  33.                 text-align: center;
  34.                 line-height: 40px;
  35.             }
  37.             #small_span {
  38.                 display: block;
  39.                 height: 50px;
  40.                 text-align: right;
  41.                 font-size: 35px;
  42.                 margin-right: 20px;
  43.             }
  45.             #big_span {
  46.                 display: block;
  47.                 height: 50px;
  48.                 text-align: right;
  49.                 font-size: 60px;
  50.                 margin-right: 20px;
  51.             }
  53.             #left_btn {
  54.                 width: 50px;
  55.                 height: 50px;
  56.                 margin-top: 15px;
  57.                 margin-left: 125px;
  58.                 font-size: 20px;
  59.             }
  61.             #right_btn {
  62.                 width: 50px;
  63.                 height: 50px;
  64.                 margin-top: 15px;
  65.                 font-size: 20px;
  66.             }
  70.         </style>
  71.     </head>
  72.     <body>
  73.         <div id="out_div">
  74.             <div id="top_div">
  75.                 <h3>秒表</h3>
  76.                 <hr />
  78.                 <span id="small_span">00:00.00</span>
  79.                 <span id="big_span">00:00.00</span>
  82.             </div>
  84.             <div id="center_div">
  85.                 <input type="button" value="计次" id="left_btn" disabled />
  86.                 <input type="button" value="启动" id="right_btn"/>
  87.             </div>
  89.             <div id="bottom_div">
  91.             </div>
  92.         </div>
  95.         <script type="text/javascript">
  97.             //秒表的实现
  98.             var timerfn = (function () {
  99.                 //定时器的返回值
  100.                 var timerId;
  102.                 //获取两个时间文本
  103.                 var smallSpan = $("small_span");
  104. 				var bigSpan = $("big_span");
  106.                 var smallM = 0; //分
  107.                 var smallS = 0; //秒
  108.                 var smallMS = 0; //毫秒
  109.                 var smallMMSS = 0; //微秒
  111.                 var bigM = 0; //分 (大)
  112.                 var bigS = 0; //秒
  113.                 var bigMS = 0; //毫秒
  114.                 var bigMMSS = 0; //微秒
  117.                 return function (flag, type) {
  118.                     if (!flag) {
  119.                         if (type == '复位') {
  120.                             //清空small的文本为0
  121.                             smallMMSS = 0;
  122.                             smallMS = 0;
  123.                             smallS = 0;
  124.                             smallM = 0;
  126.                             //清空big的文本为0
  127.                             bigMMSS = 0;
  128.                             bigMS = 0;
  129.                             bigS = 0;
  130.                             bigM = 0;
  132.                             //文本也清空
  133.                             smallSpan.innerHTML = "00:00.00";
  134.                             bigSpan.innerHTML = "00:00.00";
  135.                         }
  137.                         clearInterval(timerId);
  138.                         return;
  139.                     }
  141.                     //如果当前type是计次
  142.                     if (type == '计次') {
  143.                         //清空small的文本为0
  144.                         smallMMSS = 0;
  145.                         smallMS = 0;
  146.                         smallS = 0;
  147.                         smallM = 0;
  149.                         //初不初始化都行。
  150.                         // smallSpan.innerHTML = "00:00.00";
  151.                     }
  153.                     timerId = setInterval(function () {
  154.                         //小的时间递增
  155.                         smallMMSS++;
  156.                         if (smallMMSS == 10) {
  157.                             smallMMSS = 0;
  158.                             smallMS++;
  159.                             if (smallMS == 10) {
  160.                                 smallMS = 0;
  161.                                 smallS++;
  162.                                 if (smallS == 60) {
  163.                                     smallS = 0;
  164.                                     smallM++;
  165.                                     //..
  166.                                 }
  167.                             }
  168.                         }
  170.                         //大的时间递增
  171.                         bigMMSS++;
  172.                         if (bigMMSS == 10) {
  173.                             bigMMSS = 0;
  174.                             bigMS++;
  175.                             if (bigMS == 10) {
  176.                                 bigMS = 0;
  177.                                 bigS++;
  178.                                 if (bigS == 60) {
  179.                                     bigS = 0;
  180.                                     bigM++;
  181.                                     //..
  182.                                 }
  183.                             }
  184.                         }
  186.                         //赋值
  187.                         smallSpan.innerHTML = smallM + ":" + smallS + "." + smallMS + smallMMSS;
  188.                         bigSpan.innerHTML = bigM + ":" + bigS + "." + bigMS + bigMMSS;
  190.                     }, 10);
  191.                 }
  192.             })();
  196.             //右边按钮的事件
  197.             $("right_btn").onclick = function () {
  198. 				if (this.value == '启动') {
  199. 					this.value = '停止';
  200. 					//左边按钮变计次
  201. 					$("left_btn").value = '计次';
  202. 					//左边按钮解禁
  203. 					$("left_btn").disabled = null;
  205.                     timerfn(true);
  206.                 } else {
  207.                     this.value = '启动';
  208.                     //左边按钮变成复位
  209.                     $("left_btn").value = '复位';
  210.                     timerfn(false);
  211.                 }
  212.             }
  214.             //左边按钮事件
  215.             $("left_btn").onclick = function () {
  216.                 if (this.value == '计次') {
  217.                     //先清空，在启动
  218.                     timerfn(false, this.value);
  219.                     timerfn(true, this.value);
  220.                 } else {
  222.                     //清掉所有数据，并且暂停
  223.                     timerfn(false, this.value);
  225.                     this.value = '计次';
  226.                     //还要变成禁用的
  227.                     this.disabled = "disabled";
  228.                 }
  230.             }
  232.             //封装通过ID获得元素的函数
  233.             function $ (idName) {
  234.                 return document.getElementById(idName);
  235.             }
  238.         </script>
  240.     </body>
  241. </html>

Map

Map的理解

  1. 4.3 映射与集合
  2. Map 类型，也称为简单映射，只有一个目的：保存一组键值对儿。开发人员通常都使用普通对象来
  3. 保存键值对儿， 但问题是那样做会导致键容易与原生属性混淆。 简单映射能做到键和值与对象属性分离，
  4. 从而保证对象属性的安全存储。以下是使用简单映射的几个例子。
  5. var map = new Map();
  6. map.set("name", "Nicholas");
  7. map.set("book", "Professional JavaScript");
  8. console.log(map.has("name")); //true
  9. console.log(map.get("name")); //"Nicholas"
  10. map.delete("name");
  11. 简单映射的基本 API 包括 get() 、 set() 和 delete() ，每个方法的作用看名字就知道了。键可以
  12. 是原始值，也可是引用值。
  13. 与简单映射相关的是 Set 类型。 集合就是一组不重复的元素。 与简单映射不同的是， 集合中只有键，
  14. 没有与键关联的值。在集合中，添加元素要使用 add() 方法，检查元素是否存在要使用 has() 方法，而
  15. 删除元素要使用 delete() 方法。以下是基本的使用示例。
  16. var set = new Set();
  17. set.add("name");
  18. console.log(set.has("name")); //true
  19. set.delete("name");
  20. console.log(set.has("name")); //false

Map简单的应用

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Map的简单使用</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //创建一个map对象
  10.             var map = new Map();
  11.             //给map添加键值对
  12.             map.set("a", "刘升升");
  13.             map.set("b", "王沫沫");
  14.             map.set("d", {name : "张晓晓", age : 18});
  15.             map.set("c", 18);
  16.             //添加一个重复的键
  17.             map.set("a", "李屌屌");
  19.             //通过键获得值
  20.             console.log(map.get("a"));
  21.             console.log(map);
  23.             //forEach遍历Map
  24.             map.forEach(function (value, key, map) {
  25.                 //三个参数分别代表
  26.                 //value：map当前键对应的值。
  27.                 //key：map当前的键
  28.                 //map：就是map本身的对象
  29.                 console.log("键：" + key);
  30.                 console.log("值：" + value);
  31.                 if (key == 'd') {
  32.                     console.log(value.age);
  33.                 }
  34.             });
  36.             var arr = ["a", "b", "c"];
  37.             //数组遍历
  38.             arr.forEach(function (element, idx, array) {
  39.                 //element：数组的当前元素
  40.                 //idx：下标
  41.                 //array：当前array对象
  42.                 console.log(array);
  43.             });
  45.         </script>
  46.     </body>
  47. </html>

Map之公司部门员工的业务

  1. <!doctype html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>公司部门员工的业务编程</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 3、业务编程题。
  12.                     需求：
  13.                         员工类（Staff）
  14.                     属性：
  15.                         员工姓名（name）
  16.                         所在部门名字（departmentName）(是一个字符串)
  17.                         入职时间（time）（例如：2015 这种格式的字符串即可）
  20.                         公司类（Company）
  21.                     属性：
  22.                         部门：(departmentMap) （类型是一个Map，Map的键是部门的名字，值是对应部门的员工数组，员工数组
  23.                         里是每个员工对象）
  26.                     方法：
  27.                         1、添加员工 
  28.                             要求：首先员工姓名和入职时间不能同时重复。 如果添加的员工所在部门不存在，你需要帮他
  29.                         创建该部门，如果存在直接加入该部门即可。
  31.                         2、交换员工的部门(参数是：部门员工和要交换的部门名字)
  32.             */
  34.             //员工构造函数
  35.             var Staff = function (name, time, departmentName) {
  36.                 this.name = name;
  37.                 this.time = time;
  38.                 this.departmentName = departmentName;
  39.             }
  41.             //公司构造函数
  42.             var Company = function () {
  43.                 this.departmentMap = new Map();
  44.             }
  46.             //添加员工的方法
  47.             // 要求：首先员工姓名和入职时间不能同时重复。 如果添加的员工所在部门不存在，你需要帮他
  48.             //          创建该部门，如果存在直接加入该部门即可。
  49.             Company.prototype.addStaff = function (newStaff) {
  50.                 //声明一个return标识
  51.                 var flag = true;
  53.                 //遍历部门的map
  54.                 this.departmentMap.forEach(function (value, key, map) {
  55.                     //遍历每个员工数组，因为value就已经是map遍历出来的值，值就是员工数组。
  56.                     value.forEach(function (element, idx, array) {
  57.                         //判断每个员工对象是否和新员工对象的名字和入职时间相同。
  58.                         if (element.name == newStaff.name && element.time == newStaff.time) {
  59.                             console.log("不能重复添加新员工！");
  60.                             //当员工重复的时候，flag=false
  61.                             flag = false;
  62.                             // return;
  63.                         }
  64.                     });
  65.                 });
  67.                 //当flag为true的时候，说明新加的员工名字和时间不重复，则可以新加员工。
  68.                 if (flag) {
  69.                     //获得新添加员工所在部门，判断其部门是否存在(以后这块儿用map的has方法判断)
  70.                     var staffArray = this.departmentMap.get(newStaff.departmentName);
  71.                     if (typeof staffArray == 'undefined') {
  72.                         //新创建的员工数组
  73.                         staffArray = new Array();
  74.                         //新添加的员工
  75.                         staffArray.push(newStaff);
  76.                         //新创建的部门
  77.                         this.departmentMap.set(newStaff.departmentName, staffArray);
  78.                     } else {
  79.                         //如果部门存在直接添新员工即可
  80.                         staffArray.push(newStaff);
  81.                     }
  82.                 }
  83.             }
  85.             //查看所有员工的方法(格式化输出)
  86.             Company.prototype.showAllStaffs = function () {
  87.                 //遍历部门map
  88.                 this.departmentMap.forEach(function (value, key, map) {
  89.                     //打印部门
  90.                     console.log(key + ":");
  91.                     //遍历员工数组
  92.                     value.forEach(function (element, idx, array) {
  93.                         console.log("   姓名：" + element.name + "\n   时间：" + element.time);
  94.                     });
  95.                 });
  96.             }
  99.             //交换员工所在部门（参数：要交换的员工对象,要交换的部门名字）
  100.             Company.prototype.changeStaffDepartment = function (changeStaff, changeDepartmentName) {
  101.                 //1、把该员工之前所在部门剔出去。
  102.                 // this.departmentMap.delete("品质保障部");
  103.                 //遍历部门map
  104.                 this.departmentMap.forEach(function (value, key, map) {
  105.                     //遍历员工数组
  106.                     value.forEach(function (element, idx, array) {
  107.                         //找出要交换的员工
  108.                         if (element === changeStaff) {
  109.                             //删除该员工
  110.                             value.splice(idx, 1);
  111.                             //改变下标
  112.                             // idx--; 注意：因为新加员工的时候，已经判断不能重复添加，所以这里只能找到唯一的一个员工对象进行删除。
  113.                             return;
  114.                         }
  115.                     });
  116.                 });
  118.                 //添加到新部门
  119.                 //判断新加部门存不存在，不存在就创建该部门，把这个人加进去。
  120.                 var staffArray = this.departmentMap.get(changeDepartmentName);
  122.                 if (typeof staffArray == 'undefined') {
  123.                     staffArray = new Array();
  124.                     staffArray.push(changeStaff);
  125.                     this.departmentMap.set(changeDepartmentName, staffArray);
  126.                 } else {
  127.                     staffArray.push(changeStaff);
  128.                 }
  129.             }
  133.             //创建公司对象
  134.             var c = new Company();
  136.             //创建很多员工对象
  137.             var s1 = new Staff("小芳", "2015", "品质保障部");
  138.             var s2 = new Staff("小薇", "2016", "品质保障部");
  139.             var s3 = new Staff("小芳", "2015", "独立部");
  140.             var s4 = new Staff("小芳", "2016", "程序猿鼓励部");
  141.             var s5 = new Staff("小黑", "2013", "单身部");
  143.             //添加新员工
  144.             c.addStaff(s1);
  145.             c.addStaff(s2);
  146.             c.addStaff(s3);
  147.             c.addStaff(s4);
  148.             c.addStaff(s5);
  150.             //显示所有员工及部门
  151.             c.showAllStaffs();
  153.             //打印分隔符
  154.             console.log("\n ================");
  156.             //交换员工部门
  157.             c.changeStaffDepartment(s2, "程序猿鼓励部");
  158.             c.changeStaffDepartment(s4, "UI设计部");
  160.             //显示所有员工
  161.             c.showAllStaffs();
  162.         </script>
  163.     </body>
  164. </html>

字符串题

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>字符串题</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 （易）
  11.                     传入："iOS Android HTML5 Java"
  12.                     返回："avaJ 5LMTH diordnA SOi"
  13.                     函数名：function reverseString (str) ;
  14.                     //字符串也可以进行遍历，可以得到每个字符
  15.             */
  16.             function reversString (str) {
  17.                 //最终返回结果
  18.                 var resultStr = "";
  19.                 //逆序遍历
  20.                 for (var i = str.length - 1; i >= 0; i--) {
  21.                     //得到每个字符
  22.                     var tempChar = str[i];
  23.                     resultStr += tempChar;
  24.                 }
  25.                 return resultStr;
  26.             }
  28.             console.log(reversString("iOS Android HTML5 Java"));
  31.             /*
  32.                 （难）
  33.                 传入："iOS Android HTML5 Java"
  34.                 返回："SOi diordnA 5LMTH avaJ"
  35.                 函数名： function reverseStringByWords (str) ;
  36.             */
  38.             function reverseStringByWords (str) {
  39.                 //返回结果
  40.                 var resultStr = "";
  41.                 //切割字符串
  42.                 var arr = str.split(" ");
  43.                 //遍历数组
  44.                 for (var i = 0; i < arr.length; i++) {
  45.                     //得到每个元素（其实就是每个单词字符串）
  46.                     var tempStr = arr[i];
  47.                     //逆序遍历每个tempStr
  48.                     for (var j = tempStr.length - 1; j >= 0; j--) {
  49.                         //获得每个字符
  50.                         var tempChar = tempStr[j];
  51.                         //拼接起来
  52.                         resultStr += tempChar;
  53.                     }
  54.                     resultStr += " ";
  55.                 }
  56.                 //这么做的话最后一步记得截取空格。会返回一个新的字符串
  57.                 return resultStr.substr(0, resultStr.length - 1);
  58.             }
  60.             console.log(reverseStringByWords("iOS Android HTML5 Java"));
  63.         </script>
  64.     </body>
  65. </html>

改变按钮背景色

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>按钮改变背景颜色</title>
  6.     </head>
  7.     <body>
  8.         <input type="button" id="btn_1" name="btn" value="开始" />
  9.         <span id="span_1">0</span>
  10.         <br />
  11.         <input type="button" id="btn_2" name="btn" value="开始" />
  12.         <span id="span_2">0</span>
  13.         <br />
  14.         <input type="button" id="btn_3" name="btn" value="开始" />
  15.         <span id="span_3">0</span>
  17.         <script type="text/javascript">
  18.             /*
  19.                 页面有3个按钮（每个按钮默认的value是“开始”）对应3个span（span内的innerHTML默认是0）。
  21.                 要求：每点击一个按钮（value的值开始变停止），
  22.                       开启一个轮询定时器进行对应span标签内的数字从0-255随机滚动，
  23.                       在点击一下（value的值停止变开始，定时器也跟着停止。）要求得到3个的span内innerHTML的值，
  24.                       并且通过这三个值把body的背景颜色改变一下。（也就是说每次点击某个按钮后，
  25.                       先判断其他两个是否停下来，全部都停下来后才可以去改变背景颜色）     
  26.             */
  28.             //获取所有button元素
  29.             var buttons = document.getElementsByName("btn");
  30.             //给每个button添加单击事件
  31.             for (var i = 0; i < buttons.length; i++) {
  32.                 buttons[i].onclick = function () {
  33.                     //定时器的timerId   
  34.                     var timerId;
  35.                     if (this.value == '开始') {
  36.                         this.value = '停止';
  37.                         console.log(this.id);
  38.                         //需要保存当前this指针，供内部函数使用
  39.                         var that = this;
  40.                         //如果是多个按钮触发同一个事件的话，定时器不要写在外面。写在外面会共享同一个定时器，会有各种问题。
  41.                         timerId = setInterval(function () {
  42.                             //在轮训的时候点击按钮停止
  43.                             if (that.value == '开始') {
  44.                                 clearInterval(timerId);
  45.                                 if ($("btn_1").value == '开始' && $("btn_2").value == '开始' && $("btn_3").value == '开始') {
  46. 									//改变背景颜色
  47. 									document.body.style.backgroundColor = "rgb(" + $('span_1').innerHTML + "," + $('span_2').innerHTML + "," + $('span_3').innerHTML + ")";
  48. 								};
  49. 							}
  50. 							//得到点击按钮id的编号
  51. 							// console.log(that.id);
  52. 							var idx = that.id.split("_")[1];
  53. 							//获得对应的span元素，并且赋值
  54. 							$("span_" + idx).innerHTML = Math.floor(Math.random() * 256);
  55.                         }, 100);
  56.                         // fn(true);
  57.                     } else {
  58.                         this.value = '开始';
  59.                         // clearInterval(timerId);
  60.                     }
  61.                 }
  62.             }
  64.             //封装通过ID获取元素的方法
  65.             function $ (idName) {
  66.                 return document.getElementById(idName);
  67.             }
  69.             // var fn = (function () {
  70.             //   var timerId;
  71.             //  return function () {
  72.             //      timerId....定时器
  73.             //  }
  74.             // })();
  76.         </script>
  77.     </body>
  78. </html>

ajax请求考试json

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>作业3</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.              * 3、综合题
  11.         （难）
  12.         按步骤做：
  13.             1)通过ajax解析本地服务器的kaoshi.json文件，在解析的过程中封装数据模型（也就是提前准备好
  14.                 相应的构造函数，json文件中有什么，就弄多少构造函数。最后解析的方法，会返回一个班级的
  15.                 对象，也就是说，有这个班级对象，就能有所有的数据）
  17.                 函数名：function analysisJSON(){};
  19.             2)给班级构造函数定义：
  20.                 - 显示所有学生信息的方法（先按照学生名字长度进行有大到小排序，如果长度相等，在按照
  21.                   字符串大小进行有大到小排序）
  23.                 方法名：showAllStudentsSortByName();
  25.             3)给班级构造函数定义：
  26.                 - 改变每个学生性别的方法（男变女，女变男），然后在该方法内部调用显示所有学生信息的方法
  28.                 方法名：changeAllStudentsSex();
  29.              * 
  30.              */
  32.             //1、ajax异步请求json文件
  33.             var xhr;
  34.             if (window.XMLHttpRequest) {
  35.                 xhr = new XMLHttpRequest();
  36.             } else if (window.ActiveXObject) {
  37.                 var versions = ["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"];
  38.                 for (var i = 0; i < versions.length; i++) {
  39.                     try {
  40.                         xhr = new ActiveXObject(versions[i]);
  41.                         break;
  42.                     } catch (e) {
  43.                         alert(e);
  44.                     }
  45.                 }
  46.             } else {
  47.                 throw new Error("浏览器不支持Ajax");
  48.             }
  50.             //打开链接
  51.             xhr.open("GET", "kaoshi.json", true);
  53.             //发送请求
  54.             xhr.send(null);
  57.             //接收服务器响应
  58.             xhr.onreadystatechange = function () {
  59.                 if (xhr.readyState == 4 && xhr.status == 200) {
  60.                     //转换成json字面量对象
  61.                     var jsonObj = JSON.parse(xhr.responseText);
  62.                     console.log(jsonObj);
  64.                     //获得班级的字面量对象
  65.                     var classObj = jsonObj.class;
  66.                     // 创建班级数据模型的对象
  67.                     var classModel = new ClassModel(classObj.className);
  69.                     //获得老师字面量对象
  70.                     var teacherObj = classObj.teacher;
  71.                     //创建老师数据模型的对象
  72.                     var teacherModel = new TeacherModel(teacherObj.sex, teacherObj.teacherName);
  74.                     //把老师的数据模型对象赋值给 班级数据模型对象的老师属性
  75.                     classModel.teacher = teacherModel;
  77.                     //获得字面量学生数组
  78.                     var studentArray = classObj.studentArray;
  79.                     //遍历字面量学生数组
  80.                     for (var tempStudentIdx in studentArray) {
  81.                         //得到每一个学生字面量对象
  82.                         var studentObj = studentArray[tempStudentIdx];
  83.                         //创建学生数据模型对象
  84.                         var studentModel = new StudentModel(studentObj.sex, studentObj.studentName, studentObj.studentCode);
  85.                         //添加学生数据模型到班级的学生数组中
  86.                         classModel.studentArray.push(studentModel);
  87.                     }
  89. //                  console.log(classModel);
  91.                     //显示所有学生信息
  92.                     classModel.showAllStudentsSortByName();
  94.                     console.log("\n ==================== ");
  96.                     //改变学生性别
  97.                     classModel.changeAllStudentsSex();
  101.                 }
  102.             }
  104.             //班级模型构造函数
  105.             function ClassModel (className, teacher) {
  106.                 this.className = className;
  107.                 this.studentArray = new Array();
  108.                 this.teacher = teacher;
  109.             }
  111.             //显示所有学生信息的方法
  112.             ClassModel.prototype.showAllStudentsSortByName = function () {
  113.                 //冒泡排序
  114.                 for (var i = 0; i < this.studentArray.length - 1; i++) {
  115.                     for (var j = 0; j < this.studentArray.length - i - 1; j++) {
  116.                         //获得要交换位置的两个元素
  117.                         var tempStudent1 = this.studentArray[j];
  118.                         var tempStudent2 = this.studentArray[j + 1];
  120.                         //判断名字的长度
  121.                         if (tempStudent1.studentName.length < tempStudent2.studentName.length) {
  122.                             //交换位置
  123.                             this.studentArray.splice(j, 1, tempStudent2);
  124.                             this.studentArray.splice(j + 1, 1, tempStudent1);
  125.                         } else if (tempStudent1.studentName.length == tempStudent2.studentName.length) {
  126.                             //如果长度相同，在比较大小
  127.                             if (tempStudent1.studentName <= tempStudent2.studentName) {
  128.                                 //交换位置
  129.                                 this.studentArray.splice(j, 1, tempStudent2);
  130.                                 this.studentArray.splice(j + 1, 1, tempStudent1);
  131.                             }
  132.                         }
  134.                     }
  135.                 }
  137.                 //显示学生信息
  138.                 //遍历学生数组
  139.                 this.studentArray.forEach(function (element) {
  140.                     console.log("姓名：" + element.studentName + " 性别：" + element.sex + " 学号：" + element.studentCode);
  141.                 });
  142.             }
  144.             //改变学生性别的方法
  145.             ClassModel.prototype.changeAllStudentsSex = function () {
  146.                 //遍历所有学生
  147.                 this.studentArray.forEach(function (element) {
  148.                     if (element.sex == '男') {
  149.                         element.sex = '女';
  150.                     } else {
  151.                         element.sex = '男';
  152.                     }
  153.                 });
  155.                 //调用显示学生信息的方法
  156.                 this.showAllStudentsSortByName();
  157.             }
  161.             //老师模型构造函数
  162.             function TeacherModel (sex, teacherName) {
  163.                 this.sex = sex;
  164.                 this.teacherName = teacherName;
  165.             }
  167.             //学生的构造函数
  168.             function StudentModel (sex, studentName, studentCode) {
  169.                 this.sex = sex;
  170.                 this.studentName = studentName;
  171.                 this.studentCode = studentCode;
  172.             }
  174.         </script>
  175.     </body>
  176. </html>
  1. {
  2.   "class" : {
  3.     "className" : "HTML51604",
  4.     "studentArray" : [
  5.       {
  6.         "sex" : "男",
  7.         "studentCode" : "160401",
  8.         "studentName" : "丁环宇"
  9.       },
  10.       {
  11.         "sex" : "男",
  12.         "studentCode" : "160402",
  13.         "studentName" : "武戈"
  14.       },
  15.       {
  16.         "sex" : "男",
  17.         "studentCode" : "160403",
  18.         "studentName" : "严帅"
  19.       },
  20.       {
  21.         "sex" : "女",
  22.         "studentCode" : "160404",
  23.         "studentName" : "马丹丹"
  24.       },
  25.       {
  26.         "sex" : "女",
  27.         "studentCode" : "160405",
  28.         "studentName" : "卢欢"
  29.       },
  30.       {
  31.         "sex" : "男",
  32.         "studentCode" : "160406",
  33.         "studentName" : "段俊岩"
  34.       },
  35.       {
  36.         "sex" : "男",
  37.         "studentCode" : "160407",
  38.         "studentName" : "吴贤青"
  39.       },
  40.       {
  41.         "sex" : "女",
  42.         "studentCode" : "160408",
  43.         "studentName" : "马钰琦"
  44.       },
  45.       {
  46.         "sex" : "男",
  47.         "studentCode" : "160409",
  48.         "studentName" : "崔晋龙"
  49.       },
  50.       {
  51.         "sex" : "男",
  52.         "studentCode" : "160410",
  53.         "studentName" : "彭铖"
  54.       },
  55.       {
  56.         "sex" : "女",
  57.         "studentCode" : "160411",
  58.         "studentName" : "王鹏"
  59.       }
  60.     ],
  61.     "teacher" : {
  62.       "sex" : "男",
  63.       "teacherName" : "刘升旭"
  64.     }
  65.   }
  66. }

jQuery梳理

jQuery知识点

  1. 【jQuery选择器】
  2. 1、重新认识下DOM
  3.   jQuery的强大之处，就在于它能够简化DOM的操作。
  4.   DOM（Document Object Model）文档对象模型，它就是javascript与HTML间的接口。
  5.   DOM的结构就像我们生活中家族谱一样，所以我们会像家族谱那样形容DOM的结构，比如：父元素
  6. 、子元素、兄弟元素等。
  8. 2、基本选择器
  9.   jQuery构造函数，通过传入CSS选择器作为参数，能让我们轻松的获得想要的元素或元素集合。
  10.   - ID选择器：$("#my_div") 获得id为my_div的元素
  11.   - 元素选择器：$("p") 获得所有p元素
  12.   - 类选择器：$(".my_class") 获得类名为my_class的所有元素
  13.   - 属性选择器：$("[name = my_name]") 获得元素name属性为 my_name的所有元素
  14.   - 组合选择器：$("div.my_class") 获得类名为my_class的所有div元素
  16. 【多项选择器】
  17.  可以获得多个元素。$('div,p') 获得所有的div 和 p 元素
  19. 【层级选择器】
  20.  因为DOM的结构是有层级的，所以有的时候基本选择器满足不了我们，我们会经常使用层级选择器。
  21.  如果两个DOM元素具有层级关系，就可以使用层级选择器。
  22.  层级说的就是祖先和后代的意思。
  23.  层级之间用空格隔开
  24.  $('ul.my_class li')  获取类名为my_class的ul元素下的 所有 li元素
  26.  ---看层级选择器.html
  28. 【子选择器】
  29.  子选择器类似于层级选择器。
  30.  $('parentNode>childNode') 
  31.  不同于层级选择器的地方是，限定了层级关系一定是父子的关系才行。也就是说childNode是parentNode的直接
  32. 子节点。
  34.  ---看层级选择器.html 
  36. 【过滤选择器】
  37.  过滤选择器一般不单独使用，通常附加在其他选择器上使用。能够更精确找到我们想要的元素。
  39.  ---看层级选择器.html
  41. 【表单选择器】
  42.  针对表单，jQuery提供了一套关于查找表单的选择器
  44.  ---看表单选择器.html
  46. 【查找和过滤】
  47.  有的时候我们通过各种选择器获得相应的元素后，我们要对这些结果集在进一步进行过滤或者查找。
  49.  ---看查找和过滤.html
  1.  【jQueryDOM节点相关】
  2.     注意：以下说的都是方法。
  3.     1、父子节点相关
  4.         append：将参数中的元素插入当前元素的尾部
  5.         appendTo：将当前元素插入参数元素中的尾部
  7.         prepend：将参数中的元素变为当前元素的第一个子元素
  8.         prependTo：将当前元素变为参数元素的第一个子元素
  10.     2、兄弟节点相关
  11.         after：将参数中的元素插入到当前元素的后面
  12.         insertAfter：将当前元素插入到参数元素的后面
  14.         before：将参数中的元素插入到当前元素的前面
  15.         insertBefore：将当前元素插入到参数元素的前面
  17.     3、移除相关
  18.         remove：移除元素
  19.         replaceWith：将当前元素替换成参数中的元素
  1. 【jQuery动画】
  2.     注意：以下说的都是方法
  3.     1、一些动画效果的简单写法
  4.         show：显示当前元素
  5.         hide：隐藏当前元素
  6.         toggle：隐藏或显示当前元素
  9.         fadeOut：渐变（透明度）消失当前元素
  10.         fadeToggle：渐变或渐隐
  12.         slideDown：从上向下出现当前元素（滑动）
  13.         slideUp：从下向上隐藏当前元素（滑动）
  14.         slideToggle：切换上面的效果
  16.     2、animate方法
  17.         以上那些简单的写法，实际上内部都调用了这个animate方法。
  18.         animate方法可以接受3个参数：
  19.         - 第一个参数设置CSS属性
  20.         - 第二个参数动画时长
  21.         - 第三个参数回调函数
  23.     3、stop方法、delay方法
  24.         stop：表示立即停止动画
  25.         delay：接受一个参数，表示暂停多少毫秒之后继续执行
  26. 【each方法遍历】
  27.  语法：$(selector).each(function (idx, element) {});
  28.  idx：每个选择器的下标
  29.  element：当前元素（也可以用$(this)表示）
  1. 【jQuery的事件】
  2.  jQuery的事件和大部分JS事件用法相同。
  3.  例如：$(selector).click(function () {});
  4.  这里就不一一举例了。
  5.  但要说一下hover事件。
  6.  hover：这个方法接受2个参数，分别代表移入和移除。也可以是一个参数，表示移入或移除触发同一个函数。
  8.  【on方法】
  9.   on方法是jQuery事件的统一接口。其他事件绑定的方法其实都是on方法的实现。
  10.   on方法可以接受2个参数，一个表示事件类型，一个表示回调函数。
  11.   on方法也可以一次性添加2个事件，这2个事件，会触发同一个回调函数。
  13.  【off方法】
  14.   off方法移除事件的回调函数
  16.  【事件的命名空间】
  17.   同一个元素有的时候可以绑定多个事件，如果想移除其中一个，可以采用“命名空间”的方式。
  18.   即为每个事件定义一个二级的名称，然后利用off方法可以移除这个二级事件名称。
  20.  【event对象】
  21.   当回调函数触发后，可以接受一个参数，这个参数就是event对象
  22.   evnet的属性：
  23.   - type：事件的类型
  24.   - target：事件源
  25.   - data：传入事件对象的数据
  26.   - pageX：事件发生时，鼠标水平坐标
  27.   - pageY：事件发生时，鼠标垂直坐标
  29.  【one方法（一次性事件）】
  30.   one方法绑定的事件，只会调用一次这个回调函数，一般表单提交的时候会用到这个。
  33.  【解决jQuery库与其他库冲突的办法】
  34.   有的时候其他库，也会使用美元符号$。难免会造成冲突。
  35.   可以使用$.noConflict()方法来使jquery中$失效。
  37.  今天要做的东西：
  38.     1、滑动菜单
  39.     2、表格过滤查找
  40.     3、下拉框左右选人（ajax请求数据，jQuery版本）
  41.     4、正常下拉框（ajax请求数据，jQuery版本）
  42.     5、可编辑的表格（ajax请求数据，jQuery版本）
  43.     6、手风琴效果（ajax请求数据，jQuery版本）
  1. //jQuery 的 ajax通用方法
  2. $.ajax({
  3.     url : "car.json", //请求路径
  4.     dataType : "json", //返回数据格式
  5.     async : true, //是否是异步请求，默认是异步的
  6.     data : {"id" : "123"}, //参数
  7.     type : "GET", //请求方式
  8.     beforeSend : function () { //请求之前调用的函数
  9.         console.log("==========before==============");
  10.     },
  11.     success : function (dd) { //成功回调函数
  12.     //                      console.log(JSON.parse(dd));
  13.         //注意：这里的格式已经帮你转换好了JS对象
  14.         console.log(dd);
  15.     },
  16.     complete : function () {  //请求完毕回调函数（无论成功失败都调用）
  17.         console.log("=========complete==============");
  18.     },
  19.     error : function () { //失败回调函数
  20.         console.log("===========error================");
  21.     }
  22. });
  24. //ajax请求数据
  25.     $.getJSON(' url ', null, function (data) {
  26.         // data即为根数据, 已经自动反序列化为字面量对象
  28.     }

jQuery 基本选择器demo

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>jQuery的基本选择器</title>
  6.         <!-- 导入jQuery -->
  7.         <script src="../jquery/jquery-2.2.3.js"></script>
  8.     </head>
  9.     <body>
  10.         <p>第一个p标签。</p>
  11.         <p id="my_p">id为my_p的p标签。</p>
  12.         <span class="my_class" name="my_name">这是第一个span标签。</span>
  13.         <p class="my_class">这是一个my_class的p标签。</p>
  14.         <input class="your_class" type="button" name="my_name" value="按钮" />
  17.         <script type="text/javascript">
  18.             //获得id为my_p 的元素
  19.             var p1 = $('#my_p');
  20.             //JS版本
  21.             // var p1 = document.getElementById('my_p');
  22.             // p1.innerHTML 错！因为这是一个jQuery对象，只能调用jQuery的属性和方法。
  23.             console.log(p1.html());
  25.             //如果获取一个没有的id元素，不会像原生JS那样得到一个undefined或者是null的值，而是返回的[]，这也避免了，去判断 一个元素是否是 undefined的操作。
  27.             //jQuery对象和DOM对象的转换
  28.             var p2 = $("#my_p"); //获得jQuery对象
  29.             console.log(p2.html());
  31.             var domP = p2.get(0); //jQuery对象转换成DOM对象
  32.             console.log(domP.innerHTML);
  34.             var p3 = $(domP); //DOM对象转换成jQuery对象
  35.             console.log(p3.html());
  38.             //元素选择器
  39.             var p4 = $('p');
  40.             //JS版本
  41.             // var p4 = document.getElementsByTagName('p');
  42.             console.log(p4.html()); //如果很多，默认是第一个。
  43.             for (var i = 0; i < p4.length; i++ ) {
  44.                 console.log(p4[i].innerHTML);
  45.             }
  47.             //类选择器
  48.             var class_1 = $('.my_class');
  49.             //JS版本
  50.             // var class_1 = document.getElementsByClassName('my_class');
  51.             for (var i = 0; i < class_1.length; i++) {
  52.                 console.log(class_1[i].innerHTML);
  53.             }
  56.             //属性选择器
  57.             var attr1 = $('[name = my_name]');
  58.             console.log(attr1.length);
  60.             //通过属性值前缀获得
  61.             //获得class属性值前缀为my_的元素
  62.             var attr2 = $('[class ^= my_]'); 
  63.             console.log(attr2.length);
  65.             //通过属性值后缀获得
  66.             //获得class属性值后缀为_class的元素
  67.             var attr3 = $('[class $= _class]');
  68.             console.log(attr3.length);
  71.             //组合选择器
  72.             //元素和属性组合
  73.             var zuHe1 = $('input[name = my_name]');
  74.             //val() 和 JS的value 一样
  75.             //打印这个button的value
  76.             console.log(zuHe1.val());
  79.         </script>
  80.     </body>
  81. </html>

层级选择器

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>层级选择器</title>
  6.         <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
  7.     </head>
  8.     <body>
  9.         <div class="test_div">
  10.             <ul class="lang">
  11.                 <li class="lang_javascript">JavaScript</li>
  12.                 <li class="lang_java">Java</li>
  13.                 <li class="lang_php">Php</li>
  14.                 <li class="lang_swift">Swift</li>
  15.             </ul>
  16.         </div>
  18.         <div>
  19.             <ul>
  20.                 <li class="lang_javascript">JavaScript</li>
  21.                 <li class="lang_java">Java</li>
  22.                 <li class="lang_php">Php</li>
  23.                 <li class="lang_swift">Swift</li>
  24.             </ul>
  25.         </div>
  27.         <div style="display:none;">这是一个div</div>
  29.         <script type="text/javascript">
  30.             $(document).ready(function () {
  31. 				//多项选择器
  32. 				//获得所有的div和li标签
  33. 				var many1 = $('div,li');
  34.                 console.log(many1.length);
  36.                 //层级选择器
  37.                 //获得javascript所在的li标签
  39.                 var js_0 = $('div li.lang_javascript');
  40.                 console.log(js_0.length);
  42.                 var js_1 = $('ul li.lang_javascript');
  43.                 console.log(js_1.length);
  45.                 //获得javascript所在的li标签 ，要求li所在的ul标签的类名为lang
  46.                 var js_2 = $('ul.lang li.lang_javascript');
  47.                 console.log(js_2.html());
  49.                 //层级选择器相比较单个选择器的好处在于，它缩小了选择范围，因为首先先要确定祖先元素，之后再祖先元素内进行相应的查找。
  51.                 //子选择器
  52.                 var js_3 = $('ul.lang>li.lang_javascript');
  53.                 console.log(js_3.html());
  55.                 //错误案例(因为这个不是父子关系，是一种层级关系)
  56.                 var js_4 = $('div.test_div>li.lang_javascript');
  57.                 console.log(js_4.html());
  60.                 //过滤选择器
  61.                 //获得类名为lang的ul元素下所有li元素
  62.                 var filter_1 = $('ul.lang li');
  63.                 console.log(filter_1[2].innerHTML);
  65.                 //获得类名为lang的ul元素下所有li元素中的第一个li
  66.                 var filter_2 = $('ul.lang li:first');
  67.                 console.log(filter_2.html());
  69.                 //获得类名为lang的ul元素下所有li元素中的最后一个li
  70.                 var filter_3 = $('ul.lang li:last');
  71.                 console.log(filter_3.html());
  73.                 //获得类名为lang的ul元素下所有li元素中的某一个li
  74.                 var filter_4 = $('ul.lang li:eq(1)');
  75.                 console.log(filter_4.html());
  77.                 //获得类名为lang的ul元素下所有li元素中的偶数li
  78.                 var filter_5 = $('ul.lang li:even');
  79.                 console.log(filter_5[0].innerHTML + "---" + filter_5[1].innerHTML);
  81.                 //获得类名为lang的ul元素下所有li元素中的奇数li
  82.                 var filter_6 = $('ul.lang li:odd');
  83.                 console.log(filter_6[0].innerHTML + "===" + filter_6[1].innerHTML);
  85.                 //获得类名为lang的ul元素下所有li元素中的php之前的li元素
  86.                 var filter_7 = $('ul.lang li:lt(2)');
  87.                 console.log(filter_7[0].innerHTML + "===" + filter_7[1].innerHTML);
  89.                 //获得类名为lang的ul元素下所有li元素中的php之后的li元素
  90.                 var filter_8 = $('ul.lang li:gt(2)');
  91.                 console.log(filter_8.html());
  93.                 //获得隐藏的div标签
  94.                 var filter_9 = $('div:hidden');
  95.                 console.log(filter_9.html());
  97.                 //获得显示的div标签
  98.                 var filter_10 = $('div:visible');
  99.                 console.log(filter_10.length);
  100.             });
  102.             // $(function () {
  104.             // });
  107.         </script>
  108.     </body>
  109. </html>

表单选择器

  1. <!doctype html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>表单选择器</title>
  6.         <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
  7.     </head>
  8.     <body>
  9.         <form action="#" method="get">
  10.             姓名：<input type="text" value="周xixi" disabled/>
  11.             <br />
  12.             密码：<input type="password" />
  13.             <br />
  14.             性别：<input type="radio" name="r"/> 男 <input type="radio" name="r" /> 女
  15.             <br />
  16.             兴趣：<input type="checkbox" name="x" /> 跑步 
  17.                 <input type="checkbox" name="x" /> 健身
  18.                 <input type="checkbox" name="x" /> 打LOL
  19.             <br />
  20.             国籍：<select multiple>
  21.                     <option>中国</option> 
  22.                     <option>美国</option>
  23.                     <option>日本</option>
  24.                     <option>俄罗斯</option>            
  25.                   </select>
  26.             <br />
  27.             <input type="button" value="注册" onclick="btn_click();" />
  28.         </form>
  30.         <script type="text/javascript">
  31.             function btn_click () {
  32.                 //表单选择器
  33.                 //获得所有input元素
  34.                 var form_1 = $(":input");
  35.                 console.log(form_1.length);
  37.                 //获得type为text的元素
  38.                 var form_2 = $(':text');
  39.                 console.log(form_2.val());
  41.                 //获得所有被选中的元素
  42.                 var form_3 = $(':checked');
  43.                 console.log(form_3.length);
  45.                 //获得所有checkbox被选中的元素
  46.                 var form_4 = $('[type=checkbox]:checked');
  47. 				var form_5 = $(':checkbox:checked');
  48.                 console.log(form_5.length);
  51.                 //获得被selected选中的元素
  52.                 var form_6 = $(':selected');
  53.                 console.log(form_6.val());
  54.                 console.log(form_6.length);
  56.                 //获得禁用的表单元素
  57.                 var form_7 = $(':disabled');
  58.                 console.log(form_7.val());
  60.             }
  61.         </script>
  62.     </body>
  63. </html>

查找和过滤

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>查找和过滤</title>
  6.         <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
  7.     </head>
  8.     <body>
  9.         <div class="test_div">
  10.             <ul class="lang">
  11.                 <li class="js">javascript</li>
  12.                 <li class="py">python</li>
  13.                 <li class="java">java</li>
  14.                 <li id="swift">swift</li>
  15.                 <li name="php">php</li>
  16.             </ul>
  17.         </div>
  19.         <script type="text/javascript">
  21.             $(document).ready(function () {
  22. 				/*
  23. 					first()、 last()、eq()方法（都会参照上一步的结果集）
  24. 				*/
  25. 				//第一个
  26. 				var f_1 = $('ul.lang li').first();
  27.                 console.log(f_1.html());
  29.                 //最后一个
  30.                 var f_2 = $('ul.lang li').last();
  31.                 console.log(f_2.html());
  33.                 //某一个
  34.                 var f_3 = $('ul.lang li').eq(3);
  35.                 console.log(f_3.html());
  37.                 /*
  38.                     next()、prev()方法
  39.                     下一个、上一个
  40.                 */
  41.                 var f_4 = $('ul.lang li').eq(3).next();
  42.                 console.log(f_4.html());
  44.                 var f_5 = $('ul.lang li').last().prev().prev();
  45.                 console.log(f_5.html());
  47.                 /*
  48.                     parent()、parents()、children();
  49.                     parent()：某元素的父元素
  50.                     parents()：某元素的祖先元素们（直到html）
  51.                     children()：某元素的孩子元素们
  52.                 */
  53.                 var f_6 = $('ul.lang li').first().parent();
  54.                 console.log(f_6.html());
  56.                 var f_7 = $('ul.lang li').first().parents();
  57.                 console.log(f_7.length);
  59.                 //parents() 可以设置参数，进行限制
  60.                 var f_8 = $('ul.lang li').first().parents('div');
  61.                 console.log(f_8.html());
  63.                 //children()方法是获得某个节点下的所有孩子节点
  64.                 var f_9 = $('ul.lang').children();
  65.                 console.log(f_9.length);
  67.                 //获得ul下的name为php的孩子们
  68.                 var f_10 = $('ul.lang').children('[name=php]');
  69.                 console.log(f_10.html());
  71.                 /*
  72.                   siblings()、nextAll()、preAll() 都是同一级操作
  73.                   siblings()：获得当前元素的所有兄弟元素
  74.                   nextAll()：获得当前元素的所有后面的兄弟元素
  75.                   prevAll()：获得当前元素的所有前面的兄弟元素
  76.                 */
  77.                 var f_11 = $('ul.lang li').first().siblings().eq(2);
  78.                 console.log(f_11.html());
  80.                 var f_12 = $('ul.lang li').first().siblings(':eq(2)');
  81.                 console.log(f_12.html());
  83.                 var f_13 = $('ul.lang li').eq(2).nextAll(':eq(1)');
  84.                 // console.log(f_13.length);
  85.                 console.log(f_13.html());
  87.                 var f_14 = $('ul.lang li').last().prevAll(':eq(0)');
  88.                 console.log(f_14.html());
  90.                 /*
  91.                     find()
  92.                     查找某个元素的所有子元素（按照条件）
  93.                     filter()
  94.                     得到某些结果集后进行条件过滤
  95.                     not()
  96.                     得到某些结果集后，利用not()方进行进行排除
  97.                 */ 
  98.                 var f_15 = $('ul.lang').find('.java');
  99.                 console.log(f_15.html());
  101.                 var f_16 = $('ul.lang li').filter('.java');
  102.                 console.log(f_16.html());
  104.                 var f_17 = $('ul.lang li').not('[name=php]').last();
  105.                 // console.log(f_17.length);
  106.                 console.log(f_17.html());
  107.             });
  108.         </script>
  109.     </body>
  110. </html>

jQuery对象的方法

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>DOM的一些简单方法使用</title>
  6.         <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
  8.         <style type="text/css">
  9.             .my_class {
  10.                 font-size: 30px;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <div>
  16.             <ul id="lang">
  17.                 <li class="js">javascript</li>
  18.                 <li name="js_lang">javascript &amp; java</li>
  19.             </ul>
  20.         </div>
  22.         <p id="my_p">这是一个段落。</p>
  24.         <div id="my_div">
  26.         </div>
  28.         <input type="button" value="html/text" onclick="htFn(this);" />
  29.         <br />
  30.         <input type="button" value="addClass" onclick="addClassFn(this);" />
  31.         <br />
  32.         <input type="button" value="removeClass" onclick="removeClassFn(this);" />
  33.         <br />
  34.         <input type="button" value="toggleClass" onclick="toggleClassFn(this);" />
  35.         <br />
  36.         <input type="button" value="css" onclick="cssFn(this);" />
  37.         <br />
  38.         <input type="button" value="val" onclick="valFn(this);" />
  39.         <br />
  40.         <input type="button" value="attr" onclick="attrFn(this);" />
  41.         <br />
  42.         <input type="button" value="removeAttr" onclick="removeAttrFn(this);" />
  44.         <script type="text/javascript">
  45.             //html() 和 text()
  46.             //获取和设置
  47.             function htFn (ele) {
  48.                  //获取
  49.                  var ht = $('#lang li[name=js_lang]').html();
  50. 				 var txt = $('#lang li[name=js_lang]').text();
  51.                  console.log(ht);
  52.                  console.log(txt);
  54.                  //设值
  55.                  $('#my_div').html('<span style="color:red;">这其实是一个span。</span>');
  56. 				 $('#my_div span').text("JS & Java");
  57.             }
  59.             //添加类class
  60.             function addClassFn (ele) {
  61.                 $('#my_p').addClass('my_class');
  62.             }
  64.             //移除类class
  65.             function removeClassFn (ele) {
  66.                 $('#my_p').removeClass('my_class');
  67.             }
  69.             //自动切换添加和移除类的方法
  70.             function toggleClassFn (ele) {
  71.                 $('#my_p').toggleClass('my_class');
  72.             }
  74.             //css() 可以获取和设置 元素的css样式
  75.             function cssFn (ele) {
  76.                 //获取某个样式属性值
  77.                 var cssValue = $('#my_p').css('font-size');
  78.                 console.log(cssValue);
  80.                 //设置某个样式属性值
  81.                 $('#my_p').css('font-size', '50px');
  82. 				//设置多个可以这么写
  83. 				$('#my_p').css({
  84.                     'font-size' : '30px',
  85.                     'color' : 'red'
  86.                 });
  87.             }
  89.             //val() 可以获取值 和 设置值
  90.             function valFn (ele) {
  91.                 //获取
  92.                 //注意：ele是JS的this指针，需要转换成jQuery对象才能使用val()方法
  93.                 var valValue = $(ele).val();
  94.                 console.log(valValue);
  96.                 //设值
  97.                 $(ele).val('改变值了');
  98.             }
  100.             //attr(); 获得html元素的某个属性的值，也可以设值
  101.             function attrFn (ele) {
  102.                 //获取
  103.                 var attrValue = $(ele).attr('type');
  104.                 console.log(attrValue);
  106.                 //设值
  107.                 $(ele).attr('value', '随便');
  108.             }
  110.             //removeAttr() 这个方法是移除某个属性
  111.             function removeAttrFn (ele) {
  112.                 //移除
  113.                 $(ele).removeAttr('value');
  115.                 console.log($(ele).attr('value'));
  116.             }
  118.         </script>
  119.     </body>
  120. </html>

DOM节点的相关

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>DOM节点相关</title>
  6.         <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
  7.         <style type="text/css">
  8.             .my_class1{
  9.                 background: red;
  10.                 width: 300px;
  11.                 height: auto;
  12.             }
  13.             .my_class2{
  14.                 background: green;
  15.                 width: 300px;
  16.                 height: 200px;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div class="my_class1">
  23.         </div>
  24.         <div class="my_class2">
  25.             <p>我是第一个p标签</p>
  26.             <p>我是第二个p标签</p>
  27.         </div>
  29.         <input type="button" id="append" value="append" />
  30.         <br />
  31.         <input type="button" id="appendTo" value="appendTo" />
  32.         <br />
  33.         <input type="button" id="prepend" value="prepend" />
  34.         <br />
  35.         <input type="button" id="prependTo" value="prependTo" />
  36.         <br />
  37.         <input type="button" id="after" value="after" />
  38.         <br />
  39.         <input type="button" id="insertAfter" value="insertAfter" />
  40.         <br />
  41.         <input type="button" id="before" value="before" />
  42.         <br />
  43.         <input type="button" id="insertBefore" value="insertBefore" />
  44.         <br />
  45.         <input type="button" id="remove" value="remove" />
  46.         <br />
  47.         <input type="button" id="replaceWith" value="replaceWith" />
  48.         <br />
  51.         <script type="text/javascript">
  52.             $(function () {
  53. 				//append：将参数中的元素插入当前元素的尾部
  54. 				$('#append').get(0).onclick = function () {
  55. 					$('.my_class1').append('<p>append的段落标签</p>');
  56.                 }
  58.                 //appendTo：将当前元素插入参数元素中的尾部
  59.                 $('#appendTo').get(0).onclick = function () {
  60. 					$('<p>appendTo的段落标签</p>').appendTo($('.my_class1'));
  61.                 }
  63.                 //prepend：将参数中的元素变为当前元素的第一个子元素
  64.                 $('#prepend').get(0).onclick = function () {
  65. 					$('.my_class2').prepend($('.my_class2 p:last'));
  66.                 }
  68.                 //prependTo：将当前元素变为参数元素的第一个子元素
  69.                 $('#prependTo').get(0).onclick = function () {
  70. 					$('.my_class2 p:last').prependTo($('.my_class2'));
  71.                 }
  73.                 //after：将参数中的元素插入到当前元素的后面
  74.                 $('#after').get(0).onclick = function () {
  75. 					$('.my_class2 p:last').after($('.my_class2 p:first'));
  76.                 }
  78.                 //insertAfter：将当前元素插入到参数元素的后面
  79.                 $('#insertAfter').get(0).onclick = function () {
  80. 					$('.my_class2 p:first').insertAfter($('.my_class2 p:last'));
  81.                 }
  83.                 //before：将参数中的元素插入到当前元素的前面
  84.                 $("#before").get(0).onclick = function () {
  85. 					$('.my_class2 p:first').before($('.my_class2 p:last'));
  86.                 }
  88.                 //insertBefore：将当前元素插入到参数元素的前面
  89.                 $('#insertBefore').get(0).onclick = function () {
  90. 					$('.my_class2 p:last').insertBefore($('.my_class2 p:first'));
  91.                 }
  93.                 //remove：移除元素
  94.                 $('#remove').get(0).onclick = function () {
  95. 					$(this).remove();
  96.                 }
  98.                 //replaceWith：将当前元素替换成参数中的元素
  99.                 $('#replaceWith').get(0).onclick = function () {
  100. 					$(this).replaceWith('<p style="color:red;">被我替换了！！</p>');
  101.                 }
  103.             });
  104.         </script>
  105.     </body>
  106. </html>

jQuery 动画

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>jQuery动画</title>
  6.         <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>
  7.         <style type="text/css">
  8.             .my_class{
  9.                 background: red;
  10.                 width: 300px;
  11.                 height: 300px;
  12.                 position: absolute;
  13.                 left: 300px;
  14.             }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div class='my_class'>
  20.         </div>
  21.         <input type="button" value="show" />
  22.         <br />
  23.         <input type="button" value="hide" />
  24.         <br />
  25.         <input type="button" value="toggle" />
  26.         <br />
  27.         <input type="button" value="fadeIn" />
  28.         <br />
  29.         <input type="button" value="fadeOut" />
  30.         <br />
  31.         <input type="button" value="fadeToggle" />
  32.         <br />
  33.         <input type="button" value="slideDown" />
  34.         <br />
  35.         <input type="button" value="slideUp" />
  36.         <br />
  37.         <input type="button" value="slideToggle" />
  38.         <br />
  39.         <input type="button" value="animate" />
  40.         <br /> 
  41.         <input type="button" value="stop" />
  42.         <br />
  43.         <input type="button" value="delay" />
  44.         <br />
  46.         <script type="text/javascript">
  47.             $(function () {
  48. 				//show
  49. 				$('input[value=show]').click(function () {
  50. 					// $('.my_class').show();
  51. 					// $('.my_class').show(3000);
  52.                     /*
  53.                         关于速度的关键字(字符串)
  54.                         fast: 快
  55.                         normal: 正常
  56.                         slow：慢
  58.                         可以通过以下方式修改内置的速度常量值
  59.                         jQuery.fx.speeds.fast = 毫秒值
  60.                         jQuery.fx.speeds.normal = 毫秒值
  61.                         jQuery.fx.speeds.slow = 毫秒值
  62.                         修改的时候注意作用域问题
  64.                         还可以通过这个方式自定义速度关键字
  65.                         jQuery.fx.speeds.myFast = 毫秒值
  66.                     */
  68.                     // $('.my_class').show('slow');
  70.                     //还可以接受额外的参数，这个参数是回调函数
  71.                     $('.my_class').show('slow', function () {
  72.                         alert('动画执行完毕！');
  73.                     });
  74.                 });
  76.                 //hide
  77.                 $('input[value=hide]').click(function () {
  78. 					// $('.my_class').hide();
  79. 					// $('.my_class').hide(3000);
  80. 					jQuery.fx.speeds.fast = 5000;
  81. 					$('.my_class').hide('fast');
  82.                 });
  84.                 //toggle
  85.                 $('input[value=toggle]').click(function () {
  86. 					$('.my_class').toggle(2000);
  87.                 });
  89.                 //fadeIn
  90.                 $('input[value=fadeIn]').click(function () {
  91. 					$('.my_class').fadeIn(3000);
  92.                 });
  94.                 //fadeOut
  95.                 $('input[value=fadeOut]').click(function () {
  96. 					$('.my_class').fadeOut(3000);
  97.                 });
  99.                 //fadeToggle
  100.                 $('input[value=fadeToggle]').click(function () {
  101. 					$('.my_class').fadeToggle(3000);
  102.                 });
  104.                 //slideDown
  105.                 $('input[value=slideDown]').click(function () {
  106. 					$('.my_class').slideDown(3000);
  107.                 });
  109.                 //slideUp
  110.                 $('input[value=slideUp]').click(function () {
  111. 					$('.my_class').slideUp(3000);
  112.                 });
  114.                 //slideToggle
  115.                 $('input[value=slideToggle]').click(function () {
  116. 					$('.my_class').slideToggle(3000);
  117.                 });
  119.                 //animate
  120.                 $('input[value=animate]').click(function () {
  121. 					$('.my_class').animate({
  122.                         // left : "500px",
  123.                         left : "+=200",
  124.                         opacity : 0.25
  125.                         // background : 'blue' 颜色设置不了
  126.                     }, 5000, function () {
  127.                         alert("执行完毕");
  128.                     });
  129.                 });
  131.                 //stop
  132.                 $('input[value=stop]').click(function () {
  133. 					$('.my_class').stop();
  134.                 });
  136.                 //delay 接受一个参数，表示暂停多少毫秒之后继续执行
  137.                 $('input[value=delay]').click(function () {
  138. 					$('.my_class').fadeOut(2000).delay(2000).slideDown(2000);
  139.                 });
  141.             });
  142.         </script>
  143.     </body>
  145. </html>

显示隐藏按钮作业

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>作业</title>
  6.         <style type="text/css">
  7.              *{ margin:0; padding:0;}
  8.             body {font-size:12px;text-align:center;}
  9.             a { color:#04D; text-decoration:none;}
  10.             a:hover { color:#F50; text-decoration:underline;}
  11.             .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
  12.             .SubCategoryBox ul { list-style:none;}
  13.             .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
  14.             .showmore { clear:both; text-align:center;padding-top:10px;}
  15.             .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
  16.             .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
  17.             .promoted a { color:#F50;}
  18.         </style>
  19.         <!-- 引入jQuery -->
  20.         <script src="../jquery/jquery-2.2.3.js"></script>
  22.     </head>
  23.     <body>
  24.         <div class="SubCategoryBox">
  25.             <ul>
  26.                 <li ><a href="#">佳能</a><i>(30440) </i></li>
  27.                 <li ><a href="#">索尼</a><i>(27220) </i></li>
  28.                 <li ><a href="#">三星</a><i>(20808) </i></li>
  29.                 <li ><a href="#">尼康</a><i>(17821) </i></li>
  30.                 <li ><a href="#">松下</a><i>(12289) </i></li>
  31.                 <li ><a href="#">卡西欧</a><i>(8242) </i></li>
  32.                 <li ><a href="#">富士</a><i>(14894) </i></li>
  33.                 <li ><a href="#">柯达</a><i>(9520) </i></li>
  34.                 <li ><a href="#">宾得</a><i>(2195) </i></li>
  35.                 <li ><a href="#">理光</a><i>(4114) </i></li>
  36.                 <li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
  37.                 <li ><a href="#">明基</a><i>(1466) </i></li>
  38.                 <li ><a href="#">爱国者</a><i>(3091) </i></li>
  39.                 <li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
  40.             </ul>
  41.             <div class="showmore">
  42.                 <a href="#"><span>显示全部品牌</span></a>
  43.             </div>
  44.         </div>
  46.         <script type="text/javascript">
  47.             $(function () {
  48. 				//1.获得要隐藏或显示的li
  49. 				var hideLi = $('.SubCategoryBox ul li:gt(5):not(:last)');
  50.                 //初始化隐藏li
  51.                 hideLi.css('display', 'none');
  53.                 //2、显示全部div的单机事件
  54.                 $('.showmore > a').get(0).onclick = function () {
  55. 					if ($('.showmore > a > span').text() == '显示全部品牌') {
  56. 						$('.showmore > a > span').text('隐藏部分品牌');
  58.                         //剩余的li显示出来
  59.                         hideLi.css('display', 'block');
  61.                         //改变图标
  62.                         $('.showmore > a > span').css('background', 'url(img/up.gif) no-repeat 0 0');
  64.                         //找到要变颜色的li
  65.                         // $('.SubCategoryBox ul li').filter(':eq(0),:eq(3),:eq(10)').addClass('promoted');
  66. 						//:contains("佳能") 查找包含佳能内容的元素
  67. 						$('.SubCategoryBox ul li').filter(':contains("佳能"),:contains("尼康"),:contains("奥林巴斯")').addClass('promoted');
  68.                     } else {
  69.                         $('.showmore > a > span').text('显示全部品牌');
  70.                         //剩余的li隐藏
  71.                         hideLi.css('display', 'none');
  73.                         //改变图标
  74.                         $('.showmore > a > span').css('background', 'url(img/down.gif) no-repeat 0 0');
  76.                         //找到要变色的li
  77.                         // $('.SubCategoryBox ul li').filter(':eq(0),:eq(3),:eq(10)').removeClass('promoted');
  78. 						$('.SubCategoryBox ul li').filter(':contains("佳能"),:contains("尼康"),:contains("奥林巴斯")').removeClass('promoted');
  79.                     }
  80.                 }
  81.             });
  84.         </script>
  85.     </body>
  86. </html>

jQuery联动下拉菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>联动下拉菜单</title>
  6.     <style type="text/css">
  8.     </style>
  9.     <script type="text/javascript" src="../jquery-2.2.3.min.js"></script>
  10.     <script type="text/javascript">
  11.         $(function () {
  12. 			// 原生的JSON, data返回了是json格式, 需要反序列化为字面量对象: JSON.parse(data);
  13. 			// jQuery的getJSON()和ajax()方法返回的data为字面量对象
  14. 			$.getJSON('../jQuery专用.json', null, function (data) {
  15.                 // jQuery的each方法: each(idx,ele);
  16.                 // js原生的forEach方法: forEach(ele, idx, array/object);
  18.                 // ele: 数组中的每个省对象
  19.                 data.personInfos.forEach(function (ele, idx) {
  20.                     // 添加到left
  21.                     $('#left_sel').append('<option>' + ele.address +'</option>');
  23.                     // 添加到right
  24.                     // 未选择时显示所有人
  25.                     // 遍历每个省的人
  26.                     ele.persons.forEach(function (person) {
  27.                         // 添加name用filter来过滤
  28.                         $('#right_sel').append('<option name="'+ ele.address +'">' + person.name +'</option>');
  29.                     });
  31.                     // 用change事件, change事件应该加在select上,
  32.                     // 不能加在option上, 也不要在option上用click
  34.                     $('#left_sel').change(function(event) {
  35. 						var that = $(this);
  36. 						// 除了请选择以外, 全部清空
  37. 						$('#right_sel option').not(':first').remove();
  39.                         // 匹配省份动态显示人
  40.                         data.personInfos.forEach(function (ele, idx) {
  41.                             // 判断
  42.                             if (ele.address == that.val()) {
  44.                                 ele.persons.forEach(function (person) {
  45.                                     $('#right_sel').append('<option>'+ person.name +'</option>');
  46.                                 });
  47.                             }
  48.                         });
  49.                     });
  51.                 });
  52.             });
  59.         });     // onload结束
  60.     </script>
  61. </head>
  62. <body>
  63.     <select name="" id="left_sel">
  64.         <option value="">请选择地区</option>
  65.     </select>
  66.     <select name="" id="right_sel">
  67.         <option value="">请选择人</option>
  68.     </select>
  69. </body>
  70. </html>

jQuery的手风琴的效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>老师的手风琴的效果</title>
  6.     <style type="text/css">
  7.         .menu_list{
  8.             width: 150px;
  9.         }
  10.         .menu_head{
  11.             height: 30px;
  12.             line-height: 30px;
  13.             cursor: pointer;
  14.             background: orange;
  15.             text-align: center;
  16.             font-size: 20px;
  17.             margin:10px 0 0;
  18.             border-bottom: 3px solid orangered;
  19.             border-radius: 5px 5px 0 0;
  20.         }
  21.         .menu_body{
  22.             cursor: pointer;
  23.             background: lightgreen;
  24.             text-align: center;
  25.         }
  26.         .menu_body div{
  27.             border-bottom: 2px solid red;
  28.         }
  29.     </style>
  30.     <script type="text/javascript" src="../jquery-2.2.3.min.js"></script>
  31. </head>
  32. <body>
  33.     <div class="menu_list">
  34.         <!-- <div class="menu_head"></div>
  35.         <div class="menu_body">
  36.             <div>内容1</div>
  37.             <div>内容2</div>
  38.             <div>内容3</div>
  39.         </div> -->
  40.     </div>
  41.     <!-- <div class="menu_list">
  42.         <div class="menu_head"></div>
  43.         <div class="menu_body">
  44.             <div>内容1</div>
  45.             <div>内容2</div>
  46.             <div>内容3</div>
  47.         </div>
  48.     </div>
  49.     <div class="menu_list">
  50.         <div class="menu_head"></div>
  51.         <div class="menu_body">
  52.             <div>内容1</div>
  53.             <div>内容2</div>
  54.             <div>内容3</div>
  55.         </div>
  56.     </div> -->
  58.     <script type="text/javascript">
  59.         $(function () {
  60. 			$.getJSON("../jQuery专用.json", null, function (data) {
  61. 				data.personInfos.forEach(function (ele, idx) {
  62. 					$('.menu_list').append('<div class="menu_head">'+ele.address+'</div><div class="menu_body"></div');
  63. 					ele.persons.forEach(function (person) {
  64. 						$('.menu_body:last').append('<div>' + person.name + '</div>');
  65.                     });
  66.                 });
  68.                 // 折叠效果
  69.                 $('.menu_head').click(function(event) {
  71.                     // 点击展开或闭合,同时其他的body闭合
  72.                     $(this).next('div.menu_body').slideToggle().siblings('div.menu_body').slideUp();
  74.                     // 点击展开或闭合
  75.                     //$(this).next('div.menu_body').slideToggle();
  76.                 });
  77.             });
  78.         });
  79.     </script>
  80. </body>
  81. </html>

迭代器以及迭代器的模拟

JS迭代器的用法

  1. /*
  2. 遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）
  4. Iterator的遍历过程是这样的。
  6. （1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
  8. （2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
  10. （3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
  12. （4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。
  14. 每一次调用next方法，都会返回数据结构的当前成员的信息。具体来说，就是返回一个包含value和done两个属性的对象。其中，value属性是当前成员的值，done属性是一个布尔值，表示遍历是否结束。
  15. */
  17.      // 可迭代的对象自身或原型链上, 
  18.      // 必须有一个Symbol.iterator属性, 通过这个属性就能获得迭代器
  20.      var str = "abc";
  21.      console.log(typeof str[Symbol.iterator]);  // function
  23.      // 调用迭代器
  24.      var iterator = str[Symbol.iterator]();
  25.      console.log(iterator.next());  //  Object { value="a",  done=false}
  26.      console.log(iterator.next());  //  Object { value="b",  done=false}
  27.      console.log(iterator.next());  //  Object { value="c",  done=false}
  28.      console.log(iterator.next());  // Object { done=true,  value=undefined}    // 调用完成
  29.      console.log(iterator.next());  // Object { done=true,  value=undefined}
  31.      var arr = ['你','们','好'];
  32.      var iterator = arr[Symbol.iterator]();
  33.      console.log(iterator.next().value);  //  你
  34.      console.log(iterator.next().value);  //  们
  35.      console.log(iterator.next().value);  //  好  
  36.      console.log(iterator.next().value);  // undefined
  37.      console.log(iterator.next().value);  // Object { done=true,  value=undefined}

大神模拟迭代器

  1. // 大神的模拟
  3.  function makeIterator(array) {
  4.       var nextIndex = 0;
  5.       return {
  6.         next: function() {
  7.           return nextIndex < array.length ?
  8.             {value: array[nextIndex++], done: false} :
  9.             {value: undefined, done: true};
  10.         }
  11.       };
  12.     }

我自己模拟迭代器

  1. /*
  2.     思路: 用数组存储数据, 下标的状态用闭包保存, 每次调用自增
  3.     属性: value, done
  4.     方法: next()
  5.     返回值: 返回值应该是一个对象,对象中有next()方法
  6.     闭包用在next()方法里,
  7.     return { value=参1,  done=布尔值};
  8. */
  10.     function myIterator(target) {
  12.         // 传入的参数应该为数组或字符串
  13.         if (! (typeof target == "string" || target instanceof Array)){
  14.             console.log("TypeError : 数据类型不正确,请传入数组或字符串!!!");
  15.             return ;
  16.         }
  19.         var idx = 0; // 会通过闭包保存在内存中
  21.         var result = {};
  22.         result.next = function () {
  23.             var result1 = {};
  25.             // 判断下标和长度的关系
  26.             if (idx < target.length) {
  27.                 result1.value = target[idx++];
  28.                 result1.done = false;
  29.             }else {
  30.                 result1.value = undefined;
  31.                 result1.done = true;
  32.             }
  34.             return result1;
  35.         };
  37.         return result;
  39.     }
  41. console.group("判断测试");
  42.     // number类型
  43.     myIterator(1312414214);
  44.     // Object类型
  45.     var oo = {};
  46.     myIterator(oo);
  47. console.groupEnd();
  48. console.group("字符串测试");
  49.     var fn1 = myIterator("1314");
  50.     var char1 = fn1.next();
  51.     var char2 = fn1.next();
  52.     var char3 = fn1.next();
  53.     var char4 = fn1.next();
  54.     var char5 = fn1.next();
  55.     console.log(char1);
  56.     console.log(char2);
  57.     console.log(char3);
  58.     console.log(char4);
  59.     console.log(char5);
  60.     console.log(char1.value);
  61.     console.log(char2.value);
  62.     console.log(char3.value);
  63.     console.log(char4.value);
  64.     console.log(char5.value);
  65.     fn1 = null; // 释放闭包所占内存
  67. console.groupEnd();
  69. console.group("数组的测试");
  70.     var fn2 = myIterator(["I", "MISS" , "U"]);
  71.     var ele1 = fn2.next();
  72.     var ele2 = fn2.next();
  73.     var ele3 = fn2.next();
  74.     var ele4 = fn2.next();
  75.     var ele5 = fn2.next();
  76.     console.log(ele1);
  77.     console.log(ele2);
  78.     console.log(ele3);
  79.     console.log(ele4);
  80.     console.log(ele5);
  81.     console.log(ele1.value);
  82.     console.log(ele2.value);
  83.     console.log(ele3.value);
  84.     console.log(ele4.value);
  85.     console.log(ele5.value);
  86.     fn1 = null; // 释放闭包所占内存
  87. console.groupEnd();

迭代器的进阶

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>迭代器的深入讨论</title>
  6.     <script type="text/javascript">
  9.         // 自定义的迭代器
  10.         function idMaker(target) {
  11.             var nextIndex = 0;
  12.             if (!(typeof target =="string"|| target instanceof Array)){
  13.                 console.log("请传入数组或字符串");
  14.                 return;
  15.             }
  17.             return {
  18.                 next: function() {
  20.                     // 三目运算写法1
  21.                     //return nextIndex < target.length ?{value: target[nextIndex++], done: false} :{value: undefined, done: true};
  23.                     // 三目运算写法2
  24.                     return {value : target[nextIndex++],done: nextIndex < target.length ? false : true};
  25.                 }
  26.             };
  27.         }
  29.         // 封装重复调用.next()的效果
  30.         function idMakerCountObj(arrstr,count) {
  31.             // 回调
  32.             var fn = idMaker(arrstr);
  33.             for (var i = 0; i < count ; i++) {
  34.                 console.log(fn.next());
  35.             }
  36.         }
  38.         // 封装重复调用.next().value的效果
  39.         function idMakerCountVal(arrstr,count) {
  40.             var fn = idMaker(arrstr);
  41.             for (var i = 0; i < count ; i++) {
  42.                 console.log(fn.next().value);
  43.             }
  44.         }
  47.         // 调用
  48.         idMakerCountObj(["I","MISS","U"],5);
  49.         idMakerCountVal(["I","MISS","U"],5);
  51.         //调用
  52.         var str = "梦想决定你人生的上限, 而努力决定了你人生的下限! 人生无极限,努力吧!";
  53.         idMakerCountVal(str,str.length);
  54.     </script>
  55. </head>
  56. <body>
  58. </body>
  59. </html>

闭包

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>闭包</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //函数嵌套，就是一个函数内部有另外一个函数
  10.             function fn1 () {
  11.                 var num = 100;
  12.                 function subFn1 (num1) {
  13.                     console.log("num is " + (num + num1));
  14.                     console.log("我是一个嵌套函数的子函数。");
  15.                 }
  16.                 subFn1(50);
  17.             }
  19.             fn1();
  21.             //可以把内部函数当做外部函数的返回值返回
  22.             //这么做的好处是，我们可以在任何时候调用内部函数都行。
  23.             //而且内部函数中引用的外部函数的变量，一直存在。
  25.             function fn2 () {
  26.                 var num2 = 100;
  27.                 function subFn2 (param) {
  28.                     console.log("num2 is " + (num2 + param));
  29.                 }
  30.                 //subFn2是返回函数，subFn2()是返回运行结果
  31.                 return subFn2;
  32.             }
  34.             // console.log(fn2());
  35.             //运行结果是fn2内部函数
  36.             var resultFn2 = fn2();
  37.             resultFn2(500);
  38.             resultFn2(200);
  41.             //自增操作 ：可以证明其变量存在内存中，不会消失
  42.             function fn3 () {
  43.                 var count = 0;
  44.                 // function subFn3 () {
  45.                 //  console.log("count is " + (++count));
  46.                 // }
  47.                 // return subFn3;
  48.                 //一般都写匿名函数
  49.                 return function () {
  50.                     console.log("count is " + (++count));
  51.                 };
  52.             }
  54.             var resultFn3 = fn3();
  55.             resultFn3();
  56.             resultFn3();
  57.             resultFn3();
  59.             console.log("====================");
  60.             //每次运行完外部函数，都会生成一个新的内部函数。
  61.             var resultFn4 = fn3();
  62.             resultFn4();
  63.             resultFn4();
  65.             console.log(resultFn3 === resultFn4);
  67.             //需求：判断两个对象的任一属性值的大小
  68.             var obj1 = {
  69.                 name : "a",
  70.                 age : 18
  71.             };
  73.             var obj2 = {
  74.                 name : "b",
  75.                 age : 15
  76.             };
  78.             //访问对象的属性不仅有（.）语法，还可以使用[]来访问
  79.             console.log(obj1["name"]);
  81.             console.log(obj1.age > obj2.age);
  83.             //比较两个对象任意属性值大小
  84.             //外部函数的参数是要比较的属性名字
  85.             function comparePropertyFn (propertyName) {
  86.                 //返回内不函数，参数是要比较的两个对象
  87.                 return function (obj1, obj2) {
  88.                     //通过属性名字获得值
  89.                     var value1 = obj1[propertyName];
  90.                     var value2 = obj2[propertyName];
  91.                     //最后的判断
  92.                     if (value1 > value2) {
  93.                         return 1;
  94.                     } else if (value1 === value2) {
  95.                         return 0;
  96.                     } else {
  97.                         return -1;
  98.                     }
  99.                 };
  100.             }
  102.             //获得内部的比较函数
  103.             //比较age属性值
  104.             var resultCompareFn = comparePropertyFn("age");
  105.             var resultValue = resultCompareFn(obj2, obj1);
  106.             console.log(resultValue);
  108.             //比较name属性值
  109.             var resultCompareFn2 = comparePropertyFn("name");
  110.             var resultValue2 = resultCompareFn2(obj2, obj1);
  111.             console.log(resultValue2);
  114.         </script>
  115.     </body>
  116. </html>

异步执行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>js异步执行</title>
  6. <script type="text/javascript">
  7. /*
  8. 【异步执行】
  9. javascript的执行环境是"单线程",单线程是指一次只能运行一个任务. 
  10. 如果有多个任务,只能排队执行.
  12. 【单线程的好处】
  13. 实现简单
  15. 【单线程的坏处】
  16. 执行多个任务,如果前一个运行时间过长,或浏览器假死,后面的任务只能等待.
  18. 【同步任务】
  19. 一次只能执行一个任务
  20. 【异步任务】
  21. 把任务分成两部分 :
  22. --第一部分一般是请求数据(耗时操作),
  23. --第二部分一般是回调函数, 
  24. 这个回调函数包括了对外部数据的处理. 
  25. 第一部分执行完,不是立即调用第二部分, 而是将程序的执行权交给第二部分,
  26.  然后第一部分的数据完全返回会, 才会执行第二部分的任务
  27.  **所以**  异步任务执行顺序和任务排列无关!!
  29. 【串行】 任务一个接一个执行
  31. 【并行】 任务并列执行
  32. 【串行和并行结合】
  33. 设置一个条件,每次最多能并行n个任务, 这样可以避免性能的消耗
  34. 【】
  35. 【】
  36. 【】
  37. 【】
  38. 【】
  39.  */
  44. // 模拟一个异步的任务
  46. // console.log("***********before***********");
  47. // setTimeout(function () {
  48. //  console.log("***********ok***************");
  49. // },10);
  50. // console.log("***********after************");
  53. // 异步任务函数
  54. function asynFn (arg, callbackFn) {
  55.     console.log("+++++++++++++" + arg +"++++++++++++++++++");
  56.     setTimeout(function () {
  57.         callbackFn(arg + 1000);     // 一个参数
  58.     },0);
  59. }
  62. // 调异步任务
  63. // asynFn(234,function (data) {
  64. //  console.log(data);
  65. // });
  67. // 调用5个异步的任务
  68. // 串行任务,但是时间参数怎么控制的么
  69. // 调用的是异步任务函数
  70. // asynFn(1,function (data) {       // 此处data为形参
  71. //  // 参1: 返回的结果
  72. //  asynFn(data,function (data) {
  73. //      asynFn(data,function (data) {
  74. //          asynFn(data,function (data) {
  75. //              asynFn(data,function (data) {
  76. //                  // 运行下
  77. //              });
  78. //          });
  79. //      });
  80. //  });
  81. // });
  85. /*************串行改进********************/
  86. // // 编写一个串行函数
  87. // // 串行函数的参数
  88. // var items = [1, 2, 3, 4, 5];
  89. // // 每个异步任务返回结果的数组
  90. // var results = [];
  91. // // 串行函数
  92. // function series (item) {
  93. //  if (item){
  94. //      // 开始调用异步任务
  95. //      asynFn(item, function (result) {
  96. //          // 把回调函数的返回值存储在最终结果数组中
  97. //          results.push(result);
  98. //          return series(items.shift());
  99. //      });
  100. //  } else {
  101. //      //console.log(results);
  102. //      finalFn(results);   // 最终结果打印函数
  103. //  }
  104. // }
  106. // finalFn完成函数
  107. function finalFn (x) {
  108.     console.log(x);
  109. }
  111. // // 调用串行函数
  112. // // shift()弹出首个元素,并返回该元素
  113. // series(items.shift());
  115. /*************串行改进_End********************/
  118. /*************并行函数********************/
  119. // 参数数组
  120. // var items = [1, 2 ,3 ,4 ,5];
  121. // //返回的结果数组
  122. // var results = [];
  124. // //
  125. // items.forEach(function (item) {
  126. //  // 调用异步任务
  127. //  asynFn(item,function (result) {
  128. //      // 添加到结果数组
  129. //      results.push(result);
  131. //      // 结果一起执行
  132. //      // 数据一起返回
  133. //      if (results.length == items.length) {
  134. //          // 打印
  135. //          finalFn (results);
  136. //      }
  137. //  });
  138. // });
  142. /*************并行执行_End********************/
  145. /*************串行+并行的结合********************/
  147. /*
  148.     因为:异步任务执行顺序和任务排列无关
  149.     running++ 会运行在running--的后面
  150. */
  153. // 参数数组
  154. var items = [1, 2 ,3 ,4 ,5];
  155. //返回的结果数组
  156. var results = [];
  158. // 当前运行的任务数量
  159. var running = 0;
  161. // 每次最大任务数量
  162. var limit = 2;
  164. // 串行、并行函数
  165. function run () {
  166.     // 循环为并行
  167.     while (running < limit && items.length > 0) {
  168.         // 调用异步任务
  169.         asynFn(items.shift(),function (result) {
  170.             // 存到结果数组中
  171.             results.push(result);
  173.             // 当前任务数量自减
  174.             // 测试
  175.             console.log("我是callbackFn");
  176.             running--;      // 写在了回调函数里, 任务结束了才自减
  177.             if (items.length > 0) {
  178.                 // 调用run
  179.                 run();  // 此处为串行
  180.             } else if(running === 0) {
  181.                 finalFn(results);
  182.             }
  183.         });
  185.         // 每次循环当前数量++
  186.         console.log("测试在callbackFn前面执行,running++");
  187.         running++;
  188.     }
  189. }
  191. // 调用
  192. run();
  193. /*************串行+并行的结合_End********************/
  195. /*
  196. ajax本身就是异步请求,
  197. 所以画UI和绑定事件都应该写在callback函数内
  198. 写外边会出现错误
  199.  */
  201. </script>
  202. </head>
  203. <body>
  205. </body>
  206. </html>

模块化与RequireJS简单应用

模块化的思想

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>模块化</title>
  6. <script type="text/javascript">
  7. /*
  8. 【模块化】:　是一种思想,按分类思想分包或分类管理.(理解成文件夹)
  9. 随着网站内容丰富和复杂,简单的用<script>标签导入外部的JS文件不能适应现代开发了,
  10. 我们需要团队协作, 分离模块, 模块测试等复杂的需求
  12. 模块化是指在解决一个问题或一系列问题时, 按照一种分类的思想对功能进行分解处理.
  13. 模块化对于软件来说, 可以解耦软件的复杂性.
  15. 【耦合度】:　即为相关联性，　耦合度越低越好．
  16. 模块化是java和php等后端语言的必须得思想;  
  17. 分包管理或分文件管理
  19. 【模块化设计必须有的能力】
  20. 1. 定义封装的模块.
  21. 2. 定义对新模块的依赖性.
  22. 3. 可以引入其他的模块.
  24. 【模块化开发需要遵循规范AMD或CMD等】
  26. 【模块化思想】
  27. 函数也算是模块
  28. 对象也是
  29. 只不过没按照模块化规范来写
  31.  */
  33. // 一. 函数写法  函数本身算一个模块
  34. // 缺点: 
  35. // 1.污染了全局变量, 模块之间无法保证命名是否冲突和覆盖
  36. // 2. 模块之间没有直接关系
  38. // 二. 对象写法  对象本身算一个模块
  39. // 优点: 
  40. // 1. 解决了函数写法的缺点
  41. // 2. 所有的成员打包放在了这个对象中
  42. // 缺点:
  43. // 1. 可以对该模块内部的属性
  45. // 三.函数立即调用
  46. // 不暴露成员变量的目的 (命名空间)
  47. // 1. 闭包思想
  48. // 2. 优点: 外部无法修改内部的局部变量.
  50. // 四. 放大模式
  51. //
  52. //
  54. // 五. 无关放大模式
  55. // 
  56. // 
  57. // 
  58. // 
  65. var obj1 = {
  66.     name : "王大可",
  67.     m1 : function () {
  68.         console.log("m1:" +　this.name);
  69.     },
  70.     m2 : function () {
  71.         console.log("m2:" +　this.name);
  72.     }
  73. };
  75. obj1.m1();
  76. obj1.name ="撼地神牛";
  77. obj1.m1();
  79. // 三.函数立即调用
  80. //１．不暴露成员变量的目的 (命名空间)
  82. var modal = (function () {
  83.     var age =18;
  84.     var m1 = function () {
  85.         return "m1: " + age;
  86.     };
  87.     var m2 = function () {
  88.         age++;
  89.         return "m2: " + age;
  90.     };
  91.     return {
  92.         //"m1" : m1(),          // modal.m1 是属性
  94.         // 把函数的指针作为value
  95.         // key m1是属性, value m1是上面的变量保存的函数地址
  96.         // key m1 实际是"m1"
  97.         m1 : m1,                // modal.m1() 是方法
  98.         m2 : m2             // modal.m2() 是方法
  99.     };
  100. })();
  102. console.log(modal.m1);
  103. console.log(modal.m1());
  104. console.log(modal.m2());
  105. console.log("这也是闭包");
  106. console.log(modal.m1());
  107. console.log("++++++以下用了闭包+++++++");
  108. var fn = modal.m2;
  109. console.log(fn());
  110. console.log(fn());
  111. console.log(fn());
  112. console.log(fn());
  113. console.log(fn());
  115. // 四. 放大模式
  116. // 模块化的思想给对象添加了一个方法
  117. var modal4 = {};
  118. modal4 = (function (mod) {
  119.     mod.m1 = function () {
  120.         console.log("被放大了, 额外添加的方法");
  121.     };
  122.     return mod;
  123. })(window.modal4);  // 传实际的参数,写modal4也可以
  125. modal4.m1();
  127. // 五. 无关放大模式
  128. var modal5 = {};
  129. modal5 = (function (mod) {
  130.     mod.m1 = function () {
  131.         console.log("被放大了, 额外添加的方法");
  132.     };
  133.     return mod;
  134. })(window.modal5 || {});    
  136. modal5.m1();
  139. </script>
  140. </head>
  141. <body>
  143. </body>
  144. </html>

RequireJS简单应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>RequireJS</title>
  6.     <script type="text/javascript">
  7.     /*
  8.     【RequireJS概念】
  9.     1. RequireJS是一个前端模块化的管理工具库.
  12.     【RequireJS基本思想】
  13.     通过一个函数将所需的模块实现装载进来. 然后返回一个新的函数 (模块).
  14.     所有的业务逻辑代码, 都会放在这个函数内部操作
  16.     【如何使用RequireJS】
  17.     去官网下载, 然后通过<script> 中src属性引用
  19.     【RequireJS相应的API】
  20.     见demo
  22.     【】
  24.     【】
  26.      */
  27.     </script>
  28.     <!-- <script type="text/javascript" src="js/sayHello.js"></script> -->
  29.     <script type="text/javascript" src="require.js"></script>
  30.     <script type="text/javascript">
  31.         // requireJS的基本API
  32.         /*
  33.             require有三个变量: define, require, requirejs
  34.             require和requirejs是一个意思, 我们一般使用require
  36.             define :　定义模块
  37.             require : 加载模块的, 并且可以执行加载模块后的回调函数
  39.             符合AMD标准: 异步加载模块
  40.          */
  42.         // 利用require来加载模块 (异步加载)
  43.         // 数组用来加载多个模块
  44.         //require(['js/SayHello']);
  46.         // 有回调函数
  47.         // require(['js/SayHello'],function () {
  48.         //  alert("加载完成!");
  49.         // })
  51.         // 加载配置文件
  52.         // 上面例子是加载本地文件
  53.         // 也可以加载网络文件或服务器文件, 这样就不能用上述方式加载
  54.         // 需要用require.config来配置一下  (没有远端环境也可以自己配置, 强大!!!)
  55.         // 省略.js
  56.         // 百度的jQuery库: http://libs.baidu.com/jquery/1.9.0/jquery.min.js
  57.         // require.config({
  58.         //  paths : {
  59.         //      jquery : ["http://libs.baidu.com/jquery/1.9.0/jquery.min"]
  60.         //  }
  61.         // });
  63.         // // 使用配置中的参数
  64.         // // $必须实参传入
  65. 		// require(['jquery'],function ($) {
  66.         //  $(function () {
  67.         //      // 可以使用jQuery语法了
  68.         //  });
  69.         // })
  71.         // require.config配置路径,首先可以访问非本地的模块
  72.         // 我们也可以把本地,模块也利用config来配置, 简化开发
  73.         // 而且服务器的模块和本地的模块可以配合使用, 
  74.         // 比如服务器端的jQuery文件失效,就可以从本地访问jQuery,反之亦然.
  75.         // 省略.js
  76.         require.config({
  77.             paths : {
  78.                 jquery : ["http://libs.baidu.com/jquery/1.9.0/jquery.min","jquery-2.2.3"],
  79.                 say : ["js/sayHello"],
  80.                 obj : ["js/obj"],
  81.                 person : ["js/Person"]
  82.             }
  83.         });
  85.         // 使用配置中的参数
  86.         // $必须实参传入
  87. 		// 没有返回值的放后面,say放最后
  88. 		require(['jquery','obj','person','say'],function ($,obj,Person) {
  89.             $(function () {
  90.                 // 可以使用jQuery语法了
  91.                 alert("加载完成! ");
  92.                 alert(obj.name+"+++++"+obj.age);
  94.                 var xiaoming = new Person.Person("小雪",18);
  95.                 xiaoming.say();
  97.             });
  98.         })
  101.     </script>
  102.     <style type="text/css">
  103.     .my_div{
  104.         width: 300px;
  105.         height: 300px;
  106.         background: red;
  107.     }
  108.     </style>
  109. </head>
  110. <body>
  111.     <div class="my_div">
  113.     </div>
  114. </body>
  115. </html>
  1. // Person.js
  3. define(function () {
  4.     var Person = function (name , age) {
  5.         this.name = name;
  6.         this.age = age;
  7.     }
  9.     Person.prototype.say = function() {
  10.         alert("我叫: "+this.name+"年龄: "+this.age);
  11.     };
  13.     return {
  14.         Person : Person
  15.     }
  16. });
  1. // sayHello.js
  3. // function fn () {
  4. //  alert("你好啊!!!");
  5. // }
  7. // fn();
  10. // 定义模块 :　define是一个全局变量 (函数)
  12. define(function () {
  13.     function fn () {
  14.         alert("你好啊!!!");
  15.     }
  17.     fn();
  18. });
  1. // obj.js
  3. define(function () {
  4.     return {
  5.         name : "小雪",
  6.         age : 18
  7.     };
  8. });

深入理解属性和变量

  1. 一 JS中的变量和属性有共同点, 可以类比
  3. 1. 变量可以存放基本类型和引用类型;
  4. Eg . 
  5. /*=======存放基本类型========*/
  6. var x1 = 123;
  7. var x2 = "I MISS U";
  8. /*=======存放引用类型(指针)========*/
  9. var x3 = [];
  10. var x4 = {};
  11. var x4 = function () {}   // 就是传说中的函数表达式(匿名函数)
  13. 2. 属性也可以存放基本类型和引用类型的值
  14. Eg .
  15. /*=======存放基本类型========*/
  16. var obj = {};  // 一个空的字面量对象
  17. obj.x1 = 123;
  18. obj.x2 = "I MISS U";
  19. /*=======存放引用类型(指针)========*/
  20. obj.x3 = [];
  21. obj.x4 = {};
  22. obj.x5 = function () {};    // 此时就是"方法"
  24. 二: 属性的特点
  25. 属性是属于某个对象的, 通过"."或 "[]"语法来调用
  26. 同时, 属性实际是字符串类型的
  28. var prop1 = 123;   // 一个变量初始化
  29. var testObj = {};
  30. testObj.prop1 = "测试";   // 变量名和属性一样??
  32. // 验证其实不一样
  33. console.log(testObj.prop1);   // 测试
  34. console.log(prop1);    // 123 
  35. // 上面说明变量名和属性重名没有被覆盖. 其实没有任何关系
  37. // 其实本质属性是字符串
  38. console.log(testObj["prop1"]);   // 测试
  39. // 说明属性确实是字符串
  41. //再来看老师下午所讲的, 就能解释通  m1 : m1  , 这么写是合理的
  42. var modal = (function () {
  43.     var age =18;
  44.     var m1 = function () {
  45.         return "m1: " + age;
  46.     };
  47.     var m2 = function () {
  48.         age++;
  49.         return "m2: " + age;
  50.     };
  51.     return {
  52.         //"m1" : m1(),            // modal.m1 是属性
  54.         // 把函数的指针作为value
  55.         // key m1是属性, value m1是上面的变量保存的函数指针
  56.         // key m1 实际是"m1"
  57.         m1 : m1,                // modal.m1() 是方法
  58.         m2 : m2                // modal.m2() 是方法
  59.     };
  60. })();

同源策略与JSONP

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>同源政策</title>
  6.     <script type="text/javascript">
  7.     /*  
  8.         【同源政策】
  9.         1995年, 同源政策被引入到浏览器中, 目前所有的浏览器都适用这种政策.
  10.         同源政策最初的含义是: A页面的cookie, B页面不能读取到A页面的cookie, 除非这两个页面是"同源"
  12.         【同源必须保证"三"相同】
  13.         1. 协议相同
  14.         2. 域名相同
  15.         3. 端口相同
  17.         eg. http://www.ilovedota.com/dir/index.html
  18.         协议: http://
  19.         IP地址: 192.168.0.163
  20.         域名: www.baidu.com
  21.         DNS: Domain Name System，域名系统
  22.         端口: port  端口是在域名后面用冒号 ":" 写 
  23.         例如: :8080(默认端口,省略)
  25.         有get请求的完整网址 :  http://wwww.liu.com:8080/dir/index.html?username="sdfasd"&password="*****"
  27.         端口可分为虚拟端口和物理端口，其中虚拟端口指计算机内部或交换机路由器内的端口，不可见。例如计算机中的80端口、21端口、23端口等。物理端口又称为接口，是可见端口，计算机背板的RJ45网口，交换机路由器集线器等RJ45端口
  29.         测试: 
  30.         1.  http://www.ilovedota.com/dir/index.html
  31.         2.  http://www.ilovedota.com/other/other.html
  32.         1和2是同源的,因为协议相同, 域名(IP地址)相同, 端口相同(都是默认的:8080端口)
  34.         3.  https://www.ilovedota.com/other/other.html          // 不同源,协议不同
  35.         4.  http://www.ilove.com/other/other.html               // 不同源,域名不同
  36.         5.  http://www.ilovedota.com:2024/other/other.html      // 不同源,端口不同
  39.         【同源的意义】
  40.         保证用户信息的安全, 防止恶意网站窃取用户数据
  42.         【同源政策能限制的范围】
  43.         1. cookie 无法获取
  44.         2. DOM无法获取
  45.         3. ajax无法发送请求 (?为嘛要限制它)
  46.             // 能发送请求访问数据就肯能窃取信息
  48.         // 多个项目在多个服务器间存在信息请求交换怎么办??
  49.         // 服务器端解决方案(了解)
  50.         1. 架设代理服务器
  51.         2. 浏览器请求同源服务器
  52.         3. 然后再让同源服务器去请求其他服务器 
  54.         【JSONP】
  55.         JSONP概念: JSONP是JSON的一种使用模式, 可以使用网站达到跨域的功能.
  57.         【JSONP的流程】
  58.         1、客户端访问: www.liu.com:8080/dir/index.html?jsoncallback=callbackFn
  59.         2、假设访问后想返回的数据是: {"name" : "liu", "age" : 18};
  60.         3、JSONP实际上返回的是callbackFn{"name" : "liu", "age" : 18}
  61.           返回的不是json格式的数据, 而是一个代码段
  62.         【JSONP的实现】
  63.         1、通过script中的 src="在这里传"
  64.         2、jQuery实现, 见demo
  67.         【CORS (了解)】
  69.         【WebSoket (了解)】
  71.     */   
  78.     </script>
  79. </head>
  80. <body>
  81.     <!-- 
  82.     【JSONP的流程】
  83.     1、客户端访问: www.liu.com:8080/dir/index.html?jsoncallback=callbackFn
  84.     2、假设访问后想返回的数据是: {"name" : "liu", "age" : 18};
  85.     3、JSONP实际上返回的是callbackFn{"name" : "liu", "age" : 18}
  86.     返回的不是json格式的数据, 而是一个代码段 
  87.     -->
  89.     // 一. script的src实现
  90.     // 支持JSONP就可以用
  91.     <script>
  92.         function callbackFn (data) {
  93.             // 返回data
  94.             // 可以进行解析
  95.         }
  96.     </script>
  97.     <script type="text/javascript"></script>
  98.     <script type="text/javascript" src="http://liu.com:8080/index.html?jsoncallback=callbackFn"></script>
  100.     // 二. jQuery的实现
  101.     <script> 
  102.         $.getJSON("get","http://liu.com:8080/index.html?jsoncallback=?",function (data) {
  103.             // 进行解析
  104.         });
  105.     </script>
  106. </body>
  107. </html>

匿名函数和callback深入解析

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>匿名函数与callback深入思考</title>
  6.     <script>
  7.     // 函数的三大特点:
  8.     // 声明, 实现, 调用
  9.         // 练习callback
  10.         // 其实就是把函数作为参数传递
  11.         // 实际传的是函数的地址
  13.         function fn (x,y) {
  14.             console.log(x+y(x));
  15.         }
  17.         function fn1 (x) {
  18.             if (x<10) {
  19.                 return "我是传了参数的回调函数" +x;
  20.             } else{
  21.                 return "我是窜了参数的" + x;
  22.             }
  23.         }
  24.         fn(2,fn1);
  26.         // ajax中成功的回调函数
  27.         // 在函数的内部整理出了结果, 传入回调函数中, 在回调函数内能使用
  28.         // 
  30.         // 匿名函数的传参调用
  31.         (function (x) {
  32.             console.log("我是匿名函数传了参"+ x);
  33.         })(100000);
  35.         // 函数内部的回调函数
  36.         // 模拟ajax
  38.       //   function test (x,successCallbackFn) {
  39.       //    x +="wo ";
  40.       //    x +="爱你";
  41.       //    x += "一万年";
  42.       //    successCallbackFn(x);   //  这里的x是实参,也可以successCallbackFn("我这的就只是实参");
  43.       //    return "\"我是返回值猜猜看\"";
  44.       //   }
  46.       // test(1314,function (y) {
  48.       //    console.log(y);
  49.       // })
  51.       // 等价于
  53.      function test2 (x) {
  54.         x +="wo ";
  55.         x +="爱你";
  56.         x += "一万年";
  58.         // (function(x){
  59.         //  console.log(x);
  60.         // })("调用里传的是实际的参数");
  62.         (function(){
  63.             console.log(arguments[0]);
  64.         })("调用里传的是实际的参数");
  65.         return "\"我是返回值猜猜看\"";
  67.      }
  68.      test2(1314);
  69.     </script> 
  70. </head>
  71. <body>
  73. </body>
  74. </html>

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注