前端小技巧

1、移动端页面滑动流畅代码：

.className {  -webkit-overflow-scrolling: touch; }

 

2、多行文本溢出代码（只针对移动页面和谷歌内核的浏览器）：

.className {
    overflow : hidden;
    display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 2; /*设置规定显示行数*/
    -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/    
}

 

3、移动端页面自适应标签内容

<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">

 

4、关闭input框自动记忆填充问题

 

方案一：对input框添加 autocomplete="off" 属性。（tips:  input:-webkit-autofill {   box-shadow: 0 0 0 1000px white inset; } 这段样式可以去除input的黄色背景）

方案二：在页面里对增加两个input元素（一个type为"text"，另一个type为"password"），并隐藏它们（disn表示：display: none;）

<input type="text" class="disn">
<input type="password" class="disn">

 

 5、点击时阻止冒泡事件

$(".className").onclick(function(e){
　　event.stopPropagation(); //阻止冒泡事件代码（上方function括号内要添加e）
　　console.log("ok");
});

 

6、如果想在ajax外面用到ajax函数内的值，需要先定义一个全局变量，然后把ajax的async的值变成false，即改为同步方式，请求成功之后，把值赋给之前定义的全局变量，之后再ajax外面也可以调用了。

var bannerImgLength;
　　$.ajax({
　　　　url:"..",
　　　　dataType:"json",
　　　　async: false,
　　　　success:function(data){
　　　　　　console.log(data);
　　　　　　bannerImgLength = data.result.length;
　　　　}
　　});
　　console.log(bannerImgLength);  //此时bannerImgLength是有值的。

 

7、移动端点击input搜索框让弹出键盘中的“换行/前往”变成“搜索”

　　代码如下：

<form>
　　<input type="search" placeholder="请输入搜索内容">
</form>

　　方法：将 input 的 type 改为 “search” 并在其外层用 form 标签进行包裹。（但是type为search后输入框会有默认的“×”样式，如果不需要可以加入以下代码）

　　去除search默认样式：

input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; //去掉默认的‘×’ }

 

8、表格去重

　　

　　a、外表格样式

<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">

　　　　

　　b、内表格样式

<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;border-width:0px; border-style:hidden;">