Wills's blogs

编程过程中的一些笔记

发表于 | 分类于 |

这是一些我在前端代码编写过程中的一些笔记，有一些平常经常会遇到的，但是又容易忘记，所以做了以下笔记。

1. 关于表格

在一些数据的展示方面通常都要使用表格，这时候，表格的大小样式方面显得非常重要。因为一旦表格大小不合适，容易造成变形。以下是一般表格的模板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table class="dp-tab">
    <thead>
        <tr>
            <th width="65"> 店铺类型</th>
            <th width="120">店铺名称</th>
            <th width="100">提交日期</th>
            <th width="100">申请成功日期</th>
            <th width="60">状态</th>
            <th>备注</th>
            <th width="50">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>@item.ShopTypeName</td>
            <td>@item.ShopName</td>
            <td></td>
            <td></td>
            <td class="dp-red">@item.ApplyStatus</td>
            <td>@item.Remark</td>
            <td><a href="/shop/input>详情</a></td>
        </tr>
    </tbody>
</table>

如上图所示，先把能确定最大大小的单元格宽度全部固定下来，剩下一个可能内容比较多且宽度不固定的单元格不加宽度，使其自适应。

2. 使用z-index改变元素层级

使用z-index改变元素层级时，要对该元素加定位，一般使用

1
position:relative

3. 清除浮动

在平常我们coding时候经常会发生子元素浮动而引起父级元素不能完全撑开的状况，解决办法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
1. 对父级元素添加以下样式：
.parent{
   overflow:hidden;
   zoom:1; 
}
2. 对父级元素添加以下样式：
.parent:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

4. 文本模糊效果

1
2
3
4
.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

5. jquery遍历函数

  1. filter(expression)
    过滤掉与expression参数值指定的标准不匹配（返回值为false）的元素集合，例子：
1
2
3
$('td').filter(function(){
    return this.innerHTML.match(/^\d+$/);
    });
  1. map(callback)
    将元素集合中的每一个元素调用回调函数，并将返回值收集到jQuery对象实例中，例子：
1
2
3
var allIds = $('div').map(function(){
    return (this.id==undefined)?null:this.id;
    }).get();
  1. each(callback)
    遍历匹配集里所有的元素，为每一个元素调用传入的迭代函数，例子：
1
2
3
$([1,2,3]).each(function(){
    alert(this);
    });

6. iframe的bug

使用iframe标签时，如果iframe标签不闭合，即

7. 鼠标放在图片上，图片放大显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var imgWid = 0 ;
var imgHei = 0 ; //变量初始化
var big = 1.1;//放大倍数
$('.sw-con1,.sw-con2,.sw-con3').hover(function() {
    $(this).find("img").stop(true,true);
    var imgWid2 = 0;
    var imgHei2 = 0;//局部变量
    imgWid = $(this).find("img").width();
    imgHei = $(this).find("img").height();
    imgWid2 = imgWid * big;
    imgHei2 = imgHei * big;
    $(this).find('img').animate({
        width: imgWid2,
        height: imgHei2
    },"slow"
    );
}, function() {
    $(this).find("img").stop().animate({"width":imgWid,"height":imgHei});
});

8. 解决img标签间距问题

关于img标签间距问题：
多个img之间有间距，包含img标签的div之间有间距块级元素包含内联元素如图片文字等时，内联元素默认是和父级元素的baseline（基线）对齐的，而baseline又和父级元素底边有一定的距离（这个距离和font有关，不一定是5px），所以以上代码的效果中不同div之间有间隙，这是因为图片与父元素的底边有距离。说到baseline呢，其实它是vertical-align属性的默认值，vertical-align属性是设置元素的垂直排列的，用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐，除了baseline对齐方式之外，还可以是sub | super | top | text-top | middle | bottom | text-bottom |inherit（任何的版本的Internet Explorer （包括 IE8）都不支持属性值 “inherit”）。

