日常心得——js&jq

最新推荐文章于 2023-07-01 19:06:58 发布

where_slr

最新推荐文章于 2023-07-01 19:06:58 发布

阅读量370

点赞数

分类专栏： Javascript 学习笔记日常心得注意点文章标签： js 笔记

本文链接：https://blog.csdn.net/where_slr/article/details/89555697

版权

学习笔记同时被 3 个专栏收录

44 篇文章 1 订阅

订阅专栏

Javascript

35 篇文章 0 订阅

订阅专栏

日常心得注意点

15 篇文章 0 订阅

订阅专栏

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 ***;
})

where_slr

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
日常心得——js&jq

jq中使用点击事件嵌套重复，多次触发可以在触发前先解绑点击事件；$('div').off('click').on('click',function(){})swiper竖直循环var mySwiper1 = new Swiper('.div', { direction: 'vertical', autoplay: { delay:...
复制链接

扫一扫