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=装修量房 方法： 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.οnclick= 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);}）转载于:https://www.cnblogs.com/sqyambition/p/9257667.html
相关资源：工作周报-7.31.xlsx