　　知道了问题产生的原因，就好对症下药解决问题了，其实就是要消除baseline对齐方式产生的距离。所以，
　　方法1:很容易想到，把对齐方式改一下不就好了，于是设置img的vertical-align属性为bottom；

　　方法2:就是上文说的给父元素加上font-size:0的属性，既然这个距离和font有关，那么把字体大小设为0，总该没有距离了吧；

　　方法3：可由方法二想到，既然为0可以，那把行高设的很小可不可以呢？经试验发现，本例图片大小为200px，设line-height不大于12就能够消除间隙了，鉴于这个距离一般是5px，所以可以把line-height设为5px左右；

　　另外一个间隙是多个img标签的左右间隙，是由于img标签是行内元素，而事实是当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。

　　所以方法就是上文提到的，去掉img标签之间所有的空格，如果又不想把所有连续的行内元素写到一行，可以多行注释，把空格回车什么的注释掉，就像下图这样；当连续的行内元素不是img时，也可以通过设置父元素的font-size为0来消除左右间隙。
方法四：把img变成块级元素

9. 移动端字体设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body {
     font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
 }
 //使用rem单位时，html的字体一般设置
 @media only screen and (min-width: 641px)
     html {
         font-size: 125%!important;
     }
 @media only screen and (min-width: 561px)
     html {
         font-size: 109%!important;
     }
 @media only screen and (min-width: 481px)
     html {
         font-size: 94%!important;
     }
 html {
     font-size: 62.5%;
 }

10. chrome浏览器，将html网页中input [file] 元素css样式中的’cursor’属性设置为’pointer’，但是鼠标移上去后的形状还是箭头。

解决办法：

为input [file]元素添加css样式：

1
2
font-size：0;
cursor:pointer;

11. 模拟input[file]上传按钮，以及文件名获取方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<a class="file-con" href="#">
    选择文件
    <input id="orderFile" type="file" />
</a>
<style>
.file-con {
    vertical-align: middle;
    text-align: center;
    line-height: 32px;
    color: #666;
    text-decoration: none;
    display: inline-block;
    width: 80px;
    height: 32px;
    background: #f6f6f6;
    position: relative;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.file-con:hover {
    background: #efefef;
}
.file-con input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    width: 80px;
    height: 32px;
    outline: none;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    /**
     *获取文件名
     */
    function getFileName(path) {
        var pos1 = path.lastIndexOf('/');
        var pos2 = path.lastIndexOf('\\');
        var pos = Math.max(pos1, pos2)
        if (pos < 0)
            return path;
        else
            return path.substring(pos + 1);
    }
</script>

12. js判断电话号码运营商

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var isChinaMobile = /^1(3[4-9]|5[012789]|8[23478]|4[7]|7[8])\d{8}$/; //移动
var isChinaUnion = /^1(3[0-2]|5[56]|8[56]|4[5]|7[6])\d{8}$/; //联通
var isChinaTelcom = /^1(3[3])|(8[019])\d{8}$/; //电信
function check(telphone){
    if(telphone.length !== 11){
      alert("未检测到正确的手机号码");
    }else{
      if(isChinaMobile.test(telphone)){
        alert("移动");
      }else if(isChinaUnion.test(telphone)){
        alert("联通");
      }else if(isChinaTelcom.test(telphone)){
        alert("电信");
      }else{
        alert("未检测到正确的手机号码");
      }
    }
}
check("1324****322");

###13. 纯css小三角形
html:

1
2
3
<ul class="dp_nav">
    <li><a href="">退出</a></li>
</ul>

样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.dp_nav {
    display:none;
    position: absolute;
    min-width: 100px;
    padding: 5px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.2);
    line-height: 1.5em;
    text-align:center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
.dp_nav:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    position: absolute;
    top: -7px;
    left: 9px;
}
.dp_nav:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    position: absolute;
    top: -6px;
    left: 10px;
}