零散的知识点

Posted 2020-08-20 cy的小天地

最近做项目的时候，出现过一些以前没遇到的问题，基本上是解决了，为了加深记忆，把它们写到这里。

1）一般的评论框我们都会用textarea标签，在写完标签并运行之后，可以发现这个文本框右下角有个拖拽拉长的角标，为了不让用户随意改变文本框，我们用resize: none这个属性去除它。

2）在有很多人名的列表里，我们想要快速找到相应的人时，可以用到模糊查询的功能，代码如下：

 1 // 模糊查询
 2 function query(){  
 3     if($.trim($("#search").val()).length == 0){  
 4         $(".lock-page .aside-mid ul li, .lock-page .aside-bom ul li").show();  
 5     }else{  
 6         $(".lock-page .aside-mid ul li, .lock-page .aside-bom ul li")    
 7         .hide()    
 8         .filter(":contains(‘"+$("#search").val()+"‘)")    
 9         .show();  
10     }  
11 }  

3）如何调用表情包呢？比如我们常见的qq表情、weixin表情、环信表情...等等。

首先是要引入表情jq:<script type="text/javascript" src="js/jquery.emoji.js"></script>

其次就是最核心的代码了

 1 $("#editor").emoji({
 2             button:"#btn-face",
 3             showTab: false,
 4             icons: [{
 5                 name: "环信表情",
 6                 path: "img/faces/",
 7                 maxNum: 35,
 8                 excludeNums: [41, 45, 54],
 9                 file: ".png",
10                 placeholder: "{alias}",
11         alias: {
12             1: "[):]",
13             2: "[:D]",
14             3: "[;)]",
15             4: "[:-o]",
16             5: "[:p]",
17             6: "[(H)]",
18             7: "[:@]",
19             8: "[:s]",
20             9: "[:$]",
21             10: "[:(]",
22             11: "[:‘(]",
23             12: "[:|]",
24             13: "[(a)]",
25             14: "[8o|]",
26             15: "[8-|]",
27             16: "[+o(]",
28             17: "[<o)]",
29             18: "[|-)]",
30             19: "[*-)]",
31             20: "[:-#]",
32             21: "[:-*]",
33             22: "[^o)]",
34             23: "[8-)]",
35             24: "[(|)]",
36             25: "[(u)]",
37             26: "[(S)]",
38             27: "[(*)]",
39             28: "[(#)]",
40             29: "[(R)]",
41             30: "[({)]",
42             31: "[(})]",
43             32: "[(k)]",
44             33: "[(F)]",
45             34: "[(W)]",
46             35: "[(D)]"
47            
48         }
49         },{
50         path: "img/faces/",
51         file: ".png",
52         placeholder: "#qq_{alias}#"
53     }]
54     });

其中，#btn-face代表的是用户点击的按钮，#editor代表的是接收表情的文本框。

4）监听键盘事件，同时按ctrl+enter

1 $(‘#editor‘).keydown(function(e){
2             if(e.which == 13 && e.ctrlKey){
3                 add();//这里是要执行的方法
4             }
5         })

5）高德地图的引入和参数设置

<div id="wrap" class="my-map">
         <div id="map1"></div>
 </div>
                                                 <script> 
                                                        var marker, map = new AMap.Map(‘map1‘, {
                                                        resizeEnable: true, 
                                                        center: [‘245.21362‘, ‘151.2546465‘],
                                                        zoom: 19
                                                        });
                                                        // 实例化点标记
                                                        marker = new AMap.Marker({ 
                                                        icon: ‘http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png‘, 
                                                        position:[‘245.21362‘, ‘151.2546465‘] 
                                                        }); 
                                                        marker.setMap(map); 
                                                        map.on(‘complete‘, function(){ 
                                                        map.plugin([‘AMap.ToolBar‘, ‘AMap.Scale‘], function(){ 
                                                        map.addControl(new AMap.ToolBar); 
                                                        map.addControl(new AMap.Scale); 
                                                        }); 
                                                        })
                                                </script>