历史搜索

  1. <body>
  2.     <input type="text" id="input">
  3.     <h2>历史搜索</h2>
  4.     <div id="container">
  6.     </div>
  7.     <script>
  8.         var historys = [ ];
  9.         /* 1、enter获取输入框的值 */
  10.         $("#input").keyup(function(event){
  11.             if(event.keyCode==13){
  13.                 var value = $(this).val();
  14.                 if(value){
  15.                     /* 2、只有数组中不包含搜索的值,才添加 */
  16.                     if(!historys.includes(value)){
  17.                         historys.unshift(value);
  18.                         $("#container").prepend(`<button>${value}</button>`)
  19.                         console.log(historys)
  20.                         $("#input").val("")
  21.                     }else{
  22.                         /* 3、将数组中存在的值,至于数组的顶部 */
  23.                         console.log(value)
  24.                         var index = historys.indexOf(value);
  25.                         historys.splice(index,1);
  26.                         historys.unshift(value);
  27.                         console.log(historys)
  28.                         $("#container button").eq(index).remove();
  29.                         $("#container").prepend(`<button>${value}</button>`)
  30.                         $("#input").val("")
  31.                     }
  32.                 }
  33.             }
  34.         })
  35.     </script>
  36. </body>

截取超过六位以后的字符改为…

  1.         var str = "时间有限来不及去惦念心里没有我的人";
  2.         if(str.length>6){
  3.             str = str.substr(0,6) + "...";
  4.         }
  5.         console.log(str);

得到一个新的数组，只要字符超过三位就以…结尾

  1.         var arr = [
  2.             "添加了附近",
  3.             "东方防御塔",
  4.             "永劫无间",
  5.             "暗黑地牢",
  6.             "河狸"
  7.         ]
  8.         // 得到一个新的数组，只要字符超过三位就以...结尾
  9.         var res = arr.map(item=>{
  10.             if(item.length>3){
  11.                 return item.substr(0,3) + "...";
  12.             }
  13.             return item;
  14.         })
  15.         console.log(res);

1.在输入框内输入某个字符，获得一个只包含关键字的数组 2.对数组中的值进行处理

  1.     <input type="text" id="app">
  2.     <script>
  3.         var arr = [
  4.             "你好",
  5.             "你添加了附近的",
  6.             "附近的",
  7.             "永劫无间",
  8.             "永远",
  9.             "暗黑地牢",
  10.             "河狸"
  11.         ]
  12.         // 1.在输入框内输入某个字符，获得一个只包含关键字的数组
  13.         // 2.对数组中的值进行处理
  14.         $("#app").keydown(function(){ 
  15.             if(event.keyCode == 13){
  16.                 var res = [];
  17.                 var value = $(this).val();
  18.                 // arr.forEach(item=>{
  19.                 //     var own = item.indexOf(value);
  20.                 //     if(own != -1){
  21.                 //         res.push(item);
  22.                 //     }
  23.                 // })
  25.                 var res = arr.filter(item=>{
  26.                     return item.includes(value);
  27.                 })
  29.                 res = res.map(item=>{
  30.                     if(item.length>3){
  31.                         return item.substr(0,3) + "..."
  32.                     }
  33.                     return item
  34.                 })
  35.                 $(this).val("");
  36.                 console.log(res);
  37.             }
  38.         })
  39.     </script>
  40. </body>

1.获取inpu值 2.根据id值，获取对应项目 3.name+…

  1.     <input type="text" id="app">
  2.     <script>
  3.        var arr = [
  4.            {id:1001,name:"html"},
  5.            {id:1002,name:"css"},
  6.            {id:1003,name:"js"}
  7.        ]
  8.        /*
  9.        [{id:1001,name:"html..."}] 
  10.         */
  11.        /* 1、获取input的值 */
  12.        /* 2、根据id值,获取数组中对应的项目 */
  13.        /* 3、name+"..." */
  14.        $("#app").keyup(function(event){
  15.            if(event.keyCode==13){
  16.                var value = $(this).val();
  17.                var res = arr.find(item=>{
  18.                    return item.id == value;
  19.                })
  20.                res.name = res.name +"...";
  21.                var list = [res];
  22.                console.log(list)
  23.            }
  24.        })
  25.     </script>

hello 反转

  1.         var str = "hello";
  2.         var arr = str.split("");
  3.         arr.reverse();
  4.         console.log(arr.join(""))

练习

  1.         var str = "?key=你&age=18"
  2.         // 得到一个obj={
  3.         //     key:"你",
  4.         //     age:18
  5.         // }
  6.         var res = str.split("&");
  7.         var key = res[0].split("=")[1];
  8.         var age = res[1].split("=")[1];
  9.         age = parseInt(age);
  10.         var obj={
  11.             key,
  12.             age
  13.         }
  14.         console.log(obj);

练习
方法1

  1.         var str = "?key=你&age=18&offset=10";
  2.         // 得到一个{key:你},{age:18},{offset:10}
  3.         var arr = str.slice(1).split("&");
  4.         var res = arr.map(item=>{
  5.             var obj = {};
  6.             var list = item.split("=");
  7.             obj[list[0]]=list[1];
  8.             return obj;
  9.         })
  10.         console.log(res);

方法2

  1.         var str = "?key=你&age=18&offset=10"
  2.         /* 
  3.         [{key:你},{age:18},{offset:10}]
  4.          */
  5.         var arr = str.slice(1).split("&");
  6.         // console.log(arr)
  7.         var list = [];
  8.         arr.forEach(item=>{
  9.            var res = item.split("=");
  10.            var obj = {};
  11.            console.log(res)
  12.            obj[res[0]]=res[1];
  13.            console.log(obj)
  14.            list.push(obj);
  15.         })
  16.         console.log(list)

练习

  1.         var url = "http://music.163.com/#/discover/playlist/?order=hot&cat=你&limit=35&offset=140";
  2.         // 得到 obj={
  3.         //     order:hot,
  4.         //     cat:你,
  5.         //     limit:35,
  6.         //     offset:140,
  7.         // }
  8.         var str = url.slice(url.indexOf("?")+1,url.length);
  9.         console.log(str);
  10.         var res = str.split("&");
  11.         res = res.map(item=>{
  12.             var obj={};
  13.             var list = item.split("=");
  14.             obj[list[0]]=list[1];
  15.             return obj;
  16.         })
  17.         console.log(res);