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);
}
});
后台传来的时间字符串形式,转成时间戳,自增
var timestr = '2019-11-06 09:40:40'
timestr = timestr.replace(/-/g, '/')//2019/11/06 09:40:40
var data = new Date(timestr)//2019-11-06T01:40:40.000Z
var i = 0
setInterval(() => {
date.setSeconds(date.getSeconds() + 1)
setDate(date)
}, 1000)
function setDate(data) {
const _date = data
const year = _date.getFullYear()
let month = _date.getMonth() + 1
let date = _date.getDate()
let hour = _date.getHours()
let minutes = _date.getMinutes()
let seconds = _date.getSeconds()
if (month < 10) {
month = '0' + month
}
if (date < 10) {
date = '0' + date
}
if (hour < 10) {
hour = '0' + hour
}
if (minutes < 10) {
minutes = '0' + minutes
}
if (seconds < 10) {
seconds = '0' + seconds
}
console.log(`${year}-${month}-${date} ${hour}:${minutes}:${seconds}`)
}
JQ 的every和some
$.fn.some = function(callback) {
var result = false;
var self = this;
this.each(function(index, element) {
if (callback(index, element, self)) {
result = true;
return false;
}
});
return result;
};
arr.some(function(index,item,arr){
return ***;
})
$.fn.every = function(callback) {
var result = true;
var self = this;
this.each(function(index, element) {
if (!callback(index, element, self)) {
result = false;
return false;
}
});
return result;
};
arr.every(function(index,item,arr){
return ***;
})