jq中使用點擊事件嵌套重複，多次觸發
可以在觸發前先解綁點擊事件；
$('div').off('click').on('click',function(){
})
swiper豎直循環
var mySwiper1 = new Swiper('.div', {
direction: 'vertical',
autoplay: {
delay: 1000, //自動切換的時間間隔
}, //自動滾動
loop: true, //形成環路
slidesPerView: 'auto', //設置slider容器能夠同時顯示的slides數量, 'auto'則自動根據slides的寬度來設定數量。
loopedSlides: 3, //所要用到的loop個數（一般設置爲本來slide的個數）
freeMode: true, //普通滑動格式，默認滑動一個單元
observer: true, //修改swiper自己或子元素時，自動初始化swiper
observeParents: true, //修改swiper的父元素時，自動初始化swiper
})
mySwiper1.el.onmouseover = function () { //鼠標放上暫停輪播
mySwiper1.autoplay.stop();
}
mySwiper1.el.onmouseleave = function () {
mySwiper1.autoplay.start();
}
jq獲取同一類名的但處於不同父元素下的當前元素的索引值
<div class="wrap">
<div><label class="text">111111</label></div>
</div>
<div class="wrap">
<div><label class="text">22222</label>
<br />
<label class="text">33333</label></div>
</div>
<script>
$(document).ready(function(){
var text = $('.text');
text.on('click',function(){
let _index = text.index(this);
console.log(_index);//輸出的就是index索引
console.log($('.text').index(this));//輸出的就是index索引
})
})
</script>
函數參數內使用解構，JS方法中給添加默認參數對象，防止忘記傳遞參數或者類型錯誤
函數參數內使用解構
var sayHello2 = function({ name = "Anony", surname = "Moose" } = {}) {
console.log(`Hello ${name} ${surname}! How are you?`);
};
sayHello2()
// -> Hello Anony Moose! How are you?
sayHello2({ name: "Bull" })
// -> Hello Bull Moose! How are you?
對於普通的解構，如果輸入的參數與函數指定的對象參數不符，所有不符的參數都將爲undefined，
var sayHelloTimes = function({ name, surname }, times) {
console.log(`Hello ${name} ${surname}! I've seen you ${times} times before.`);
}
sayHelloTimes({ name: "Pam" }, 5678)
// -> Hello Pam undefined! I've seen you 5678 times before.
sayHelloTimes(5678)
// -> Hello undefined undefined! I've seen you undefined times before.
sayHelloTimes()
// -> Uncaught TypeError: Cannot match against 'undefined' or 'null'...
因此，可以給解構增加默認參數基本上解決了上面的所有問題：
var sayHelloTimes2 = function({ name = "Anony", surname = "Moose" } = {}, times) {
console.log(`Hello ${name} ${surname}! I've seen you ${times} times before.`);
};
sayHelloTimes2({ name: "Pam" }, 5678)
// -> Hello Pam Moose! I've seen you 5678 times before.
sayHelloTimes2(5678)
// -> Hello Anony Moose! I've seen you undefined times before.
sayHelloTimes2()
// -> Hello Anony Moose! I've seen you undefined times before.
對於= {}，它掩蓋了_object_未傳遞時的情況，但對於個別屬性默認值的情形下會拋出異常：
var sayHelloTimes2a = function({ name = "Anony", surname = "Moose" }, times) {
console.log(`Hello ${name} ${surname}! I've seen you ${times} times before.`);
};
sayHelloTimes2a({ name: "Pam" }, 5678)
// -> Hello Pam Moose! I've seen you 5678 times before.
sayHelloTimes2a(5678)
// -> Hello Anony Moose! I've seen you undefined times before.
sayHelloTimes2a()
// -> Uncaught TypeError: Cannot match against 'undefined' or 'null'.
圖片上傳
<!DOCTYPE html>
<html>
<head>
<title>html5上傳後立即顯示</title>
</head>
<body>
請選取一個圖像文件: <input type="file" id="file" class="file" name="file" />
<div id="result" class="result"></div>
<script type="text/javascript">
function uploadImg(uploadEle,showEle) {
var uploadEle = document.querySelector(uploadEle);//上傳按鈕
var showEle = document.querySelector(showEle);//顯示區域
uploadEle.addEventListener('change', function () {
var imgFile = uploadEle.files[0];
if (imgFile) {
var reader = new FileReader();
reader.onload = function (event) {
var txt = event.target.result;
var img = document.createElement("img");
img.src = txt; //將圖片base64字符串賦值給img的src
showEle.appendChild(img);
};
}
reader.readAsDataURL(imgFile);
})
}
uploadImg('.file','.result');
</script>
</body>
</html>
解決鍵盤彈出後擋表單的問題
window.addEventListener('resize', function () {
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA' ||
document.activeElement.getAttribute('contenteditable') == 'true'
) {
window.setTimeout(function () {
if ('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
// @ts-ignore
document.activeElement.scrollIntoViewIfNeeded();
}
}, 0);
}
});