更新：2025-8-26
查找方法定義位置
有很多時候我們經(jīng)常遇到，一個function不知道在那個文件中定義
//控制臺上打印
var f = 函數(shù)名.prototype.constructor;
console.log(f);
點擊上圖紅框位置，就會在控制臺跳到對應(yīng)的文件位置
元素篩選
nextAll() /*后邊全部元素*/
prevAll() /*前邊所有元素*/
children() /*子元素*/
parent() /*父元素（向上找一級）*/
parents() /*父元素（全部父元素）*/
siblings() /*兄弟元素*/
.replace(/<\/s>/g,"") /*正則表達式刪除是指定字符</s> ,\為在轉(zhuǎn)義字符*/
ul>li:nth-child(n) /*n可以是數(shù)字、even(奇)、odd(偶)、公式（2n-1）等*/
input[type="checkbox"] /*標簽[屬性名='屬性值']*/
input[type="radio"]:checked /*復(fù)選框選中*/
input:disabled /*input 禁止，（<input disabled>）*/
option:selected /*下拉列表選中的 option*/
input復(fù)選框是否選中
/* 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屬性設(shè)置元素的垂直對齊方式*/
vertical-align:middle/text-bottom/text-top/bottom……
/*:hover可操縱該元素及其子元素，若想操作不相關(guān)兩種元則要用 :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; /*同上*/
設(shè)置寬高比
width:100%;
height:0;
overflow:hidden;
padding-bottom:31.25%;
或者（可能存在兼容性）
width:100%;
height:31.25vw;
原生css（推薦）
aspect-ratio: 16 / 9;
垂直居中
方式一（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%); /*第一參數(shù)水平，第二個垂直*/
}
方式三（絕對定位，父元素寬高不定，推薦）：
.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;
}
其他（父元素寬高已知）：
- 絕對定位，通過設(shè)置
margin控制子元素在父元素中的位置。 - 絕對定位，通過設(shè)置
left、top控制子元素在父元素中的位置。
文字溢出
單行文本溢出顯示省略號
overflow: hidden; /*把超出的內(nèi)容進行隱藏*/
white-space: nowrap; /*設(shè)置內(nèi)容不換行*/
text-overflow: ellipsis; /*設(shè)置超出內(nèi)容為省略號*/
多行文本溢出顯示省略號
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /*設(shè)置行數(shù)*/
-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 低版本*/
}
符號 <=> 代碼
< //（小于號） <
> //（大于號） >
& //（單與） &
" //（雙引號，英文）"
® //（注冊商標，中國） ?
© //（版權(quán)）?
™ //（注冊商標，國際通用）?
//小空白
  //中空白
  //大空白
空白大小對比
三角制作方法(利用邊框的寬度去實現(xiàn))
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid red;/*箭頭背景顏色，使其顏色與整體顏色一致*/
border-left: 50px solid transparent;
說明：transparent—>透明色
畫三角的時候，省略對邊（畫左三角，不用寫右邊）；
邊寬即為三角寬
外層div不要設(shè)置高（設(shè)置就設(shè)成0，或等邊寬）
寬最好設(shè)成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("字符[串]") //把字符串切割成數(shù)組
$(window).resize(function() { }); //窗口大小改變
$('#content_box').load('/mana/weekly/write_admin.html'); //引入html頁面
<input type="datetime-local"> //input-->data兼容性替換
window.location.reload(); //刷新頁面
blur //失去焦點事件
回車執(zhí)行
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#login").trigger("click");
}
});
控制臺相同內(nèi)容的不同輸出
光看標題有些搞不明白在說什么，但這樣的情況卻很常見
兩個對象內(nèi)容其實是一樣的.png
如上圖，第一個對象是數(shù)組中的某一個值，通過push添加，而第二個對象則是直接定義，內(nèi)容上是一樣的，在控制臺輸出卻不一樣。
對象內(nèi)容展開.png
在方法調(diào)用時，作為變量傳入，第一個對象是無法參與執(zhí)行的。如果想讓它參與執(zhí)行要怎么做呢？如下：
let log = JSON.parse(JSON.stringify(obj)); //重點是這一行
console.log(log); //這樣兩個就一樣咯
獲取url參數(shù)
方法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;
}
// 方法調(diào)用
var Request = new Object();
Request = GetRequest();
var urlCan = Request['參數(shù)名'];
方法2：
function getUrlParam(key) {
// 獲取參數(shù)
var url = window.location.search;
// 正則篩選地址欄
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
// 匹配目標參數(shù)
var result = url.substr(1).match(reg);
//返回參數(shù)值
return result ? decodeURIComponent(result[2]) : null;
}
//調(diào)用
getUrlParam("參數(shù)名");
雙層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%;
/* 動畫調(diào)用*/
animation: masked-animation 4s infinite linear;
}
/*動畫*/
@keyframes masked-animation {
0% {
/*background-position 屬性設(shè)置背景圖像的起始位置。*/
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)就可以實現(xiàn)給多個標簽綁定相同事件，達到可以操作當前點擊的標簽;如果不使用jQuery，原生js需要使用this.getArrribute('ga')可以獲得當前點擊的標簽的ga屬性的值
JQ動畫
$("div").animate({left:'250px'});
input日期修改
::-webkit-datetime-edit // 控制編輯區(qū)域的
::-webkit-datetime-edit-fields-wrapper // 控制年月日這個區(qū)域的
::-webkit-datetime-edit-text // 這是控制年月日之間的斜線或短橫線的
::-webkit-datetime-edit-month-field // 控制月份
::-webkit-datetime-edit-day-field // 控制具體日子
::-webkit-datetime-edit-year-field // 控制年文字, 如2017四個字母占據(jù)的那片地方
::-webkit-inner-spin-button // 這是控制上下小箭頭的
::-webkit-calendar-picker-indicator // 這是控制下拉小箭頭的
::-webkit-clear-button //這是控制清除按鈕的
兼容性寫法
-webkit- /* Safari 和 Chrome */
-moz- /* Firefox */
-o- /* Opera */
ps：前端小技巧持續(xù)更新中，有興趣的小伙伴可以點下關(guān)注呦，我們一起學(xué)前端~
