更新：2023-12-26
查找方法定义位置
有很多时候我们经常遇到，一个function不知道在那个文件中定义
//控制台上打印
var f = 函数名.prototype.constructor;
console.log(f);
点击上图红框位置，就会在控制台跳到对应的文件位置
元素筛选
nextAll() /*后边全部元素*/
prevAll() /*前边所有元素*/
children() /*子元素*/
parent() /*父元素（向上找一级）*/
parents() /*父元素（全部父元素）*/
siblings() /*兄弟元素*/
.replace(/<\/s>/g,"") /*正则表达式删除是指定字符</s> ,\为在转义字符*/
ul>li:nth-child(n) /*n可以是数字、even(奇)、odd(偶)、公式（2n-1）等*/
input[type="checkbox"] /*标签[属性名='属性值']*/
input[type="radio"]:checked /*复选框选中*/
input:disabled /*input 禁止，（<input disabled>）*/
option:selected /*下拉列表选中的 option*/
input复选框是否选中
/* JQ */
$("input").is(":checked") /*返回 true/false*/
$("input").prop('checked') /*返回 true/false*/
$("input").attr('checked') /*返回 xx/undefined 属性判断，需添加checked 属性*/
/* 原生*/
var myInput = document.getElementById('myInput')
myInput.checked /*返回 true/false*/
css样式
border: 1px dashed #F00 /*边框为虚线*/
letter-spacing /*字间距*/
border-spacing: 0; /*去掉表格边距*/
resize:none ; /*<textarea>右下角隐藏*/
outline:none; /*输入框点击时边框隐藏*/
background: url() no-repeat /*【左右】px 【上下】px;*/
text-decoration:none; /*去掉下划线*/
cursor: pointer; /*鼠标变成手*/
calc(100% - 500px) /*css 宽高计算*/
/*css属性设置元素的垂直对齐方式*/
vertical-align:middle/text-bottom/text-top/bottom……
/*:hover可操纵该元素及其子元素，若想操作不相关两种元则要用 :hover+*/
:hover(:hover)
/*背景图片中心点与容器中心点一致*/
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
/*弹性布局*/
flex-wrap: wrap; /*自动换行*/
flex:1; /*自动填满剩余空间*/
flex:0 0 auto; /*有剩余空间不放大，空间不足时不缩小，长度等于灵活项目的长度*/
flex:none; /*同上*/
设置宽高比
width:100%;
height:0;
overflow:hidden;
padding-bottom:31.25%;
或者（可能存在兼容性）
width:100%;
height:31.25vw;
垂直居中
方式一（flex布局，父元素宽高不定，推荐）：
.father{ /*写在父元素上，子元素会居中*/
display: -webkit-flex;
display: flex; /*定位（写在父元素中）*/
justify-content:center; /*水平居中*/
align-items:center; /*垂直居中 */
}
// 因为flex 布局默认是水平方向，因此，换一种思路，得到另一种方法
.father{
flex-direction : column; /* 修改Y 为主轴方向 */
align-items:center;
}
方式二（绝对定位，父元素宽高不定，推荐）：
.father{
position: relative;
}
.child{
position: absolute;
left:50%; /*控制水平位置*/
top:50%; /*控制垂直位置*/
transform: translate(-50%,-50%); /*第一参数水平，第二个垂直*/
}
方式三（绝对定位，父元素宽高不定，推荐）：
.father{
position: relative;
}
.child{
position:absolute;
/* 垂直 */
top: 0;
bottom: 0;
/* 水平 */
left:0;
right: 0;
margin: auto;
}
方式四（table-cell，父元素宽高不定）：
.father{ /*写在父元素上，子元素会居中*/
display: table-cell;
vertical-align: middle;
}
其他（父元素宽高已知）：
- 绝对定位，通过设置
margin控制子元素在父元素中的位置。 - 绝对定位，通过设置
left、top控制子元素在父元素中的位置。
文字溢出
单行文本溢出显示省略号
overflow: hidden; /*把超出的内容进行隐藏*/
white-space: nowrap; /*设置内容不换行*/
text-overflow: ellipsis; /*设置超出内容为省略号*/
多行文本溢出显示省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /*设置行数*/
-webkit-box-orient: vertical;
/*增强版（如果上边的不起作用，可以尝试下边这个）*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
文字超出换行
/*常用，写一个就可以*/
word-break:break-all;
word-wrap:break-word;
/*pre 标签 超出换行*/
white-space: pre-wrap; /*css-3*/
white-space: -moz-pre-wrap; /*Mozilla,since1999*/
white-space: -pre-wrap; /*Opera4-6*/
white-space: -o-pre-wrap; /*Opera7*/
word-wrap: break-word; /*InternetExplorer5.5+*/
子元素均分父元素
方式一（弹性布局，推荐）：
.father{
display: flex;
display: -webkit-flex;
}
.child{
flex: 1;
}
方式二：
.father{
display: table;
table-layout: fixed; /*Optional*/
}
.child{
display: table-cell;
}
方式三(推荐):
适用于ul>li
.father{
flex-wrap: wrap;
display: flex;
justify-content: space-evenly;
}
ul 宽度超出不换行
ul 宽度由li 决定，并且不会换行（其它属性自定）
ul{
white-space: nowrap;
}
li{
display: inline-block; /*用 inline-block 取代浮动属性*/
*display:linlne; /*兼容ie 低版本*/
zoom: 1; /*兼容ie 低版本*/
}
符号 <=> 代码
< //（小于号） <
> //（大于号） >
& //（单与） &
" //（双引号，英文）"
® //（注册商标，中国） ®
© //（版权）©
™ //（注册商标，国际通用）™
//小空白
  //中空白
  //大空白
