备忘常用js + css + php（不定时更新）
//div内文字超出强行换行
white-space: normal;
word-break: break-all;
overflow: hidden;
//超出显示省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
//内容超出显示省略号（多行）
overflow: hidden;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */
-webkit-line-clamp: 2;
//改变input不可编辑属性的颜色 input[disabled] { color: #000000; opacity: 1; }
//背景色渐变 background: -webkit-gradient(linear, 0 0, 0 100%, from(#9AB5D1), color-stop(0.5, #D8E5F2), to(#BAD2EA)); background: -webkit-linear-gradient(#9AB5D1, #D8E5F2, #BAD2EA); background: -moz-linear-gradient(#9AB5D1, #D8E5F2, #BAD2EA); background: -o-linear-gradient(#9AB5D1, #D8E5F2, #BAD2EA); background: linear-gradient(#9AB5D1 0%, #D8E5F2 80%, #BAD2EA 100%);
background: linear-gradient(to right,#7f06a8,#a02bc2,#7f06a8); //从左往右渐变
//贴边显示（用于img、radio等，助于复选框与文字并齐显示）
vertical-align: text-top;
//文字缩放
transform: scale(0.83);
//内容超出div不换行、横向滑动
//父级div
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
//子级div
position: relative;
display: inline-block;
//取消鼠标在文字上拖拽时文字被选中
<body ondragstart="return false"></body>
*{
padding: 0px;
margin: 0px;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
//隐藏手机端滚动条
::-webkit-scrollbar{
width: 0;
display:none;
}
//css设置table下tbody滚动条
table tbody {
display:block;
height:195px;
overflow-y:scroll;
}
table thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
//盒子模型中用到 让元素之间保留空隙
justify-content: space-between;
//盒子模型中用到 项目将垂直显示，正如一个列一样 内部的元素可以变成一行，效果类似table
flex-direction: column;
display: unset; //initial和inherit的组合
1,如果该属性默认继承属性，该值等同于inherit
2,如果该属性是非继承属性，该值等同于initial
//flex多行
display: flex;
flex-flow:row wrap;
justify-content: space-between;
//隐藏手机端div滚动条
.inner-container::-webkit-scrollbar { display: none; }
overflow:scroll;
overflow-x:scroll;
//居中对齐弹性盒的各项 <div> 元素
display: flex;
align-items:center;
//css倒序
flex-direction: column-reverse；
//四个角加粗
background: linear-gradient(#13a1fc, #13a1fc) left top, linear-gradient(#13a1fc, #13a1fc) left top, linear-gradient(#13a1fc, #13a1fc) right top, linear-gradient(#13a1fc, #13a1fc) right top, linear-gradient(#13a1fc, #13a1fc) left bottom, linear-gradient(#13a1fc, #13a1fc) left bottom, linear-gradient(#13a1fc, #13a1fc) right bottom, linear-gradient(#13a1fc, #13a1fc) right bottom;
background-repeat: no-repeat;
background-size: 3px 20px, 20px 3px;
height: 100%;
margin: -2px;
padding: 3px 1px 1px 0;
border-radius: 3px;
//div在不固定高度的情况下垂直或者水平居中
<div class="block" style="height: 300px;">
<div class="centered">
<h1>haorooms案例题目</h1>
<p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
</div>
</div>
.block {
text-align: center;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
width: 50%;
}
//标点符号把文字带着换行的问题解决方案
line-break: anywhere;
//文字数字英文内容，数字整个换行占不满元素
word-break: break-all;
slideToggle() //展开收起、隐藏显示 slideUp() //收起、隐藏 slideDown() //展开、显示 dbclick() //双击 find() //取后代元素
children() //直接子级（第一个子级） parent() //取父级元素 parents() //取祖级元素 next() //取下一个相邻的同级元素 nextAll() //取该元素后的所有同级元素 prev() //取上一个相邻的同级元素 prevAll() //取该元素前的所有同级元素
siblings() //取该元素的所有同级元素
focus() //input获得焦点
blur() //input失去焦点
mouseover() //鼠标移入（被选元素以及被选元素的子元素）
mouseout() //鼠标移出（被选元素以及被选元素的子元素）
mouseenter() //鼠标移入（被选元素）
mouseover() //鼠标移入（包括子元素）
mouseleave() //鼠标移出（被选元素）
resize() //窗口大小有所调整后执行（可以是div）
clone() //克隆 clone(true)包括克隆事件
setInterval() //每隔一秒自动执行
keydown() //键盘按键按下
keypress() //键盘按键按下
keyup() //键盘按键松开
localStorage.setItem("存储名称", 参数); //存储cookie
localStorage.getItem("存储名称"); //取cookie
//阻止冒泡
event.stopPropagation()
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
$('body').on('touchend',function(){ })
sprintf("%.2f", round($n,2)); //php四舍五入保留两位小数，自动补0
round($num,2)//php四舍五入保留两位小数，不补0
play() //video播放 pause() //video暂停
webkit-playsinline='true' playsinline='true' //移动端禁止video在ios系统中自动全屏播放
//单击双击 var TimeFn = null; $("div").mousedown(function(){ clearTimeout(TimeFn); TimeFn = setTimeout(function(){ alert("11"); },300); }); $("div").dblclick(function(){ clearTimeout(TimeFn); alert("22"); });
//监控checked是否选中
$(document).on('change',".userxx",function(){ if($(".userxx").is(":checked")){ $(".userlist").show(); }else{ $(".userlist").hide(); } });
//两个div同时滑动
$(".contbody2").scroll(function() { $(".thead").scrollTop($(this).scrollTop()); // 纵向滚动条 $(".thead").scrollLeft($(this).scrollLeft()); // 横向滚动条 }); $(".thead").on("mousewheel DOMMouseScroll", function(e) { var scroll_top = $(".contbody2").scrollTop(); var scroll_left = $("contbody2").scrollLeft(); if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) { $(".contbody2").scrollTop(scroll_top - 25); $(".contbody2").scrollLeft(scroll_left - 25) } else { $(".contbody2").scrollTop(scroll_top + 25); $(".contbody2").scrollLeft(scroll_left + 25) } e.preventDefault() });
//a标签里面的点击事件 点击以后 不让a标签执行（阻止冒泡） let isClickP=false; let isClickA=false; $(".like_ico").click(function () { isClickP=true; setTimeout(()=>isClickP=false,0); $(this).attr("src","/static/img/public/point_like.png"); }); $("a").on("click",function(){ isClickA=true; if(isClickP&&isClickA){ event.preventDefault(); } setTimeout(()=>isClickA=false,0); })
//获取地址栏参数
//(方法一) var url = location.search; var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } alert(theRequest['参数']);
//（方法二）
$(function () {
var name = window.location.href;
function getvalue(name) {
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
//如果没有参数默认为‘’
if (r!=null) return unescape(r[2]);
return '';
}
//如果参数是空的给链接附加一个参数
if (getvalue('category') == "") {
window.location.href = '?category=8'
}
// alert(getvalue('category'));
});
//检查某数组内是否有某个元素 var ipt_val = $("#school_name").val(); if ($.inArray(ipt_val,xuexiao)<0) { alert("meiyou"); } else { alert("you"); }
strstr() // 搜索一个字符串在另一个字符串中的第一次出现 stristr() // 搜索一个字符串在另一个字符串中的第一次出现（不区分大小写） strpos() // 函数返回boolean值.FALSE和TRUE不用多说.用 “===”进行判断.strpos在执行速度上都比以上两个函数快,另外strpos有一个参数指定判断的位置,但是默认为空.意思是判断整个字符串.对中文的支持不好 explode() // 判断是否包含a这个字符
