1.设置多行文本超出显示省略号
<div class="caption"> <p>显示超过两行就显示省略号，其余隐藏，隐藏不了的情况下给这个模块添加一个高度和行高
，高度是行高的两倍</p> </div>
css:
.caption {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 15px;//
height:30px;///* 2行隐藏就两倍，三行隐藏就三倍*/
}
单行文本超出隐藏
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
2.图片上下跳动（热门）
<span class="stylist-hot"></span>
css:
.stylist-hot{
width:24px;
height:20px;
background: url("/stylist-hot.png") no-repeat;
background-size: 100% 100%;
display: inline-block;
position: absolute;
top: -6px;
right: -8px;
-webkit-animation: bounce-up 1s linear infinite;
animation: bounce-up 1s linear infinite;
}
@-webkit-keyframes bounce-up {
25% {transform: translateY(-3px);}
50%, 100% {transform: translateY(0);}
75% {transform: translateY(3px);}
}
3.终极内墙法
/*用伪元素改造的内墙法----终极版内墙法*/
/*在.clearfloat 标签里面的而最后 创建一个标签（块级）*/
.clearfloat(或者为.clearfixed,类名不同功能不同):after{
display: block;
content: "";
clear: both;
visibility: hidden;
height: 0px;
}
.clearfloat{
zoom:1;
}
4.阻止点击事件的传递
$(".public-nav").click(function(event) {
$(".public-nav").hide();
event.stopPropagation();
}）
点击input显示div，点击bodydiv隐藏
$("input").bind("click", function(e) {
$(".div").show();
e.stopPropagation();
$("body").click(function(){
$(".div").hide();
})
})
5.当锚点遇上fixed定位出现的bug
在父元素上面加{
padding-top:1rem;
margin-top:-1rem;
}即可
6.if判断是否有某个类
if($(this).hasClass('activity-1-active'))
7.cookie记录浏览器时间周期
var cookietime = new Date();
cookietime.setTime(date.getTime() + ( 7*24*60*60*1000));//coockie时间为7天
$.cookie("example", "foo",{expires:cookietime});
// $.cookie("example", "foo",{ expires: 7 });
if($.cookie(".DottextCookie")!=null){
$(".address-popup").show();
}else{
$(".address-popup").hide();
}
8.url中文转码和解码
例：原链接：https://html/answer-classify.html?cla=装修量房
转码后：http://html/answer-classify.html?cla=%E8%A3%85%E4%BF%AE%E9%87%8F%E6%88%BF
方法：
var strUrl = window.location.href;
var arrUrl = strUrl.split("?cla=");
var strPage = arrUrl[arrUrl.length-1];
var classifySpan=decodeURIComponent(strPage);
console.log(arrUrl,"strPage:",strPage,classifySpan)
////搜索关键词变色
var regExp = new RegExp(classifySpan, "g");//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；
$(".answer-classify-content ul li>p:first-child a").each(function()//遍历p类里的文字；
{
var html = $(this).html();
var newHtml = html.replace(regExp, "<span style='color:#FF9600' >"+classifySpan+"</span>");//将找到的关键字替换，加上highlight属性；
$(this).html(newHtml);//更新文章；
});
var cencodeStr=encodeURIComponent("交房验收");
console.log("编码后："+cencodeStr+"\n"+"解码后："+decodeURIComponent(cencodeStr));
9.上传图片的原理
html:
<li class="answer-imgs">
<i class="answer-upload">
<input type="file" id="answer-file" accept="image/png, image/jpeg, image/gif, image/jpg" >
</i>
<b>(最多可传三张)</b>
</li>
js:
//为外面的盒子绑定一个点击事件
$(".answer-upload").click(function(){
/*
1、先获取input标签
2、给input标签绑定change事件
3、把图片回显
*/
// 1、先回去input标签
var $input = $("#answer-file");
// 2、给input标签绑定change事件
$input.on("change" , function(){
//补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
//获取选择图片的个数
var files = this.files;
var length = files.length;
//3、回显
$.each(files,function(key,value){
//每次都只会遍历一个图片数据
var div = document.createElement("div");
img = document.createElement("img");
iBiao = document.createElement("i");
div.className = "upload-img";
var fr = new FileReader();
fr.onload = function(){
var mochu=document.querySelector(".answer-imgs");
img.src=this.result;
mochu.appendChild(div);
div.appendChild(img);
div.appendChild(iBiao);
iBiao.onclick= function(){
$(this).parent().hide();
}
}
fr.readAsDataURL(value);
})
})
//4、我们把当前input标签的id属性remove
$input.removeAttr("id");
//我们做个标记，再class中再添加一个类名就叫test
var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
$(this).append($(newInput));
})
10.JQuery中的$.cookie()使用方法
<span style="color:#000000;">jQuery.cookie.js下载地址：<a href="http://plugins.jquery.com/cookie/1.4.0/" rel="nofollow" target="_blank">点击打开链接</a></span>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
新增cookie：
$.cookie('cookieName', 'cookieValue');
注：如果没有设置cookie的有效期，则cookie默认在浏览器关闭前都有效，故被称为"会话cookie"。
// 创建一个cookie并设置有效时间为7天:
$.cookie('cookieName', 'cookieValue', { expires: 7 });
// 创建一个cookie并设置cookie的有效路径：
$.cookie('cookieName', 'cookieValue', { expires: 7, path: '/' });
读取cookie：
$.cookie('cookieName'); // 若cookie存在则返回'cookieValue'；若cookie不存在则返回null
删除cookie：把cookie的值设为null即可
$.cookie('the_cookie', null);
11.jq模糊搜索input
//实时筛选，不用点击按钮
$(".install-input").focus(function(){
setInterval(function(){
if ($(".install-input").val() != '') {
$(".install-downloap").show();
}
$(".install-downloap a:contains(" + $(".install-input").val().trim() + ")").show();
$(".install-downloap a:not(:contains(" + $(".install-input").val().trim() + "))").hide();
},100);}）