空白大小对比
三角制作方法(利用边框的宽度去实现)
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid red;/*箭头背景颜色，使其颜色与整体颜色一致*/
border-left: 50px solid transparent;
说明：transparent—>透明色
画三角的时候，省略对边（画左三角，不用写右边）；
边宽即为三角宽
外层div不要设置高（设置就设成0，或等边宽）
宽最好设成0
checkbox选中样式修改
input[type="checkbox"]{
width:15px;
height:15px;
border-radius: 5px;
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 18px;
position: relative;
}
input[type="checkbox"]::before{
content: "";
position: absolute;
top: -2px;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #ddd;
}
input[type="checkbox"]:checked::before{
content: "\2713";
background-color: #3498DB;
position: absolute;
top: -2px;
left: 0;width:100%;
border: 1px solid #3498DB;
color:#fff;
font-size: 14px;
font-weight: bold;
}
其它
accept="image/*" //input只能上传图片
accept="image/gif, image/jpeg" //限制图片类型
placeholder="输入你想说的话" //提示文字
字符串.split("字符[串]") //把字符串切割成数组
$(window).resize(function() { }); //窗口大小改变
$('#content_box').load('/mana/weekly/write_admin.html'); //引入html页面
<input type="datetime-local"> //input-->data兼容性替换
window.location.reload(); //刷新页面
blur //失去焦点事件
回车执行
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#login").trigger("click");
}
});
控制台相同内容的不同输出
光看标题有些搞不明白在说什么，但这样的情况却很常见
两个对象内容其实是一样的.png
如上图，第一个对象是数组中的某一个值，通过push添加，而第二个对象则是直接定义，内容上是一样的，在控制台输出却不一样。
对象内容展开.png
在方法调用时，作为变量传入，第一个对象是无法参与执行的。如果想让它参与执行要怎么做呢？如下：
let log = JSON.parse(JSON.stringify(obj)); //重点是这一行
console.log(log); //这样两个就一样咯
获取url参数
方法1：
//方法封装
function GetRequest() {
//获取url中"?"符后的字串
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]]=decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
// 方法调用
var Request = new Object();
Request = GetRequest();
var urlCan = Request['参数名'];
方法2：
function getUrlParam(key) {
// 获取参数
var url = window.location.search;
// 正则筛选地址栏
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
// 匹配目标参数
var result = url.substr(1).match(reg);
//返回参数值
return result ? decodeURIComponent(result[2]) : null;
}
//调用
getUrlParam("参数名");
双层ul展开
function liLa_title(e){
if($(e).find("ul").css("display")=="none"){
$(e).find("ul").slideUp("slow");
$(e).find("ul").slideDown("slow");
}else{
$(e).find("ul").slideUp("slow");
$(e).find("ul").find("ul").slideUp("slow");
}
}
文字颜色渐变
p{
/*渐变背景*/
background-image: -webkit-linear-gradient(
left,
#3498db,
#f47920 10%,
#d71345 20%,
#f7acbc 30%,
#ffd400 40%,
#3498db 50%,
#f47920 60%,
#d71345 70%,
#f7acbc 80%,
#ffd400 90%,
#3498db
);
/*文字填充色为透明*/
color: transparent;
-webkit-text-fill-color: transparent;
/*背景剪裁为文字，只将文字显示为背景*/
-webkit-background-clip: text;
/*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
background-size: 200% 100%;
/* 动画调用*/
animation: masked-animation 4s infinite linear;
}
/*动画*/
@keyframes masked-animation {
0% {
/*background-position 属性设置背景图像的起始位置。*/
background-position: 0 0;
}
100% {
background-position: -100% 0;
}
}
点击定位（滚动条滚动）
function scrollToLocation() {
var mainContainer = $('#thisMainPanel'),
//滚动到<div id="thisMainPanel">中类名为son-panel的最后一个div处
scrollToContainer = mainContainer.find('.son-panel:last');
//滚动到<div id="thisMainPanel">中类名为son-panel的第六个处
scrollToContainer = mainContainer.find('.son-panel:eq(5)');
//非动画效果
mainContainer.scrollTop(
scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
);
//动画效果
mainContainer.animate({
scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
}, 2000);//2秒滑动到指定位置
}
JQ事件绑定
// 拿到所有的a标签，全部绑定事件，并且自动解决浏览器兼容问题
$("a").on("click", removerItem);
// 解除绑定事件
$("a").off()
// 拿到按钮标签
$("#id").on("click", addItem)
//例
$("#cut_right").on("click",function (){})
注意:jqery绑定事件的时候 $(this)代表当前的标签，通过$(this)就可以实现给多个标签绑定相同事件，达到可以操作当前点击的标签;如果不使用jQuery，原生js需要使用this.getArrribute('ga')可以获得当前点击的标签的ga属性的值
JQ动画
$("div").animate({left:'250px'});
input日期修改
::-webkit-datetime-edit // 控制编辑区域的
::-webkit-datetime-edit-fields-wrapper // 控制年月日这个区域的
::-webkit-datetime-edit-text // 这是控制年月日之间的斜线或短横线的
::-webkit-datetime-edit-month-field // 控制月份
::-webkit-datetime-edit-day-field // 控制具体日子
::-webkit-datetime-edit-year-field // 控制年文字, 如2017四个字母占据的那片地方
::-webkit-inner-spin-button // 这是控制上下小箭头的
::-webkit-calendar-picker-indicator // 这是控制下拉小箭头的
::-webkit-clear-button //这是控制清除按钮的
兼容性写法
-webkit- /* Safari 和 Chrome */
-moz- /* Firefox */
-o- /* Opera */
ps：前端小技巧持续更新中，有兴趣的小伙伴可以点下关注呦，我们一起学前端~
